/* The Empathy Walk, journey layer: painted map, walker, scene stage, particles.
   Loads after the booklet theme; interaction lives in js/games/empathy-walk-journey.js. */

/* ---------- Layout: the scene sits above the station page ---------- */
.walk-space{flex-direction:column;justify-content:center;align-items:stretch;}
.is-walking .walk-space{justify-content:flex-start;align-items:stretch;padding-top:40px;}

/* ---------- The painted map ---------- */
.garden .landscape{max-width:min(400px,calc((100svh - 190px) / 1.5));min-width:260px;aspect-ratio:2/3;border-radius:30px;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -28px #4a2e5c80,0 0 0 1px #ffffff90,0 0 0 7px #fbf6f1,0 0 0 8px #e7d7e4;background:#efe4f0;}
.garden .landscape::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 40px 6px #f7eef580;background:linear-gradient(to bottom,#fbf3f455,transparent 14%,transparent 86%,#f6ecf366);}
.map-camera{position:absolute;inset:0;transform-origin:0 0;will-change:transform;}
.map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;}
.map-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.map-route path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.route-seg{stroke:none;}
.route-glow{stroke:#fff7e6;stroke-width:34;opacity:.22;filter:blur(6px);}
.route-base{stroke:#fffaf2;stroke-width:9;stroke-dasharray:.1 26;opacity:.95;filter:drop-shadow(0 0 3px #b98fa8);}
.route-travelled{stroke:#ffd98c;stroke-width:13;filter:drop-shadow(0 0 4px #fff0b8) drop-shadow(0 0 10px #ffc86e);opacity:.95;}
/* The trail and footprints repaint while walking, so each sits on its own layer above the painted map. */
.map-route-live,.map-prints{will-change:transform;}
.map-route-live path{stroke-dasharray:var(--dash);stroke-dashoffset:var(--off,0);}
.route-soft{display:none;stroke:#ffc86e;stroke-width:22;opacity:.3;}
.route-soft-wide{stroke:#fff0b8;stroke-width:34;opacity:.16;}
.map-prints{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.map-prints ellipse{fill:#7a5639;}

/* Stones become glowing waypoints on the painting. */
.garden .stone{z-index:2;}
.garden .stone-number{position:relative;z-index:1;width:36px;height:36px;font-size:13px;font-weight:500;color:#fff;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--stone) 55%,white),var(--stone) 70%);box-shadow:0 0 0 3px #fffaf3,0 0 0 4px color-mix(in srgb,var(--stone) 50%,white),0 6px 14px -4px #3b1f4a90;text-shadow:0 1px 1px #0003;}
.garden .stone[aria-current] .stone-number{transform:scale(1.14);box-shadow:0 0 0 3px #fffaf3,0 0 0 5px var(--stone),0 0 22px 6px color-mix(in srgb,var(--stone) 55%,transparent);}
.garden .stone[aria-current] .stone-number::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:2px solid #fffaf3;opacity:0;animation:stone-ping 2.4s ease-out infinite;}
@keyframes stone-ping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.garden .stone-label{left:46px;font-size:12px;padding:4px 9px;border-radius:30px;background:#fffaf4f2;color:var(--ink);box-shadow:0 4px 12px -6px #3b1f4a60;}
.garden .stone[data-side=left] .stone-label{left:auto;right:46px;}
/* Only the current stone is named; the rest appear when the map is explored. */
.garden .stone-label{transition:opacity 250ms ease,transform 250ms ease;}
.is-walking .garden .stone:not([aria-current]) .stone-label{opacity:0;transform:translateX(-4px);}
.is-walking .garden .landscape:hover .stone-label,.is-walking .garden .stone:focus-visible .stone-label{opacity:1;transform:none;}
/* Reached stations bloom. */
.stone-bloom{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;}
.stone-bloom i{position:absolute;left:-7px;top:-31px;width:14px;height:17px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:color-mix(in srgb,var(--stone) 45%,white);transform-origin:7px 31px;transform:rotate(calc(var(--k)*72deg)) scale(0);transition:transform 420ms cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--k)*50ms);box-shadow:inset 0 -3px 4px #ffffff70;}
.stone.is-reached .stone-bloom i{transform:rotate(calc(var(--k)*72deg)) scale(1);}
.stone.just-bloomed .stone-bloom{animation:bloom-spin 1.4s cubic-bezier(.2,.7,.2,1);}
@keyframes bloom-spin{from{transform:rotate(-80deg) scale(.4)}to{transform:none}}
.is-walking .garden .stone:not(.is-reached):not([aria-current]) .stone-number{filter:saturate(.55) brightness(1.08);}

/* ---------- The walker ---------- */
/* Positioned by --wx/--wy (px, set in JS) through transform only, so moving never triggers layout. */
.walker{position:absolute;z-index:3;left:0;top:0;width:64px;margin-top:-6px;margin-left:-10px;transform:translate3d(var(--wx,0px),var(--wy,0px),0) translate(-50%,-100%);will-change:transform;pointer-events:none;opacity:0;transition:opacity 400ms ease;}
.is-walking .walker{opacity:1;}
.walker-body{display:block;transform-origin:50% 100%;}
.walker-body img{display:block;width:100%;height:auto;transform:scaleX(var(--face,1));transition:transform 260ms ease;filter:drop-shadow(0 3px 3px #4a2e3a40);}
.walker-shadow{position:absolute;left:18%;right:18%;bottom:-3px;height:8px;border-radius:50%;background:#3b2a3a;opacity:.22;filter:blur(2px);z-index:-1;}
.walker-halo{position:absolute;left:50%;bottom:-18px;width:90px;height:40px;margin-left:-45px;border-radius:50%;background:radial-gradient(ellipse,#fff4cf 0%,#ffd98c66 40%,transparent 70%);z-index:-2;animation:halo 3s ease-in-out infinite;}
@keyframes halo{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.walker.is-travelling .walker-body{animation:hop 380ms ease-in-out infinite;}
@keyframes hop{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.walker.is-landing .walker-body{animation:land 560ms cubic-bezier(.3,1.5,.5,1);}
@keyframes land{0%{transform:scale(1.12,.84)}45%{transform:scale(.94,1.08) translateY(-4px)}100%{transform:none}}
.walker.is-dropping .walker-body{animation:drop 800ms cubic-bezier(.3,1.3,.5,1) both;}
@keyframes drop{0%{transform:translateY(-120px) scale(.6);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
.is-travelling .garden .stone .stone-label{opacity:0!important;}

/* ---------- Scene stage ---------- */
.scene-stage{--px:0;--py:0;position:relative;flex:none;width:100%;aspect-ratio:21/9;border-radius:26px;overflow:hidden;isolation:isolate;margin:0 0 34px;background:color-mix(in srgb,var(--station,#c9b) 25%,#f3e9f0);box-shadow:0 26px 50px -26px #4a2e5c99,0 0 0 1px #ffffffa0;}
.scene-layer{position:absolute;inset:-18px;z-index:1;transform:translate(calc(var(--px)*-16px),calc(var(--py)*-10px));transition:transform 700ms cubic-bezier(.2,.7,.2,1);}
.scene-layer.is-front{z-index:2;}
.scene-layer.is-idle{visibility:hidden;}
.scene-layer img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04);}
.scene-layer:not(.is-front) img{animation:none;}
.scene-layer.is-front img{animation:scene-drift 24s ease-in-out infinite alternate;}
@keyframes scene-drift{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-1.5%)}}
.scene-wash{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:linear-gradient(100deg,transparent 25%,color-mix(in srgb,var(--station) 45%,white) 50%,transparent 75%);mix-blend-mode:screen;}
.scene-stage::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(to top,#2a163acc 0%,#2a163a55 30%,transparent 58%),linear-gradient(to right,color-mix(in srgb,var(--station) 35%,transparent),transparent 45%);}
.scene-title{position:absolute;left:28px;right:28px;bottom:22px;z-index:5;color:#fff;transform:translate(calc(var(--px)*8px),calc(var(--py)*5px));transition:transform 700ms cubic-bezier(.2,.7,.2,1);}
.scene-title .tiny{display:block;font-size:11px;letter-spacing:.24em;color:#fff;opacity:.85;text-shadow:0 1px 6px #0006;}
.scene-title strong{display:block;margin-top:4px;font-family:var(--booklet-serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;text-shadow:0 2px 18px #1a0a2a90;}
.scene-title strong span{display:inline-block;white-space:pre;}
.scene-title.play .tiny{animation:title-in 700ms 150ms cubic-bezier(.2,.7,.2,1) both;}
.scene-title.play strong span{animation:letter-in 900ms cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*32ms + 280ms);}
.scene-title.play strong::after{content:'';display:block;height:2px;width:72px;margin-top:10px;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--station) 60%,white),transparent);transform-origin:left;animation:title-rule 1s 600ms cubic-bezier(.2,.7,.2,1) both;}
@keyframes title-in{from{opacity:0;transform:translateY(10px)}to{opacity:.85;transform:none}}
@keyframes letter-in{from{opacity:0;transform:translateY(22px) rotate(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes title-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Once revealed, the title drops its finished animations (their end frames match these resting styles). */
.scene-title.played .tiny,.scene-title.played strong span,.scene-title.played strong::after{animation:none;}

/* The scene already names the station, so the small meta label steps aside. */
.is-walking .station-meta{justify-content:flex-end;}
.is-walking .station-meta>.tiny{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* The station page itself: a little more depth. */
.station-panel{position:relative;}
.station-outgoing{backface-visibility:hidden;will-change:transform,opacity;}
#walk-content.station-scrolling{overflow:visible;}
.walk .station-footer .primary{position:relative;overflow:hidden;}
.walk .station-footer .primary::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff45 50%,transparent 70%);transform:translateX(-120%);animation:sheen 4.5s 1.5s ease-in-out infinite;}
@keyframes sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---------- Particles, sound, the dive into the book ---------- */
.walk-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;}
.dive-veil{position:fixed;inset:0;z-index:60;pointer-events:none;background:radial-gradient(circle at 50% 58%,#fffdf6 0%,#fbeff3 55%,#eadff0 100%);}
.walk-header-start{display:flex;align-items:center;gap:18px;}
.walk .sound-toggle{display:inline-flex;align-items:center;gap:8px;border:0;padding:8px 0;font-size:13px;color:var(--ink-soft);}
.sound-icon{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.sound-icon i{display:block;width:3px;height:14px;border-radius:2px;background:currentColor;opacity:.55;transform:scaleY(.36);transform-origin:bottom;}
.sound-toggle[aria-pressed=true] .sound-icon i{opacity:1;animation:eq 1.1s ease-in-out infinite;}
.sound-toggle[aria-pressed=true] .sound-icon i:nth-child(2){animation-delay:-.4s;}
.sound-toggle[aria-pressed=true] .sound-icon i:nth-child(3){animation-delay:-.8s;}
@keyframes eq{0%,100%{transform:scaleY(.29)}50%{transform:scaleY(1)}}
.is-arriving .sound-toggle{display:none;}

/* ---------- Phones: the map folds into a strip, the walker rides it ---------- */
@media(max-width:760px){
  .garden .landscape{max-width:300px;}
  .is-walking .garden .landscape{aspect-ratio:auto;border-radius:0;overflow:visible;box-shadow:none;background:none;max-width:none;}
  .is-walking .garden .landscape::after,.is-walking .map-art,.is-walking .map-route,.is-walking .map-prints{display:none;}
  .is-walking .map-camera{position:relative;height:100%;transform:none!important;}
  .is-walking .garden .stone-bloom{display:none;}
  .is-walking .stones::after{height:3px!important;top:26.5px!important;}
  .is-walking .garden .stone-number{width:28px;height:28px;font-size:11px;box-shadow:0 0 0 2px #fffaf3,0 2px 6px -2px #3b1f4a80;}
  .is-walking .garden .stone[aria-current] .stone-number{opacity:0;transform:scale(.6);}
  .is-walking .garden .stone[aria-current] .stone-number::after,.is-walking .garden .stone[aria-current] .stone-bloom{display:none;}
  .is-walking .garden .stone:not([aria-current]) .stone-label,.is-travelling .garden .stone .stone-label{opacity:1!important;transform:none;}
  .is-walking .garden .stone-label{box-shadow:none;background:none;padding:0;}
  .is-walking .stones::after{content:'';position:absolute;top:27px;left:20px;height:2px;width:var(--strip-progress,0);background:linear-gradient(90deg,#ffc86e,#e0529e);border-radius:2px;transition:width 600ms cubic-bezier(.3,.7,.3,1);}
  .is-walking .walker{width:40px;margin-top:22px;}
  .is-walking .walker-halo{width:50px;margin-left:-25px;bottom:-10px;height:22px;}
  .walker.strip-glide{transition:transform 600ms cubic-bezier(.4,0,.2,1),opacity 400ms;}
  .is-walking .walk-space{padding-top:22px;}
  .scene-stage{aspect-ratio:16/9;max-height:34svh;border-radius:20px;margin-bottom:26px;}
  .scene-title{left:18px;bottom:14px;}
  .scene-title strong{font-size:30px;}
}
@media(prefers-reduced-motion:reduce){.walk-fx{display:none;}.scene-layer{transform:none;}}
.motion-paused .walk-fx{display:none;}

/* ---------- Mourning: a stone cairn on moss, with one warm breath of light ---------- */
.station-panel[data-step="5"] .station-hint{font-family:var(--booklet-serif);font-style:italic;font-size:22px;line-height:1.5;color:#3f3769;background:linear-gradient(120deg,#f3effb,#faf6ee);border:1px solid #ddd5ee;border-left:4px solid var(--station);border-radius:0 16px 16px 0;padding:16px 20px 16px 22px;margin:4px 0 26px;}
.station-panel[data-step="5"] .station-hint::before{content:'✋';font-style:normal;font-size:20px;margin-right:10px;opacity:.8;}
.mourning{--breath:10s;margin:6px 0 4px;}
.breath-scene{position:relative;width:min(100%,440px);aspect-ratio:1;margin:0 auto;border-radius:32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 80% 55% at 50% 42%,#fff8ea 0%,#f4e8d4 45%,transparent 80%),linear-gradient(to bottom,#efe4d2 0%,#e6d7bf 60%,#d8c6a7 100%);
  box-shadow:0 26px 50px -30px #5a4428aa,0 0 0 1px #fffaf0,inset 0 0 60px #b89b7033;}
.breath-scene::before{content:'';position:absolute;inset:0;z-index:0;opacity:.35;background:radial-gradient(circle at 20% 30%,#8a9a6a22,transparent 40%),radial-gradient(circle at 80% 70%,#a07a5022,transparent 45%);}
.breath-glow{position:absolute;z-index:1;left:50%;top:40%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;background:radial-gradient(circle,#fff3d2 0%,#ffe0a660 35%,#e9c48a26 58%,transparent 72%);transform:scale(.8);animation:earth-breath var(--breath) ease-in-out infinite;animation-delay:var(--breath-offset);}
@keyframes earth-breath{0%,100%{transform:scale(.72);opacity:.6}40%{transform:scale(1.06);opacity:1}}
.breath-cairn{position:absolute;z-index:2;left:50%;top:40%;width:46%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 14px 12px #5a442840);}
.breath-ring{position:absolute;z-index:3;left:14%;top:4%;width:72%;height:72%;transform:rotate(-90deg);overflow:visible;will-change:transform;}
.breath-ring circle{fill:none;stroke:#8c745233;stroke-width:.6;}
.breath-ring #minute-progress{stroke:#b07a3c;stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1 1;transition:stroke-dashoffset 250ms linear;}
.breath-words{position:absolute;z-index:4;left:0;right:0;bottom:7%;text-align:center;padding:0 10%;pointer-events:none;}
.mourning .breath-need{margin:0;font-family:var(--booklet-serif);font-size:clamp(30px,4.2vw,40px);line-height:1.1;color:#3b2f22;overflow-wrap:anywhere;}
.breath-scene.is-waiting .breath-need{font-size:clamp(22px,2.8vw,26px);font-style:italic;color:#6b5a45;}
.breath-scene.is-waiting .breath-glow{animation-duration:16s;}
.mourning .breath-cue{margin:10px 0 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#7a5a36;transition:opacity 400ms;}
.breath-rest{text-align:center;font-family:var(--booklet-serif);font-style:italic;font-size:18px;color:#6b5a45;margin:18px 0 26px;}
.mourn-label{font-size:15px;color:var(--ink-soft);margin:0 0 12px;}
.mourn-needs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.walk .mourn-need{border-radius:40px;padding:10px 18px;font-size:16px;color:#5a4630;background:linear-gradient(155deg,#fdf9f1,#efe5d3);border:1px solid #dccdb2;box-shadow:inset 0 1px 0 #fff;}
.walk .mourn-need[aria-pressed=true]{color:#fff;background:linear-gradient(145deg,#9a7a52,#6f5536);border-color:#6f5536;box-shadow:0 4px 14px -4px #6f5536,0 0 0 4px #9a7a5222;}
@media(hover:hover) and (pointer:fine){.walk .mourn-need:hover{border-color:#b0936a;transform:translateY(-2px);}}
.walk .station-footer .primary.is-ready{animation:ready-glow 2.4s ease-in-out infinite;}
@keyframes ready-glow{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--station) 18%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--station) 8%,transparent)}}
@media(max-width:760px){.breath-scene{border-radius:26px;}.mourn-needs{gap:8px;}.walk .mourn-need{font-size:15px;padding:9px 15px;}.station-panel[data-step="5"] .station-hint{font-size:20px;}}

/* Jackal Show: example openings fade between each other. */
.walk #draft::placeholder{transition:opacity 350ms ease;}
.walk #draft.placeholder-fade::placeholder{opacity:0;}

/* ---------- Performance: pause what is out of view, and the low-power tier ---------- */
/* Endless decorations stop while their part of the page is scrolled away (classes set in the journey script). */
.walk.map-off .walker-halo,.walk.map-off .stone-number::after{animation-play-state:paused;}
.walk.scene-off .scene-layer img{animation-play-state:paused;}
.walk.head-off .walk-logo .nvcr-logo-word i{animation-play-state:paused;}
/* is-lite keeps every element but drops animated blur, filter glows and continuous repaints. */
.walk.is-lite .route-travelled{filter:none;}
.walk.is-lite .route-soft{display:inline;}
.walk.is-lite .scene-title.play strong span{animation-name:letter-in-lite;}
@keyframes letter-in-lite{from{opacity:0;transform:translateY(22px) rotate(4deg)}to{opacity:1;transform:none}}
.walk.is-lite.is-walking .walk-logo .nvcr-logo-word i{animation-play-state:paused;}
.walk.is-lite .breath-ring #minute-progress{transition:none;}