/* ============================================================
   CELEBRATION HERO — colour system, typography, layout
   ============================================================ */
:root{
  --midnight:#07060d; --plum-black:#0c0713; --wine:#2a0815;
  --antique-gold:#b99a43; --champagne:#dfca8a; --ivory:#f4efe6;
  --muted-ivory:#b8b0a5; --ruby:#641327;
}

.hero-3d{
  position:relative; min-height:100svh; height:auto;
  --minh:760px; background:var(--midnight); color:var(--ivory);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; isolation:isolate;
}
@media (min-height:760px) and (min-width:900px){ .hero-3d{ min-height:max(100svh, var(--minh)); } }

#celebration{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}

/* readability scrim — heavier on the left where the type lives */
.hero-3d::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(7,6,13,.97) 0%, rgba(7,6,13,.92) 30%, rgba(7,6,13,.55) 56%, rgba(7,6,13,.16) 82%, rgba(7,6,13,.34) 100%),
    radial-gradient(130% 90% at 8% 72%, rgba(12,7,19,.92), transparent 62%);
  opacity:calc(.86 + var(--scroll,0) * .14);
}
/* fine grain — the difference between "rendered" and "photographed" */
.hero-3d::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* WebGL fallback: still a composition, not an empty box */
.hero-3d.no-webgl #celebration{display:none}
.hero-3d.no-webgl{
  background:
    radial-gradient(58% 44% at 72% 34%, rgba(185,154,67,.30), transparent 62%),
    radial-gradient(42% 38% at 84% 66%, rgba(100,19,39,.34), transparent 66%),
    radial-gradient(70% 60% at 20% 20%, rgba(42,25,66,.55), transparent 70%),
    linear-gradient(160deg,#0c0713,#07060d 62%);
}
.hero-3d.no-webgl .fallback-art{display:block}
.fallback-art{display:none;position:absolute;inset:0;z-index:0;opacity:.5}

.hero-inner{position:relative;z-index:3;width:min(1280px,100% - clamp(1.25rem,5vw,5rem)*2);
  margin:0 auto;padding-block:clamp(6rem,12vh,9rem) clamp(1.5rem,4vh,2.5rem);
  transform:translateY(calc(var(--scroll,0) * -34px));}

.hero-eyebrow{display:flex;align-items:center;gap:1rem;white-space:nowrap;flex-wrap:wrap;margin:0 0 clamp(1.1rem,2.2vh,1.8rem);
  font-family:var(--f-text);font-size:.74rem;letter-spacing:.26em;color:var(--champagne)}
.hero-eyebrow .rule{flex:0 0 54px;height:1px;background:linear-gradient(90deg,var(--antique-gold),transparent)}
.hero-eyebrow [data-mood]{color:var(--muted-ivory);padding-left:1rem;border-left:1px solid rgba(223,202,138,.3);transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}

.hero-3d h1{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(58px,5.3vw,108px);line-height:.97;letter-spacing:-.018em;
  max-width:900px;margin:0;color:var(--ivory);
}
.hero-3d h1 em{font-style:italic;font-weight:300;color:var(--champagne)}
.hero-alt{font-family:var(--f-display);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.45rem);
  color:var(--muted-ivory);margin:1.1rem 0 0;max-width:44ch}
.hero-body{margin:1.4rem 0 0;max-width:56ch;color:#cfc7ba;font-size:clamp(.98rem,1.05vw,1.12rem);line-height:1.62}

.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.6rem,3.4vh,2.4rem)}
.cta{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:1rem 1.9rem;
  font-family:var(--f-text);font-size:.95rem;font-weight:500;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s,color .35s,box-shadow .35s;position:relative;overflow:hidden}
.cta-primary{background:linear-gradient(100deg,#e6d3a0,var(--champagne) 45%,#c9ab62);color:#1b1408;
  box-shadow:0 10px 40px -14px rgba(223,202,138,.7)}
.cta-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.cta-primary:hover::after{transform:translateX(120%)}
.cta-ghost{border-color:rgba(223,202,138,.42);color:var(--ivory);background:rgba(244,239,230,.04);backdrop-filter:blur(6px)}
.cta-ghost:hover{border-color:var(--champagne);color:var(--champagne)}
.cta .arrow{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cta:hover .arrow{transform:translateX(4px)}

.hero-tags{margin:clamp(1.2rem,2.6vh,1.9rem) 0 0;max-width:60ch;font-size:.82rem;letter-spacing:.06em;color:#8e8779}
.hero-tags span{white-space:nowrap}

/* bottom strip */
.hero-strip{position:relative;z-index:3;border-top:1px solid rgba(223,202,138,.22);overflow:hidden;
  padding:.85rem 0;background:linear-gradient(to top,rgba(7,6,13,.75),transparent)}
.hero-strip .track{display:flex;gap:3.2rem;width:max-content;animation:drift 64s linear infinite;
  font-size:.74rem;letter-spacing:.28em;color:#8e8779;white-space:nowrap}
.hero-strip .track span{display:inline-flex;align-items:center;gap:3.2rem}
.hero-strip .track span::after{content:"◇";color:var(--antique-gold);font-size:.6rem}
@keyframes drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero-strip .track{animation:none}}

/* reveal timeline */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}

/* header over the canvas */
.topbar.over{background:transparent;box-shadow:none}
.topbar.over.docked{background:rgba(9,7,16,.72);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:inset 0 -1px 0 rgba(223,202,138,.28)}
.nav-cta{border:1px solid rgba(223,202,138,.5);border-radius:999px;padding:.42rem 1.05rem;color:var(--champagne)!important;opacity:1!important}
.nav-cta:hover{background:var(--champagne);color:#1b1408!important}

@media (max-width:1024px){
  .hero-3d h1{font-size:clamp(46px,7vw,72px)}
  .hero-body{max-width:48ch}
}
@media (max-width:700px){
  .hero-3d{justify-content:center}
  .hero-inner{padding-block:7.5rem 2rem}
  .hero-3d h1{font-size:clamp(38px,10.5vw,54px);line-height:1.02}
  .hero-alt{display:none}
  .hero-body{font-size:.96rem;max-width:100%}
  .hero-actions .cta{flex:1 1 100%;justify-content:center;padding:1.05rem 1.4rem}
  .hero-tags{font-size:.74rem}
  .hero-3d::before{background:linear-gradient(180deg,rgba(7,6,13,.55) 0%,rgba(7,6,13,.86) 46%,rgba(7,6,13,.96) 100%)}
}

/* Short viewports — embedded previews, laptops at 768px, split screens.
   The composition tightens rather than being clipped at the top. */
@media (max-height:860px){
  .hero-3d h1{font-size:clamp(38px,4.2vw,64px)}
  .hero-inner{padding-block:clamp(5rem,9vh,6.5rem) 1.2rem}
  .hero-alt{margin-top:.8rem;font-size:1.02rem}
  .hero-body{margin-top:1rem;font-size:.97rem;max-width:52ch}
  .hero-actions{margin-top:1.4rem}
  .hero-actions .cta{padding:.85rem 1.5rem}
  .hero-tags{margin-top:1rem}
}
@media (max-height:700px){
  .hero-3d h1{font-size:clamp(34px,3.6vw,50px)}
  .hero-alt{display:none}
  .hero-inner{padding-block:4.6rem 1rem}
}