/* Atmosphere v1.20: original picture fragments, soft masks and slow, staggered motion. */
.story-ambient { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; stroke: none; opacity: 0; transition: opacity .8s ease; }
.story-scene[data-motion="on"] .story-frame.is-active .story-ambient { opacity: 1; }
.story-scene[data-motion="on"][data-reading="open"] .story-frame.is-active .story-ambient { opacity: .48; }
.ambient-motion { transform-box: fill-box; transform-origin: center; }
.amb-cloud-drift { animation: ambient-cloud-drift var(--cloud-cycle) ease-in-out infinite; }
.amb-cloud-drift--japan { animation-delay: -16s; }
.amb-cloudlight { animation: ambient-cloudlight 29s ease-in-out infinite alternate; }
.amb-cloudlight--far { animation-duration: 37s; animation-delay: -17s; }
.amb-mote { animation: ambient-mote var(--cycle) ease-in-out infinite; animation-delay: var(--phase); }
.amb-water { animation: ambient-water 12s ease-in-out infinite; }
.amb-breaker { animation: ambient-breaker var(--cycle) linear infinite; animation-delay: var(--phase); }
.amb-swell, .amb-foam { fill: none; stroke: url(#coast-foam); stroke-linecap: round; }
.amb-swell { stroke-width: 6; opacity: .12; }
.amb-foam { stroke-width: 1.25; stroke-dasharray: var(--foam-breaks); opacity: .8; }
.amb-glint { fill: #e6f5f4; animation: ambient-glint calc(var(--cycle) + 5s) ease-in-out infinite; animation-delay: var(--phase); }
.amb-windowlight { animation: ambient-windowlight var(--light-cycle) ease-in-out infinite; animation-delay: var(--light-phase); }
.amb-citylight { fill: #ffdcb0; animation: ambient-citylight calc(var(--cycle) + 7s) ease-in-out infinite; animation-delay: var(--phase); }
.story-ambient .amb-student-thread { stroke-dasharray: 42 240; animation: ambient-margin 23s linear infinite; animation-delay: var(--phase); }
.story-ambient .ambient-motion { animation-play-state: paused; }
.story-scene[data-motion="on"][data-atmosphere-visible="true"][data-page-active="true"] .story-frame.is-active .ambient-motion { animation-play-state: running; }
.story-scene[data-motion="on"][data-atmosphere-visible="true"][data-page-active="true"] .story-frame.is-active :is(.amb-cloud-drift,.amb-water) { will-change: transform, opacity; }
@keyframes ambient-cloud-drift {
  0%,100% { opacity: .23; transform: translate(-3px,1px); }
  50% { opacity: .38; transform: translate(4px,-2px); }
}
@keyframes ambient-cloudlight { from { opacity: .09; transform: translate(-5px,2px); } to { opacity: .22; transform: translate(8px,-3px); } }
@keyframes ambient-mote { 0%,100% { opacity: 0; transform: translate(0,5px); } 30% { opacity: .36; } 65% { opacity: .2; } 90% { opacity: 0; transform: translate(var(--drift),var(--rise)); } }
@keyframes ambient-water {
  0%,100% { opacity: .52; transform: translate(1px,-1px); }
  35% { opacity: .76; transform: translate(-1.5px,1px); }
  70% { opacity: .62; transform: translate(-3px,2.5px); }
}
@keyframes ambient-breaker {
  0% { opacity: 0; transform: translate(7px,-6px); }
  24% { opacity: .28; }
  43% { opacity: .54; }
  73% { opacity: .16; transform: translate(-8px,8px); }
  100% { opacity: 0; transform: translate(-14px,13px); }
}
@keyframes ambient-glint { 0%,100% { opacity: .04; transform: scaleX(.7); } 35% { opacity: .38; transform: scaleX(1.15); } 70% { opacity: .1; transform: scaleX(.9); } }
@keyframes ambient-windowlight { 0%,100% { opacity: .08; transform: translateX(-2px); } 50% { opacity: .24; transform: translateX(5px); } }
@keyframes ambient-citylight { 0%,100% { opacity: .22; } 40%,60% { opacity: .58; } }
@keyframes ambient-margin { 0% { opacity: 0; stroke-dashoffset: 120; } 25%,65% { opacity: .28; } 100% { opacity: 0; stroke-dashoffset: -162; } }
@media (max-width: 600px) {
  .amb-water { filter: none; }
  .story-ambient .amb-glint:nth-of-type(even) { display: none; }
}
.story-controls .story-motion-toggle { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; margin-left: 2px; border: 0; border-left: 1px solid rgba(248,239,231,.24); border-radius: 0; background: transparent; color: inherit; cursor: pointer; }
.story-motion-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.story-motion-toggle .motion-still-icon { display: none; }
.story-motion-toggle[aria-pressed="false"] .motion-flow-icon { display: none; }
.story-motion-toggle[aria-pressed="false"] .motion-still-icon { display: block; }
.story-motion-toggle:hover { color: #fff4d9; }
.story-motion-toggle:focus-visible { outline: 2px solid #fff4d9; outline-offset: -3px; }
.story-motion-toggle:disabled { opacity: .55; cursor: default; }
@media (max-width: 600px) {
  .story-controls .story-motion-toggle { flex-basis: 40px; width: 40px; margin-left: 0; }
  .story-ambient .amb-mote:nth-of-type(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .story-ambient { display: none; transition: none; }
  .story-ambient .ambient-motion { animation: none; }
}