/* Motion follows the journal: ink arrives, paper settles, and the world keeps breathing. */
:root { --journey-out:cubic-bezier(.16,1,.3,1); --journey-in-out:cubic-bezier(.65,0,.35,1); }
.hero-word { display:inline-block; transform-origin:18% 85%; }
.journey-enhanced .hero-line { clip-path:inset(-26% -12% -27% -12%); }
.journey-enhanced .hero-line>span { animation:none; }
.journey-enhanced.hero-copy-entered .hero-word { animation:journal-word-in 1.15s var(--journey-out) calc(80ms + var(--word) * 115ms) both; }
.journey-enhanced.hero-copy-entered .trouble-underline path { animation:ink-arrive .95s var(--journey-in-out) .85s both; }
.journey-enhanced .atlas-hero .journal-intro>.hero-eyebrow,
.journey-enhanced .atlas-hero .journal-intro>.journal-subtitle,
.journey-enhanced .atlas-hero .journal-intro>.journal-description,
.journey-enhanced .atlas-hero .journal-intro>.hero-actions,
.journey-enhanced .atlas-hero .journal-intro>.hero-smallprint { animation:none; }
.journey-enhanced.hero-copy-entered .atlas-hero .journal-intro>.hero-eyebrow { animation:journal-copy-in .8s var(--journey-out) both; }
.journey-enhanced.hero-copy-entered .atlas-hero .journal-intro>.journal-subtitle { animation:journal-copy-in 1s var(--journey-out) .42s both; }
.journey-enhanced.hero-copy-entered .atlas-hero .journal-intro>.journal-description { animation:journal-copy-in 1s var(--journey-out) .53s both; }
.journey-enhanced.hero-copy-entered .atlas-hero .journal-intro>.hero-actions { animation:journal-copy-in 1s var(--journey-out) .65s both; }
.journey-enhanced.hero-copy-entered .atlas-hero .journal-intro>.hero-smallprint { animation:journal-copy-in .9s var(--journey-out) .78s both; }
.journey-enhanced.hero-copy-entered .hero-footprints { animation:journal-copy-in 1.2s var(--journey-out) .95s both; }
.journey-enhanced.hero-copy-entered .eyebrow-spark { animation:journal-spark-in 1.2s var(--journey-out) both; }
.journey-enhanced.hero-copy-entered .hero-topline { animation:journal-copy-in 1s var(--journey-out) .12s both; }
.journey-enhanced.hero-copy-entered .hero-bottom-bar { animation:journal-copy-in 1s var(--journey-out) .9s both; }

