:root{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020503}
body{overflow:hidden}
.stage{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 50% 22%,rgba(34,75,39,.3),transparent 45%),#020503}
.artwork-stage{position:relative;isolation:isolate;width:min(100vw,66.6667svh,32rem);aspect-ratio:2/3;overflow:hidden;background:#071008;box-shadow:0 0 5rem rgba(0,0,0,.92),0 0 0 1px rgba(228,191,95,.13)}
.approved-artwork{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.atmosphere{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.foliage-light{position:absolute;border-radius:50%;filter:blur(1.1rem);opacity:.48}
.foliage-light-left{left:-15%;top:2%;width:45%;height:35%;background:radial-gradient(circle,rgba(255,211,105,.38),rgba(215,151,43,.12) 42%,transparent 72%);animation:foliage-left 7s ease-in-out infinite alternate}
.foliage-light-right{right:-16%;top:28%;width:40%;height:43%;background:radial-gradient(circle,rgba(255,200,78,.3),rgba(126,169,63,.08) 44%,transparent 72%);animation:foliage-right 8.5s ease-in-out infinite alternate}
.golden-sweep{position:absolute;top:-15%;bottom:-15%;left:-38%;width:18%;background:linear-gradient(103deg,transparent,rgba(255,232,164,.25),rgba(255,194,63,.18),transparent);filter:blur(.65rem);transform:skewX(-13deg);animation:sweep 8s ease-in-out infinite}
.tree-glow{position:absolute;left:31%;top:34%;width:38%;height:25%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,226,130,.36),rgba(246,175,45,.15) 38%,transparent 70%);filter:blur(.55rem);animation:tree-pulse 4.2s ease-in-out infinite}
.path-light{position:absolute;left:44%;top:70%;width:16%;height:19%;background:linear-gradient(180deg,transparent,rgba(255,224,137,.54),rgba(255,177,45,.14),transparent);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);filter:blur(.45rem);transform-origin:50% 100%;animation:path-travel 5.2s ease-in-out infinite}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle at 38% 34%,rgba(255,245,202,.95),rgba(255,187,55,.48) 30%,transparent 72%);filter:blur(.08rem);animation:bokeh-drift var(--duration) ease-in-out var(--delay) infinite alternate}
.bokeh-1{--duration:6.4s;--delay:-1s;left:7%;top:18%;width:4.6%;aspect-ratio:1}
.bokeh-2{--duration:7.2s;--delay:-4s;left:82%;top:38%;width:3.8%;aspect-ratio:1}
.bokeh-3{--duration:5.8s;--delay:-2.2s;left:73%;top:72%;width:3%;aspect-ratio:1}
.bokeh-4{--duration:7.8s;--delay:-5s;left:15%;top:78%;width:5.2%;aspect-ratio:1}
.bokeh-5{--duration:6.8s;--delay:-3.5s;left:87%;top:9%;width:2.8%;aspect-ratio:1}
.bokeh-6{--duration:8.2s;--delay:-1.8s;left:6%;top:54%;width:2.4%;aspect-ratio:1}
.spark{position:absolute;width:.48rem;height:.48rem;opacity:0;background:radial-gradient(circle,#fff9dc 0 14%,#ffd36b 20% 34%,transparent 70%);filter:drop-shadow(0 0 .3rem #ffbb39);animation:sparkle 4.8s ease-in-out var(--delay) infinite}
.spark::before,.spark::after{content:"";position:absolute;left:50%;top:50%;background:rgba(255,224,137,.8);transform:translate(-50%,-50%)}
.spark::before{width:1px;height:160%}.spark::after{width:160%;height:1px}
.spark-1{--delay:.2s;left:48%;top:43%}.spark-2{--delay:1.4s;left:58%;top:51%}.spark-3{--delay:2.7s;left:42%;top:55%}.spark-4{--delay:3.5s;left:77%;top:68%}.spark-5{--delay:4.1s;left:28%;top:74%}
.continue-hit-area{position:absolute;z-index:6;left:31.5%;top:81.3%;width:37.5%;height:5.5%;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer}
.continue-hit-area:focus-visible{outline:2px solid #f0c967;outline-offset:-.3rem}
.continue-hit-area.is-activated{animation:continue-pulse .55s ease-out}
.cinematic-control{position:absolute;z-index:8;right:2.2%;bottom:1.4%;width:2rem;height:2rem;display:grid;place-items:center;padding:0;color:#e0bd6d;background:rgba(3,8,4,.78);border:1px solid rgba(224,189,109,.68);border-radius:50%;backdrop-filter:blur(6px);cursor:pointer;box-shadow:0 0 .9rem rgba(201,154,53,.22)}
.cinematic-control:focus-visible{outline:2px solid #f0c967;outline-offset:2px}
.cinematic-control svg{width:1rem;height:1rem;fill:currentColor}.play-icon{display:none}
.is-paused .pause-icon{display:none}.is-paused .play-icon{display:block}
.is-paused .atmosphere *{animation-play-state:paused!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes foliage-left{0%{transform:translate(-2%,-2%) scale(.96);opacity:.3}100%{transform:translate(8%,5%) scale(1.08);opacity:.6}}
@keyframes foliage-right{0%{transform:translate(4%,-3%) scale(1.04);opacity:.28}100%{transform:translate(-8%,7%) scale(.96);opacity:.56}}
@keyframes sweep{0%,15%{left:-38%;opacity:0}27%{opacity:.85}63%{left:122%;opacity:.58}76%,100%{left:122%;opacity:0}}
@keyframes tree-pulse{0%,100%{transform:scale(.94);opacity:.4}48%{transform:scale(1.08);opacity:.86}}
@keyframes path-travel{0%,12%{transform:translateY(14%) scaleY(.7);opacity:0}40%{opacity:.88}72%{transform:translateY(-18%) scaleY(1.18);opacity:.55}100%{transform:translateY(-28%) scaleY(1.25);opacity:0}}
@keyframes bokeh-drift{0%{transform:translate(-.4rem,.5rem) scale(.78);opacity:.25}55%{opacity:.75}100%{transform:translate(.75rem,-1rem) scale(1.18);opacity:.42}}
@keyframes sparkle{0%,62%,100%{transform:scale(.35) rotate(0);opacity:0}70%{transform:scale(1.35) rotate(16deg);opacity:1}79%{transform:scale(.7) rotate(30deg);opacity:.42}}
@keyframes continue-pulse{0%{box-shadow:inset 0 0 0 rgba(255,212,108,0)}50%{box-shadow:inset 0 0 2rem rgba(255,212,108,.3)}100%{box-shadow:inset 0 0 0 rgba(255,212,108,0)}}
@media (min-width:32rem) and (min-height:44rem){.stage{padding:1.25rem}.artwork-stage{max-height:calc(100svh - 2.5rem);border-radius:.2rem}}
@media (prefers-reduced-motion:reduce){.atmosphere *{animation:none!important}.foliage-light,.tree-glow,.path-light,.bokeh{opacity:.18}.golden-sweep,.spark{display:none}}