/* Highway Roast, concept page. Every chapter is pinned and its motion is driven by the scroll,
   so the page only moves when the visitor moves. Fonts and GSAP are served from this folder:
   the page makes no third party request. */
/* Anton carries the display type: it is the closest free match to the lettering on the can.
   One weight only, so every rule that uses it stays at 400 and never asks for a fake bold. */
@font-face{font-family:Anton;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:Instr;font-weight:600;font-display:swap;src:url(fonts/instrument-sans-600-latin.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400-latin.woff2) format('woff2')}
@font-face{font-family:Plex;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600-latin.woff2) format('woff2')}

:root{
  --ink:#0A0908; --cream:#F3EADA; --muted:rgba(243,234,218,.62);
  --amber:#D98544; --green:#7C8B5A; --line:rgba(243,234,218,.16);
  --tint:#1A1512;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--cream);font:400 17px/1.7 Plex,Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:Anton,Impact,Arial,sans-serif;font-weight:400;letter-spacing:0;line-height:.94}

.ch{position:relative;z-index:1}
.pin{position:relative;height:100svh;overflow:hidden;
  background:radial-gradient(64% 54% at 50% 42%,#171210 0%,#0A0908 72%)}
.hold{position:relative;z-index:3;width:100%;max-width:1180px;margin:0 auto}
.kick{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--amber)}
.lede{color:var(--muted);max-width:46ch}

canvas.fluid{position:fixed;inset:0;width:100%;height:100%;z-index:66;pointer-events:none}
@media(hover:none),(prefers-reduced-motion:reduce){canvas.fluid{display:none}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:rgba(243,234,218,.1)}
.progress span{display:block;height:100%;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:0 50%}

.bar{position:fixed;top:0;left:0;right:0;z-index:95;display:flex;justify-content:space-between;
  padding:20px 26px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.mark{color:var(--cream);font-family:Anton,Impact,Arial,sans-serif;font-weight:400;font-size:12.5px}
@media(max-width:860px){.bar-mid{display:none}}

/* 01 the road */
.road-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.veil{position:absolute;inset:0;background:
  radial-gradient(64% 46% at 50% 46%,rgba(10,9,8,.78) 0%,rgba(10,9,8,0) 78%),
  linear-gradient(180deg,rgba(10,9,8,.74) 0%,rgba(10,9,8,.22) 40%,rgba(10,9,8,.92) 100%)}
.road-copy{position:absolute;left:0;right:0;top:14%;text-align:center;padding:0 clamp(16px,4vw,60px);z-index:3}
.title{font-size:clamp(46px,10.4vw,182px);line-height:.98;letter-spacing:.005em;text-transform:uppercase;
  margin:0;text-shadow:0 6px 44px rgba(10,9,8,.7)}
.sub{margin-top:22px;font-size:clamp(11px,1.3vw,17px);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream);text-shadow:0 2px 20px rgba(10,9,8,.9)}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln i{display:block;font-style:normal;will-change:transform}
.road-copy .lede{margin:0 auto}
/* the can: .fly is carried by the scroll, .bob floats on its own */
/* Same size and same offset as the can of chapter three, so the hand over is invisible. */
.fly2{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  padding-left:clamp(0px,16vw,260px);pointer-events:none;opacity:0;will-change:transform}
.fly2 img{height:min(54vh,470px);width:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.85))}

.fly{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  pointer-events:none;will-change:transform}
.canwrap{position:relative;display:flex;justify-content:center}
/* Beans orbiting the can. They sit inside the can's wrapper, so they ride the same scroll and
   the group never breaks apart. Sizes and offsets follow the can: they are in vh until the can
   stops growing at 560px, and then they stop too. */
