/* =========================================================================
   halloween-songs.html — page-specific styles
   Load AFTER css/site.css. This page has its own orange/purple theme, so the
   first block re-applies its colors on top of the shared defaults.
   ========================================================================= */

/* Theme colors, including the spooky mood colors used by the header's color rail */
:root{
  --bg:#0A080D;
  --bg-panel:#120D1A;
  --bg-panel-2:#191224;
  --gold:#FF6600;
  --gold-soft:#FF8533;
  --rust:#7B2CBF;
  --cream:#F0E6D2;
  --muted:#A395B0;
  --line:rgba(255,102,0,0.15);
  --line-strong:rgba(255,102,0,0.35);
  --radius:6px;

  --mood-0-a:255,102,0;
  --mood-0-b:123,44,191;
  --mood-1-a:57,255,20;
  --mood-1-b:255,0,0;
  --mood-2-a:255,133,51;
  --mood-2-b:123,44,191;
  --mood-3-a:160,32,240;
  --mood-3-b:240,230,210;
  --mood-4-a:57,255,20;
  --mood-4-b:255,102,0;
}

body{overflow-x:hidden;}
::selection{color:#0A080D;}
.grain{opacity:.05;}

/* Spooky aura */
.aura{
  --m1:255,102,0;
  --m2:123,44,191;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 15%,
      rgba(var(--m1),calc(.16 + var(--bass)*.25)),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 50% at 50% 100%,
      rgba(var(--m2),.15),
      transparent 70%
    );
}

/* Buttons & cards: dark text and orange/green glow instead of the site's gold */
.btn-solid{color:#0A080D;}
.btn-solid:hover{box-shadow:0 0 20px rgba(255,102,0,.4);}
.card button:hover{color:#0A080D;}
.card-story:hover{
  border-color:rgba(255,102,0,.5);
  box-shadow:0 20px 50px -25px rgba(255,102,0,.35);
}
.card-cta{
  color:#0A080D;
  background:linear-gradient(90deg,var(--gold),#39FF14,var(--rust),var(--gold)) 0 0/300% 100%;
  box-shadow:0 0 16px rgba(255,102,0,.35);
}
.card-cta:hover{box-shadow:0 0 28px rgba(57,255,20,.55);}
.card-cta::before{content:none;}  /* site.css adds a pulse ring; this page never had one */

/* site.css turns every .fa-solid/.fas into a 1em mask icon, which only works for
   the four icons it defines. Reset the icons this page draws with Font Awesome. */
.fa-ghost,.fa-play,.fa-pause,.fa-rotate-left,.fa-rotate-right,.fa-volume-high{
  width:auto;
  height:auto;
  background-color:transparent;
  -webkit-mask-image:none;
  mask-image:none;
  vertical-align:baseline;
  flex:initial;
}

/* HERO */
.wedding-hero{
  position:relative;
  padding:100px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(123,44,191,.25) 0%,transparent 45%),
    radial-gradient(circle at 85% 75%,rgba(255,102,0,.2) 0%,transparent 50%),
    var(--bg);
}
.wedding-hero-container{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:60px;
  align-items:center;
}
.wedding-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:300 13px/1.4 var(--display);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-bottom:22px;
  padding:6px 14px;
  border-radius:99px;
  background:rgba(255,102,0,.08);
  border:1px solid rgba(255,102,0,.25);
}
.wedding-hero h1{
  font-size:clamp(40px,4.8vw,62px);
  line-height:1.08;
  letter-spacing:-1px;
  margin-bottom:22px;
}
.wedding-hero h1 span{
  display:block;
  font-style:italic;
  font-weight:300;
  color:var(--gold-soft);
}
.wedding-hero-lead{
  font-size:17.5px;
  color:var(--muted);
  line-height:1.65;
  margin-bottom:34px;
  max-width:580px;
}
.wedding-hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
}
.wedding-hero-card{
  position:relative;
  background:linear-gradient(145deg,rgba(25,18,36,.9),rgba(18,13,26,.95));
  border:1px solid var(--line-strong);
  border-radius:12px;
  padding:36px 32px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
}
.wedding-hero-card::before{
  content:'“';
  position:absolute;
  top:-15px;
  left:24px;
  font-family:var(--display);
  font-size:80px;
  color:var(--gold);
  opacity:.25;
  line-height:1;
  pointer-events:none;
}
.wedding-hero-quote{
  font:italic 300 17px/1.65 var(--display);
  color:var(--cream);
  margin-bottom:24px;
}
.wedding-hero-meta{
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  padding-top:20px;
}
.wedding-hero-meta-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--rust));
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:600;
  color:#0A080D;
  font-size:18px;
}
.wedding-hero-meta-text strong{
  display:block;
  font-size:14.5px;
  color:var(--cream);
}
.wedding-hero-meta-text span{
  font-size:12.5px;
  color:var(--muted);
}
@media (max-width:980px){
  .wedding-hero-container{
      grid-template-columns:1fr;
      gap:40px;
    }
}

