/* ==========================================================================
   STACKO — homepage sections
   Depends on stacko.css for tokens and comic primitives.
   ========================================================================== */

/* --- Reveal-on-scroll ---------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1);}
[data-reveal].is-in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.09s;}
[data-reveal][data-delay="2"]{transition-delay:.18s;}
[data-reveal][data-delay="3"]{transition-delay:.27s;}

/* ==========================================================================
   1. HERO
   Backdrop is generated in CSS — rays + halftone over the flavour trio — so
   the homepage needs no bespoke background image and recolours for free.
   ========================================================================== */
.hero{
  position:relative;
  min-height:calc(100svh - var(--hdr-h) - var(--bar-h));
  display:grid;align-items:center;
  padding-block:clamp(30px,6vh,72px) clamp(60px,10vh,110px);
  background:radial-gradient(120% 90% at 50% 24%,var(--flavor-light),var(--flavor) 46%,var(--flavor-dark) 100%);
  isolation:isolate;
  /* required: .hero__rays spins, and a rotated element's bounding box grows
     past its inset:0 footprint — without this it pushes the page sideways */
  overflow:hidden;
  margin-top:calc(var(--hdr-h) * -1);
  padding-top:calc(var(--hdr-h) + clamp(30px,6vh,72px));
}
.hero__rays,.hero__dots{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__rays{
  background:repeating-conic-gradient(from 0deg at 50% 22%,
    rgba(255,255,255,.14) 0 6deg,transparent 6deg 13deg);
  animation:raySpin 90s linear infinite;transform-origin:50% 22%;
}
@keyframes raySpin{to{transform:rotate(360deg);}}
.hero__dots{
  background-image:radial-gradient(rgba(23,11,4,.55) 1.4px,transparent 1.7px);
  background-size:14px 14px;opacity:.24;
}
.hero__inner{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:clamp(20px,4vw,50px);
}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.hero__h1{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(48px,7.6vw,116px);line-height:.82;
  -webkit-text-stroke:clamp(2px,.42vw,4px) var(--ink);
  text-shadow:9px 9px 0 rgba(23,11,4,.38);
  transform:translate(calc(var(--mx) * -7px),calc(var(--my) * -4px)) rotate(-1.6deg);
}
/* each line holds together — "Snack it." must never break across two lines */
.hero__h1 span{display:block;white-space:nowrap;}
.hero__lede{font-size:clamp(14px,1.35vw,17px);max-width:34ch;font-weight:700;text-shadow:0 2px 6px rgba(23,11,4,.4);}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;}
/* stays positioned — the NEW! badge anchors to this box */
.hero__stage{position:relative;display:grid;place-items:center;min-height:min(58vh,560px);}
.hero__can{
  position:relative;z-index:4;height:min(58vh,560px);width:auto;
  filter:drop-shadow(0 28px 32px rgba(0,0,0,.5));
  animation:floatCan 5s ease-in-out infinite;
  transform:translate(calc(var(--mx) * 20px),calc(var(--my) * 13px)) rotate(calc(var(--mx) * 2.4deg));
}
@keyframes floatCan{0%,100%{translate:0 0;}50%{translate:0 -20px;}}
.hero__badge{
  position:absolute;z-index:5;top:2%;right:2%;
  width:clamp(84px,9vw,116px);aspect-ratio:1;
  font-size:clamp(13px,1.5vw,18px);transform:rotate(11deg);
  animation:pop 1.7s ease-in-out infinite;
}
@keyframes pop{0%,100%{transform:rotate(11deg) scale(1);}50%{transform:rotate(11deg) scale(1.07);}}
.hero__fly{
  position:absolute;z-index:2;pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.35));
  animation:drift var(--d,9s) ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
  50%{transform:translateY(-24px) rotate(calc(var(--r,0deg) + 10deg));}
}
.hero__cue{
  position:absolute;left:50%;bottom:22px;z-index:5;translate:-50% 0;
  font-weight:700;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  animation:bob 1.5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ==========================================================================
   2. LINEUP — the five cans in an arc
   ========================================================================== */
.lineup{
  background:var(--flavor-dark);
  transition:background .5s ease;
}
.lineup__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:clamp(30px,5vh,56px);}
.lineup__fan{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(4px,1.4vw,22px);
}
.fan__item{
  position:relative;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-bottom:6px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
/* The arc: outer items sit lower (translate on the item) and their cans tilt
   away from centre (rotate on the image only). Rotating the whole item would
   tip the flavour names and heat pips with it — unreadable. */
.fan__item:nth-child(1){transform:translateY(30px);}
.fan__item:nth-child(2){transform:translateY(12px);}
.fan__item:nth-child(3){transform:translateY(0);z-index:3;}
.fan__item:nth-child(4){transform:translateY(12px);}
.fan__item:nth-child(5){transform:translateY(30px);}
.fan__item:nth-child(1) .fan__can{transform:rotate(-9deg);}
.fan__item:nth-child(2) .fan__can{transform:rotate(-4.5deg);}
.fan__item:nth-child(4) .fan__can{transform:rotate(4.5deg);}
.fan__item:nth-child(5) .fan__can{transform:rotate(9deg);}
.fan__item:hover,.fan__item:focus-within{transform:translateY(-14px) scale(1.05);z-index:5;}
.fan__item:hover .fan__can,.fan__item:focus-within .fan__can{transform:rotate(0deg);}
/* sized by HEIGHT, not width — the five source crops have different aspect
   ratios (Original is 3.29:1, the rest ~2.8:1), so width-matching makes the
   lineup ragged and overflows the section */
.fan__can{
  height:clamp(190px,34vh,360px);width:auto;
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.55));
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.fan__meta{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.fan__num{font-family:var(--heading);font-size:12px;letter-spacing:.2em;opacity:.65;}
.fan__name{font-family:var(--display);font-size:clamp(11px,1.2vw,15px);text-transform:uppercase;line-height:1.15;}
.fan__tag{font-size:11px;opacity:.75;max-width:16ch;}
.lineup__foot{margin-top:clamp(28px,5vh,50px);text-align:center;}

/* ==========================================================================
   3. WHY THE CAN
   ========================================================================== */
.why{background:var(--paper);color:var(--ink);}
.why__head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:clamp(30px,5vh,54px);}
.why .h2{-webkit-text-stroke:0;color:var(--ink);}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);}
.why__card{
  position:relative;background:var(--paper);border:4px solid var(--ink);
  box-shadow:9px 9px 0 var(--flavor);
  padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.why__card:hover{transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--flavor);}