.fly .bean{position:absolute;top:50%;left:50%;width:var(--bw);height:auto;z-index:var(--bz,1);
  margin-left:var(--bx);margin-top:var(--by);pointer-events:none;will-change:transform;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.fly .b1{--bw:min(19vh,166px,30vw); --bx:calc(-1*min(34vh,300px,37vw)); --by:calc(-1*min(15vh,132px)); --bz:3}
.fly .b2{--bw:min(12vh,106px,21vw); --bx:min(29vh,256px,33vw); --by:calc(-1*min(21vh,185px))}
.fly .b3{--bw:min(10vh,88px,18vw); --bx:calc(-1*min(23vh,202px,29vw)); --by:min(20vh,176px); --bz:3}
.fly .b4{--bw:min(16vh,142px,27vw); --bx:min(32vh,282px,36vw); --by:min(14vh,124px)}
.fly .b5{--bw:min(8.5vh,75px,15vw); --bx:calc(-1*min(10vh,90px,15vw)); --by:calc(-1*min(28vh,246px))}
.fly .b6{--bw:min(13.5vh,119px,24vw); --bx:min(14vh,124px,20vw); --by:min(26vh,228px); --bz:3}
.fly .b7{--bw:min(11vh,97px,19vw); --bx:calc(-1*min(42vh,370px,44vw)); --by:min(6vh,53px); --bz:3}
.fly .b8{--bw:min(9vh,79px,16vw); --bx:min(40vh,352px,42vw); --by:calc(-1*min(4vh,35px))}
.fly .b9{--bw:min(7.5vh,66px,14vw); --bx:calc(-1*min(17vh,150px,24vw)); --by:min(32vh,282px)}
.fly .b10{--bw:min(10.5vh,93px,18vw); --bx:min(21vh,185px,27vw); --by:calc(-1*min(30vh,264px)); --bz:3}
.fly .b11{--bw:min(6.5vh,57px,12vw); --bx:calc(-1*min(31vh,273px,35vw)); --by:calc(-1*min(27vh,238px))}
.fly .b12{--bw:min(8.5vh,75px,15vw); --bx:min(37vh,326px,40vw); --by:min(26vh,228px)}
/* the ones behind the can sit further away: softer and a touch darker */
.fly .b2,.fly .b4,.fly .b5,.fly .b8,.fly .b9,.fly .b11,.fly .b12{filter:blur(1.1px) brightness(.82)}
.fly img{position:relative;z-index:2;height:min(62vh,560px);width:auto;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.85));will-change:transform}
/* Real liquid, composited with screen. The clip has a warm background rather than a black one,
   so it is masked to a soft oval and the contrast is pushed: only the plume survives, no box. */
