/* ===== Tokens ===== */
:root{
  --coral:#E8756B; --coral-deep:#DE6155; --cream:#F4E3BC; --cream-bright:#FAF0D8;
  --teal:#1E4E5F; --teal-deep:#153A47; --ink:#12242B; --ink-soft:#1b3440;
  --yellow:#F5C531; --orange:#F09443;
  --f-display:"Anton",system-ui,sans-serif;
  --f-slab:"Alfa Slab One",Georgia,serif;
  --f-script:"Grand Hotel",cursive;
  --f-cond:"Oswald",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,sans-serif;
  --wrap:1180px;
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='46' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 0 H1440 V14 L1413.0 8.7 L1384.6 8.2 L1366.2 11.8 L1346.0 14.5 L1310.4 10.3 L1284.5 34.3 L1262.4 21.6 L1227.7 32.9 L1197.2 16.3 L1171.0 25.9 L1135.5 20.5 L1109.7 35.9 L1088.5 39.4 L1053.0 27.5 L1016.8 21.6 L968.7 9.5 L930.7 29.9 L901.6 36.5 L881.6 11.2 L857.2 8.2 L822.5 27.7 L797.0 18.3 L748.5 13.0 L724.5 19.7 L708.4 18.4 L660.0 23.8 L621.0 11.1 L575.3 26.0 L555.8 30.9 L534.2 30.0 L514.8 42.2 L493.7 15.0 L473.6 27.0 L441.1 34.8 L396.9 43.3 L375.9 37.4 L330.6 23.9 L308.9 25.4 L281.7 14.5 L236.7 26.1 L213.0 6.1 L187.5 15.2 L156.3 28.7 L127.9 14.4 L105.0 22.5 L72.6 9.3 L25.7 25.6 L3.6 25.8 L0 17.9 L0 14 Z'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);background:var(--ink);color:var(--cream);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-weight:400;line-height:.95}
.body{font-family:var(--f-body);line-height:1.6;font-size:1rem}
.body--mute{color:rgba(244,227,188,.72)}
.body.sm{font-size:.82rem;line-height:1.55}
.script{font-family:var(--f-script);line-height:1}
.script--coral{color:var(--coral)} .script--ink{color:var(--ink)}
.script--yellow{color:var(--yellow)} .script--cream{color:var(--cream)}
.h-display{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.02em;line-height:.92}
.h-display--cream{color:var(--cream)} .h-display--coral{color:var(--coral)}
.h-sub{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);font-size:clamp(2rem,3.4vw,2.7rem)}

/* ===== Buttons / pills ===== */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-cond);font-weight:600;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;padding:14px 28px;border-radius:7px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn--fill{background:var(--coral-deep);color:var(--cream-bright);border-radius:6px;box-shadow:4px 4px 0 var(--ink)}
.btn--fill:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
#functions .btn--fill{box-shadow:4px 4px 0 var(--orange)}
#functions .btn--fill:hover{box-shadow:2px 2px 0 var(--orange)}
.btn--ink{background:var(--ink);color:var(--cream-bright);border-radius:6px;box-shadow:4px 4px 0 var(--cream)}
.btn--ink:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--cream)}
.btn--outline{background:transparent;color:var(--cream);border:1.5px solid rgba(244,227,188,.85);border-radius:7px}
.btn--outline:hover{background:rgba(244,227,188,.12)}
.pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-cond);font-weight:600;font-size:.86rem;letter-spacing:.04em;
  color:var(--cream);border:1.5px solid rgba(244,227,188,.6);border-radius:30px;padding:9px 20px;transition:border-color .2s}
.pill:hover{border-color:var(--coral);color:var(--coral)}
.pill__ic{display:inline-flex;align-items:center;color:inherit}
.pill__ic svg{width:17px;height:17px;display:block}