/* Ambient layers have no hit area. The complete atlas moves as one coordinate space. */
.journal-hero { perspective:1500px; }
.journey-weather { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.journey-sunlight { position:absolute; inset:-35%; background:linear-gradient(114deg,transparent 38%,#fff9df65 47%,#fff7d72b 55%,transparent 61%); transform-origin:70% 0; animation:journal-sunlight 19s ease-in-out infinite alternate; }
.journey-mote { position:absolute; left:var(--left); top:var(--top); width:3px; height:3px; border-radius:50%; background:#86713e; opacity:0; animation:journal-mote var(--duration) linear var(--delay) infinite; }
.journey-leaf { width:16px; height:7px; border-radius:100% 0 100% 0; background:#848750; box-shadow:inset 0 -2px 0 #4c5c332e; animation-name:journal-leaf; }
.journey-leaf::after { content:''; position:absolute; top:45%; left:0; width:115%; height:1px; background:#656b3a; transform:rotate(-20deg); }
.journey-enhanced .atlas-art { transform-style:preserve-3d; }
.atlas-scenery { position:absolute; inset:0; transform-style:preserve-3d; }
.journey-enhanced.atlas-entered .atlas-scenery { animation:journal-map-float 10s ease-in-out 1.9s infinite; }
.journey-enhanced.atlas-entered .atlas-drawing { animation:journal-map-unfold 1.7s var(--journey-out) both; transform-origin:20% 85%; }
.journey-enhanced.atlas-entered .atlas-page-back { animation:journal-back-unfold 1.9s var(--journey-out) .12s both; background:#bb9b5b16; box-shadow:9px 14px 28px #6e512417; }
.journey-enhanced .atlas-window { filter:drop-shadow(5px 13px 9px #4c3c312c); }
.journey-enhanced.atlas-entered .atlas-window { animation:journal-window-in 1.5s var(--journey-out) .48s both; }
.journey-enhanced .atlas-window figcaption { transform-origin:50% 0; }
.journey-enhanced.atlas-entered .atlas-window figcaption { animation:journal-caption-in 1.3s var(--journey-out) 1s both; }
.journey-enhanced.atlas-entered .atlas-annotation { animation:journal-note-in 1.1s var(--journey-out) 1.15s both; }
.journey-enhanced .atlas-route-travelled { stroke-width:2.5; }
.atlas-bootprints { fill:#785238; stroke:none; }
.atlas-bootprint { opacity:0; transition:opacity .18s; }
.journey-enhanced .atlas-live-mark { animation:journal-beacon 3s ease-in-out infinite; }
.journey-enhanced .map-stop.is-active .map-stop-dot::before { animation:journal-pin-ring 3s ease-out infinite; }
.journey-enhanced .atlas-toolbar { position:relative; z-index:5; }
.journey-enhanced .hero-bottom-bar>a>span { display:inline-block; animation:journal-scroll-hint 2.2s var(--journey-in-out) infinite; }
.journey-enhanced .annotation-star { display:inline-block; animation:journal-star-turn 22s linear infinite; }

/* Each reveal has a different physical gesture, instead of a page of identical fades. */
.journey-enhanced.reveal-ready [data-reveal] { opacity:1; transform:none; transition:none; }
.journey-enhanced .journey-reveal-pending { opacity:0; }
.journey-enhanced.reveal-ready [data-reveal].journey-reveal-pending { opacity:0; }
.journey-heading-line { display:block; overflow:clip; overflow-clip-margin:.13em; padding-bottom:.12em; margin-bottom:-.12em; }
.journey-heading-ink { display:block; transform-origin:left bottom; }
.journey-enhanced .section-top { position:relative; }
.journey-enhanced .section-top::after { content:''; position:absolute; top:-24px; left:0; width:100%; height:1px; background:var(--line); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--journey-in-out); }
.journey-enhanced .section-top.journey-seen::after { transform:scaleX(1); }
.journey-enhanced .world-stage { transform-origin:50% 70%; }
/* Keep cards inside their chapter during narrow-screen entrance rotations. */
.journey-enhanced .world-section { overflow-x:clip; }
.journey-enhanced .world-stage-content { transform-origin:0 50%; }
.journey-enhanced .world-gallery { perspective:1400px; }
.journey-enhanced.reveal-ready .world-window { --postcard-angle:-2deg; transform:rotate(var(--postcard-angle)); transform-origin:50% 85%; transition:transform .55s var(--journey-out),box-shadow .55s var(--journey-out); }
.journey-enhanced .world-window:nth-child(even) { --postcard-angle:2deg; }
.journey-enhanced .world-window:nth-child(3) { --postcard-angle:1.2deg; }
.journey-enhanced .world-window:nth-child(4) { --postcard-angle:-1.5deg; }
.journey-enhanced .world-window img { transition:transform 1.2s var(--journey-out); }
.journey-enhanced .world-window figcaption>span:last-child { transition:transform .4s var(--journey-out); }
.journey-enhanced .install-steps { position:relative; }
.journey-enhanced .install-steps::before { content:''; position:absolute; left:0; right:0; top:-1px; height:2px; background:#77834d; transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--journey-in-out); }
.journey-enhanced .install-steps.journey-seen::before { transform:scaleX(1); }
.journey-enhanced .step-icon { display:inline-block; transform-origin:center; }
.journey-enhanced .install-crystal { animation:journal-crystal-float 6s ease-in-out infinite; }
.journey-enhanced .slime-button { transition:transform .28s var(--journey-out); }
.journey-slime-spark { position:absolute; pointer-events:none; left:50%; top:50%; width:5px; height:5px; background:#7b8e50; border-radius:1px; }

/* Shared press and pointer feedback stays small enough that controls never run away. */
.journey-enhanced .button-primary { position:relative; overflow:hidden; isolation:isolate; transition:transform .2s var(--journey-out),box-shadow .25s,background .25s,translate .3s var(--journey-out); }
.journey-enhanced .button-primary::before { content:''; position:absolute; z-index:-1; inset:-70% -30%; background:linear-gradient(105deg,transparent 35%,#e3e6a524 47%,#f8edc534 50%,transparent 62%); transform:translateX(-90%); transition:transform .7s var(--journey-out); }
.journey-enhanced .button-arrow,.journey-enhanced .download-rune { display:inline-block; transition:transform .3s var(--journey-out); }
.journey-enhanced .button-primary:active { transform:translateY(1px) scale(.97); }
.journey-enhanced .nav-download:active,.journey-enhanced .redraw-map:active { scale:.97; }
.journey-reading-track { position:fixed; z-index:40; top:0; left:0; width:100%; height:2px; pointer-events:none; transform:scaleX(0); transform-origin:left; background:#667345; }
.journey-enhanced .ascension-stage { perspective:1200px; }
.journey-enhanced .ascension-halo::after { content:''; position:absolute; inset:10% 5%; border:1px solid #8c794a35; border-radius:50%; transform:rotate(-23deg); }
.journey-enhanced .ascension-copy h3 { transform-origin:0 100%; }
.journey-enhanced .ascension-copy { transform:translate3d(var(--panel-shift),calc(var(--panel-lift,0px) * -.4),0); }
.journey-enhanced .ascension-copy h3 { transform:translateY(calc(var(--panel-lift,0px) * -.5)) rotate(var(--title-turn,0deg)); }
.journey-enhanced .ascension-art { transform:translateX(-50%) translate3d(var(--art-shift),var(--panel-lift,0px),0) rotate(var(--art-turn,0deg)) scale(var(--art-scale)); }
.journey-enhanced .ascension-ability { transform:translate3d(calc(var(--panel-shift) * -.7),calc(var(--panel-lift,0px) * .7),0); }
.journey-enhanced .ascension-family button { transition:background .2s,color .2s,transform .2s var(--journey-out); }
.journey-enhanced .ascension-family button:active { transform:scale(.97); }

@keyframes journal-word-in { from { opacity:0; transform:translate3d(0,90%,0) rotate(7deg) skewY(7deg); } to { opacity:1; transform:translate3d(0,0,0) rotate(0) skewY(0); } }
@keyframes journal-copy-in { from { opacity:0; translate:0 28px; } to { opacity:1; translate:0 0; } }
@keyframes journal-spark-in { from { opacity:0; transform:rotate(-150deg) scale(.85); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes journal-map-unfold { from { opacity:0; transform:perspective(1400px) rotateX(16deg) rotate(-8deg) scale(.91) translateY(50px); } to { opacity:1; transform:perspective(1400px) rotateX(0) rotate(0) scale(1) translateY(0); } }
@keyframes journal-back-unfold { from { opacity:0; transform:rotate(5deg) translate(25px,25px); } to { opacity:1; transform:rotate(-6deg) translate(0,0); } }
@keyframes journal-window-in { from { opacity:0; transform:translate3d(32px,65px,100px) rotate(9deg) scale(.93); clip-path:inset(0 0 95% 0); } 25% { opacity:1; } to { opacity:1; transform:translateZ(24px) rotate(-2deg); clip-path:inset(-20% -20% -35% -20%); } }
@keyframes journal-caption-in { from { opacity:0; transform:rotate(-12deg) translateY(-18px); } 60% { transform:rotate(4deg) translateY(2px); } to { opacity:1; transform:rotate(1.7deg) translateY(0); } }
@keyframes journal-note-in { from { opacity:0; translate:12px 16px; } to { opacity:1; translate:0 0; } }
@keyframes journal-map-float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(.4deg); } }
@keyframes journal-sunlight { from { transform:translate3d(-3%,0,0) rotate(-4deg); opacity:.4; } to { transform:translate3d(6%,3%,0) rotate(6deg); opacity:.9; } }
@keyframes journal-mote { 0%,100% { opacity:0; } 20%,70% { opacity:.25; } 0% { transform:translate3d(0,35px,0); } 100% { transform:translate3d(70px,-130px,0); } }
@keyframes journal-leaf { 0% { opacity:0; transform:translate3d(-45px,-40px,0) rotate(-40deg); } 15%,75% { opacity:.5; } 45% { transform:translate3d(38px,90px,0) rotate(95deg); } 100% { opacity:0; transform:translate3d(135px,240px,0) rotate(210deg); } }
@keyframes journal-pin-ring { 0%,20% { transform:scale(1); opacity:.6; } 85%,100% { transform:scale(2.5); opacity:0; } }
@keyframes journal-beacon { 0%,100% { opacity:.45; transform:scale(.85); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes journal-scroll-hint { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(5px); } }
@keyframes journal-star-turn { to { transform:rotate(360deg); } }
@keyframes journal-crystal-float { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-15px) rotate(6deg); } }

@media(hover:hover) and (pointer:fine) {
  .journey-enhanced .button-primary:hover::before { transform:translateX(70%); }
  .journey-enhanced .button-primary:hover .button-arrow { transform:translate(3px,-3px); }
  .journey-enhanced .button-primary:hover .download-rune { transform:translateY(4px); }
  .journey-enhanced.reveal-ready .world-window:hover { transform:rotate(0deg) translateY(-10px) scale(1.015); box-shadow:9px 20px 32px #65512c28; }
  .journey-enhanced .world-window:hover img { transform:scale(1.045); }
  .journey-enhanced .world-window:hover figcaption>span:last-child { transform:translate(4px,-4px); }
}
@media(max-width:820px) {
  .journey-leaf { width:11px; height:5px; }
  .journey-enhanced.reveal-ready .world-window { --postcard-angle:-1deg; }
  .journey-enhanced .world-window:nth-child(even) { --postcard-angle:1deg; }
}

/* Native mobile scrolling does not need a JavaScript-driven progress layer. */
@media(max-width:820px), (hover:none), (pointer:coarse) {
  .journey-reading-track { display:none; }
  /* SVG ambient transforms trigger layout/paint during native touch scrolling.
     Simple class selectors also reach the trees instantiated through SVG <use>. */
  .tree-crown,.village-smoke,.lake-ripples,.atlas-compass-needle,
  .camp-glow,.camp-flame,.camp-flame-inner,.ink-bird path { animation:none; }
  .journey-enhanced.atlas-entered .atlas-scenery { animation:none; }
}

/* All loops suspend offscreen. Pausing or reducing motion leaves every word accessible. */
.journey-offscreen *,.journey-offscreen *::before,.journey-offscreen *::after { animation-play-state:paused!important; }
.intro-pending:not(.intro-burning) .journey-weather *,
.hero-offscreen .journey-weather * { animation-play-state:paused!important; }
.motion-paused .journey-reveal-pending,.motion-paused.journey-enhanced.reveal-ready [data-reveal] { opacity:1; }
.motion-paused.journey-enhanced .hero-word,
.motion-paused.journey-enhanced .atlas-hero .journal-intro>*,
.motion-paused.journey-enhanced .hero-topline,
.motion-paused.journey-enhanced .hero-bottom-bar { animation:none; opacity:1; translate:none; }
.motion-paused .journey-heading-ink { transform:none!important; opacity:1!important; }
.motion-paused .atlas-bootprint { transition:none; }
.motion-paused.journey-enhanced .button-primary { translate:none; }
@media(prefers-reduced-motion:reduce) {
  .journey-weather,.journey-reading-track { display:none; }
  .journey-reveal-pending,.journey-enhanced.reveal-ready [data-reveal] { opacity:1; }
  .journey-heading-ink,.journey-enhanced .hero-word { opacity:1; transform:none; }
  .journey-enhanced .section-top::after,.journey-enhanced .install-steps::before { transform:scaleX(1); }
}