.splash{position:absolute;top:50%;left:50%;z-index:1;width:min(112vw,1240px);height:auto;opacity:0;
  transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:screen;
  filter:contrast(1.5) brightness(.86) saturate(1.15);
  -webkit-mask-image:radial-gradient(50% 46% at 50% 48%,#000 0%,rgba(0,0,0,.5) 54%,transparent 76%);
  mask-image:radial-gradient(50% 46% at 50% 48%,#000 0%,rgba(0,0,0,.5) 54%,transparent 76%)}
.side{position:absolute;z-index:3;top:54%;font-size:12.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cream);line-height:2.2;will-change:transform;
  text-shadow:0 2px 18px rgba(10,9,8,.9)}
.side-l{left:clamp(20px,6vw,86px);text-align:left}
.side-r{right:clamp(20px,6vw,86px);text-align:right}
@media(max-width:700px){.side{top:auto;bottom:74px;font-size:10px;letter-spacing:.18em;line-height:1.9}}
.badge{position:absolute;left:clamp(18px,4vw,60px);bottom:clamp(18px,5vh,52px);z-index:5;
  width:116px;height:116px;display:grid;place-items:center}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:ringspin 22s linear infinite}
.badge text{fill:var(--cream);font-family:Plex,Arial,sans-serif;font-size:9.4px;font-weight:600;letter-spacing:2px}
.badge .arrow{width:10px;height:10px;border-right:1.6px solid var(--amber);border-bottom:1.6px solid var(--amber);
  transform:rotate(45deg);animation:arrowdrop 2s ease-in-out infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes arrowdrop{0%,100%{opacity:.35;margin-top:-5px}50%{opacity:1;margin-top:5px}}
@media(max-width:700px){.badge{width:88px;height:88px}}

/* 02 the line up */
.lineup .pin{display:grid;place-items:center}
.stage{position:absolute;inset:0;background:radial-gradient(72% 62% at 50% 52%,var(--tint) 0%,#0A0908 72%);
  transition:none}
.track{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(40px,8vw,130px);
  padding-inline:50vw;will-change:transform}
.track img{height:min(46vh,430px);width:auto;flex:0 0 auto;opacity:.32;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));will-change:transform,opacity}
.flavour{position:absolute;z-index:4;left:0;right:0;bottom:14%;text-align:center;padding:0 24px}
.fl-name{font-size:clamp(28px,5.8vw,68px);letter-spacing:.01em}
.fl-notes{margin-top:12px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.counter{position:absolute;z-index:4;bottom:34px;right:clamp(24px,6vw,80px);font-size:12px;
  letter-spacing:.3em;color:var(--muted)}
.counter b{color:var(--cream);font-weight:600}

/* 03 inside: the can settles on the right of the copy, the beans burst up from below */
.fly3{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  padding-left:clamp(0px,16vw,260px);pointer-events:none;will-change:transform}
.fly3 img{height:min(54vh,470px);width:auto;filter:drop-shadow(0 40px 70px rgba(0,0,0,.85));
  will-change:transform;position:relative;z-index:2}
/* the three cans share one cell, so the box keeps the size of a single can and they cross fade */
.canbox{position:relative;display:grid}
.canbox img{grid-area:1/1;opacity:0}
.canbox img.on{opacity:1}
.fly3 img{position:relative;z-index:2}
/* the burst is a child of the can, so it always sits behind it and a little below, whatever the
   can does. Percentage margins resolve against the width, which is what centres it. */
/* The ribbon wraps the can: the same clip runs twice, one copy behind and one in front cut to a
   band, so the coil passes in front of the can where it should and behind it everywhere else. */
.twist{position:absolute;left:50%;top:50%;width:330%;margin-left:-165%;margin-top:-92.8%;height:auto;
  opacity:0;pointer-events:none;filter:hue-rotate(26deg) saturate(.7) brightness(1.04)}
.twist.back{z-index:1}
.twist.front{z-index:3;
  -webkit-mask-image:linear-gradient(to bottom,transparent 46%,#000 55%,#000 74%,transparent 83%);
  mask-image:linear-gradient(to bottom,transparent 46%,#000 55%,#000 74%,transparent 83%)}

/* The two drops meet in the middle of their own frame, so centring the clip on the can puts the
   collision exactly on it. One copy behind, one in front cut to a band, and no colour filter:
   the clip is already the right brown. */
/* the splash fills the screen, centred on the can rather than on the middle of the window */
.ball{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;
  opacity:0;pointer-events:none;
  /* the milk carries its own colour, so nothing is tinted here */
  /* an oval around the can, so the splash never crosses the column of copy */
  -webkit-mask-image:radial-gradient(64% 92% at 60% 50%,#000 0%,#000 30%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.2) 76%,transparent 92%);
  mask-image:radial-gradient(64% 92% at 60% 50%,#000 0%,#000 30%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.2) 76%,transparent 92%)}
.ball.back{z-index:3}
/* the band that passes in front fades over a long stretch, so its edge never reads as a cut */
.ball.front{z-index:5;
  -webkit-mask-image:radial-gradient(64% 92% at 60% 50%,#000 0%,#000 30%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.2) 76%,transparent 92%),
    linear-gradient(to bottom,transparent 26%,rgba(0,0,0,.5) 44%,#000 56%,#000 68%,rgba(0,0,0,.5) 80%,transparent 94%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(64% 92% at 60% 50%,#000 0%,#000 30%,rgba(0,0,0,.6) 56%,rgba(0,0,0,.2) 76%,transparent 92%),
    linear-gradient(to bottom,transparent 26%,rgba(0,0,0,.5) 44%,#000 56%,#000 68%,rgba(0,0,0,.5) 80%,transparent 94%);
  mask-composite:intersect}

@media(max-width:1000px){.fly3{padding-left:0;opacity:.3}}

/* 03 inside */
.inside .pin{background:#0A0908}
/* each frame carries the background of the chapter, so the one being wiped in covers the one
   underneath: without it the two blocks of copy read on top of each other */
.slide{position:absolute;inset:0;display:grid;align-items:center;
  background:radial-gradient(64% 54% at 50% 42%,#171210 0%,#0A0908 72%)}
.slide img,.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;
  will-change:transform}
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,9,8,.7) 0%,transparent 60%)}
.slide-copy{position:relative;z-index:3;max-width:620px;padding:0 clamp(24px,7vw,110px)}
.slide-copy h2{font-size:clamp(34px,6vw,80px);margin-bottom:18px}
.slide-copy p{color:var(--muted);max-width:44ch;margin-bottom:14px}
.flavours{list-style:none;margin-top:26px;display:grid;gap:9px;max-width:38ch}
.flavours li{border-bottom:1px solid var(--line)}
.flavours button{display:flex;width:100%;justify-content:space-between;align-items:baseline;gap:18px;
  padding:0 0 9px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;
  transition:padding-left .3s}
.flavours button:hover,.flavours button:focus-visible{padding-left:10px;outline:none}
.flavours button::before{content:"";position:absolute;left:0;width:3px;height:14px;margin-top:3px;
  background:var(--amber);opacity:0;transition:opacity .3s}
.flavours li{position:relative}
.flavours button.picked::before{opacity:1}
.flavours button.picked b{color:var(--amber)}
.flavours b{font-family:Anton,Impact,Arial,sans-serif;font-weight:400;font-size:17px;
  letter-spacing:.01em;color:var(--cream)}
.flavours span{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}

.spec{list-style:none;display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:22px}
.spec li{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px}
/* the questions */
/* it starts one screen earlier than it sits, so it covers the tail of the chapter above instead
   of letting an empty screen scroll by */
.faq{margin-top:-100svh;z-index:2}
.faq .pin{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(24px,5vw,70px);
  padding:0 clamp(24px,7vw,110px);
  /* clear at the top so the can from the chapter underneath stays in view as this one arrives,
     and solid by the time the questions begin */
  background:linear-gradient(180deg,transparent 0%,rgba(10,9,8,.5) 15%,#0A0908 31%)}
.faq-h{font-size:clamp(48px,9.4vw,160px);line-height:.9;letter-spacing:.005em;text-transform:uppercase}
.faq-list details{border-top:1px solid var(--line);padding:15px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:22px;
  font-size:clamp(14.5px,1.5vw,19px);color:var(--cream)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--amber);font-size:19px;line-height:1.2}
.faq-list details[open] summary::after{content:"3"}
.faq-list p{color:var(--muted);font-size:15px;margin-top:10px;max-width:56ch}
@media(max-width:900px){.faq .pin{grid-template-columns:1fr;align-content:center}
  .faq-h{font-size:clamp(38px,11vw,70px)}.faq-list p{font-size:14px}}

/* 05 the wholesale block that closes the page. The beans pour in from the top and pile up from
   the floor as the visitor reaches the end, so the copy sits in the upper half. */
/* The block fills up behind the copy: the clip pours in from the top and stacks from the floor,
   and a veil sits between it and the text so the words stay readable the whole way. */
.trade .pin{display:grid;place-items:center;text-align:center;
  padding:clamp(40px,7vh,90px) clamp(24px,7vw,110px)}
/* The beans rain in and pile up until the block is full. The clip starts transparent, so the
   block arrives empty and fills as the visitor scrolls, and a veil keeps the copy readable. */
.pour-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;
  z-index:1;pointer-events:none;display:block}
.trade .pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(62% 56% at 50% 46%,rgba(8,7,6,.88) 0%,rgba(8,7,6,.6) 58%,rgba(8,7,6,.3) 100%)}
.trade-in{position:relative;z-index:3;max-width:780px}
.trade-h{font-size:clamp(34px,min(7.6vw,11vh),116px);line-height:.94}
.trade-lede{margin:clamp(14px,2.4vh,22px) auto 0;max-width:48ch;color:var(--muted)}
.trade-acts{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(20px,4vh,38px)}
.trade-cta{display:inline-block;padding:17px 34px;border-radius:999px;background:var(--cream);
  color:var(--ink);text-decoration:none;font-weight:600;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;transition:transform .35s,background .35s,color .35s}
.trade-cta:hover{transform:translateY(-2px);background:var(--amber);color:var(--cream)}
.trade-cta.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 1px var(--line)}
.trade-cta.ghost:hover{background:var(--cream);color:var(--ink);box-shadow:none}
.trade-code{margin-top:clamp(14px,2.6vh,26px);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.trade-code b{color:var(--amber);font-weight:600;letter-spacing:.2em;
  border-bottom:1px dashed rgba(217,133,68,.5);padding-bottom:2px}
.trade-note{margin-top:clamp(12px,2.2vh,22px);font-size:12px;color:rgba(243,234,218,.45)}

@media (prefers-reduced-motion:reduce){
  .pin{height:auto;min-height:auto;padding-block:90px}
  .lineup .pin,.find .pin{display:block}
  .track{flex-wrap:wrap;justify-content:center;padding-inline:24px;gap:30px}
  .track img{opacity:1;height:auto;width:min(40vw,190px)}
  .flavour{position:static;margin-top:30px}
  .counter{position:static;text-align:right;margin-top:20px}
  .slide{position:relative;inset:auto;min-height:auto;padding-block:70px}
  .slide-copy{margin:0}
  .road-copy{position:static}
  .road-bg{opacity:.35}
  .fly{position:static;display:block}
  .faq .pin{display:block}
  .fly,.fly3,.rv,.twist{display:none}
  .badge{display:none}
  .fly img{margin:34px auto 0;height:auto;width:min(60vw,300px)}
  .side{position:static;text-align:center;margin-top:18px}
  .huge{display:none}
  .cue{display:none}
}