/* ===== Nav ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:flex-end;gap:30px;
  padding:22px clamp(20px,5vw,54px);transition:background .3s,padding .3s}
.nav.scrolled{background:rgba(18,36,43,.94);backdrop-filter:blur(6px);padding-top:12px;padding-bottom:12px}
.nav__links{display:flex;gap:30px;font-family:var(--f-cond);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream)}
.nav__links a{position:relative;opacity:.92}
.nav__links a:hover{opacity:1;color:var(--coral)}
.nav__cta{font-size:.74rem;padding:11px 22px}

/* ===== Hero ===== */
.hero{position:relative;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:90px 20px 0}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Carousel: slides stack and crossfade; js/main.js moves .is-active every few seconds */
.hero__slide{opacity:0;transition:opacity 1.6s ease-in-out}
.hero__slide.is-active{opacity:1}
/* Blur over the photos. On mouse/trackpad devices a ~500px radial window follows the cursor (--mx/--my set in js/main.js),
   clear in the middle and easing back into the blur at its edge. Touch devices just get the blur. */
.hero__blur{position:absolute;inset:0;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
@media (hover:hover) and (pointer:fine){
  .hero__blur{
    -webkit-mask:radial-gradient(circle 500px at var(--mx,50%) var(--my,45%),transparent 0,transparent 25%,rgba(0,0,0,.55) 65%,#000 100%);
    mask:radial-gradient(circle 500px at var(--mx,50%) var(--my,45%),transparent 0,transparent 25%,rgba(0,0,0,.55) 65%,#000 100%)}
}
.hero__shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,36,43,.5),rgba(18,36,43,.3) 35%,rgba(18,36,43,.32) 60%,rgba(18,36,43,.85));}
/* --logo-w drives the wordmark, its hard shadow and the tagline so they stay in proportion (Pencil: 479px logo, 9/6px shadow, 14px tagline) */
.hero__content{--logo-w:min(470px,62vw);position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--logo-w)*.03);margin-top:-6%}
.hero__wordmark{width:var(--logo-w);color:#FFF6D4;
  filter:drop-shadow(calc(var(--logo-w)*.019) calc(var(--logo-w)*.0125) 0 var(--coral-deep))}
.hero__wordmark svg{width:100%;height:auto;overflow:visible}
/* Centred under the letters (T stem → N), not the full box: the T crossbar overhangs 7.14% on the left,
   so a 7.14% left margin nudges the centred line right by half that. The trailing letter-spacing is cancelled with an equal left pad. */
.hero__sub{max-width:100%;margin-left:calc(var(--logo-w)*.0714);padding-left:.27em;text-align:center;text-wrap:balance;
  font-family:var(--f-cond);font-weight:500;letter-spacing:.27em /* spans T stem → N at desktop width */;text-transform:uppercase;
  font-size:max(9px,calc(var(--logo-w)*.029));line-height:1.5;color:var(--yellow)}
@media (max-width:560px){
  .hero__content{--logo-w:min(470px,80vw)}
  .hero__sub{letter-spacing:.2em;padding-left:.2em}
}

/* fist rail */
.fist-rail{position:absolute;left:0;right:0;bottom:0;z-index:1;height:min(34vh,290px);
  display:flex;justify-content:center;align-items:flex-end;gap:clamp(10px,4vw,64px);pointer-events:none;padding:0 4vw}
.fist{height:90%;width:auto;align-self:flex-end;transform:translateY(130%);filter:drop-shadow(0 -4px 10px rgba(0,0,0,.25))}
.fist img{height:100%;width:auto;display:block}
/* Fists slide up (in) / down (out) via .in class; stagger handled in js/main.js */
html.js .fist{transition:transform .7s cubic-bezier(.22,.9,.3,1.1)}
html.js .fist.in{transform:translateY(0)}

/* ===== Reveals (CSS + IntersectionObserver) ===== */
html.js [data-hero]{opacity:0}
html.js [data-hero="logo"]{animation:heroLogoIn .9s cubic-bezier(.2,.8,.3,1) .15s both}
/* then the wordmark's hard coral shadow slides out from behind it, like the cards */
html.js .hero__wordmark[data-hero="logo"]{animation:heroLogoIn .9s cubic-bezier(.2,.8,.3,1) .15s both,logoShadowIn .55s cubic-bezier(.3,1.6,.5,1) .95s both}
@keyframes logoShadowIn{
  from{filter:drop-shadow(0 0 0 var(--coral-deep))}
  to{filter:drop-shadow(calc(var(--logo-w)*.019) calc(var(--logo-w)*.0125) 0 var(--coral-deep))}}
