/* Landing page. Layout and flow from Ben's mockup, look from the design system (tokens.css). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100%; background:var(--cream); color:var(--ink); font-family:var(--font); font-weight:700; -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* the page gradient stays put behind the content, so the join bar's fade always matches it */
body::before{content:""; position:fixed; inset:0; z-index:-1; background:var(--page)}
img{display:block; max-width:100%}
[hidden]{display:none !important}
::selection{background:var(--gold)}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:10px}
button{font-family:inherit; -webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
.pin path{fill:var(--sky-deep)} .pin circle{fill:var(--paper)}

/* a word set as a sticker: ink outline, hard shadow, a little tilt */
.sticker{display:inline-block; padding:.02em .32em .1em; border:var(--border); border-radius:var(--r-chip); box-shadow:var(--drop-chip); white-space:nowrap}
.sticker.now{background:var(--tomato); color:var(--paper); rotate:-3deg; margin-top:.12em}
.sticker.lit{background:var(--sky); color:var(--ink); rotate:2deg; margin-top:.12em}

/* candy button: presses down into its shadow */
.candy{border:var(--border); border-radius:var(--r-pill); background:var(--candy-green); color:var(--paper); font-weight:900; cursor:pointer; box-shadow:var(--candy-shine), var(--drop-button); transition:transform .18s var(--spring), box-shadow .18s}
.candy:active{transform:translateY(var(--press)); box-shadow:var(--candy-shine), var(--drop-pressed)}
.candy[disabled]{opacity:.75; cursor:default}

/* ===================== HERO ===================== */
.hero{position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; padding:calc(12px + env(safe-area-inset-top)) 20px calc(150px + env(safe-area-inset-bottom)); overflow:hidden}
.top{width:100%; max-width:440px; display:flex; justify-content:center}
.wordmark{width:84px; height:auto}
h1{margin:8px 0 0; max-width:12em; text-align:center; font-weight:900; font-size:clamp(34px, 9.6vw, 60px); line-height:1.02; letter-spacing:-.02em; text-wrap:balance}
.value{margin:14px 0 0; text-align:center; font-size:17px; font-weight:700; line-height:1.35; color:var(--ink-2); max-width:310px}
/* the deal: one line, true for everyone (everyone gets in on 15 November; these two groups are guaranteed) */
.deal{margin:10px 0 0; max-width:320px; padding:6px 14px 7px; border:var(--border); border-radius:var(--r-chip); background:var(--gold); box-shadow:var(--drop-chip); rotate:-1.5deg; text-align:center; font-size:14px; font-weight:800; line-height:1.3; text-wrap:balance}
.deal b{font-weight:900}
.stage{position:relative; margin-top:22px; width:100%; display:flex; justify-content:center; flex:1; min-height:320px; --vh:min(42svh, 470px); --vw:calc(var(--vh) * 402 / 874); --gap:16px}

/* friend photo cards: profile + name top-left, max 2 stickers that never share a corner */
.pic{position:absolute; z-index:1; width:clamp(96px, 26vw, 160px); animation:bob 6s ease-in-out infinite}
.im{position:relative; aspect-ratio:4/5; border-radius:var(--r-tile); overflow:hidden; border:var(--border); box-shadow:var(--drop-card); background:var(--cream-mid)}
.im > img{width:100%; height:100%; object-fit:cover}
.who{position:absolute; left:5px; top:5px; display:flex; align-items:center; gap:4px; max-width:calc(100% - 10px); background:var(--glass); color:var(--ink); font-size:10px; font-weight:800; padding:2px 7px 2px 2px; border:1.5px solid var(--ink); border-radius:var(--r-pill); white-space:nowrap}
.who img{width:17px; height:17px; border-radius:50%; flex:none}
.tg{position:absolute; bottom:7px; display:flex; align-items:center; gap:3px; font-size:9.5px; font-weight:900; line-height:1; white-space:nowrap; padding:4px 7px; border:2px solid var(--ink); border-radius:9px; box-shadow:0 2px 0 var(--ink)}
.tg.l{left:6px} .tg.r{right:6px}
.tg.meal{background:var(--gold); text-transform:uppercase; border-radius:var(--r-pill); rotate:6deg}
.tg.loc{background:var(--paper); rotate:-3deg; padding-left:5px}
.tg.loc svg{width:10px; height:10px}
.tg.time{background:var(--paper); border-radius:var(--r-pill); font-variant-numeric:tabular-nums; rotate:-5deg}
.tg.dish{background:var(--ink); color:var(--paper); text-transform:uppercase; font-size:10.5px; rotate:-4deg}
.tg.vibe{background:var(--peach); font-size:10.5px; border-radius:var(--r-pill); rotate:-5deg}
/* cards sit beside the phone, never on it: anchored to its edges + a gap */
.p1, .p3{right:calc(50% + var(--vw) / 2 + var(--gap))}
.p2, .p4{left:calc(50% + var(--vw) / 2 + var(--gap))}
.p1{top:4%; rotate:-6deg} .p3{bottom:8%; rotate:5deg; animation-delay:-4s}
.p2{top:10%; rotate:6deg; animation-delay:-2s} .p4{bottom:3%; rotate:-5deg; animation-delay:-1s}
@keyframes bob{0%,100%{translate:0 0} 50%{translate:0 -8px}}
/* desktop: a taller phone and the cards staggered outwards so they never overlap */
@media (min-width:900px){
  h1{max-width:15em}
  .stage{--vh:min(46svh, 520px); --gap:32px}
  .pic{width:180px}
  .p1{top:0; right:calc(50% + var(--vw) / 2 + var(--gap) + 150px)}
  .p2{top:4%; left:calc(50% + var(--vw) / 2 + var(--gap) + 150px)}
  .p3{bottom:4%} .p4{bottom:0}
}

/* ===================== SCROLLING STRIP ===================== */
.strip{overflow:hidden; padding:26px 0 14px}
.track{display:flex; gap:14px; width:max-content}   /* slides from js/landing.js */
.track .pic{position:relative; width:136px; animation:none}
.track .pic:nth-child(odd){rotate:-3deg} .track .pic:nth-child(even){rotate:3deg; margin-top:10px}

/* ===================== IDENTITY ===================== */
.identity{text-align:center; padding:26px 0 0}
.identity h2{margin:0 auto; padding:0 20px; max-width:12em; font-weight:900; font-size:clamp(32px, 9vw, 54px); line-height:1.04; letter-spacing:-.02em; text-wrap:balance}
.identity > p{margin:14px auto 0; padding:0 20px; font-size:17px; color:var(--ink-2); max-width:330px}

/* ===================== FOOTER ===================== */
footer{text-align:center; padding:30px 20px calc(190px + env(safe-area-inset-bottom)); font-size:13px; color:var(--ink-2)}
footer nav{display:flex; justify-content:center; flex-wrap:wrap; gap:4px 18px}
footer p{margin:10px 0 0; font-size:12px; font-weight:700}
footer a{color:inherit; font-weight:800; text-decoration:none; min-height:44px; display:inline-flex; align-items:center}
.soc{gap:6px}

/* ===================== JOIN BAR ===================== */
.join{position:fixed; left:0; right:0; bottom:0; z-index:20; padding:22px 14px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(var(--cream-clear), var(--cream) 34%)}
.join form{position:relative; max-width:440px; margin:0 auto; background:var(--paper); border:var(--border); border-radius:var(--r-card); padding:9px 9px 8px; box-shadow:var(--drop-card)}
/* "ben saved you a spot": sits on top of the join card when someone arrives through a friend's link */
.invited{position:absolute; left:50%; top:-14px; translate:-50% -100%; display:flex; align-items:center; gap:6px; padding:6px 14px 6px 10px; border:var(--border); border-radius:var(--r-pill); background:var(--gold); box-shadow:var(--drop-chip); font-size:14px; font-weight:900; white-space:nowrap; rotate:-2deg}
.invited::before{content:""; width:26px; height:15px; background:url(../assets/brand/buds-mouth.webp) center/contain no-repeat}
.row{display:flex; gap:8px; padding-bottom:5px}
.row input{flex:1; min-width:0; height:52px; border:var(--border); border-radius:var(--r-tile); background:var(--cream-mid); padding:0 14px; font:800 16px var(--font); color:var(--ink); caret-color:var(--tomato); outline:none; -webkit-appearance:none; appearance:none}
.row input::placeholder{color:var(--ink-3)}
.row input:focus{background:var(--white); box-shadow:0 0 0 3px var(--gold)}
.row input.bad{border-color:var(--tomato); box-shadow:0 0 0 3px var(--tomato-ring)}
.go{flex:none; height:52px; padding:0 18px; font-size:16px}
.err{margin:6px 4px 0; font-size:13px; font-weight:800; color:var(--peach-deep)}
.meta{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 4px 2px; font-size:12.5px; font-weight:800; color:var(--ink-2)}
.clock{display:flex; align-items:center; gap:6px; white-space:nowrap}
.clock i{width:8px; height:8px; border-radius:50%; background:var(--tomato); animation:live 1.4s ease-in-out infinite}
@keyframes live{50%{opacity:.3}}
.clock b{color:var(--ink); font-weight:900; font-variant-numeric:tabular-nums}
.cnt{white-space:nowrap} .cnt b{color:var(--ink); font-weight:900; font-variant-numeric:tabular-nums}
.legal{margin:4px 4px 0; font-size:11.5px; font-weight:700; line-height:1.35; color:var(--ink-2); text-align:center}
.legal a{color:var(--ink); font-weight:800; text-underline-offset:2px}
/* very narrow phones: the button goes under the field */
@media (max-width:359px){ .row{flex-direction:column} .go{width:100%} }

/* ===================== FALLING FOOD ===================== */
.rain{position:fixed; inset:0; z-index:15; pointer-events:none; overflow:hidden}
.drop{position:absolute; top:-110px; width:var(--sz); animation:fall var(--dur) cubic-bezier(.45,0,.75,1) var(--dl) forwards}
.drop img{width:100%; height:auto; animation:spin var(--dur) linear var(--dl) forwards}
@keyframes fall{to{transform:translate(var(--dx), calc(100svh + 160px))}}
@keyframes spin{to{rotate:var(--rot)}}

/* ===================== THE BITES ===================== */
/* the join button takes a bite when pressed (the mask only exists while bitten, so the button keeps its shadow) */
@property --b{syntax:'<length>'; inherits:false; initial-value:0px}
.go{--b:0px; transition:transform .18s var(--spring), box-shadow .18s, --b .18s var(--spring)}
.go.bit{--b:15px;
  -webkit-mask:radial-gradient(circle var(--b) at calc(100% - 2px) 9px, #0000 97%, #000), radial-gradient(circle calc(var(--b) * .8) at calc(100% - 24px) -2px, #0000 97%, #000), radial-gradient(circle calc(var(--b) * .75) at calc(100% + 2px) 30px, #0000 97%, #000); -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--b) at calc(100% - 2px) 9px, #0000 97%, #000), radial-gradient(circle calc(var(--b) * .8) at calc(100% - 24px) -2px, #0000 97%, #000), radial-gradient(circle calc(var(--b) * .75) at calc(100% + 2px) 30px, #0000 97%, #000); mask-composite:intersect}
.crumb{position:fixed; z-index:110; width:10px; height:10px; border-radius:2px; pointer-events:none; animation:crumb .75s var(--ease) forwards}
@keyframes crumb{to{transform:translate(var(--cx), var(--cy)) rotate(220deg); opacity:0}}

/* the landing gets eaten in 3 bites: the next page sits on top in a layer whose mask opens bite by bite.
   Bite radii (--b1..3) are animated from JS. */
.eaten{position:fixed; inset:0; z-index:100; pointer-events:none; visibility:hidden;
  --m1:radial-gradient(circle var(--b1) at 100% 86%, #000 98%, #0000), radial-gradient(circle calc(var(--b1) * .72) at calc(100% - var(--b1) * 1.05) calc(86% + var(--b1) * .45), #000 98%, #0000), radial-gradient(circle calc(var(--b1) * .7) at calc(100% - var(--b1) * .45) calc(86% - var(--b1) * .95), #000 98%, #0000);
  --m2:radial-gradient(circle var(--b2) at 0% 22%, #000 98%, #0000), radial-gradient(circle calc(var(--b2) * .72) at calc(var(--b2) * 1.05) calc(22% - var(--b2) * .45), #000 98%, #0000), radial-gradient(circle calc(var(--b2) * .72) at calc(var(--b2) * .5) calc(22% + var(--b2) * .95), #000 98%, #0000);
  --m3:radial-gradient(circle var(--b3) at 100% 50%, #000 98%, #0000), radial-gradient(circle calc(var(--b3) * .7) at calc(100% - var(--b3) * 1.02) calc(50% - var(--b3) * .5), #000 98%, #0000), radial-gradient(circle calc(var(--b3) * .7) at calc(100% - var(--b3) * 1.02) calc(50% + var(--b3) * .5), #000 98%, #0000);
  -webkit-mask:var(--m1), var(--m2), var(--m3); mask:var(--m1), var(--m2), var(--m3);
  --b1:0px; --b2:0px; --b3:0px}
.eaten iframe{display:block; width:100%; height:100%; border:0; background:var(--paper)}
.eaten.go-eat{visibility:visible}
.eaten.calm{visibility:visible; -webkit-mask:none; mask:none; opacity:0; transition:opacity .3s ease}
.eaten.calm.in{opacity:1}

.toast{position:fixed; left:50%; top:calc(16px + env(safe-area-inset-top)); z-index:90; max-width:calc(100% - 32px); transform:translate(-50%, -20px); opacity:0; background:var(--ink); color:var(--paper); padding:11px 16px; border-radius:var(--r-pill); font-weight:800; font-size:14px; text-align:center; transition:opacity .25s ease, transform .3s var(--ease); pointer-events:none}
.toast.show{opacity:1; transform:translate(-50%, 0)}

@media (prefers-reduced-motion: reduce){
  .rain{display:none}
  .pic, .clock i{animation:none !important}
  .strip{overflow-x:auto; scrollbar-width:none}
  .candy{transition:none}
}