/* ============================================================
   HOMEPAGE HERO + CURTAIN  (loaded on / only)
   ============================================================ */
.hero{position:relative;height:100vh;min-height:640px;max-height:1000px;overflow:hidden}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(900px 560px at 50% -8%,rgba(238,201,125,.22),rgba(238,201,125,0) 60%),
  radial-gradient(500px 700px at 18% 110%,rgba(110,15,30,.35),rgba(110,15,30,0) 65%),
  radial-gradient(500px 700px at 82% 110%,rgba(110,15,30,.35),rgba(110,15,30,0) 65%)}
.hero-dust{position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(242,212,138,.5) 1px,transparent 1.6px);
  background-size:190px 160px;opacity:.35}

.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:70px 24px 0;opacity:0;transform:scale(.96);
  transition:opacity 1.2s ease .9s,transform 1.4s var(--ease) .9s}
.open .stage{opacity:1;transform:scale(1)}
.stage .kicker{font-family:var(--font-label);font-weight:600;font-size:13px;
  letter-spacing:.34em;text-indent:.34em;color:var(--champagne)}
.stage h1{font-family:var(--font-display);font-weight:800;font-size:var(--step-6);
  line-height:.94;letter-spacing:.02em;margin:22px 0 0}
.stage .sub{font-size:clamp(17px,2vw,21px);line-height:1.55;margin:22px 0 0;max-width:560px}
.stage .cta{margin-top:var(--sp-4)}
.stage .open-note{font-style:italic;font-size:16px;margin-top:14px;opacity:.9}
.stage .facts{display:flex;gap:36px;margin-top:44px;font-family:var(--font-label);
  font-size:var(--step--1);letter-spacing:.06em;flex-wrap:wrap;justify-content:center}
.stage .facts span{color:var(--champagne);margin-right:10px}

/* --- curtain --- */
.curtain{position:absolute;inset:0;z-index:8;overflow:hidden;cursor:pointer}
.open .curtain{cursor:default;pointer-events:none}
.panel{position:absolute;top:0;bottom:0;width:54%;
  background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 18%,rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg,var(--velvet-dk) 0 22px,var(--velvet-md) 40px 62px,var(--velvet-lo) 84px 108px);
  transition:transform 1.9s cubic-bezier(.8,0,.16,1)}
.panel.left{left:0;transform-origin:left center;
  box-shadow:inset 0 -60px 90px rgba(0,0,0,.55),10px 0 40px rgba(0,0,0,.6)}
.panel.right{right:0;transform-origin:right center;
  box-shadow:inset 0 -60px 90px rgba(0,0,0,.55),-10px 0 40px rgba(0,0,0,.6)}
.open .panel.left{transform:translateX(-97%) scaleX(.72)}
.open .panel.right{transform:translateX(97%) scaleX(.72)}

.sparks{position:absolute;inset:0;transition:opacity 1s ease}
.open .sparks{opacity:0}
.spark{position:absolute;border-radius:50%;background:#F2D48A;opacity:0}

.valance{position:absolute;top:0;left:0;right:0;height:64px;z-index:5;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0)),
    repeating-linear-gradient(90deg,var(--velvet-dk) 0 22px,var(--velvet-md) 40px 62px,var(--velvet-lo) 84px 108px);
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.valance::after{content:"";position:absolute;top:100%;left:0;right:0;height:40px;
  background-image:radial-gradient(circle at 50% 0,#4A0913 0 39px,transparent 40px);
  background-size:86px 40px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}

.click-prompt{position:absolute;left:0;right:0;bottom:52px;text-align:center;z-index:4;
  animation:pulse 2.4s ease-in-out infinite;transition:opacity .5s ease}
.open .click-prompt{opacity:0;animation:none;visibility:hidden}
.click-prompt span{display:inline-block;border:1px solid rgba(238,201,125,.75);color:var(--candle);
  font-family:var(--font-label);font-weight:600;font-size:13px;letter-spacing:.32em;
  text-indent:.32em;padding:14px 30px;background:rgba(12,10,16,.35)}

.replay{position:absolute;right:22px;bottom:18px;z-index:9;cursor:pointer;
  font-family:var(--font-label);font-size:11px;font-weight:600;letter-spacing:.22em;
  color:rgba(246,240,228,.55);border:1px solid rgba(246,240,228,.25);padding:8px 14px;
  background:none;opacity:0;pointer-events:none;
  transition:opacity .6s ease 1.6s,color .2s,border-color .2s}
.open .replay{opacity:1;pointer-events:auto}
.replay:hover{color:var(--champagne);border-color:rgba(238,201,125,.6)}

/* --- ramp --- */
.ramp{position:relative;height:340px;
  background:linear-gradient(180deg,var(--noir) 0%,#3A0912 26%,var(--crimson) 44%,
    #B9694B 62%,#EED9A8 82%,var(--ivory) 100%)}
.ramp-confetti{position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,243,214,.9) 1.4px,transparent 2px),
    radial-gradient(circle,rgba(110,15,30,.5) 1.2px,transparent 1.8px);
  background-size:120px 110px,170px 150px;background-position:0 0,60px 40px;
  -webkit-mask-image:linear-gradient(180deg,black 30%,transparent 95%);
  mask-image:linear-gradient(180deg,black 30%,transparent 95%)}
.ramp-text{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center}
.ramp-text .big{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4vw,44px);
  letter-spacing:.06em;color:#FFF3D6;text-shadow:0 2px 30px rgba(12,10,16,.6)}
.ramp-text .small{font-family:var(--font-label);font-size:13px;letter-spacing:.3em;
  color:#FFF3D6;margin-top:8px;text-shadow:0 1px 20px rgba(12,10,16,.6)}

@media (max-width:900px){
  .stage .facts{gap:14px;flex-direction:column;align-items:center}
  .ramp{height:240px}
}