/* Kling motion layers preserve the original page geometry and source posters. */
:where(#mood-preview) .hero-art .living-photo,:where(#mood-preview) .film-button .living-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .65s}
:where(#mood-preview) .hero-art .living-photo{object-position:50% 0%;transform:scale(1.035) translateY(var(--hero-y,0px));filter:saturate(.95)}
:where(#mood-preview) .film-button .living-photo{object-position:50% 50%}
:where(#mood-preview) .living-photo.is-playing{opacity:1}
/* Keep portrait scene details in the visible hero at each layout width. */
:where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:50% 45%}
@media(max-width:680px){
  :where(#mood-preview) .hero .hero-art{height:150vw;max-height:660px;mask-image:linear-gradient(#000 75%,transparent)}
  :where(#mood-preview) .hero-art picture img,:where(#mood-preview) .hero-art .atmosphere-loop{object-position:center top;transform:scale(1.02)}
}
html.mood-preview-page[data-motion=off] .living-photo{opacity:0;transition:none}
:where(#mood-preview) .magic-wand{display:block;width:50px;height:50px;object-fit:contain;flex:none;margin:-16px -9px -16px -4px;pointer-events:none;filter:drop-shadow(0 1px 2px #39202525);transition:transform .4s,filter .4s}
html.mood-preview-page[data-motion=on] .button:hover .magic-wand,html.mood-preview-page[data-motion=on] .button:focus-visible .magic-wand{transform:rotate(-7deg) scale(1.12);filter:drop-shadow(0 0 5px #d6b46b80)}
:where(#mood-preview) .button.has-magic-wand{overflow:visible}
:where(#mood-preview) .button.has-magic-wand:after{display:none}
:where(#mood-preview) .button.has-magic-wand:hover{box-shadow:0 6px 26px #caa56c35}
:where(#mood-preview) .celestial-accent{display:block;object-fit:contain;width:100%;height:100%;pointer-events:none}
:where(#mood-preview) .small-star:has(.celestial-accent){width:30px;height:30px;margin:-6px;flex:none}
:where(#mood-preview) .quiz-star:has(.celestial-accent){width:145px;height:145px;line-height:1}
:where(#mood-preview) .card-cover-star:has(.celestial-accent){width:102px;height:102px;margin:0 auto}
:where(#mood-preview) .specimen-star:has(.celestial-accent){width:60px;height:60px}
:where(#mood-preview) .faq-sparkle:has(.celestial-accent){width:116px;height:116px}
:where(#mood-preview) .motion-study>video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%}
:where(#mood-preview) .motion-study .film-progress span{animation:none!important;transform:none!important;width:0;transition:width .2s linear}
:where(#mood-preview) .motion-study .motion-titles,:where(#mood-preview) .motion-study .motion-titles h2{animation:none}
:where(#mood-preview) .motion-study.paused>video{animation:none}
:where(#mood-preview) .film-button:hover .living-photo{transform:scale(1.025)}
:where(#mood-preview) .motion-study .motion-bottom>span{max-width:65%;line-height:1.5}
:where(#mood-preview) #mixer-title:focus-visible{outline:2px solid #b987af;outline-offset:10px}
html.mood-preview-page[data-motion=on] [data-base],html.mood-preview-page[data-motion=on] [data-garnish],html.mood-preview-page[data-motion=on] [data-glass],html.mood-preview-page[data-motion=on] [data-deck],html.mood-preview-page[data-motion=on] [data-ingredient],html.mood-preview-page[data-motion=on] [data-answer]{transition:transform .25s,background .3s,border-color .3s,box-shadow .3s}
html.mood-preview-page[data-motion=on] :is([data-base],[data-garnish],[data-glass],[data-deck],[data-ingredient],[data-answer]):hover{transform:translateY(-2px);box-shadow:0 5px 18px #66364b12}
html.mood-preview-page[data-motion=on] :is([data-base],[data-garnish],[data-glass],[data-deck],[data-ingredient],[data-answer]):active{transform:scale(.98)}
:where(#mood-preview) .magic-response{position:fixed;width:96px;height:96px;z-index:150;pointer-events:none;object-fit:contain;animation:magic-response 1.15s ease-out both}
@keyframes magic-response{0%{opacity:0;transform:translate(-50%,-40%) scale(.45) rotate(-12deg)}25%{opacity:.95}100%{opacity:0;transform:translate(-50%,-90%) scale(1.2) rotate(9deg)}}
html.mood-preview-page[data-motion=off] .magic-response{display:none}
@media(prefers-reduced-motion:reduce){:where(#mood-preview) .magic-response{display:none}:where(#mood-preview) .living-photo{transition:none}:where(#mood-preview) .magic-wand{transition:none}}
@media(max-width:680px){:where(#mood-preview) .quiz-star:has(.celestial-accent){width:90px;height:90px}:where(#mood-preview) .magic-wand{width:39px;height:39px}:where(#mood-preview) .card-cover-star:has(.celestial-accent){width:88px;height:88px}:where(#mood-preview) .hero-art .living-photo{object-position:center top;transform:scale(1.02)}:where(#mood-preview) .film-button .living-photo{object-position:50% 52%}}

/* A real user gesture remains available when the browser declines muted autoplay. */
:where(#mood-preview) .hero-play-fallback{position:absolute;top:18px;right:clamp(16px,4vw,48px);z-index:6;min-height:44px;padding:10px 16px;border:1px solid #ffffff80;border-radius:24px;background:#102c35dc;color:#fff;font:500 13px var(--sans);cursor:pointer}
:where(#mood-preview) .hero-play-fallback[hidden]{display:none!important}:where(#mood-preview) .hero-play-fallback:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* Keep the muted video visible from its poster onward: Safari can pause an opacity-zero video. */
:where(#mood-preview) .hero-art .atmosphere-loop{opacity:1;transition:none}