/* 주문 카드 장면 — 아이 화면과 학부모 페이지가 함께 쓴다 */
.scene{position:relative;width:100%;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;border-radius:6cqw;border:5px solid #222;background:#fff;--spd:1}
.scene *{pointer-events:none}
.sc-bg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#fafafa 0 12px,#f1f1f1 12px 24px);transition:filter .3s}
.scene[data-where="sea"] .sc-bg{background:linear-gradient(#8fd8ff 0 48%,#3fa9f5 48% 62%,#f7e3a0 62%)}
.scene[data-where="forest"] .sc-bg{background:linear-gradient(#c9f2ff 0 40%,#7ccf6b 40% 100%)}
.scene[data-where="space"] .sc-bg{background:radial-gradient(circle at 30% 20%,#4b3fa8,#151033 70%)}
.scene[data-where="snow"] .sc-bg{background:linear-gradient(#bfe6ff 0 55%,#ffffff 55%)}
.scene[data-where="sky"] .sc-bg{background:linear-gradient(#7cc4ff,#ffd9ec)}

.sc-deco{position:absolute;font-size:11cqw;line-height:1}
.sc-fx{position:absolute;font-size:9cqw;line-height:1;animation:sc-float calc(2.4s * var(--spd)) ease-in-out infinite}
.sc-hero{position:absolute;left:50%;top:54%;font-size:30cqw;line-height:1;transform:translate(-50%,-50%)}
.sc-who{display:inline-block;transform-origin:50% 85%}
.sc-empty{opacity:.35}
.sc-prop{position:absolute;font-size:.42em;right:-.55em;top:.1em;line-height:1}

/* 무엇을 */
.scene[data-what="dance"] .sc-who{animation:sc-dance calc(.7s * var(--spd)) ease-in-out infinite alternate}
.scene[data-what="dance"] .sc-prop{animation:sc-float calc(1.2s * var(--spd)) ease-in-out infinite}
.scene[data-what="run"] .sc-hero{animation:sc-run calc(1.6s * var(--spd)) ease-in-out infinite alternate}
.scene[data-what="run"] .sc-who{animation:sc-hop calc(.3s * var(--spd)) ease-in-out infinite alternate}
.scene[data-what="run"] .sc-prop{right:auto;left:-.6em;top:.45em}
.scene[data-what="sleep"] .sc-who{transform:rotate(80deg) translateX(8%);animation:sc-breathe calc(2.4s * var(--spd)) ease-in-out infinite}
.scene[data-what="sleep"] .sc-prop{top:-.25em;animation:sc-float calc(2.4s * var(--spd)) ease-in-out infinite}
.scene[data-what="eat"] .sc-who{animation:sc-chomp calc(.5s * var(--spd)) ease-in-out infinite alternate}
.scene[data-what="eat"] .sc-prop{top:.55em;right:-.35em}
.scene[data-what="ball"] .sc-prop{top:.5em;animation:sc-bounce calc(.55s * var(--spd)) ease-in infinite alternate}
.scene[data-what="ball"] .sc-who{animation:sc-hop calc(.55s * var(--spd)) ease-in-out infinite alternate}

/* 어떤 느낌 */
.scene[data-mood="happy"] .sc-bg{filter:saturate(1.35) brightness(1.05)}
.scene[data-mood="scary"] .sc-bg{filter:brightness(.42) saturate(.7) hue-rotate(-20deg)}
.scene[data-mood="scary"] .sc-deco{filter:brightness(.6)}
.scene[data-mood="scary"]::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,transparent 30%,rgba(30,0,60,.55))}
.scene[data-mood="pretty"]::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,170,210,.28),rgba(255,230,160,.18))}
.scene[data-mood="slow"]{--spd:3.2}
.scene[data-mood="big"] .sc-hero{font-size:52cqw;top:50%}
.scene[data-mood="big"] .sc-deco{font-size:7cqw}

@keyframes sc-float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12%) rotate(6deg)}}
@keyframes sc-dance{from{transform:rotate(-16deg) translateY(0)}to{transform:rotate(16deg) translateY(-8%)}}
@keyframes sc-run{from{left:24%}to{left:76%}}
@keyframes sc-hop{from{transform:translateY(0)}to{transform:translateY(-10%)}}
@keyframes sc-breathe{0%,100%{scale:1}50%{scale:1.06}}
@keyframes sc-chomp{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(4deg)}}
@keyframes sc-bounce{from{transform:translateY(-90%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.scene *{animation-duration:0s !important;animation-iteration-count:1 !important}}