/* A separate scroll-controlled camera study; the original preview is untouched. */
.cinematic-experiment .cinema{height:620svh}
.cinematic-experiment .hero-art{width:1px;height:1px;top:50%;transform-origin:center;z-index:1}
.cinematic-experiment .hero-art img{display:block;width:100%;height:100%;object-fit:contain}
.cinematic-experiment .coffee-atmosphere{z-index:6}
.cinematic-experiment.intro-active .coffee-atmosphere{z-index:101}
.cinematic-experiment .coffee-bean{filter:blur(var(--depth-blur,0px)) drop-shadow(3px 8px 7px #5d321225);will-change:transform,opacity}
.foam-journey{position:absolute;left:0;top:0;z-index:3;width:600px;aspect-ratio:3/2;transform-origin:49% 27%;opacity:0;pointer-events:none;will-change:transform,opacity;clip-path:ellipse(26% 20% at 49% 27%)}
.foam-journey img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.foam-baby{opacity:0}
.lens-steam{position:absolute;inset:-10%;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 52%,#fff4dfd9,transparent 62%);will-change:opacity}
.cinematic-experiment .reveal-title{z-index:5}
.cinematic-experiment .reveal-cup-left{display:none}
.cinematic-experiment .reveal-cup-right{z-index:3}
.cinematic-experiment .stage-bottom{z-index:7;bottom:40px}
.view-comparison{display:flex;align-items:center;gap:24px}
.view-comparison a{color:inherit;font-size:9px;letter-spacing:.02em;text-underline-offset:4px;opacity:.7}
.cinematic-experiment .stage-wash{background:radial-gradient(ellipse at 50% 55%,#dfb57440,transparent 66%)}
@media(max-width:760px){.cinematic-experiment .cinema{height:580svh}.view-comparison{gap:14px}.view-comparison a{font-size:8px;max-width:115px;text-align:right;line-height:1.5}.cinematic-experiment .stage-bottom{bottom:44px}.cinematic-experiment .coffee-bean{filter:blur(var(--depth-blur,0px)) drop-shadow(1px 4px 3px #5d321220)}}
@media(prefers-reduced-motion:reduce){.cinematic-experiment .cinema{height:auto}.foam-journey,.lens-steam{display:none!important}.cinematic-experiment .hero-art{width:100%!important;height:45svh!important}.cinematic-experiment .reveal-cup-left{display:inline-block}.cinematic-experiment .stage-bottom{position:relative;inset:auto;justify-content:center;gap:25px;margin-top:45px}.view-comparison #progress{display:none}}
/* Oversized camera layers must clip without creating an internal scroll container. */
.cinematic-experiment .stage{overflow:clip}

/* Only the moving coffee surface is composited; the cup and rim stay in the artwork. */
.foam-morph{position:absolute;left:23%;top:7%;width:52%;height:40%;opacity:0;pointer-events:none;mask-image:radial-gradient(ellipse closest-side,#000 87%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 87%,transparent 100%)}

.announcement-confetti{position:absolute;inset:0;z-index:4;overflow:clip;pointer-events:none}
.announcement-confetti i{position:absolute;left:0;top:0;display:block;border-radius:1px;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.announcement-confetti{display:none!important}}

/* A shared wash follows the selected flavor across the scoreboard and order builder. */
.cinematic-experiment .order-experience{position:relative;isolation:isolate;--order-wash:#fbf3e4;--order-button-text:#fbf3e4}
.cinematic-experiment .order-experience::before{content:'';position:absolute;inset:-100px -18px -28px;z-index:-1;border-radius:8px;background:var(--order-wash);mask-image:linear-gradient(to bottom,transparent 0,#000 100px,#000 calc(100% - 160px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 100px,#000 calc(100% - 160px),transparent 100%);transition:background-color .55s ease;pointer-events:none}
.cinematic-experiment #game[data-order-team=girl] .order-experience{--order-wash:#eee4f1;--order-button-text:#e5c9f3}
.cinematic-experiment #game[data-order-team=boy] .order-experience{--order-wash:#e4edf5;--order-button-text:#c6dff7}
.cinematic-experiment #submitGuess,.cinematic-experiment #submitGuess:hover,.cinematic-experiment #submitGuess:active,.cinematic-experiment #submitGuess:disabled{background:#3c281e;border-color:#3c281e;color:var(--order-button-text);opacity:1;transition:color .35s ease}
@media(max-width:760px){.cinematic-experiment .order-experience::before{inset:-80px -10px -24px;mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 130px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 130px),transparent 100%)}}
@media(prefers-reduced-motion:reduce){.cinematic-experiment .order-experience::before,.cinematic-experiment #submitGuess{transition:none}}

/* Keep the cinematic frame filled as mobile browser toolbars expand and retract. */
.cinematic-experiment .stage{height:100dvh}
.cinematic-experiment .game-heading{position:relative;z-index:2;padding-bottom:16px}
.cinematic-experiment .game-heading h2{line-height:1.12;overflow:visible}
.cinematic-experiment .reveal-title .scene-link{border:0;padding:8px 14px;min-width:110px;min-height:64px;color:#9a7661;gap:0;margin-top:10px}
.cinematic-experiment .scene-link svg{display:block;width:96px;height:56px}
.cinematic-experiment .demo{position:static;inset:auto;align-self:center;max-width:100%;margin:18px 0 0;padding:8px 12px;border-radius:0;text-align:center;background:transparent;font-size:8px}
@media(max-width:760px){.cinematic-experiment .stage-bottom{bottom:max(18px,env(safe-area-inset-bottom))}.cinematic-experiment .reveal-title .scene-link{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.cinematic-experiment .stage{height:auto}}

/* Reference-based sign, beside the game title. The ground settles separately. */
.game-welcome{display:grid;grid-template-columns:minmax(230px,30%) minmax(0,1fr);align-items:center;gap:38px;margin:0 0 38px;position:relative;isolation:isolate;z-index:2}
.counter-sign{position:relative;width:100%;max-width:315px;margin:0;justify-self:start;isolation:isolate}
.counter-sign-art{position:relative;z-index:1;display:block;width:100%;height:auto;transform-origin:50% 70%;filter:drop-shadow(0 4px 3px #5a3b1810)}
.counter-sign-ground{position:absolute;z-index:0;display:block;left:50%;bottom:-9%;width:150%;height:auto;max-width:none;transform:translateX(-50%);opacity:.62;pointer-events:none;mask-image:radial-gradient(ellipse,#000 36%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse,#000 36%,transparent 72%)}
.counter-sign-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cinematic-experiment .game-welcome .game-heading{padding:0;min-width:0;justify-content:center;text-align:center}
.cinematic-experiment .game-welcome h2{font-size:clamp(48px,6.2vw,89px);line-height:1.13;margin:0;white-space:nowrap}
.counter-sign.is-scroll-driven .counter-sign-art{will-change:transform,opacity}
@media(max-width:960px) and (min-width:761px){.game-welcome{gap:24px;grid-template-columns:240px minmax(0,1fr)}.cinematic-experiment .game-welcome h2{font-size:clamp(40px,5.4vw,52px)}}
@media(max-width:760px){.game-welcome{grid-template-columns:1fr;gap:24px;margin-bottom:12px}.counter-sign{width:min(270px,74vw);justify-self:center}.cinematic-experiment .game-welcome h2{font-size:clamp(35px,9vw,52px)}.counter-sign-ground{width:140%}}
@media(prefers-reduced-motion:reduce){.counter-sign .counter-sign-art{opacity:1;transform:none;will-change:auto}.counter-sign .counter-sign-ground{opacity:.62;transform:translateX(-50%)}}