/* ══════════════════════════════════════════════════════════════════
   THE DRINK LAB · engine stylesheet
   Written complete and dormant at P0; sections wake as real content
   arrives. Tokens in :root are GENERATED placeholders until the brand
   step (P2) rewrites them from the student's palette.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ── GENERATED — P2, from their palette (D #A48D78 Desert Rock, P #FAF9F6 Feather White) ── */
  --ground:        #261e17;   /* deep ground — D's hue, darkened (D parent) */
  --scene:         #a48d78;   /* portal flat colour — D itself */
  --ground-deep:   #16120d;   /* deeper ground for the ending — D's hue */
  --light:         #faf9f6;   /* type + the line — P itself (P parent) */
  --light-2:       #e6dac8;   /* second light — Creamed Oat */
  --accent-mid:    #cbb9a4;   /* accent line + flame base — Soft Sandstone */
  --accent-bright: #e1b68e;   /* script word, prices, flame — D's hue, brightened */
  /* ── GENERATED — fonts, P2, matched from their Pinterest lettering ── */
  --font-display:  'Anton', 'Impact', sans-serif;          /* heavy condensed giant word */
  --font-body:     'Montserrat', system-ui, sans-serif;     /* the clean geometric caps */
  --font-script:   'Lobster', cursive;                      /* the bold retro "Cafe" script */
}

*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
.page-wrap{overflow-x:hidden}
body{
  background:var(--ground);
  color:var(--light);
  font-family:var(--font-body);
  min-height:100vh;
}

/* The one rule everything hangs on: a sleeping mount takes no layout.
   display:none via class, never the [hidden] attribute. */
.mount-off{display:none !important}

img{-webkit-user-drag:none;user-select:none}
button{font-family:inherit;cursor:pointer}

/* ── grain · fixed z200 · opacity .06 · NO blend mode (SHIPS) ── */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ══ PORTAL · z100 ══ */
#portal{
  position:fixed;inset:0;z-index:100;pointer-events:none;
  /* no background of its own — the flat colour lives on #portalColor */
}
#portalScene{position:absolute;inset:0;z-index:1;will-change:transform}
#portalColor{position:absolute;inset:0;background:var(--scene)}
#portalCutout{position:absolute;width:100%;height:100%;object-fit:cover}
#introVideo{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover}
#portalPlay{
  position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:auto;background:transparent;color:var(--light);
  border:1.5px solid var(--light);border-radius:999px;padding:1rem 2.4rem;
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
}
#portalSkip{
  position:absolute;z-index:7;right:2rem;bottom:2rem;pointer-events:auto;
  background:transparent;color:var(--light);border:1px solid var(--light);
  border-radius:999px;padding:.55rem 1.4rem;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.85;
}

/* ══ NAV · absolute, not fixed — it belongs to the hero ══ */
#siteNav{
  position:absolute;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 3rem;
}
.nav-name{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.08em;text-transform:uppercase}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{color:var(--light);text-decoration:none;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.nav-links a:hover{opacity:1}

/* ══ HERO ══ */
#hero{position:relative;height:100vh;min-height:640px;overflow:hidden}

.hero-bgs{position:absolute;inset:0;z-index:0}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg.is-current{z-index:1}
/* a soft shade of the ground colour at the edges, so the small copy stays readable on pale skies */
.hero-bgs::after{
  content:"";position:absolute;inset:-15vh 0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(38,30,23,.45) 0%, rgba(38,30,23,0) 30%),
    linear-gradient(90deg, rgba(38,30,23,.55) 0%, rgba(38,30,23,0) 34%, rgba(38,30,23,0) 66%, rgba(38,30,23,.45) 100%);
}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg .bg-disc{ /* runtime circle-swap disc */
  position:absolute;left:58%;top:42%;width:200vmax;height:200vmax;
  margin:-100vmax 0 0 -100vmax;border-radius:50%;overflow:hidden;
}
.hero-bg .bg-disc img{
  position:absolute;left:50%;top:50%;width:100vw;height:100vh;
  transform:translate(-50%,-50%);object-fit:cover;
}

.giant{
  position:absolute;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);
  text-align:center;width:100%;pointer-events:none;
}
.giant-lines{
  font-family:var(--font-display);text-transform:uppercase;
  color:var(--light);line-height:.88;letter-spacing:.01em;
}
.g-line{display:block;overflow:hidden}
.g-ch{display:inline-block;will-change:transform}
.giant-script{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--font-script);color:var(--accent-bright);
  font-size:clamp(1.6rem,3.4vw,3.2rem);pointer-events:none;
}