html.js [data-hero="sub"]{animation:heroSubIn .6s ease .55s both}
@keyframes heroLogoIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes heroSubIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.85,.3,1)}
html.js .reveal[data-anim="left"]{transform:translateX(-70px)}
html.js .reveal[data-anim="right"]{transform:translateX(70px)}
html.js .reveal[data-anim="drop"]{transform:translateY(-60px) rotate(12deg)}
html.js .reveal[data-anim="waddle"]{transform:translateX(-80px)}
html.js .reveal.in{opacity:1;transform:none}
.cards .card:nth-child(2){--stagger:.12s}.cards .card:nth-child(3){--stagger:.24s}

/* ===== Strip ===== */
.strip{background:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px clamp(24px,6vw,80px)}
.strip__slogan{font-family:var(--f-cond);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(1rem,2.2vw,1.5rem);color:var(--cream)}
.strip__slogan .ast{color:var(--coral);margin:0 .4em}
.strip__open{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--cream)}

/* ===== Bands ===== */
.band{position:relative;padding:clamp(60px,8vw,110px) clamp(20px,5vw,64px)}
.band--cream{background:var(--cream-bright);color:var(--ink)}
.band--coral{background:var(--coral);color:var(--cream)}
.band--ink{background:var(--ink);color:var(--cream)}
.band__head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:46px;position:relative}
.band__head .h-display{font-size:clamp(2.6rem,6vw,4.4rem);color:var(--ink)}
.band--cream .band__head .h-display{color:var(--coral-deep)}
.band--coral .band__head .h-display{color:var(--cream)}
.band__head .script{font-size:clamp(1.7rem,3.2vw,2.3rem)}
.band__head-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,18px)}
/* sized to sit with the pizza (14vw/212px); the cheers glasses are deliberately larger (17vw/256px) */
.band__spot{width:clamp(120px,13.5vw,204px);height:auto;transform:rotate(-8deg);flex:0 0 auto}
@media (max-width:620px){.band__spot{width:100px}}

/* Megaphone (inline SVG from Pencil): swings in when the header reveals, then "talks" in loose syllable bursts.
   Body pulses from the grip; each zap bolt flickers outward from the mouth, staggered by --i. */
.mega{transform:none;overflow:visible}
.mega__body,.mega__zap{transform-box:view-box}
.mega__body{transform-origin:70px 150px}
.mega__zap{transform-origin:138px 62px}
html.js .band__head .mega{opacity:0;transform:translate(-30px,24px) rotate(-28deg) scale(.6)}
html.js .band__head.in .mega{animation:megaIn .9s cubic-bezier(.3,1.5,.5,1) .15s both}
html.js .band__head.in .mega__body{animation:megaTalk 3.4s ease-in-out 1.1s infinite}
html.js .band__head.in .mega__zap{animation:megaZap 3.4s ease-out calc(1.1s + var(--i)*.06s) infinite}
@keyframes megaIn{
  from{opacity:0;transform:translate(-30px,24px) rotate(-28deg) scale(.6)}
  60%{opacity:1}
  to{opacity:1;transform:none}}
/* three uneven "words", then a breath */
@keyframes megaTalk{
  0%,100%{transform:none}
  5%{transform:rotate(-3deg) scale(1.045)}
  10%{transform:rotate(-.5deg) scale(.99)}
  15%{transform:rotate(-2deg) scale(1.03)}
  21%{transform:rotate(.5deg) scale(1)}
  29%{transform:rotate(-3.5deg) scale(1.055)}
  38%{transform:rotate(0) scale(.995)}
  46%{transform:none}}
@keyframes megaZap{
  0%,46%,100%{opacity:1;transform:none}
  3%{opacity:.25;transform:scale(.82)}
  6%{opacity:1;transform:scale(1.12)}
  11%{opacity:.4;transform:scale(.9)}
  16%{opacity:1;transform:scale(1.08)}
  25%{opacity:.3;transform:scale(.85)}
  30%{opacity:1;transform:scale(1.16)}
  38%{opacity:.85;transform:scale(1.02)}}

