.scene-frame{position:relative;margin:auto;flex-shrink:0;overflow:hidden;isolation:isolate;--camera-x:1%;--camera-y:0%;--camera-scale:1.028}
.scene-frame #art{width:100%;height:100%;object-fit:fill;animation:none;transform:none}
.scene-frame #art,.scene-frame #effects{animation:none;transform:none}
.scene-frame[data-camera=left]{--camera-x:-.9%;--camera-y:.1%}
.scene-frame[data-camera=right]{--camera-x:.9%;--camera-y:-.2%}
.scene-frame[data-camera=close]{--camera-x:0%;--camera-y:.35%;--camera-scale:1.04}
.scene-frame[data-camera=rise]{--camera-x:0%;--camera-y:-.7%;--camera-scale:1.025}
.scene-frame[data-camera=wide]{--camera-x:0%;--camera-y:0%;--camera-scale:1.012}
.scene-frame[data-camera=float]{--camera-x:.35%;--camera-y:-.3%;--camera-scale:1.025}
.effect{position:absolute;left:var(--x);top:var(--y);pointer-events:none;animation-delay:var(--delay,0s)!important}
.atmosphere{inset:0;left:0;top:0;background:radial-gradient(ellipse at 25% 8%,#fff3c428,transparent 58%);animation:soft-light 11s ease-in-out infinite alternate;mix-blend-mode:screen}
.foreground{left:0;top:90%;width:100%;height:10%;background:linear-gradient(100deg,transparent,#d9eda523,transparent);filter:blur(5px);animation:grass-light 7s ease-in-out infinite alternate}
.wind-line{width:27%;height:11%;border-top:1px solid #fffdf345;border-radius:50%;opacity:0;animation:wind-pass 13s ease-in-out infinite}
.cloud-drift{width:29%;height:11%;background:#fff5eb25;filter:blur(12px);border-radius:50%;animation:cloud-pass 25s ease-in-out infinite alternate}
.sunbeam{width:38%;height:65%;background:linear-gradient(125deg,#fff3b12b,transparent 67%);filter:blur(12px);transform-origin:top left;animation:ray-sway 15s ease-in-out infinite alternate;mix-blend-mode:screen}
.pollen{width:3px;height:3px;border-radius:50%;background:#fff4cf;box-shadow:0 0 7px #fff4cf;animation:pollen-drift 12s ease-in-out infinite;opacity:0}
.evening-wash{left:0;top:0;inset:0;background:linear-gradient(#f2a4c020,transparent 58%);animation:soft-light 14s ease-in-out infinite alternate;mix-blend-mode:soft-light}
.water-glint{width:4%;height:2px;border-radius:50%;background:#fff3c88a;box-shadow:0 0 5px #ffe6b666;animation:water-shine 6s ease-in-out infinite;opacity:0}
.star-glow{width:3px;height:3px;background:#fff8cb;border-radius:50%;box-shadow:0 0 7px #fff8b4;animation:star-breathe 7s ease-in-out infinite alternate;opacity:.2}
.warmth{width:25%;height:30%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#ffd57633,transparent 70%);mix-blend-mode:screen;animation:lamp-breathe 8s ease-in-out infinite alternate}
.scene-frame[data-tone=inside] .atmosphere{background:radial-gradient(ellipse at 30% 40%,#ffc55d22,transparent 70%)}
.scene-frame[data-tone=night] .atmosphere,.scene-frame[data-tone=home] .atmosphere{background:radial-gradient(ellipse at 75% 15%,#cbd9ff24,transparent 65%)}
.turn{animation:paper-arrive .7s cubic-bezier(.18,.7,.2,1)}
.series b{animation:cover-breathe 6s ease-in-out infinite alternate}
.backgrounded *{animation-play-state:paused!important}

@keyframes paper-arrive{from{opacity:.6}to{opacity:1}}
@keyframes soft-light{from{opacity:.35}to{opacity:.9}}
@keyframes grass-light{from{opacity:.25;transform:translateX(-3%)}to{opacity:.7;transform:translateX(3%)}}
@keyframes wind-pass{0%,100%{opacity:0;transform:translateX(-20%) rotate(-6deg)}40%{opacity:.5}80%{opacity:0;transform:translateX(80%) rotate(5deg)}}
@keyframes cloud-pass{from{transform:translateX(-15%);opacity:.25}to{transform:translateX(20%);opacity:.65}}
@keyframes ray-sway{from{transform:rotate(-4deg);opacity:.25}to{transform:rotate(4deg);opacity:.75}}
@keyframes pollen-drift{0%{transform:translate(0,10px);opacity:0}30%,60%{opacity:.55}100%{transform:translate(18px,-24px);opacity:0}}
@keyframes water-shine{0%,100%{opacity:0;transform:scaleX(.6)}50%{opacity:.7;transform:scaleX(1.35)}}
@keyframes star-breathe{from{opacity:.15;transform:scale(.8)}to{opacity:.7;transform:scale(1.2)}}
@keyframes lamp-breathe{from{opacity:.4}to{opacity:.85}}
@keyframes cover-breathe{from{box-shadow:0 0 0 0 #79628d00}to{box-shadow:0 0 0 5px #79628d12}}
.paused *,.paused *::before,.paused *::after{animation:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}
