/* Keep the original-ratio canvas; only the incoming scene is revealed. */
#story .story-stage .story-frame.is-active { animation: none !important; transform: none; filter: none; clip-path: none; }
.story-fx-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.scene-glaze { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.story-frame--academy .scene-glaze { background: linear-gradient(112deg,transparent 24%,rgba(255,235,186,.22) 47%,transparent 68%); }
.story-frame--student .scene-glaze { background: linear-gradient(90deg,transparent 33%,rgba(240,220,179,.13) 50%,transparent 67%); }
.story-frame--japan .scene-glaze { background: linear-gradient(110deg,rgba(229,206,211,.12),transparent 65%); }
#story[data-transition="running"] .story-frame.is-active .scene-glaze { animation: scene-light-pass 1.15s ease-out both; }
@keyframes scene-light-pass { 0% { opacity: 0; transform: translateX(-15%); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateX(15%); } }
#story .amb-water { animation-name: cinematic-water; }
@keyframes cinematic-water { 0%,100% { opacity: .7; transform: translate(0,0); } 45% { opacity: .86; transform: translate(-1px,1px); } 75% { opacity: .78; transform: translate(1px,-.5px); } }
#story .amb-foam { stroke-width: 1.5; }
#story .amb-swell { stroke-width: 8; opacity: .14; }
#story .amb-cloud-drift { animation-name: cinematic-cloud; }
@keyframes cinematic-cloud { 0%,100% { opacity: .34; transform: translate(-4px,1px); } 50% { opacity: .56; transform: translate(7px,-3px); } }
.amb-grass-sway { transform-origin: left bottom; animation: cinematic-grass 7.8s ease-in-out infinite; }
@keyframes cinematic-grass { 0%,100% { opacity: .32; transform: skewX(-.3deg) translateX(-1px); } 45% { opacity: .54; transform: skewX(.5deg) translateX(1.4px); } }
.amb-paper-glow { animation: cinematic-paper 11s ease-in-out infinite; animation-delay: var(--phase); }
@keyframes cinematic-paper { 0%,100% { opacity: .05; transform: translateY(20px); } 50% { opacity: .26; transform: translateY(-26px); } }
#story .amb-windowlight { animation-name: cinematic-window; }
@keyframes cinematic-window { 0%,100% { opacity: .1; transform: translate(-3px,0) skewX(-.3deg); } 50% { opacity: .34; transform: translate(6px,1px) skewX(.4deg); } }
#story .story-controls { max-width: calc(100% - 20px); gap: clamp(4px,1vw,10px); transition: background .6s, border-color .6s; }
#story .story-dot::before { transition: width .4s ease, background .4s ease, box-shadow .4s ease; }
#story .story-dot[aria-pressed="true"]::before { width: 15px; border-radius: 6px; box-shadow: 0 0 12px color-mix(in srgb,var(--reading-accent) 25%,transparent); }
#story .story-arrow:active { transform: scale(.91); }
@media (max-width: 600px) {
  #story .story-controls { gap: 4px; padding-inline: 5px; }
  #story .story-arrow { width: 40px; height: 44px; flex: 0 0 40px; }
  #story .story-dot { width: 26px; height: 44px; }
  #story .story-motion-toggle { flex-basis: 40px; }
  #story .scene-glaze { display: none; }
  #story .amb-grass-sway { animation-duration: 10s; }
}
#story[data-motion="off"] .scene-glaze { display: none; }
@media (prefers-reduced-motion: reduce) {
  #story .scene-glaze { display: none; }
  #story .story-controls, #story .story-dot::before { transition: none; }
}