/* grunge torn edges */
.grunge{position:absolute;left:0;right:0;height:44px;background:var(--ink);z-index:3;pointer-events:none;
  -webkit-mask:var(--torn) center/100% 100% no-repeat;mask:var(--torn) center/100% 100% no-repeat}
.grunge--top{top:-1px}
.grunge--bottom{bottom:-1px;transform:scaleY(-1)}

/* ===== Cards ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);max-width:var(--wrap);margin:0 auto}
.card{border-radius:5px;padding:34px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.cards .card:nth-child(1){--rot:-1deg}
.cards .card:nth-child(2){--rot:1.5deg}
.cards .card:nth-child(3){--rot:-.8deg}
.cards .card{transform:rotate(var(--rot,0deg))}
/* entrance: card rises in, then its block shadow slides out from behind it (staggered per card via --stagger) */
html.js .card.reveal{transform:translateY(40px) rotate(var(--rot,0deg));box-shadow:0 0 0 var(--sh);
  transition:opacity .7s ease var(--stagger,0s),transform .8s cubic-bezier(.2,.85,.3,1) var(--stagger,0s),
    box-shadow .5s cubic-bezier(.3,1.6,.5,1) calc(var(--stagger,0s) + .45s)}
html.js .card.reveal.in{transform:rotate(var(--rot,0deg));box-shadow:7px 7px 0 var(--sh)}
/* hover: straighten the card (only once its entrance has finished, so the stagger delay doesn't apply) */
html.js .card.reveal.settled{transition:transform .35s cubic-bezier(.2,.85,.3,1);transition-delay:0s}
html.js .card.reveal.settled:hover{transform:rotate(0deg) translateY(-6px)}
.card--dark{--sh:var(--coral-deep);background:var(--ink);box-shadow:7px 7px 0 var(--sh)}
.cards .card--dark:nth-child(2){--sh:var(--orange)}
.card--cream{--sh:var(--teal);background:var(--cream-bright);box-shadow:7px 7px 0 var(--sh)}
.card__date{font-family:var(--f-cond);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;color:var(--coral)}
.card--cream .card__date{color:var(--coral-deep)}
.card__rule{width:46px;height:3px;background:var(--coral)}
.card--cream .card__rule{background:var(--coral-deep)}
.card__title{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.02;letter-spacing:.01em;color:var(--cream)}
.card--cream .card__title{color:var(--ink)}
.card__sub{font-family:var(--f-body);font-size:.92rem;color:rgba(244,227,188,.72)}
.card--cream .card__sub{color:rgba(18,36,43,.7)}
.deals__cta{display:flex;justify-content:center;margin:46px 0 0}
.deals__float{position:absolute;right:clamp(2%,10.5vw,200px);top:44px;width:clamp(122px,14vw,212px);z-index:4;transform:rotate(6deg)}

/* Pizza (inline SVG from Pencil): once dropped in, it dangles from the crust and the cheese drips slowly
   stretch down and spring back. Drips are clipped copies of the art scaled from where they leave the crust. */
.pizza{height:auto;overflow:visible}
.pizza__slice,.pizza__drip{transform-box:view-box}
.pizza__slice{transform-origin:160px 15px}
html.js .pizza.in .pizza__slice{animation:pizzaDangle 6.5s ease-in-out 1s infinite}
html.js .pizza.in .pizza__drip{animation:pizzaDrip 5.4s cubic-bezier(.45,0,.55,1) calc(1.4s + var(--d)) infinite}
@keyframes pizzaDangle{
  0%,100%{transform:none}
  30%{transform:rotate(-3deg) translateY(3px)}
  65%{transform:rotate(2deg) translateY(-2px)}}
/* slow ooze, a stretched hang, then a springy snap back */
@keyframes pizzaDrip{
  0%,100%{transform:none}
  55%{transform:scaleY(1.55)}
  68%{transform:scaleY(1.62)}
  78%{transform:scaleY(.9)}
  86%{transform:scaleY(1.06)}
  93%{transform:scaleY(.98)}}