/* SPOOKY AUDIO VAULT PLAYER */
.custom-audio-vault-wrap{
  position:relative;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--m1,255,102,0),.18),
      transparent 70%
    ),
    var(--bg-panel-2);
  border:1px solid var(--line-strong);
  border-radius:16px;
  padding:40px;
  box-shadow:0 25px 60px -20px rgba(0,0,0,.8);
  overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.custom-audio-vault-wrap:hover{
  border-color:rgba(var(--m1,255,102,0),.5);
  box-shadow:0 30px 70px -15px rgba(var(--m1,255,102,0),.3);
}
.vault-player-content{
  position:relative;
  z-index:1;
}
.vault-player-header{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:24px;
}
.vault-track-title{
  font-family:var(--display);
  font-size:28px;
  color:var(--cream);
  margin-bottom:6px;
}
.vault-track-subtitle{
  font-size:14.5px;
  color:var(--muted);
}
.vault-player-controls{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:600px;
  margin:0 auto;
}
.vault-progress-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.vault-time{
  font:12px ui-monospace,monospace;
  color:var(--muted);
  min-width:40px;
  text-align:center;
}
.vault-seek-bar{
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(240,230,210,.15);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
.vault-seek-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgb(var(--m1,255,102,0));
  box-shadow:0 0 10px rgba(var(--m1,255,102,0),.9);
  transition:transform .2s ease;
}
.vault-seek-bar::-webkit-slider-thumb:hover{
  transform:scale(1.3);
}
.vault-main-controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:6px;
}
.vault-btn-play{
  width:54px;
  height:54px;
  border-radius:50%;
  border:none;
  background:linear-gradient(
    135deg,
    rgb(var(--m1,255,102,0)),
    rgb(var(--m2,123,44,191))
  );
  color:#0A080D;
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 0 20px rgba(var(--m1,255,102,0),.6);
  transition:transform .2s ease,box-shadow .2s ease;
}
.vault-btn-play:hover{
  transform:scale(1.08);
  box-shadow:0 0 30px rgba(var(--m1,255,102,0),.9);
}
.vault-btn-secondary{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--cream);
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:14px;
  transition:all .2s ease;
}
.vault-btn-secondary:hover{
  border-color:rgb(var(--m1,255,102,0));
  color:rgb(var(--m1,255,102,0));
}
.vault-volume-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  font-size:14px;
  color:var(--muted);
}
.vault-volume-bar{
  width:100px;
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:rgba(240,230,210,.15);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
.vault-volume-bar::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cream);
}

@media (max-width:768px){
  .wrap{
    padding:0 22px;
  }

  .custom-audio-vault-wrap{
    padding:28px 20px;
  }

  .vault-track-title{
    font-size:24px;
  }

  .wedding-hero{
    padding:75px 0 85px;
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
}