/* Naaisi case: one restrained motion language across all chapters. */
:root{--ease-out:cubic-bezier(.2,.72,.18,1);--ease-spring:cubic-bezier(.18,1.18,.32,1)}
body{overflow-x:hidden}
.hero-intro h1{font-size:clamp(42px,6vw,78px);line-height:1.16;text-wrap:balance}
.hero{overflow:hidden}.hero img{transform-origin:center 60%;animation:naaisi-hero-arrive 1.25s var(--ease-out) both}
.chapter{scroll-margin-top:62px}.chapter .inner{position:relative}
.chapter h2,.closing h2{text-wrap:balance}

/* WHAT IF: a real, separately extracted tube is the pointer-responsive layer. */
#what-if .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,68px)}
.toothpaste-stage{position:relative;isolation:isolate;min-height:clamp(490px,52vw,680px);margin:0;overflow:hidden;border-radius:28px;background:radial-gradient(circle at 46% 38%,#d8f7ff 0,#b7e8f6 38%,#8fc6ed 85%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)}
.toothpaste-stage:before{content:"";position:absolute;z-index:1;left:-5%;right:-5%;top:8%;height:3px;background:linear-gradient(90deg,#f8ffff,#a4d4ec 54%,#f8ffff);box-shadow:0 2px 4px rgba(22,85,137,.12);transform:rotate(-2deg)}
.toothpaste-stage:after{content:"";position:absolute;left:-18%;right:-18%;bottom:-20%;height:38%;border-radius:50%;background:#fff;filter:blur(45px);opacity:.65;z-index:-1}
.toothpaste-peg{position:absolute;z-index:4;left:50%;top:5%;width:18px;height:47px;border-radius:4px;background:linear-gradient(90deg,#c99558,#f8dcab 44%,#d9a76b);box-shadow:2px 4px 6px rgba(44,87,118,.2);transform:translateX(-50%) rotate(-4deg);pointer-events:none}
.toothpaste-peg:after{content:"";position:absolute;left:6px;top:17px;width:5px;height:13px;border-radius:3px;background:#a77743}
.toothpaste-stage .toothpaste-product{position:absolute;z-index:2;left:50%;top:46%;width:min(78%,430px);height:90%;max-width:none;object-fit:contain;box-shadow:none;border-radius:0;transform-origin:50% 12%;transform:translate(calc(-50% + var(--tube-x,0px)),calc(-50% + var(--tube-y,0px))) rotate(var(--tube-r,-6deg));filter:drop-shadow(24px 26px 22px rgba(17,67,114,.18));transition:transform .7s var(--ease-out),filter .7s ease;will-change:transform}
.toothpaste-stage:hover .toothpaste-product{filter:drop-shadow(30px 34px 25px rgba(17,67,114,.25))}
.toothpaste-orbit{position:absolute;z-index:3;padding:8px 16px;border-radius:100px;background:rgba(255,255,255,.88);color:#133a83;font-size:13px;font-weight:700;letter-spacing:.1em;box-shadow:0 8px 24px rgba(28,96,155,.1);animation:naaisi-float 4s ease-in-out infinite}
.orbit-sour{left:5%;top:12%}.orbit-sweet{right:6%;top:23%;animation-delay:-1s}.orbit-cold{left:8%;bottom:25%;animation-delay:-2s}.orbit-hot{right:7%;bottom:17%;animation-delay:-3s}
.toothpaste-stage figcaption{position:absolute;z-index:4;bottom:16px;left:20px;right:20px;margin:0;color:#184379;font-size:12px;text-align:center;letter-spacing:.03em}

/* Bounce Cards reference: four images retain the original composite footprint. */
.flavour-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;width:min(100%,500px);margin:52px auto 0;perspective:1200px}
.flavour-card{position:relative;margin:0;overflow:hidden;aspect-ratio:510/767;border-radius:8px;background:#eaf5fb;transform:translateY(var(--card-y,0)) rotate(var(--card-r,0deg));transition:transform .65s var(--ease-spring),box-shadow .5s ease;box-shadow:0 10px 30px rgba(20,57,106,.08);cursor:default}
.flavour-card:nth-child(1){--card-r:-2deg}.flavour-card:nth-child(2){--card-r:2deg}.flavour-card:nth-child(3){--card-r:1.4deg}.flavour-card:nth-child(4){--card-r:-1.4deg}
.flavour-card:hover{--card-y:-14px;--card-r:0deg;z-index:2;box-shadow:0 28px 50px rgba(20,57,106,.2)}
.flavour-card img{width:100%;height:100%;object-fit:cover;box-shadow:none;border-radius:0;transition:transform .65s var(--ease-out)}.flavour-card:hover img{transform:scale(1.055)}
.flavour-gallery:has(.flavour-card:nth-child(1):hover) .flavour-card:nth-child(2){transform:translateX(15px) rotate(4deg)}
.flavour-gallery:has(.flavour-card:nth-child(2):hover) .flavour-card:nth-child(1){transform:translateX(-15px) rotate(-4deg)}
.flavour-gallery:has(.flavour-card:nth-child(3):hover) .flavour-card:nth-child(4){transform:translateX(15px) rotate(4deg)}
.flavour-gallery:has(.flavour-card:nth-child(4):hover) .flavour-card:nth-child(3){transform:translateX(-15px) rotate(-4deg)}
.flavour-card figcaption{position:absolute;left:12px;bottom:12px;margin:0;padding:4px 10px;border-radius:30px;background:rgba(255,255,255,.9);color:#153c7d;font-size:10px;font-weight:700;letter-spacing:.09em}

/* Film behaves like a high-quality GIF, without native playback chrome. */
#insight .film{overflow:hidden;border-radius:10px;background:#071c3c}#insight .film video{border-radius:0;pointer-events:none}#insight .film figcaption{padding:11px 16px;margin:0;background:#f4faff}

/* Answer: text and artwork have a legible left/right dialogue. */
#answer .answer-layout{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(24px,4.4vw,72px);align-items:center;max-width:1260px}
#answer .answer-copy{min-width:0}#answer .answer-title{font-size:clamp(35px,4vw,60px)}#answer .concept-grid{margin:14px 0 20px}#answer .concept{grid-template-columns:80px 1fr;gap:10px;padding:10px 0}#answer .body-copy{font-size:clamp(15px,1.25vw,17px);line-height:1.7}#answer .body-copy p{margin-bottom:.65em}
#answer .answer-art{position:relative;overflow:hidden;margin:0;border-radius:12px;background:#e8f6fb;transform:perspective(1000px) rotateY(var(--art-y,0deg)) rotateX(var(--art-x,0deg));transition:transform .55s var(--ease-out);box-shadow:0 24px 60px rgba(17,66,125,.12);will-change:transform}
#answer .answer-art img{width:100%;height:auto;object-fit:contain;transition:transform .7s var(--ease-out)}#answer .answer-art:hover img{transform:scale(1.035)}

/* Film frames and the final venue panels become individually addressable. */
#film .frames figure{overflow:hidden;border-radius:8px}#film .frames figure img{transition:transform .8s var(--ease-out)}#film .frames figure:hover img{transform:scale(1.045)}
.venue-gallery{margin:48px 0 0}.venue-gallery figure{margin:0;overflow:hidden;border-radius:7px;background:#e8f4fb;transition:transform .55s var(--ease-spring),box-shadow .5s ease}.venue-gallery figure:hover{transform:translateY(-9px) scale(1.012);box-shadow:0 22px 45px rgba(15,62,118,.16);z-index:2}.venue-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}.venue-gallery figure:hover img{transform:scale(1.035)}
.venue-main{aspect-ratio:1536/594}.venue-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.venue-details figure{display:flex;flex-direction:column}.venue-details img{height:auto;aspect-ratio:1.28;flex:none}.venue-details figcaption{display:grid;gap:5px;min-height:110px;padding:14px;background:#fff;color:#33445d;font-size:12px;line-height:1.6}.venue-details figcaption b{color:var(--blue);font-size:15px}

/* Motion only hides content after the script has successfully initialized. */
.motion-ready [data-reveal]{opacity:0;transform:translateY(24px);filter:blur(5px);transition:opacity .85s ease,transform .9s var(--ease-out),filter .9s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal="visual"]{transform:translateY(30px) scale(.97);filter:none}.motion-ready [data-reveal="title"]{transform:translateY(18px);filter:none}
.motion-ready [data-reveal].is-visible{opacity:1;transform:none;filter:none}
.motion-ready .flavour-card[data-reveal].is-visible{transform:rotate(var(--card-r,0deg))}.motion-ready .flavour-card[data-reveal].is-visible:hover{transform:translateY(-14px) rotate(0)}
.motion-ready .answer-art[data-reveal].is-visible{transform:perspective(1000px) rotateY(var(--art-y,0deg)) rotateX(var(--art-x,0deg))}
@keyframes naaisi-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes naaisi-hero-arrive{from{opacity:.3;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@media(max-width:900px){#answer .answer-layout{grid-template-columns:1fr}#answer .answer-art{margin-top:20px}#answer .answer-art img{min-height:0}#what-if .split{grid-template-columns:1fr}.toothpaste-stage{width:min(100%,600px);margin:36px auto 0}.venue-details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.toothpaste-stage{min-height:480px}.toothpaste-stage .toothpaste-product{width:90%;height:86%}.toothpaste-orbit{font-size:11px;padding:6px 10px}.flavour-gallery{gap:5px;margin-top:36px}.flavour-card figcaption{font-size:8px;left:5px;bottom:5px;padding:3px 6px}.venue-details{gap:9px}.venue-details figcaption{font-size:11px;padding:10px;min-height:135px}.venue-details figcaption b{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.motion-ready [data-reveal]{opacity:1;transform:none;filter:none}.toothpaste-stage .toothpaste-product{transform:translate(-50%,-50%)}}