/* ===== Functions ===== */
.functions{display:flex;gap:clamp(36px,6vw,80px);align-items:center;flex-wrap:wrap;max-width:1240px;margin:0 auto}
/* Photo stack. Container is 1:0.72 so a 86%-wide 4:3 card in the front slot lands flush bottom-right (left 14%, top 10.4%).
   js/main.js rotates data-slot: front → tucks behind (photoTuck), back → front, queued photos wait hidden behind. */
.functions__photos{position:relative;flex:1 1 420px;aspect-ratio:1/.72}
.functions__photo{position:absolute;left:0;top:0;width:86%;border:5px solid var(--cream);border-radius:3px;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,.4);z-index:1;opacity:0;transform:rotate(-8deg) scale(.96);
  transition:left .9s cubic-bezier(.3,1.15,.4,1),top .9s cubic-bezier(.3,1.15,.4,1),transform .9s cubic-bezier(.3,1.15,.4,1),opacity .6s ease}
.functions__photo[data-slot="back"]{left:0;top:0;transform:rotate(-5deg);opacity:.9;z-index:2}
.functions__photo[data-slot="front"]{left:14%;top:10.4%;transform:rotate(2deg);opacity:1;z-index:3}
/* the outgoing front card swings out right, drops behind, and settles in the back slot (or fades into the queue) */
.functions__photo.is-tucking{animation:photoTuck 1.1s cubic-bezier(.45,0,.3,1) forwards}
.functions__photo.is-tucking.to-queue{animation-name:photoTuckQueue}
.functions__photo.is-tucking.is-reverse{animation-direction:reverse} /* "previous": the card swings back out to the front */
/* clickable/swipeable; pan-y keeps vertical page scrolling working on touch */
.functions__photos{cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.functions__photos:focus-visible{outline:2px solid var(--yellow);outline-offset:8px;border-radius:4px}
@keyframes photoTuck{
  0%{left:14%;top:10.4%;transform:rotate(2deg);opacity:1;z-index:3}
  42%{left:32%;top:2%;transform:rotate(9deg);opacity:1;z-index:3}
  43%{z-index:1}
  100%{left:0;top:0;transform:rotate(-5deg);opacity:.9;z-index:1}}
@keyframes photoTuckQueue{
  0%{left:14%;top:10.4%;transform:rotate(2deg);opacity:1;z-index:3}
  42%{left:32%;top:2%;transform:rotate(9deg);opacity:1;z-index:3}
  43%{z-index:0}
  100%{left:0;top:0;transform:rotate(-8deg) scale(.96);opacity:0;z-index:0}}
.functions__copy{flex:1 1 420px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.functions__copy .script{font-size:clamp(1.8rem,3.2vw,2.4rem)}
.functions .h-display{font-size:clamp(2.6rem,5.2vw,4.2rem);color:var(--cream)}
.functions .body{max-width:30ch}

/* ===== Social ===== */
.social{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;overflow:visible}
.social .h-display{font-size:clamp(2.4rem,6vw,4rem)}
.social .script{font-size:clamp(1.6rem,3vw,2.2rem)}
/* cheers illustration relocated to sit on top of the Visit panel */
.social__row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:20px}

/* ===== Visit ===== */
.visit{padding:clamp(40px,6vw,80px) clamp(20px,5vw,64px)}
.visit__panel{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;background:var(--cream-bright);color:var(--ink);
  border-radius:12px;display:grid;grid-template-columns:1fr 84px 1fr;padding:clamp(34px,4vw,56px);overflow:visible /* lets the duck's feet sit over the bottom edge */}
.visit__col{display:flex;flex-direction:column;gap:14px}
.visit__col--find{padding-left:8px}
.visit__col--find .btn{align-self:flex-start}
.visit__col .script{font-size:clamp(1.9rem,3vw,2.4rem)}
.hours{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:4px}
.hours li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(18,36,43,.14);padding-bottom:10px}
.hours__day{font-family:var(--f-cond);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;color:var(--ink)}
.hours__time{font-family:var(--f-cond);font-weight:600;color:var(--coral-deep);font-size:.95rem}
.tag-pill{align-self:flex-start;margin-top:8px;background:var(--ink);color:var(--cream);font-family:var(--f-cond);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.72rem;padding:9px 16px;border-radius:20px}
.visit__zig{width:30px;justify-self:center;margin:2px 0;color:var(--ink)}
.visit__zig svg{width:30px;height:100%;display:block;overflow:visible}
.addr{font-style:normal;font-family:var(--f-cond);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1.7;font-size:1.02rem}
.visit__duck{position:absolute;right:clamp(18px,3vw,44px);bottom:-12px;width:clamp(90px,9vw,130px)}
.visit__note{color:var(--teal);font-size:.94rem}
/* Duck (inline SVG from Pencil): wing starts lowered, swings up into the raised fist once the duck reveals,
   then gives an occasional "hear hear" pump. Pivot is the shoulder. */
