/* Designer's aligned 1200×900 layers; v0.4 motion made visible at mobile scale. */
.moment-scene,.moment-scene[data-scene]{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:4/3;border-radius:0;background:transparent;overflow:hidden;max-width:620px;isolation:isolate}
.moment-art{position:absolute;inset:0}.moment-art[hidden]{display:none}
.moment-layer{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none}
.moment-scene.is-paused .has-motion{animation-play-state:paused!important}
@media(max-width:700px){.moment-scene{max-width:470px}.moment-layout{gap:26px}}
@keyframes moment-sleep-stars{0%,100%{opacity:0.35}50%{opacity:0.9}}
.sleep-twinkles{position:absolute;inset:0;z-index:2;pointer-events:none}
.sleep-twinkle{position:absolute;left:var(--x);top:var(--y);width:var(--size,2.4%);aspect-ratio:1;background:#fff6ce;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);opacity:.8;animation:sleep-twinkle var(--duration,3.8s) ease-in-out var(--delay,0s) infinite}
@keyframes sleep-twinkle{0%,100%{opacity:.2;transform:scale(.65)}50%{opacity:1;transform:scale(1.15)}}
@keyframes moment-sleep-fox{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes moment-travel-cloud{0%,100%{transform:translateX(-4%)}50%{transform:translateX(4%)}}
@keyframes moment-travel-fox{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.012)}}
@keyframes moment-wake-sun{0%,100%{opacity:0.65}50%{opacity:1}}
@keyframes moment-wake-cloud{0%,100%{transform:translateX(-2.5%)}50%{transform:translateX(2.5%)}}
@keyframes moment-wake-fox{0%,100%{transform:scaleY(1) rotate(-1deg)}50%{transform:scaleY(1.025) rotate(1deg)}}
@keyframes moment-walk-cloud{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
@keyframes moment-walk-fox{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes moment-walk-leaves{0%,100%{transform:translate(-2%,-1%) rotate(-7deg)}50%{transform:translate(2%,1%) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.moment-layer{animation:none!important;transform:none!important;opacity:1!important}}

/* A continuous outside view conveys travel; the carriage reacts to rail joints. */
.travel-outside{position:absolute;left:18.1%;top:20.8%;width:63.8%;height:43.4%;z-index:1;overflow:hidden;border-radius:10% / 22%;background:#c8d5d3}
.travel-panorama{position:absolute;inset:0 auto 0 0;width:300%;display:flex;animation:train-landscape 14s linear infinite}
.travel-view-tile{position:relative;flex:0 0 33.333333%;height:100%;overflow:hidden}
.travel-view-tile:nth-child(2){transform:scaleX(-1)}
.travel-view-tile img{position:absolute;width:187.5%;height:272.7273%;max-width:none;left:-43.75%;top:-66.6667%;object-fit:fill}
.travel-carriage{position:absolute;inset:0;z-index:3;animation:train-rail-joints 1.85s linear -.4s infinite}
.travel-carriage .travel-fox{top:5%;bottom:auto}
@keyframes train-landscape{from{transform:translateX(0)}to{transform:translateX(-66.666667%)}}
@keyframes train-rail-joints{0%,18%,44%,69%,100%{transform:translateY(0)}22%{transform:translateY(-.5%)}26%{transform:translateY(.18%)}30%{transform:translateY(-.24%)}34%{transform:translateY(.08%)}55%{transform:translateY(-.18%)}59%{transform:translateY(.12%)}76%{transform:translateY(-.42%)}80%{transform:translateY(.16%)}84%{transform:translateY(-.18%)}88%{transform:translateY(.06%)}}
@media(prefers-reduced-motion:reduce){.travel-carriage,.travel-panorama{animation:none!important;transform:none!important}}