.why__icon{width:66px;height:66px;color:var(--flavor);}
.why__card h3{font-family:var(--display);font-size:clamp(17px,2vw,23px);text-transform:uppercase;line-height:1.05;}
.why__card p{font-size:14px;line-height:1.6;}

/* ==========================================================================
   4. HEAT FINDER
   ========================================================================== */
.heat{
  background:linear-gradient(160deg,var(--flavor-dark),var(--flavor));
  transition:background .45s ease;
}
.heat__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
.heat__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.heat__can{
  height:min(52vh,470px);width:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 26px rgba(0,0,0,.5));
  animation:floatCan 5.4s ease-in-out infinite;
}
.heat__result{font-family:var(--display);font-size:clamp(26px,4.4vw,52px);text-transform:uppercase;line-height:.95;-webkit-text-stroke:2px var(--ink);}
.heat__tag{font-weight:700;font-size:14px;opacity:.9;}
.heat__slider{width:100%;max-width:420px;}
.heat__scale{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;opacity:.8;margin-bottom:8px;}
input[type="range"].dial{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;
  background:var(--ink);border:3px solid var(--paper);cursor:pointer;
}
input[type="range"].dial::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;
  background:var(--pop);border:3px solid var(--ink);border-radius:0;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);cursor:grab;
}
input[type="range"].dial::-moz-range-thumb{
  width:30px;height:30px;background:var(--pop);border:3px solid var(--ink);
  border-radius:0;box-shadow:3px 3px 0 rgba(0,0,0,.4);cursor:grab;
}

/* ==========================================================================
   5. FULL STACK
   ========================================================================== */
.stack{background:var(--ink);}
.stack__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:center;}
.stack__copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.stack .h2{color:var(--pop);-webkit-text-stroke:0;}
.stack__price{font-family:var(--heading);font-size:clamp(30px,4vw,46px);line-height:1;}
.stack__price small{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;display:block;margin-top:4px;}
.stack__group{
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,.8vw,10px);
  padding:clamp(18px,3vw,34px);
}
.stack__group img{
  width:clamp(52px,8.4vw,116px);height:auto;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.6));
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.stack__group img:nth-child(odd){transform:translateY(-10px);}
.stack__group:hover img{transform:translateY(-16px);}
.stack__group:hover img:nth-child(even){transform:translateY(0);}

/* ==========================================================================
   6. CHIP PIT
   ========================================================================== */