.duck{height:auto;overflow:visible}
.duck__wing{transform-box:view-box;transform-origin:68px 116px}
html.js .duck .duck__wing{transform:rotate(-70deg)}
html.js .duck.in .duck__wing{animation:duckRaise .85s cubic-bezier(.3,1.55,.5,1) .55s both,duckPump 5s ease-in-out 2.6s infinite}
@keyframes duckRaise{from{transform:rotate(-70deg)}to{transform:none}}
@keyframes duckPump{
  0%,30%,100%{transform:none}
  7%{transform:rotate(-16deg)}
  13%{transform:rotate(4deg)}
  19%{transform:rotate(-10deg)}
  25%{transform:rotate(2deg)}}
.visit__wrap{position:relative;max-width:var(--wrap);margin:0 auto}
.visit__cheers{position:absolute;left:clamp(8px,5vw,72px);bottom:100%;width:clamp(150px,17vw,256px);z-index:1;pointer-events:none;transform-origin:bottom center}
html.js .visit__cheers{opacity:0;transform:translateY(150px);transition:opacity .3s ease .78s,transform .72s cubic-bezier(.2,.9,.35,1.22) .78s}
html.js .visit__cheers.in{opacity:1;transform:translateY(0)}
.visit__cheers img{width:100%;height:auto}

/* Beer bubbles: a layer masked to the beer pixels (cheers-beer-mask.png), so bubbles pass behind fingers and stop at the foam.
   Each .cheers__bub is a column the height of the beer; it rises by its own height while the dot (::after) wobbles. */