.line-back{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.fx-beans{position:absolute;inset:0;z-index:4;pointer-events:none}
.fx-beans .fx-wrap,.fx-ice .fx-wrap{position:absolute;left:0;top:0;will-change:transform}
.fx-beans img,.fx-ice img{width:100%;display:block}

.hand-wrap{
  position:absolute;z-index:5;left:50%;bottom:-24vh;transform:translateX(-50%);   /* lowered so the product (incl. the cappuccino's foam crown) clears the giant word by ≥16px at 1920x1080 */
  width:min(34vw,460px,42.6vh);pointer-events:none;   /* 42.6vh = 460/1080: the hand scales with height, so shorter screens keep the cup under the word */
}
.hand{width:100%;display:block}

.cup-slot{
  position:absolute;z-index:6;left:50%;bottom:18vh;transform:translateX(-50%);
  width:min(19vw,260px);pointer-events:none;
}
.cup{position:absolute;left:0;top:0;width:100%;display:block}
.cup-b{visibility:hidden}

.fx-ice{position:absolute;inset:0;z-index:7;pointer-events:none}
.line-front{position:absolute;inset:0;z-index:8;width:100%;height:100%;pointer-events:none}

.badge{
  position:absolute;z-index:9;left:4vw;bottom:20vh;width:120px;height:120px;
  pointer-events:none;
}

.hero-copy{
  position:absolute;z-index:10;left:4vw;top:24vh;max-width:300px;
}
.hero-title{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.7rem}
.hero-desc{font-size:.92rem;line-height:1.55;opacity:.88;margin-bottom:.9rem}
.hero-price{font-family:var(--font-display);font-size:1.3rem;color:var(--accent-bright)}

.pills{
  position:absolute;z-index:10;right:4vw;top:24vh;list-style:none;
  display:flex;flex-direction:column;gap:.7rem;align-items:flex-end;
}
.pills li{
  border:1px solid var(--light-2);border-radius:999px;color:var(--light-2);
  padding:.45rem 1.1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(38,30,23,.35);will-change:transform;   /* a tint of the ground so the pills read on the palest skies */
}

.drink-index{
  position:absolute;z-index:10;left:4vw;bottom:calc(3vh + 13px);   /* level with the switcher's middle */
  font-family:var(--font-display);font-size:1.1rem;letter-spacing:.18em;opacity:.7;
}
.hero-hint{
  position:absolute;z-index:10;right:4vw;bottom:calc(3vh + 13px);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}

.switcher{
  position:absolute;z-index:12;left:50%;bottom:3vh;   /* was 5vh: the 44px buttons don't scale, and at 1600x900 they touched the cup's foot */transform:translateX(-50%);
  display:flex;align-items:center;gap:1.2rem;
}
.sw-prev,.sw-next{
  background:transparent;border:1px solid var(--light-2);color:var(--light);
  width:44px;height:44px;border-radius:50%;font-size:1rem;
}
.sw-dots{display:flex;gap:.6rem}
.sw-dot{
  width:10px;height:10px;border-radius:50%;border:1px solid var(--light-2);
  background:transparent;padding:0;
}
.sw-dot.is-on{background:var(--light)}

.sr-live{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ══ STORY ══ */
#story{position:relative;min-height:100vh;background:var(--ground);overflow:hidden}
.story-inner{
  position:relative;max-width:1440px;margin:0 auto;min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding:10vh 4vw;
}
.story-line-back{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.story-figure{position:relative;z-index:2;justify-self:center;width:min(34vw,480px,28vh)}   /* the barista is tall (0.35:1) — sized by height so the whole figure fits the section */
.story-figure img{width:100%;display:block}
.story-line-front{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.story-copy{position:relative;z-index:4;max-width:480px;justify-self:center}
.story-title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);text-transform:uppercase;line-height:1.02;margin-bottom:1.4rem}
.story-text{font-size:1rem;line-height:1.7;opacity:.9;margin-bottom:2.2rem}
.story-stats{display:flex;gap:2.6rem}
.story-stat b{display:block;font-family:var(--font-display);font-size:2rem;color:var(--accent-bright)}
.story-stat span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

/* ══ CTA · the closing panel ══ */
#cta{
  position:relative;min-height:100vh;background:var(--ground-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3rem;overflow:hidden;text-align:center;padding:12vh 6vw;
}
.cta-line{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.cta-flame{position:relative;z-index:2;width:130px}
.cta-flame svg{width:100%;overflow:visible}
.cta-heading{
  position:relative;z-index:3;font-family:var(--font-display);
  font-size:clamp(2.4rem,7vw,6rem);text-transform:uppercase;line-height:.95;
}
.cta-btn{
  position:relative;z-index:3;background:var(--accent-bright);color:var(--ground-deep);
  border:none;border-radius:999px;padding:1.1rem 3rem;
  font-family:var(--font-display);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
}
.cta-ambience{position:absolute;inset:0;z-index:1;pointer-events:none}
.cta-ambience .fx-wrap{position:absolute;will-change:transform}
.cta-ambience img{width:100%;display:block}

/* ══ ALIVE · the mural ══ */
#alive{position:relative;height:100vh;overflow:hidden;background:var(--ground-deep)}
.mural-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the still's top edge is pale; fade it up out of the closing panel's colour so there is no seam */
#alive::before{
  content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg, var(--ground-deep) 0%, rgba(22,18,13,0) 100%);
}
.mural-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:circle(0px at 50% 50%);
}

/* ══ BREAKPOINTS · 1100 / 820 / 760 ══ */
@media (max-width:1100px){
  .hero-copy{max-width:250px}
  .pills{right:3vw}
  .badge{left:2vw;bottom:8vh}
}
@media (max-width:820px){
  .nav-links{display:none}
  .hand-wrap{width:min(60vw,380px);bottom:-6vh}
  /* .cup-slot is placed by placeCup() from the hand — no size of its own here */
  .pills{
    top:50vh;bottom:auto;right:auto;left:50%;transform:translateX(-50%);width:calc(100% - 32px);   /* between the word and the cup — at 16vh they sat on the cup */
    flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;
  }
  .drink-index,.hero-hint{display:none}
  .hero-copy{top:14vh}
  .story-inner{grid-template-columns:1fr;gap:3rem}
  .cta-flame{width:90px}
}
/* 760 is the glide's cutoff — matches the Lenis guard in script.js */

@media (prefers-reduced-motion:reduce){
  .grain{opacity:.04}
}