.pit{
  position:relative;height:100svh;min-height:520px;padding:0;overflow:hidden;
  background:radial-gradient(130% 100% at 50% 18%,var(--flavor-light),var(--flavor) 45%,var(--flavor-dark) 100%);
}
.pit__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.pit__bg::before{
  content:"";position:absolute;inset:-30%;
  background:repeating-conic-gradient(from 0deg at 50% 28%,
    rgba(255,255,255,.13) 0 6deg,transparent 6deg 13deg);
}
.pit__bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(23,11,4,.5) 1.3px,transparent 1.6px);
  background-size:13px 13px;opacity:.26;
}
.pit__world{position:absolute;inset:0;z-index:2;}
.pit__world canvas{display:block;}
.pit__head{position:absolute;left:0;right:0;top:9vh;z-index:5;text-align:center;pointer-events:none;padding-inline:var(--gutter);}
.pit__head h2{
  font-family:var(--heading);font-size:clamp(50px,12vw,164px);line-height:.82;
  text-transform:uppercase;color:var(--paper);
  -webkit-text-stroke:clamp(2px,.5vw,5px) var(--ink);
  text-shadow:8px 8px 0 rgba(0,0,0,.28);
}
.pit__head small{
  display:inline-block;font-family:var(--display);
  font-size:clamp(11px,1.5vw,17px);background:var(--ink);color:var(--paper);
  padding:7px 12px;transform:rotate(-1.5deg);margin-top:8px;
}
.pit__can{
  position:absolute;z-index:3;left:clamp(-40px,4vw,90px);top:-3vh;
  height:clamp(220px,40vh,420px);transform:rotate(122deg);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.4));pointer-events:none;
}
.pit__ctrl{
  position:absolute;left:50%;bottom:26px;z-index:6;translate:-50% 0;
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding-inline:12px;
}

/* ==========================================================================
   7. PROOF + STOCKISTS + NEWSLETTER
   ========================================================================== */
.proof{background:var(--paper);color:var(--ink);text-align:center;}
.proof .h2{-webkit-text-stroke:0;color:var(--ink);}
.proof__inner{display:flex;flex-direction:column;align-items:center;gap:18px;}

.stockists{background:var(--flavor-dark);text-align:center;}
.stockists__inner{display:flex;flex-direction:column;align-items:center;gap:18px;}

.news{background:var(--pop);color:var(--ink);text-align:center;position:relative;}
.news__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;}
.news .h2{-webkit-text-stroke:0;color:var(--ink);}
.news__form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px;}
.news__input{
  flex:1 1 240px;background:var(--paper);border:3px solid var(--ink);
  padding:14px 16px;font-size:14px;color:var(--ink);
}
.news__input::placeholder{color:rgba(23,11,4,.45);}
.news__consent{font-size:11px;opacity:.7;max-width:46ch;}

/* ==========================================================================
   8. Responsive
   ========================================================================== */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .hero__copy{align-items:center;}
  .hero__lede{max-width:44ch;}
  /* full width, or justify-items:center shrinks the stage to the can's own
     width and the badge ends up sitting on the label */
  .hero__stage{min-height:min(46vh,420px);order:-1;width:100%;}
  .hero__can{height:min(46vh,420px);}
  .why__grid{grid-template-columns:1fr;}
  .heat__inner,.stack__inner{grid-template-columns:1fr;}
  .heat__copy,.stack__copy{align-items:center;text-align:center;}
  .heat__slider{max-width:100%;}
}
@media (max-width:760px){
  /* the arc doesn't survive narrow widths — flatten it to a scroll rail */
  .lineup__fan{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,44vw);
    gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    /* start, not center — centring an overflowing track puts the first card
       off the left edge where scroll position 0 can never reach it */
    justify-content:start;
    padding-bottom:14px;-webkit-overflow-scrolling:touch;
  }
  .fan__item{scroll-snap-align:center;flex:none;}
  /* no arc in a scroll rail — flat items and upright cans */
  .fan__item:nth-child(n){transform:none;}
  .fan__item:nth-child(n) .fan__can{transform:none;}
  .fan__item:hover,.fan__item:focus-within{transform:translateY(-8px) scale(1.03);}
  .stack__group{flex-wrap:wrap;}
  .pit__can{display:none;}
  .pit__head{top:6vh;}
}
@media (max-width:520px){
  .hero__badge{width:74px;font-size:12px;}
  .hero__fly{display:none;}
  .hero__fly--keep{display:block;}
}