/* One Origin — styles for the five "Shifting the frame" experiences added in v2:
   converging-rivers.html, synchronized-breath.html, shared-lexicon.html,
   erasure-borders.html and mirror-of-ages.html.

   Load after perspectives.css and theme.css. Every animation has a reduced-motion
   fallback at the bottom of the file. */

/* ---------- shared stage ---------- */
.mv-stage { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--hair); background: var(--void-2); }
.mv-stage canvas { display: block; width: 100%; height: auto; }
.mv-hint { font-family: var(--mono); font-size: .72rem; color: var(--sand-dim); margin-top: .7em; line-height: 1.55; }
.mv-readout { font-family: var(--mono); font-size: .9rem; color: var(--gold); margin-top: 1em; min-height: 3.2em; line-height: 1.55; }
.mv-readout b { font-weight: 500; color: var(--sand); }

/* ---------- 1. converging rivers ---------- */
#rv-canvas { cursor: grab; touch-action: none; border-radius: 10px; }
#rv-canvas:active { cursor: grabbing; }
#rv-canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- 2. synchronized breath ---------- */
.br-field {
  position: relative; overflow: hidden; display: grid; place-items: center;
  min-height: 380px; border-radius: 12px; border: 1px solid var(--hair);
  background: radial-gradient(circle at 50% 42%, rgba(184, 94, 55, .16), transparent 62%), var(--void-2);
}
.br-lung-svg { width: min(320px, 78%); height: auto; overflow: visible; position: relative; z-index: 1; }
#br-lung { transform-box: view-box; transform-origin: 200px 200px; will-change: transform; }
.br-phase { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; color: var(--sand-dim); z-index: 2; }
.br-ring {
  position: absolute; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--clay);
  transform: translate(-50%, -50%) scale(.1); opacity: .8; pointer-events: none; z-index: 0;
  animation: br-ring 4.2s ease-out forwards;
}
@keyframes br-ring { to { transform: translate(-50%, -50%) scale(14); opacity: 0; } }
.br-globe { display: block; width: 100%; height: auto; background: #061012; border-radius: 10px; }
.br-land { fill: #14302b; stroke: rgba(120, 220, 190, .38); stroke-width: .8; }
.br-grid { stroke: rgba(120, 220, 190, .1); stroke-width: .8; }
.br-ping { fill: none; stroke: #8ff5cf; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: br-ping 1.6s ease-out forwards; }
.br-ping.is-home { stroke: #ffd08a; }
@keyframes br-ping { from { transform: scale(1); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.br-count { font-family: var(--serif); font-size: 1.15rem; line-height: 1.5; margin-top: 1em; }
.br-count b { color: var(--clay); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- 3. shared lexicon ---------- */
.lx-stage svg { width: 100%; height: auto; display: block; }
.lx-link { stroke: var(--sand-dim); stroke-opacity: .22; stroke-width: 1; stroke-dasharray: 3 6; }
.lx-link.is-on { stroke: var(--gold); stroke-opacity: .85; stroke-width: 1.4; animation: lx-dash 1.2s linear infinite; }
@keyframes lx-dash { to { stroke-dashoffset: -18; } }
.lx-fam { cursor: pointer; outline: none; }
.lx-fam-dot { fill: var(--verdant); transition: fill .3s ease; }
.lx-fam:hover .lx-fam-dot, .lx-fam:focus-visible .lx-fam-dot, .lx-fam.is-hit .lx-fam-dot { fill: var(--gold); }
.lx-fam.is-hit .lx-fam-dot { animation: lx-hit .9s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes lx-hit { 0% { transform: scale(1); } 30% { transform: scale(2.2); } 100% { transform: scale(1); } }
.lx-fam-name { font-family: var(--serif); font-size: 12px; fill: var(--sand); }
.lx-fam-word { font-family: var(--serif); font-size: 13px; fill: var(--clay); }
.lx-concept { cursor: pointer; outline: none; }
.lx-halo { fill: rgba(224, 189, 123, .1); transition: fill .3s ease; }
.lx-concept.is-chosen .lx-halo, .lx-concept:focus-visible .lx-halo { fill: rgba(224, 189, 123, .32); }
.lx-star { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(224, 189, 123, .8)); }
.lx-concept-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; fill: var(--sand); }
.lx-ring { fill: none; stroke: var(--gold); stroke-width: 1.2; }
.lx-glyph-panel { text-align: center; padding: 1.1em .8em .8em; border: 1px solid var(--hair); border-radius: 10px; background: var(--panel); margin-top: 1.2em; }
.lx-glyph {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; white-space: pre;
  min-height: 1.5em; font-family: 'Noto Sans Arabic', 'Noto Sans Ethiopic', 'Noto Sans SC', var(--serif), serif;
  font-size: clamp(3rem, 13vw, 6rem); line-height: 1.15; color: var(--clay);
}
.lx-ch { display: inline-block; font-weight: 500; transition: opacity .35s ease, filter .35s ease, transform .35s ease, font-weight .35s ease; }
.lx-ch.is-out { opacity: 0; filter: blur(8px); transform: translateY(-.25em) scale(1.25); font-weight: 200; }
.lx-ch.is-in { opacity: 0; filter: blur(8px); transform: translateY(.3em) scale(.7); font-weight: 200; transition: none; }
.lx-script { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sand-dim); margin-top: .6em; }
.lx-stage-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 1.4em; align-items: start; }
@media (max-width: 860px) { .lx-stage-wrap { grid-template-columns: 1fr; } }

/* ---------- 4. erasure of borders (scroll-driven) ---------- */
.er-intro { padding-bottom: 2vh; }
.er-track { position: relative; height: 420vh; }
.er-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: .75em;
  padding: 14px 5vw; background: #050a0c; color: #e9e3d3;
}
.er-sticky canvas { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; border-radius: 10px; }
.er-caption { max-width: 1100px; width: 100%; margin: 0 auto; }
.er-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #e0bd7b; }
.er-text { font-family: var(--serif); font-size: clamp(.98rem, 1.6vw, 1.14rem); line-height: 1.5; margin-top: .35em; max-width: 70ch; min-height: 4.5em; }
.er-peel { max-width: 1100px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .6em 1em; align-items: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #b8b2a2; }
.er-peel input[type="range"] { flex: 1 1 260px; accent-color: #df8964; }
.er-peel output { color: #e0bd7b; }
@media (max-width: 720px) { .er-track { height: 340vh; } .er-text { min-height: 6.5em; } }
.er-after { margin-top: 2em; }

/* ---------- 5. mirror of ages ---------- */
.ma-stage { display: grid; place-items: center; margin-top: 1.2em; }
.ma-wrap { width: min(560px, 100%); transform-style: preserve-3d; will-change: transform; }
#ma-canvas { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--hair); background: radial-gradient(circle at 50% 40%, rgba(224, 189, 123, .08), transparent 70%), var(--panel-2); }
.ma-status { display: flex; justify-content: center; margin-top: .8em; }
.pct-inline { font-family: var(--mono); font-size: .8rem; padding: .45em .85em; border-radius: 999px; border: 1px solid var(--hair); color: var(--gold); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .br-ring, .br-ping, .lx-link.is-on, .lx-fam.is-hit .lx-fam-dot { animation: none; }
  .lx-ch, .lx-halo, .lx-fam-dot { transition: none; }
  .er-sticky { position: relative; height: auto; padding: 24px 5vw; }
  .er-track { height: auto; }
}

/* spacing between the lede and the opening photograph on the new pages */
.scene-art { margin-top: 1.6em; }