/* The handscroll layer for the 2D world. Loaded after the other world stylesheets. Everything in the
   painting reuses the world's realistic sprites; only the travel fade and the chapter map live here. */

/* travelling: the figures fade into the mist while the view glides along the scroll */
.actor { transition: opacity .45s ease; }
.actor.is-travelling { opacity: 0; transition-duration: .25s; }
.actor.is-travelling .bubble { visibility: hidden; }
#world::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(90deg, var(--scroll-mist, rgba(240, 233, 219, .7)) 0, transparent 16%, transparent 84%, var(--scroll-mist, rgba(240, 233, 219, .7)) 100%);
}
#world.is-unrolling::after { opacity: 1; }
[data-theme="dark"] #world { --scroll-mist: rgba(14, 18, 30, .75); }
@media (prefers-reduced-motion: reduce) { .actor, #world::after { transition: none; } }

/* painted pieces of the new chapters */
.scroll-crane-flight { animation: scrollCrane 6.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes scrollCrane { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 18px -10px; rotate: 2deg; } }
@media (prefers-reduced-motion: reduce) { .scroll-crane-flight { animation: none; } }
.st-education .paint-label text, .scroll-sign .paint-label text { font-size: 18px; letter-spacing: .2px; }
.scroll-ground-mist { opacity: .5; }
[data-theme="dark"] .scroll-ground-mist { opacity: .12; }
[data-theme="dark"] .scroll-contact { opacity: .7; }
.scroll-hotspot { border-radius: 8px; }
.scroll-hotspot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the chapter map: a slim track in the interface's own style, a dot per chapter, the part in view */
.scroll-map { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; width: min(520px, 60vw); height: 24px; pointer-events: auto; }
.scroll-map-strip { position: relative; height: 100%; border-radius: 999px; background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.scroll-tick { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font: 600 10.5px/18px Inter, system-ui, sans-serif; cursor: pointer; z-index: 1; }
.scroll-tick.is-station { background: var(--accent); color: #fff; }
.scroll-tick:not(.is-station)::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--muted); opacity: .7; }
.scroll-tick:hover, .scroll-tick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.scroll-map-view { position: absolute; top: 2px; bottom: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--accent); opacity: .55; pointer-events: none; }
body.title-open .scroll-map { display: none; }
@media (max-width: 700px) {
  .scroll-map { left: auto; right: 10px; transform: none; width: 56vw; bottom: calc(12px + env(safe-area-inset-bottom)); height: 22px; }
  .scroll-tick { width: 16px; height: 16px; font-size: 9.5px; line-height: 16px; }
}