/* Scroll selects complete wheel positions; transitions finish independently of scrolling. */
.direction-scroll-stage { position: relative; overflow-anchor: none; }
.card-directions .directions-swipe { display: none; }
.direction-scroll-stage .direction-sticky { position: sticky; top: 0; height: 100svh; min-height: 580px; padding: 0; }
.direction-sticky .directions-heading { position: absolute; top: 28px; left: 0; right: 0; padding: 0; text-align: center; opacity: calc(1 - var(--dock, 0)); transition: opacity .25s; pointer-events: none; }
.direction-sticky .directions-heading h3 { font-size: clamp(44px, 4.4vw, 72px); }
.direction-scroll-hint { position: absolute; bottom: 20px; left: 0; right: 0; font-size: 12px; opacity: calc(1 - var(--dock, 0)); transition: opacity .25s; }
.direction-scroll-stage .direction-strip { position: absolute; inset: 0; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: hidden; scroll-snap-type: none; z-index: 2; pointer-events: none; }
.direction-scroll-stage .direction-track { position: relative; width: 100%; height: 100%; padding: 0; perspective: 1400px; perspective-origin: 50% 38%; transform-style: preserve-3d; }
.direction-scroll-stage .direction-example { display: block; position: absolute; top: 0; left: 0; width: var(--card-base, 360px); height: var(--card-height, 440px); min-width: 0; padding: 0; transform-origin: center; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--angle)) scale(var(--scale)); opacity: var(--opacity); will-change: transform; transition: transform .85s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.direction-scroll-stage .direction-example .language-tile { width: 100%; height: 100%; min-height: 0; perspective: 950px; transform: none; transition: none; pointer-events: auto; }
.direction-scroll-stage .direction-example[inert] .language-tile { pointer-events: none; }
.direction-scroll-stage .direction-example .tile-face { padding: 22px; filter: blur(var(--blur)); transition: filter .85s cubic-bezier(.4,0,.2,1), border-color .3s ease, box-shadow .3s ease; }
.direction-example[data-demonstrating] .tile-face { border-color: #c6e0ff; box-shadow: 0 0 0 3px #84baff60, 0 12px 36px #0008; }
.direction-scroll-stage .direction-example .tile-meta > span:first-child, .direction-scroll-stage .direction-example .tile-kind { font-size: 11px; }
.direction-scroll-stage .direction-example .direction-sentence { font-size: 31px; }
.direction-scroll-stage .direction-example .tile-content b { font-size: 54px; }
.direction-scroll-stage .direction-example .direction-photo { max-height: 265px; }
.direction-scroll-stage .direction-example .tile-back .direction-photo { max-height: 190px; }
.direction-scroll-stage .direction-example .direction-dog { max-height: calc(var(--card-height, 440px) - 115px); height: 270px; object-fit: contain; }
.direction-scroll-stage .direction-example .tile-back .direction-dog { height: 160px; }
.direction-scroll-stage .direction-copy { position: absolute; top: calc(100% + 22px); left: -110px; width: 580px; margin: 0; text-align: center; opacity: 0; transition: opacity .18s; pointer-events: none; }
.direction-scroll-stage .direction-example[data-selected="true"] .direction-copy { opacity: calc(1 - var(--dock, 0)); transition-delay: .32s; }
.direction-scroll-stage .direction-copy h4 { margin: 0; font-size: 32px; }
.direction-scroll-stage .direction-copy p { margin-top: 10px; font-size: 17px; line-height: 1.5; }
.direction-scroll-stage .direction-copy .direction-route { font-size: 13px; }
.direction-dock-label { position: absolute; top: calc(100% + 10px / var(--scale, 1)); left: 0; right: 0; color: #c8d6e8; text-align: center; font-size: calc(12px / var(--scale, 1)); line-height: 1.3; opacity: var(--dock, 0); transition: opacity .3s; pointer-events: none; }
.direction-scroll-stage .tile-flip-label { opacity: calc(1 - var(--dock, 0)); }
.direction-scroll-stage .direction-audio { min-width: 88px; min-height: 88px; }
.direction-scroll-stage .direction-strip:focus-visible { outline-offset: -3px; }
.network-docked { position: absolute; inset: 8px 0 0; opacity: var(--network-reveal, 0); transform: translateY(calc((1 - var(--network-reveal, 0)) * 50px)); transition: opacity .6s, transform .7s; pointer-events: none; }
.network-docked.is-available { pointer-events: auto; }
.network-dock-heading { position: absolute; top: 15%; left: max(40px, calc((100vw - 1480px) / 2)); width: clamp(330px, 28vw, 540px); text-align: left; z-index: 1; opacity: 0; transform: translateY(24px); transition: opacity .18s, transform .35s; pointer-events: none; }
.network-dock-heading .feature-eyebrow { margin-bottom: 14px; font-size: 10px; }
.network-dock-heading h3 { margin: 0; font-size: clamp(34px, 3.3vw, 58px); line-height: 1.1; font-weight: 500; letter-spacing: -.035em; }
.network-dock-heading p { margin-top: 18px; color: #b5c0cd; font-size: 20px; line-height: 1.6; }
.network-meaning-heading p { margin: 0; color: #dae1e9; font-size: clamp(25px, 1.7vw, 32px); line-height: 1.5; letter-spacing: -.025em; }
.network-docked[data-network-chapter="meaning"] .network-meaning-heading, .network-docked[data-network-chapter="learning"] .network-learning-heading { opacity: 1; transform: none; transition-delay: .22s; }
.network-docked .network-space { position: absolute; inset: 0 0 calc(var(--network-bottom, 280px) - 60px) 22%; min-height: 120px; touch-action: pan-y; transition: left .8s ease, top .8s ease; }
.network-docked[data-network-chapter="question"] .network-space { left: 0; top: -28px; }
.network-docked .network-renderer { filter: blur(0); transition: filter .6s ease; }
.network-docked[data-network-chapter="question"]:not([data-network-focused="true"]) .network-renderer { filter: blur(3px); }
.network-docked .network-renderer, .network-docked .network-renderer > div { width: 100%; height: 100%; }
.network-docked canvas { display: block; touch-action: pan-y; }
.network-docked .network-hotspots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.network-docked .network-hotspot { position: absolute; min-height: 44px; min-width: 44px; pointer-events: auto; background: transparent; border: 0; border-radius: 20px; padding: 0; color: transparent; font-size: 0; cursor: pointer; }
.network-docked .network-hotspot:focus-visible { outline: 2px solid #aecfff; outline-offset: 2px; }
.network-docked .network-hotspot[hidden], .network-docked .network-study { display: none; }
.network-docked .network-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; color: #a8bed2; text-align: center; }
.network-docked .network-fallback[hidden] { display: none; }
.network-docked .network-scene-tools, .network-docked .network-status, .network-disclosure { position: absolute; left: max(40px, calc((100vw - 1480px) / 2)); width: clamp(330px, 28vw, 540px); opacity: 1; transition: opacity .3s; }
.network-docked[data-network-chapter="question"] .network-scene-tools, .network-docked[data-network-chapter="question"] .network-status, .network-docked[data-network-chapter="question"] .network-disclosure { opacity: 0; }
.network-docked .network-scene-tools { bottom: calc(var(--network-bottom, 280px) + 90px); display: flex; align-items: center; gap: 16px; font-size: 11px; color: #8998a8; }
.network-docked .network-scene-tools button { min-height: 44px; border: 1px solid #ffffff18; border-radius: 99px; padding: 6px 15px; background: #ffffff04; color: #c5d6e8; cursor: pointer; font: inherit; }
.network-docked .network-scene-tools button:focus-visible { outline: 2px solid #aecfff; outline-offset: 3px; }
.network-docked .network-status { bottom: calc(var(--network-bottom, 280px) + 38px); margin: 0; color: #b4c8e0; text-align: left; font-size: 12px; line-height: 1.4; }
.network-disclosure { bottom: calc(var(--network-bottom, 280px) + 8px); text-align: left; font-size: 9px; color: #8290a1; }
.network-disclosure a { color: inherit; text-underline-offset: 3px; }
.network-opening { position: absolute; inset: 0 0 calc(var(--network-bottom, 280px) - 60px); z-index: 3; display: flex; justify-content: center; align-items: center; gap: .24em; padding-bottom: 100px; pointer-events: none; font-size: clamp(44px, 5.4vw, 88px); font-weight: 500; letter-spacing: -.045em; }
.network-word-slot { display: inline-flex; position: relative; }
.network-opening-word { display: inline-block; color: #e9f2ff; font-weight: 600; transform-origin: center; }
.network-docked[data-network-unavailable] .network-opening { display: none; }
@media (max-width: 680px) {
  .direction-sticky .directions-heading { top: 85px; }
  .direction-sticky .directions-heading h3 { font-size: 38px; }
  .direction-scroll-stage .direction-copy { width: 300px; left: calc((100% - 300px) / 2); }
  .direction-scroll-stage .direction-copy h4 { font-size: 25px; }
  .direction-scroll-stage .direction-copy p { font-size: 14px; }
  .direction-dock-label { font-size: calc(10px / var(--scale, 1)); }
  .network-docked .network-space { top: 200px; bottom: 75px; left: 0; }
  .network-dock-heading { top: 80px; left: 24px; right: 24px; width: auto; }
  .network-dock-heading h3 { font-size: 26px; }
  .network-dock-heading p { font-size: 14px; }
  .network-docked .network-scene-tools, .network-docked .network-status, .network-disclosure { left: 16px; right: 16px; width: auto; }
  .network-opening { font-size: 30px; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce), (max-height: 599px) {
  .direction-scroll-stage .direction-sticky { position: relative; height: 800px; min-height: 0; }
  .direction-scroll-stage .direction-strip { overflow-x: auto; pointer-events: auto; }
  .direction-scroll-stage .direction-track { perspective: none; }
  .direction-scroll-stage .direction-example, .network-docked, .network-dock-heading { transition: none; }
  .network-docked { transform: none; }
  .network-docked .network-renderer { transition: none; }
}