/* ThinqShift: About page. Tokens in tokens.css, shared nav/footer/layout + .value-grid in base.css. */

.origin-block { max-width: 760px; }
.origin-block p.lede { margin-bottom: 18px; }
.origin-block p.lede:last-child { margin-bottom: 0; }

/* ─── BYLINE ─── */
.byline { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border2); }
.byline p { display: flex; flex-direction: column; line-height: 1.35; }
.byline strong { color: var(--white); font-weight: 600; }
.byline span { color: var(--muted); font-size: 0.86rem; }

/* ─── ORIGIN STORY ───
   Sticky visual on the left; its data-scene switches as each chapter on the
   right crosses the middle of the viewport. Below 900px the stage is hidden
   and each chapter shows its own cloned copy of the visual inline. */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.story-stage { position: sticky; top: calc(50vh - 210px); height: 420px; display: flex; align-items: center; justify-content: center; }
.story-svg { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.story-chapter { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s ease; }
.story-chapter.active { opacity: 1; }
.story-chapter:first-child { min-height: 60vh; }
.story-num { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-soft); margin-bottom: 12px; }
.story-key { font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.15; margin-bottom: 16px; }
.story-chapter .lede { max-width: 520px; }
.story-cite { margin-top: 12px; font-size: 0.74rem; color: var(--muted); opacity: .8; }
.story-inline { display: none; }

/* Scene layers */
.story-svg .sc { opacity: 0; transition: opacity .6s ease; }
[data-scene="1"] .s1, [data-scene="2"] .s2, [data-scene="3"] .s3, [data-scene="4"] .s4,
[data-scene="5"] .s5, [data-scene="6"] .s6, [data-scene="7"] .s7, [data-scene="8"] .s8 { opacity: 1; }
.story-svg text { font-family: var(--font-body); text-anchor: middle; }
.story-svg text[text-anchor="end"] { text-anchor: end; }
.story-svg text[text-anchor="start"] { text-anchor: start; }
.s-note { fill: var(--amber-soft); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.s-chip { fill: var(--muted); font-size: 12px; }
.s-caption { fill: var(--lilac); font-family: var(--font-display) !important; font-style: italic; font-size: 19px; }
.s-big { fill: var(--orange); font-family: var(--font-display) !important; font-weight: 700; font-size: 40px; }
.q-mark { fill: var(--orange); font-family: var(--font-display) !important; font-weight: 700; font-size: 190px; }
.orbit { fill: none; stroke: var(--border2); stroke-width: 1.2; stroke-dasharray: 3 9; transform-box: view-box; transform-origin: 200px 180px; animation: story-spin 40s linear infinite; }
.orbit-2 { animation-direction: reverse; animation-duration: 60s; }
@keyframes story-spin { to { transform: rotate(360deg); } }

/* The twenty figures: all dim in scene 2 except the five, the five line up
   under the star in scene 3, everyone lights up in scene 7. */
.figs { opacity: 0; transition: opacity .6s ease; }
[data-scene="2"] .figs, [data-scene="3"] .figs, [data-scene="8"] .figs { opacity: 1; }
.fig { fill: var(--purple-100); opacity: .22; transform: translate(var(--x), var(--y)); transition: transform .9s cubic-bezier(.65,0,.35,1), opacity .6s ease, fill .6s ease; }
[data-scene="2"] .fig.lit { fill: var(--orange); opacity: 1; }
[data-scene="3"] .fig { opacity: 0; }
[data-scene="3"] .fig.lit { fill: var(--orange); opacity: 1; transform: translate(var(--x3), var(--y3)); }
[data-scene="8"] .fig { fill: var(--lilac); opacity: 1; }
[data-scene="8"] .fig.lit { fill: var(--orange); }

.star { fill: var(--amber-soft); filter: drop-shadow(0 0 10px rgba(224,171,63,.7)); }
.beam { fill: none; stroke: var(--amber-soft); stroke-width: 1; opacity: .5; }
.ripple { fill: none; stroke: var(--purple-200); stroke-width: 1.5; opacity: .5; transform-box: view-box; transform-origin: 200px 180px; }
[data-scene="8"] .ripple { animation: story-ripple 3.2s ease-out infinite; }
[data-scene="8"] .ripple.r2 { animation-delay: .5s; }
[data-scene="8"] .ripple.r3 { animation-delay: 1s; }
@keyframes story-ripple { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.1); } }

