/* ---------- HERO ---------- */
.hero{position:relative;min-height:min(100svh,940px);display:grid;align-items:center;overflow:hidden;padding-top:calc(var(--nav-h) + 20px);padding-bottom:40px;
  background:radial-gradient(60% 55% at 70% 45%,rgba(201,138,82,.16),transparent 70%),radial-gradient(40% 50% at 15% 90%,rgba(226,103,47,.08),transparent 70%),
  repeating-linear-gradient(90deg,#0f0b09 0 118px,#120d0a 118px 121px,#0e0a08 121px 236px,#110c0a 236px 240px)}
#smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(64px,10.5vw,168px);font-weight:900;color:var(--foam);margin-top:18px}
.hero h1 span{display:block;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .l2{color:transparent;-webkit-text-stroke:1.5px var(--copper-hi);animation-delay:.12s}
.hero h1 .l3{color:var(--copper-hi);animation-delay:.24s}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.hero p.lead{max-width:470px;font-size:18px;color:var(--foam-2);margin:26px 0 30px}
.hero .lead .serif{font-size:1.25em;color:var(--copper-hi)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero-art{position:relative;aspect-ratio:568/494;max-width:100%}
.hero-art img{width:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));animation:float 7s ease-in-out infinite}
.hero-art::before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(227,163,58,.28),transparent);filter:blur(30px)}
@keyframes float{50%{transform:translateY(-12px) rotate(-.6deg)}}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;font-size:13px;color:var(--ash)}
.hero-meta b{color:var(--foam);font-weight:600}
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--ash);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--copper),transparent);animation:drip 1.8s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- STICKY SCENES ---------- */
.scene{position:relative}
.scene .pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
#anatomy{height:340vh}
#anatomy .pin{background:radial-gradient(55% 50% at 50% 50%,#2a1d15 0%,var(--char) 72%)}
.an-title{position:absolute;left:var(--gutter);top:calc(var(--nav-h) + 20px);z-index:3;max-width:520px}
.an-title h2{font-size:clamp(48px,7vw,110px);font-weight:900;margin-top:12px}
.an-title p{color:var(--ash);max-width:380px;margin-top:12px;transition:opacity .4s}
#anatomy.open .an-title p{opacity:0}
.an-side{position:absolute;right:var(--gutter);bottom:40px;z-index:3;text-align:right;font-family:var(--display);font-size:clamp(40px,5vw,72px);font-weight:800;color:#3a2e27;line-height:.9;text-transform:uppercase}
.stage{position:relative;width:min(560px,42vw);aspect-ratio:568/494;margin-top:60px;margin-left:clamp(0px,18vw,320px)}
.stage .base{position:absolute;inset:0;width:100%}
.piece{position:absolute;will-change:transform}
.piece img{width:100%;filter:drop-shadow(0 20px 26px rgba(0,0,0,.7))}
.tag{position:absolute;left:50%;top:100%;transform:translate(-50%,6px);width:max-content;max-width:210px;text-align:center;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;display:flex;flex-direction:column}
.tag b{display:block;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--foam);line-height:1}
.tag span{display:block;font-size:12.5px;color:var(--ash);margin-top:4px;line-height:1.35}
.tag i{display:block;width:1px;height:18px;background:var(--copper);margin:0 auto 6px}
.stage.open .tag{opacity:1;transform:translate(-50%,12px)}
.piece.up .tag{top:auto;bottom:100%;transform:translate(-50%,-6px)}
.piece.up .tag i{order:2;margin:6px auto 0}
.stage.open .piece.up .tag{transform:translate(-50%,-10px)}
.progress-rail{position:absolute;left:var(--gutter);bottom:40px;z-index:3;display:flex;gap:6px}
.progress-rail i{width:34px;height:3px;background:#3a2e27;border-radius:2px;overflow:hidden;position:relative}
.progress-rail i::after{content:"";position:absolute;inset:0;background:var(--copper);transform:scaleX(var(--p,0));transform-origin:left}

/* ---------- BEER ---------- */
#beer{height:300vh}
#beer .pin{background:linear-gradient(180deg,var(--char) 0%,#1a120a 60%,#221608 100%)}
.beer-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;width:100%}
.glass-wrap{position:relative;display:grid;place-items:center;height:min(72svh,640px)}
.tapline{position:absolute;top:0;left:50%;width:6px;margin-left:-3px;background:linear-gradient(90deg,#b36f12,#f6c15a,#b36f12);border-radius:3px}
.glass{position:relative;width:min(280px,58vw);height:min(62svh,520px);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 30%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.12));border-radius:0 0 26px 26px}
.glass::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 12%,rgba(255,255,255,.22) 16%,transparent 22%,transparent 78%,rgba(255,255,255,.1) 82%,transparent 86%);pointer-events:none}
.liquid{position:absolute;left:0;right:0;bottom:0;height:0%;background:linear-gradient(180deg,#f3b848 0%,#e0951f 45%,#b86a0e 100%)}
.liquid::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 60% at 30% 40%,rgba(255,230,160,.35),transparent 70%)}
.foam{position:absolute;left:-4%;right:-4%;height:0;bottom:100%;background:radial-gradient(circle at 10% 70%,#fffaf0 18px,transparent 19px),radial-gradient(circle at 35% 60%,#fbf2df 22px,transparent 23px),radial-gradient(circle at 62% 72%,#fff 20px,transparent 21px),radial-gradient(circle at 88% 62%,#f7ecd6 22px,transparent 23px),linear-gradient(#fbf4e6,#efe1c4);border-radius:14px 14px 0 0}
.bubbles span{position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;background:rgba(255,245,210,.7);animation:bub 3s linear infinite}
@keyframes bub{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(-60svh);opacity:0}}
.big-type{font-family:var(--display);font-weight:900;font-size:clamp(56px,8vw,130px);line-height:.85;text-transform:uppercase}
.big-type em{font-style:normal;color:var(--amber)}
.facts{position:relative;min-height:190px;margin-top:28px}
.fact{position:absolute;inset:0;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;visibility:hidden}
.fact.on{opacity:1;transform:none;visibility:visible}
.fact h3{font-size:36px;display:flex;align-items:baseline;gap:14px}
.fact h3 small{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--amber)}
.fact p{color:#cdbfa8;max-width:440px;margin:10px 0 0}
.meter{display:flex;gap:26px;margin-top:22px;font-variant-numeric:tabular-nums}
.meter > div{font-family:var(--display);font-size:40px;font-weight:800;color:var(--amber);line-height:1}
.meter .lbl{display:block;font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-top:6px}

/* ---------- PLATTER ---------- */
#platter{height:260vh}
#platter .pin{background:var(--char)}
.pl-img{position:absolute;inset:0;background:#1a120c center/cover}
.pl-img.in{background-image:url('/assets/img/platter.webp')}
.pl-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,10,8,.88) 0%,rgba(13,10,8,.35) 55%,rgba(13,10,8,.15) 100%)}
.pl-word{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:clamp(70px,17vw,300px);text-transform:uppercase;pointer-events:none}
.pl-card{position:relative;z-index:2;max-width:480px;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .5s}
.pl-card.on{opacity:1;transform:none}
.pl-card h2{font-size:clamp(52px,6.5vw,96px);font-weight:900;margin-top:10px}
.pl-list{list-style:none;padding:0;margin:22px 0;display:grid;gap:8px}
.pl-list li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line-2);padding-bottom:8px;font-size:15px}
.pl-list li span:last-child{color:var(--ash);font-variant-numeric:tabular-nums}
.price-big{font-family:var(--display);font-weight:800;font-size:54px;color:var(--copper-hi);line-height:1}
.pl-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:18px}

