.motion-scene{position:relative;width:100%;aspect-ratio:16/10;margin:0 0 13px;overflow:hidden;border:2px solid var(--ink);border-radius:13px;background:#162a55;isolation:isolate}
.motion-scene.large{width:100%;height:100%;min-height:300px;margin:0;border:0;border-radius:0}
.clip-badge{position:absolute;z-index:20;left:9px;top:9px;padding:5px 7px;border-radius:6px;background:#14233bd9;color:#fff;font:900 7px monospace;letter-spacing:.08em}.clip-badge:first-letter{color:#ff614d}
.motion-solar{background:radial-gradient(circle at 50% 50%,#263b70,#080e2c 72%)}.motion-solar .sun{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#ffd34e;box-shadow:0 0 18px #ffd34e,0 0 55px #ff8b32;animation:pulseSun 1.8s ease-in-out infinite}.planet-orbit{position:absolute;left:50%;top:50%;aspect-ratio:1;border:1px solid #ffffff40;border-radius:50%;animation:orbitSpin linear infinite}.planet-orbit i{position:absolute;left:50%;top:-6px;width:12px;height:12px;border-radius:50%;background:#55c8ff;box-shadow:0 0 8px #55c8ff}.orbit-one{width:52%;transform:translate(-50%,-50%);animation-duration:3.2s}.orbit-two{width:79%;transform:translate(-50%,-50%);animation-duration:5.6s;animation-direction:reverse}.orbit-two i{width:16px;height:16px;background:#ff8068}.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:starBlink .8s alternate infinite}.star.s1{left:14%;top:27%}.star.s2{right:12%;bottom:19%;animation-delay:.4s}
.motion-dino{background:linear-gradient(#85d8ff 0 64%,#a2cf65 64%)}.dino{position:absolute;z-index:5;left:15%;bottom:19%;font-size:clamp(50px,7vw,90px);filter:drop-shadow(0 7px 0 #31553c33);animation:dinoWalk 3.8s ease-in-out infinite}.dino-ground{position:absolute;left:0;right:0;bottom:0;height:21%;background:#508b48}.dust{position:absolute;bottom:18%;width:10px;height:10px;border-radius:50%;background:#dfd693;opacity:0;animation:dustPuff 3.8s infinite}.dust.d1{left:24%}.dust.d2{left:67%;animation-delay:1.8s}.cloud{position:absolute;width:55px;height:17px;border-radius:50px;background:#fff9;animation:cloudDrift 9s linear infinite}.cloud:after{content:"";position:absolute;left:14px;top:-10px;width:27px;height:25px;border-radius:50%;background:inherit}.cloud.c1{left:-20%;top:24%}.cloud.c2{left:46%;top:13%;animation-delay:-4s}.cloud.c3{left:78%;top:36%;animation-delay:-7s}
.motion-plane{background:linear-gradient(#68c7fa,#d8f5ff)}.plane{position:absolute;z-index:5;left:-22%;top:46%;font-size:65px;transform:rotate(8deg);animation:planeFly 5s ease-in-out infinite}
.motion-volcano{background:linear-gradient(#4f3154 0 65%,#291d27 65%)}.volcano{position:absolute;z-index:4;left:50%;bottom:-10px;transform:translateX(-50%);font-size:130px}.smoke{position:absolute;z-index:3;left:50%;top:40%;width:30px;height:30px;border-radius:50%;background:#d6c5d2aa;animation:smokeRise 2.4s infinite}.smoke.sm2{animation-delay:.7s}.smoke.sm3{animation-delay:1.4s}.spark{position:absolute;z-index:6;left:50%;top:45%;width:7px;height:7px;border-radius:50%;background:#ffce45;animation:sparkPop 1.2s infinite}.spark.sp2{animation-delay:.55s}
.motion-ocean{background:linear-gradient(#ffb866 0 52%,#267ac5 52%)}.sunset{position:absolute;left:18%;top:24%;width:53px;height:53px;border-radius:50%;background:#fff0a5;box-shadow:0 0 25px #fff0a5}.boat{position:absolute;z-index:7;left:42%;top:42%;font-size:53px;animation:boatRock 2.5s ease-in-out infinite}.wave{position:absolute;left:-20%;width:140%;height:34%;border:8px solid #72d5ef;border-color:#72d5ef transparent transparent;border-radius:50%;animation:waveMove 3s linear infinite}.wave.w1{top:58%}.wave.w2{top:69%;animation-delay:-1s}.wave.w3{top:80%;animation-delay:-2s}
.motion-robot{background:repeating-linear-gradient(90deg,#14233b 0 39px,#1b3154 40px)}.robot{position:absolute;left:50%;top:50%;font-size:95px;transform:translate(-50%,-50%);animation:robotDance 1.2s steps(2) infinite}.scan{position:absolute;left:0;right:0;height:3px;top:15%;background:#43edcf;box-shadow:0 0 12px #43edcf;animation:scanDown 2s ease-in-out infinite}.pixel{position:absolute;width:11px;height:11px;background:#ff614d;animation:pixelJump 1.4s alternate infinite}.pixel.p1{left:17%;bottom:20%}.pixel.p2{right:15%;top:24%;animation-delay:.5s;background:#ffd34e}
.motion-plant{background:linear-gradient(#9de3ff 0 70%,#8bc66b 70%)}.plant-pot{position:absolute;z-index:4;left:50%;bottom:12%;transform:translateX(-50%);color:#b9583c;font-size:70px}.sprout{position:absolute;z-index:3;left:50%;bottom:29%;width:8px;height:8px;background:#287a3b;transform-origin:bottom;animation:plantGrow 4s ease-in-out infinite}.sprout i,.sprout b{position:absolute;width:35px;height:19px;border-radius:90% 10% 90% 10%;background:#48aa58}.sprout i{right:2px;top:12px;transform:rotate(26deg)}.sprout b{left:3px;top:32px;transform:scaleX(-1) rotate(24deg)}.light-ray{position:absolute;right:-5%;top:-20%;width:45%;height:130%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#fff7ae70,transparent)}
.motion-bee{background:linear-gradient(#9adfff,#dff7bb)}.flower{position:absolute;bottom:8%;font-size:54px}.flower.f1{left:12%}.flower.f2{right:12%}.bee{position:absolute;z-index:5;left:44%;top:34%;font-size:43px;animation:beeFly 3.8s ease-in-out infinite}.bee-path{position:absolute;left:23%;top:27%;width:55%;height:44%;border:2px dashed #14233b55;border-radius:50%;transform:rotate(-12deg)}
.motion-electric{background:#14233b}.bulb{position:absolute;z-index:4;right:12%;top:24%;font-size:80px;animation:bulbGlow 1.4s steps(2) infinite}.wire{position:absolute;inset:22% 5% 5%;width:90%;height:65%}.wire path{fill:none;stroke:#4bd9ef;stroke-width:5;stroke-linecap:round}.wire circle{fill:#ffd34e;filter:drop-shadow(0 0 5px #ffd34e)}.bolt{position:absolute;left:11%;top:22%;font-size:58px;animation:boltBeat .8s alternate infinite}
.motion-result{padding:0}.motion-result .motion-scene{margin:0;border:0;border-radius:0;aspect-ratio:4/3}.article-hero .motion-scene{min-height:100%}
.motion-scene.has-generated-frames:not(.large){aspect-ratio:2/1;background:#080e15}.generated-film{position:absolute;z-index:12;inset:0;background:#080e15}.generated-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:generatedFrameCycle20 2s steps(1,end) infinite;animation-delay:calc(var(--frame) * .1s)}.contain-frames .generated-frame{object-fit:contain}.has-generated-frames .clip-badge{z-index:16;background:#14233be8}.frame-credit{position:absolute;z-index:16;right:7px;bottom:7px;max-width:78%;padding:5px 7px;border-radius:5px;background:#14233bd9;color:#fff;text-align:right;font:800 6px/1.2 monospace;letter-spacing:.05em}.motion-scene.large .frame-credit{right:12px;bottom:12px;font-size:7px}
@keyframes pulseSun{50%{transform:translate(-50%,-50%) scale(1.12)}}@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes starBlink{to{opacity:.2;transform:scale(.4)}}
@keyframes dinoWalk{0%,100%{left:6%;transform:translateY(0) rotate(-2deg)}45%{left:65%;transform:translateY(-7px) rotate(2deg)}55%{left:65%;transform:scaleX(-1)}95%{left:6%;transform:scaleX(-1) translateY(-5px)}}@keyframes dustPuff{0%,55%,100%{opacity:0;transform:scale(.2)}65%{opacity:.7;transform:scale(2)}}@keyframes cloudDrift{to{transform:translateX(420px)}}@keyframes planeFly{0%{left:-22%;top:59%}50%{top:25%}100%{left:108%;top:43%}}
@keyframes smokeRise{0%{transform:translate(-50%,20px) scale(.4);opacity:0}35%{opacity:.8}100%{transform:translate(-50%,-110px) scale(2.4);opacity:0}}@keyframes sparkPop{to{transform:translate(70px,-85px);opacity:0}}@keyframes boatRock{50%{transform:translateY(8px) rotate(8deg)}}@keyframes waveMove{to{transform:translateX(14%)}}
@keyframes robotDance{50%{transform:translate(-50%,-50%) rotate(8deg) scale(1.06)}}@keyframes scanDown{50%{top:82%}}@keyframes pixelJump{to{transform:translateY(-30px) rotate(90deg)}}@keyframes plantGrow{0%,15%{height:8px;transform:translateX(-50%) scale(.2)}65%,100%{height:115px;transform:translateX(-50%) scale(1)}}@keyframes beeFly{0%,100%{transform:translate(-80px,55px) rotate(-12deg)}50%{transform:translate(85px,-30px) rotate(12deg)}}@keyframes bulbGlow{50%{filter:drop-shadow(0 0 22px #ffd34e);transform:scale(1.08)}}@keyframes boltBeat{to{transform:scale(1.2);filter:drop-shadow(0 0 12px #ffd34e)}}
@keyframes generatedFrameCycle20{0%,4.9%{opacity:1}5%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.motion-scene *{animation-play-state:paused!important}}