/* Line-draw paths (scenes 4, 5, 6) */
.draw { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s ease .2s; }
[data-scene="4"] .s4 .draw, [data-scene="5"] .s5 .draw, [data-scene="6"] .s6 .draw, [data-scene="7"] .s7 .draw { stroke-dashoffset: 0; }
.world { stroke: var(--orange); }
.dev { stroke: var(--purple-100); stroke-dasharray: 1; }
.world-t { fill: var(--orange-soft); }
.gap { fill: none; stroke: var(--muted); stroke-width: 1.2; opacity: .7; }
/* Scene 5: the turbulence line draws left to right, each disruption lands in
   turn, then the old certainties fade and get struck through. */
.baseline { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 3 6; }
.wave { stroke: var(--orange); stroke-width: 2; }
[data-scene="5"] .s5 .wave { transition-duration: 2.4s; }
.ev { opacity: 0; transition: opacity .5s ease; }
[data-scene="5"] .ev { opacity: 1; transition-delay: var(--d); }
.ev-tick { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
.ev-t { fill: var(--lilac); font-size: 11px; font-weight: 600; }
.ev-t tspan { font-weight: 400; fill: var(--muted); }
.calm { fill: var(--lilac); font-size: 12px; letter-spacing: 0.04em; transition: opacity .8s ease; }
[data-scene="5"] .calm { opacity: .35; transition-delay: 2.6s; }
.calm-strike { fill: none; stroke: var(--orange-soft); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease; }
[data-scene="5"] .calm-strike { stroke-dashoffset: 0; transition-delay: 2.6s; }
/* Scene 7: five disciplines light up in turn and flow into one core. */
.flow { stroke: var(--purple-100); stroke-width: 1.4; opacity: .7; }
.src { opacity: 0; transition: opacity .5s ease; }
[data-scene="7"] .src { opacity: 1; transition-delay: var(--d); }
.src circle { fill: var(--amber-soft); filter: drop-shadow(0 0 6px rgba(224,171,63,.7)); }
.core { fill: var(--purple-400); stroke: var(--orange); stroke-width: 2; }
.core-glow { fill: var(--purple-200); opacity: .22; }
.core-t { fill: #fff; font-family: var(--font-display) !important; font-weight: 700; font-size: 11.5px; }
.m-core { fill: var(--purple-400); stroke: var(--purple-200); stroke-width: 2; filter: drop-shadow(0 0 14px rgba(136,39,171,.6)); }
.m-loop { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-branch { stroke: var(--border2); stroke-width: 1.6; }
.m-node.rw { fill: #a94fce; } .m-node.ac { fill: #e0ab3f; } .m-node.or { fill: #f2761a; }
.strike { opacity: .7; }
.strike-line { stroke: var(--muted); stroke-width: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .orbit, [data-scene="8"] .ripple { animation: none; }
  .fig, .draw, .story-svg .sc, .figs, .story-chapter, .ev, .calm, .calm-strike, .src { transition: none; }
}

/* Phones and tablets: stacked chapters, each with its own inline visual. */
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-stage { display: none; }
  .story-chapter, .story-chapter:first-child { min-height: 0; opacity: 1; padding: 28px 0; border-top: 1px solid var(--border); }
  .story-chapter:first-child { border-top: none; padding-top: 0; }
  .story-inline { display: block; max-width: 340px; margin: 0 auto 18px; }
}