/* ---------- BRAT DRIVE ---------- */
#drive{height:320vh}
#drive .pin{background:radial-gradient(70% 60% at 50% 70%,#221a10,var(--char) 70%);place-items:stretch}
.dv{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding-top:calc(var(--nav-h) + 24px);padding-bottom:40px}
.dv-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px}
.dv-head h2{font-size:clamp(56px,9vw,150px);font-weight:900}
.dv-head h2 em{font-style:normal;color:var(--amber)}
.dv-head p{max-width:360px;color:var(--foam-2);margin:0}
.road{position:relative;align-self:center;height:150px;margin-top:10px}
.road::before{content:"";position:absolute;left:0;right:0;top:106px;height:3px;background:repeating-linear-gradient(90deg,var(--line-2) 0 26px,transparent 26px 44px)}
.road .stop{position:absolute;top:96px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--char);border:2px solid var(--line-2);transition:all .3s}
.road .stop.on{border-color:var(--amber);background:var(--amber);box-shadow:0 0 0 8px rgba(227,163,58,.15)}
.road .stop b{position:absolute;top:32px;left:50%;transform:translateX(-50%);font-family:var(--display);font-size:22px;color:var(--ash);transition:color .3s}
.road .stop.on b{color:var(--amber)}
.car{position:absolute;top:30px;left:0;width:150px;margin-left:-75px;will-change:transform}
.car svg{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 14px rgba(0,0,0,.6))}
.car .ping{position:absolute;right:6px;top:-26px;background:var(--amber);color:#1a0f07;font-weight:800;font-size:12px;padding:4px 9px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .3s;white-space:nowrap}
.car.here .ping{opacity:1;transform:none}
.dv-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dv-step{padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(21,16,13,.8);transition:border-color .3s,transform .3s,opacity .3s;opacity:.55}
.dv-step.on{border-color:var(--amber);opacity:1;transform:translateY(-4px)}
.dv-step h3{font-size:26px;margin-bottom:6px}
.dv-step p{margin:0;color:var(--ash);font-size:14px}

/* ---------- FEATURED + MODES ---------- */
.feat{padding-block:110px 70px;background:linear-gradient(180deg,var(--char),var(--char-2))}
.feat-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:34px}
.feat-head h2{font-size:clamp(64px,10vw,150px);font-weight:900}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mode{position:relative;border:1px solid var(--line);border-radius:22px;padding:36px;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;text-decoration:none;transition:border-color .3s,transform .3s}
.mode:hover{border-color:var(--copper);transform:translateY(-4px)}
.mode h3{font-size:clamp(44px,5vw,72px);font-weight:900}
.mode p{margin:0;color:var(--foam-2);max-width:420px}
.mode .go{margin-top:10px;font-weight:700;color:var(--copper-hi)}
.mode.del,.mode.drv{background:var(--char-2)}
.mode.del.in{background:linear-gradient(0deg,rgba(13,10,8,.95) 20%,rgba(13,10,8,.4)),url('/assets/img/fishboard-480.webp') center/cover}
@media (min-width:700px){.mode.del.in{background-image:linear-gradient(0deg,rgba(13,10,8,.95) 20%,rgba(13,10,8,.4)),url('/assets/img/fishboard.webp')}}
.mode.drv.in{background:linear-gradient(0deg,rgba(13,10,8,.95) 20%,rgba(13,10,8,.35)),url('/assets/img/tap-480.webp') center/cover}
@media (min-width:700px){.mode.drv.in{background-image:linear-gradient(0deg,rgba(13,10,8,.95) 20%,rgba(13,10,8,.35)),url('/assets/img/tap.webp')}}
.mode.drv h3{color:var(--amber)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:10px}
  .hero-art{order:-1;width:min(420px,86%);margin-inline:auto}
  .hero p.lead{font-size:16px;margin:18px 0 22px}
  .scroll-hint{display:none}
  .stage{width:72vw;margin:120px 0 0 0}
  .an-title{max-width:none;right:var(--gutter)}
  .an-title p{font-size:14px}
  .an-side{display:none}
  .tag b{font-size:17px}.tag span{display:none}
  .beer-grid{grid-template-columns:1fr;gap:0;align-content:center}
  .glass-wrap{height:36svh}
  .glass{height:32svh;width:min(170px,44vw)}
  .facts{min-height:170px;margin-top:14px}
  .fact h3{font-size:28px}.fact p{font-size:14px}
  .big-type{font-size:52px}
  .meter{gap:18px}.meter > div{font-size:30px}
  .pl-card{max-width:100%}
  .pl-img::after{background:linear-gradient(0deg,rgba(13,10,8,.95) 10%,rgba(13,10,8,.45) 60%,rgba(13,10,8,.2))}
  #platter .pin{place-items:end center;padding-bottom:40px}
  .dv-steps{grid-template-columns:1fr;position:relative;min-height:120px}
  .dv-step{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden}
  .dv-step.on{opacity:1;visibility:visible;transform:none}
  .car{width:100px;margin-left:-50px;top:52px}
  .road .stop b{font-size:18px}
  .modes{grid-template-columns:1fr}
  .mode{min-height:260px;padding:26px}
}