/* ================= the hero answers the hand ================= */

/* alternate sides: chapters 2, 4, 6 sit on the right, their photo on the left */
.chapter.flip { inset-inline-start: auto; inset-inline-end: var(--gut); text-align: end; }
.chapter.flip .n { flex-direction: row-reverse; }
.lm { width: min(40vw, 580px); }
.lm.flip { inset-inline-end: auto; inset-inline-start: var(--gut); }
@media (max-width: 760px) {
  .chapter.flip { inset-inline-end: 16px; }
  .lm { width: 58vw; }
  .lm.flip { inset-inline-start: 16px; }
}

/* chapters, cards and intro text take the pointer */
.chapter.on, .lm.on, .intro, .hud .m, .hud .route, .scrollcue { pointer-events: auto; }
.chapter h3, .chapter p, .chapter .n { transition: transform .6s var(--ease), color .4s, opacity .4s; }
.chapter.on:hover h3 { transform: translateX(8px); }
.chapter.flip.on:hover h3 { transform: translateX(-8px); }
[dir="rtl"] .chapter.on:hover h3 { transform: translateX(-8px); }
[dir="rtl"] .chapter.flip.on:hover h3 { transform: translateX(8px); }
.chapter.on:hover .n { color: #fff; }
.chapter.on:hover .n::after { width: 70px; }
.chapter p { position: relative; }
.chapter.on:hover p { color: #fff; }

/* hovering a chapter or its photo lights the pin and line */
.lm-line line, .lm-line .pin { transition: stroke-width .4s, stroke .4s, r .4s; }
.hl .lm-line line { stroke-width: 2.2; stroke: #fff; }
.hl .lm-line .pin { r: 9; }
.hl .lm-line .ring { animation-duration: 1s; }

/* landmark photo: lifts, zooms, the caption slides */
.lm .ph { transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.lm.on:hover .ph { transform: translateY(-6px) scale(1.02); box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.5); }
.lm .ph img.show { transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.lm.on:hover .ph img.show { transform: scale(1.08); }
.lm figcaption b { transition: transform .6s var(--ease), color .4s; }
.lm.on:hover figcaption b { transform: translateX(6px); color: var(--ember-2); }
.lm .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.lm.on:hover .ph::after { transform: translateX(120%); transition: transform 1.1s var(--ease); }

/* intro title: each word lifts and warms under the cursor */
.intro h1 .w > span { transition: transform 1.4s var(--ease), translate .5s var(--spring), color .4s, text-shadow .4s; }
.intro h1 .w:hover > span { translate: 0 -.06em; color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.55); }
.intro h1 .ar { transition: opacity 1s var(--ease), translate 1.2s var(--ease), letter-spacing .5s, text-shadow .5s, color .4s; cursor: default; }
.intro h1 .ar:hover { text-shadow: 0 0 30px color-mix(in srgb, var(--ember-2) 70%, transparent); color: color-mix(in oklab, var(--ember-2), #fff 18%); }
.intro p { transition: opacity 1s var(--ease), translate 1.2s var(--ease), color .4s; }
.intro p:hover { color: #fff; }
.intro .kicker { transition: opacity 1s var(--ease), translate 1.2s var(--ease), color .4s, gap .5s var(--ease); }
.intro .kicker:hover { color: #fff; gap: 20px; }

/* HUD readouts react */
.hud .m { cursor: default; }
.hud .m b { transition: transform .5s var(--spring), color .3s, text-shadow .3s; transform-origin: left bottom; }
[dir="rtl"] .hud .m b { transform-origin: right bottom; }
.hud .m:hover b { transform: scale(1.08); color: var(--ember-2); text-shadow: 0 0 24px color-mix(in srgb, var(--ember-2) 50%, transparent); }
.hud .m span { transition: opacity .3s, letter-spacing .5s var(--ease); }
.hud .m:hover span { opacity: 1; letter-spacing: .3em; }
[dir="rtl"] .hud .m:hover span { letter-spacing: 0; }

/* route ticks are buttons: hover grows, click jumps */
.hud .route .tick { cursor: pointer; transition: height .4s var(--spring), background .3s, width .3s; }
.hud .route .tick::before { content: ""; position: absolute; inset: -14px -10px -6px; }
.hud .route .tick:hover, .hud .route .tick:focus-visible { height: 22px; width: 2px; background: var(--ember-2); outline: none; }
.hud .route .tick:hover::after, .hud .route .tick:focus-visible::after { opacity: 1; color: var(--ember-2); transform: translateY(-3px); }
.hud .route .tick::after { transition: opacity .3s, color .3s, transform .4s var(--spring); }

/* scroll cue invites a click */
.scrollcue { cursor: pointer; transition: transform .5s var(--spring); }
.scrollcue:hover { transform: translateY(4px); }
.scrollcue:hover i { background: linear-gradient(var(--ember-2), transparent); }

@media (hover: none) { .chapter.on, .lm.on, .intro { pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .lm .ph::after { display: none; } }
[dir="rtl"] .intro h1 .ar { margin-top: .32em; }