.cheers__fizz{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url("../assets/illu/cheers-beer-mask.png?v=2") 0 0/100% 100% no-repeat;mask:url("../assets/illu/cheers-beer-mask.png?v=2") 0 0/100% 100% no-repeat}
.cheers__glass{position:absolute;top:16%;height:44%;width:21.6%}
.cheers__glass--l{left:6%}
.cheers__glass--r{left:72.4%}
.cheers__bub{position:absolute;bottom:0;height:100%;width:var(--s);opacity:0}
.cheers__bub::after{content:"";position:absolute;bottom:0;left:0;width:100%;aspect-ratio:1;border-radius:50%;
  border:1px solid #03020C;background:rgba(255,236,160,.55)}
.cheers__bub--hi::after{border-color:rgba(3,2,12,.55);background:#FDF5D4}
html.js .visit__cheers.in .cheers__bub{animation:bubRise var(--t) cubic-bezier(.4,0,.7,1) var(--d) infinite}
html.js .visit__cheers.in .cheers__bub::after{animation:bubWobble calc(var(--t)/3) ease-in-out var(--d) infinite alternate}
@keyframes bubRise{
  0%{transform:translateY(8%);opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(-100%);opacity:0}}
@keyframes bubWobble{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* ===== Footer ===== */
.footer{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;
  padding:clamp(16px,2.8vw,40px)}
/* Squiggle field from Pencil: navy + squiggles at 20% over ink. Never scaled below its native 1440px so the lines keep their weight. */
.footer::before{content:"";position:absolute;inset:0;background:url("../assets/illu/footer-squiggles.svg") center top/max(100%,1440px) auto repeat-y;
  opacity:.2;pointer-events:none}
/* Panel per Pencil: 40px inset from every edge, 88% ink, 4px corners; the bar's rule runs the full panel width */
.footer{--fpad-x:clamp(24px,4.4vw,64px)}
.footer__inner{position:relative;z-index:2;background:rgba(18,36,43,.88);border-radius:4px}
.footer__cols{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(24px,4vw,64px);
  padding:clamp(32px,3.9vw,56px) var(--fpad-x) clamp(28px,3vw,44px)}
.footer__brand{display:flex;flex-direction:column;gap:14px;flex:0 1 340px}
.footer__links{display:flex;gap:clamp(24px,3vw,56px);flex:0 0 auto}
.footer__logo{display:block;width:118px;color:var(--cream)}
.footer__logo svg{width:100%;height:auto}
.footer__brand .sm{color:rgba(244,227,188,.66);max-width:40ch;line-height:1.6}
.footer__col{display:flex;flex-direction:column;gap:11px}
.footer__col h4{font-family:var(--f-cond);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);font-size:.82rem;margin-bottom:4px}
.footer__col a{font-size:.95rem;color:rgba(244,227,188,.84)}
.footer__col a:hover{color:var(--coral)}
.footer__bar{display:flex;justify-content:space-between;align-items:center;min-height:101px;
  padding:22px var(--fpad-x);border-top:1px solid rgba(244,227,188,.2);font-family:var(--f-body);font-size:13px;color:rgba(244,227,188,.8)}
.footer__bar .script{font-size:1.375rem}
.footer__bar .ast{font-size:.85rem;vertical-align:middle}
.footer__flag{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:clamp(118px,12vw,168px);z-index:3;pointer-events:none}
.footer__flag-base{display:block;width:100%;height:auto}
.footer__flag-cloth,.footer__flag-cloth2{position:absolute;inset:0;will-change:transform}
.footer__flag-cloth{transform-origin:14% 12%;animation:flagWave 2.3s linear infinite}
.footer__flag-cloth2{transform-origin:55% 12%;animation:flagWave 2.3s linear infinite;animation-delay:-.55s}
.footer__flag-cloth img,.footer__flag-cloth2 img{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
@keyframes flagWave{
  0%{transform:skewY(0deg) skewX(0deg) scaleX(1)}
  18%{transform:skewY(-4.8deg) skewX(-1.8deg) scaleX(.985)}
  33%{transform:skewY(2.8deg) skewX(1.1deg) scaleX(1.006)}
  50%{transform:skewY(-3.4deg) skewX(-1.2deg) scaleX(.99)}
  68%{transform:skewY(2deg) skewX(.8deg) scaleX(1.004)}
  84%{transform:skewY(-1.1deg) skewX(-.5deg) scaleX(.997)}
  100%{transform:skewY(0deg) skewX(0deg) scaleX(1)}
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .cards{grid-template-columns:1fr;max-width:460px}
  .functions{flex-direction:column}
  .functions__photos{width:100%;min-height:320px;flex-basis:auto}
  .visit__panel{grid-template-columns:1fr;gap:28px}
  .visit__zig{display:none}
  .visit__duck{position:static;align-self:center;margin-top:10px}
  .visit__cheers{width:clamp(140px,36vw,220px);left:4px}
  .footer__cols{flex-direction:column;gap:30px}
  .footer__links{flex-wrap:wrap;gap:28px 40px}
  .footer__flag{width:108px}
}
@media (max-width:560px){
  .nav__links{display:none}
  .strip{justify-content:center;text-align:center}
  .footer__links{flex-direction:column;gap:22px}
  .footer__bar{flex-direction:column;gap:10px;text-align:center}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
  html.js .reveal,html.js [data-hero]{opacity:1!important;transform:none!important;animation:none!important}
  .fist{transform:none!important;transition:none!important}
  html.js .band__head .mega,.mega__body,.mega__zap{opacity:1!important;transform:none!important;animation:none!important}
  .pizza__slice,.pizza__drip{animation:none!important}
  .cheers__fizz{display:none}
  html.js .duck .duck__wing{transform:none!important;animation:none!important}
  .footer__flag-cloth,.footer__flag-cloth2{animation:none!important}
  html{scroll-behavior:auto}
}