/* Variants 4–6 inherit the complete original layout from styles.css/themes.css.
   Only the content inside the existing small .scene-window is animated here. */
.motion-page .motion-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;container-type:size;background:#182d45;--motion-art-max:176px;--motion-swim-max:126.72px}
.motion-page .motion-scene[data-theme="legends"]{background:#294869;box-shadow:inset 0 -12px 26px #102a4840}
.motion-page .motion-scene[data-theme="arise"]{background:#111e30;box-shadow:inset 0 -12px 26px #010a1650}
.motion-page .motion-scene[data-theme="coast"]{background:#b8d4d3;box-shadow:inset 0 -12px 26px #477f8d30}
.motion-page .motion-scene::before{content:"";position:absolute;inset:94% 0 0;border-top:1px solid #a8c6d22b;background:#05192d12;z-index:0;pointer-events:none}
.motion-page .motion-scene[data-theme="coast"]::before{border-color:#669da54d;background:#9dc6c326}
/* The strip is exactly 4:1, containing three 4:3 frames. The art viewport must
   retain 4:3 at every window width so its background cannot stretch or bleed. */
.motion-page .motion-art{position:relative;z-index:1;flex:none;width:calc(100% - 8px);max-width:var(--motion-art-max);height:auto;aspect-ratio:4/3;overflow:hidden;background-repeat:no-repeat;background-size:300% 100%;background-position:0% 0%;background-origin:border-box;background-clip:border-box;animation:motion-frame-loop var(--motion-duration,2s) steps(1,end) infinite;will-change:background-position;pointer-events:none}
.motion-page .motion-scene[data-activity="swim"] .motion-art{width:calc((100% - 8px) * .6666667);max-width:var(--motion-swim-max);transform-origin:center center;animation:motion-frame-loop var(--motion-duration,1.8s) steps(1,end) infinite,motion-swim-crossing 12s linear infinite;will-change:background-position,transform}
/* Size queries use the actual small window, including a narrower 320px layout.
   The fixed max-width values above are a 140px/112px-window fallback. */
@supports(width:1cqh){
  .motion-page .motion-art{width:min(calc(100% - 8px),calc((100cqh - 8px) * 4 / 3));max-width:none}
  .motion-page .motion-scene[data-activity="swim"] .motion-art{width:min(calc((100% - 8px) * .6666667),calc((100cqh - 8px) * 4 / 3 * .72));max-width:none}
}
.motion-page .motion-water{position:absolute;inset:47% 3% 11%;display:none;z-index:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 11px,#d9faff40 12px 13px,transparent 14px 25px);opacity:.6;animation:motion-water 5s ease-in-out infinite}
.motion-page .motion-scene[data-activity="swim"] .motion-water{display:block}
.motion-page .motion-scene-status{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:9px;text-align:center;font-size:10px;line-height:1.35;letter-spacing:.2px;color:#dae8ef}
.motion-page .motion-scene[data-theme="coast"] .motion-scene-status{color:#264d5b}
.motion-page .motion-scene-status::before{content:"";display:block;width:13px;height:13px;flex:none;border:1px solid currentColor;transform:rotate(45deg);opacity:.5}
.motion-page .motion-scene[data-state="loading"] .motion-scene-status::before{animation:motion-loading 1.4s ease-in-out infinite}
.motion-page .motion-scene.is-paused *,.is-hidden .motion-scene *{animation-play-state:paused!important}
@keyframes motion-frame-loop{0%{background-position:0% 0%}25%{background-position:50% 0%}50%{background-position:100% 0%}75%{background-position:50% 0%}100%{background-position:0% 0%}}
@keyframes motion-loading{50%{opacity:.18}}
@keyframes motion-water{0%,100%{transform:translateX(-1.5%)}50%{transform:translateX(1.5%)}}
@keyframes motion-swim-crossing{0%{transform:translateX(-25%) scaleX(1)}49.999%{transform:translateX(25%) scaleX(1)}50%{transform:translateX(25%) scaleX(-1)}99.999%{transform:translateX(-25%) scaleX(-1)}100%{transform:translateX(-25%) scaleX(1)}}
@media(max-width:480px){.motion-page .motion-scene{--motion-art-max:138.6667px;--motion-swim-max:99.84px}.motion-page .motion-scene-status{font-size:9px;gap:6px;padding:7px}}
@media(prefers-reduced-motion:reduce){.motion-page .motion-scene *{animation:none!important}.motion-page .motion-art{background-position:0% 0%;transform:none}}