/* ============ CAPTAIN — overlays.css (v2) ============ */
/* Text overlays are COMPOSITION-LOCKED: physical left/right follow the dark
   regions of the START frames, not reading direction. Fibers.js drives all
   per-span motion; this file positions the blocks and styles the spans. */

.ov, .ov-beat2 {
  position: absolute; z-index: 10;
  opacity: 0; pointer-events: none;
  will-change: opacity;
}
.ov {
  top: 50%; transform: translateY(-50%);
  width: min(42vw, 540px);
}
.ov.on { pointer-events: auto; }
.ov[data-side="right"] { right: clamp(56px, 7vw, 120px); left: auto; text-align: left; }
.ov[data-side="left"]  { left: clamp(56px, 7vw, 120px); right: auto; text-align: left; }
html[lang="fa"] .ov { text-align: right; }

/* beat 2 — section 7 CTAs, centered over the tower end frame */
.ov-beat2 {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(64vw, 680px); text-align: center;
}
.ov-beat2.on { pointer-events: auto; }

.ov-index {
  font-size: 10px; color: var(--cyan); letter-spacing: .3em;
  margin-bottom: 22px; opacity: .85;
}
.ov-index .idx-num { color: var(--amber); }

.ov-h {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: .01em;
  min-height: 1.08em;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(5,6,14,.8);
  margin-bottom: 18px;
  overflow-wrap: normal;
  word-break: keep-all;
}
html[lang="fa"] .ov-h { font-family: var(--fa); letter-spacing: 0; line-height: 1.4; }

/* word wrapper — keeps each word whole so it never breaks mid-letter */
.ov-h .fw { display: inline-block; white-space: nowrap; }
/* fiber character / word spans */
.ov-h .fc, .ov-sub .fc, .ov-body .fc {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.ov-h .fc { color: var(--text); }

.ov-sub { font-size: 10.5px; color: var(--cyan); letter-spacing: .26em; margin-bottom: 14px; }
.ov-body {
  font-size: clamp(14px, 1.15vw, 16.5px);
  line-height: 1.65; color: var(--text);
  opacity: .92;
  text-shadow: 0 1px 16px rgba(5,6,14,.9);
  max-width: 42ch;
}
.ov-beat2 .ov-body { margin-inline: auto; }
html[lang="fa"] .ov-body { line-height: 1.9; }

.ov-hint {
  margin-top: 40px; font-size: 9.5px; color: var(--dim); letter-spacing: .34em;
  display: inline-flex; align-items: center; gap: 12px;
}
.ov-hint::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(var(--cyan), transparent);
  animation: hint-drop 1.8s ease-in-out infinite;
}
@keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

.ov-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
html[lang="fa"] .ov-chips { justify-content: flex-end; }
.chip {
  font-size: 9.5px; letter-spacing: .2em; color: var(--cyan);
  border: 1px solid var(--line); border-radius: 3px;
  padding: 7px 12px;
  background: rgba(10, 14, 30, .45);
  backdrop-filter: blur(6px);
}

.ov-more {
  margin-top: 26px;
  font-size: 10px; letter-spacing: .24em; color: var(--dim);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.ov-more:hover { color: var(--amber); border-color: var(--amber); }
.more-plus { color: var(--amber); font-size: 13px; }

/* ============ THE SWAP — body hands its space to the prose card ============ */
/* Both children are absolutely placed in one fixed box, so the card costs
   zero extra height. --swap (0→1) crossfades them as you scroll. */
.ov-swap { position: relative; min-height: 9.2em; }
/* Persian runs line-height 1.9 vs 1.65, so the same copy is ~25% taller and
   overflowed the box onto the bottom-anchored chips. Give it more room. */
html[lang="fa"] .ov-swap { min-height: 12em; }
.ov-swap > .ov-body { position: absolute; inset: 0 0 auto 0; }
.ov-swap > .ov-chips { position: absolute; inset: auto 0 0 0; margin-top: 0; }
.ov-swap > .ov-body, .ov-swap > .ov-chips {
  opacity: calc((1 - var(--d, 0) * .92) * (1 - var(--swap, 0)));
}
.card {
  position: absolute; inset: 0 0 auto 0;
  opacity: 0; will-change: transform, opacity;
  border-inline-start: 1px solid rgba(127,216,255,.28);
  padding-inline-start: 18px;
}
.cd-meta { display: block; font-size: 8.5px; letter-spacing: .24em; color: var(--amber); margin-bottom: 9px; }
.cd-t { font-size: clamp(15px, 1.35vw, 19px); font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.cd-b { font-size: clamp(13px, 1.02vw, 15px); line-height: 1.62; opacity: .9; }
html[lang="fa"] .cd-b { line-height: 1.95; }
@media (max-width: 820px) { .ov-swap { min-height: 8.4em; } }

/* ============ SUB-INFORMATION REVEAL (Lusion-style masked lines) ============ */
/* The headline block lifts and dims as the detail takes over the same column. */
/* the scroll-velocity lean/stretch rides along with the lift */
.ov > .ov-index, .ov > .ov-h, .ov > .ov-sub, .ov > .ov-body, .ov > .ov-chips, .ov > .ov-hint {
  transform: translateY(var(--lift, 0px))
             skewY(var(--vel-skew, 0deg))
             scale(var(--vel-x, 1), var(--vel-y, 1));
  opacity: var(--fade, 1);
  transition: none;
}
/* the headline block doesn't dim uniformly as it hands over — the section
   index stays legible for wayfinding, the body clears out of the way most */
.ov > .ov-index { opacity: calc(1 - var(--d, 0) * .15); }
.ov > .ov-h     { opacity: calc(1 - var(--d, 0) * .50); }
.ov > .ov-body  { opacity: calc(1 - var(--d, 0) * .92); }
.ov > .ov-chips { opacity: calc(1 - var(--d, 0) * 1); }
/* NO velocity shear on the detail rows — these are factual credentials and
   skewed data reads as a rendering defect, not as motion design. */

.detail { margin-top: 26px; opacity: 0; }
.dt-row {
  position: relative;
  padding: 11px 0 11px 0;
}
/* a hairline that draws itself in with the row */
.dt-row::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(127,216,255,.32), rgba(127,216,255,0));
  transform: scaleX(var(--rule, 0)); transform-origin: left center;
}
html[lang="fa"] .dt-row::after {
  background: linear-gradient(270deg, rgba(127,216,255,.32), rgba(127,216,255,0));
  transform-origin: right center;
}
.dt-mask { display: block; overflow: hidden; }
.dt-in {
  display: flex; align-items: baseline; gap: 14px;
  will-change: transform, opacity; backface-visibility: hidden;
}
.dt-l {
  flex: none; min-width: 96px;
  font-size: 8.5px; letter-spacing: .22em; color: var(--amber);
  opacity: calc(.7 + var(--near, 0) * .3); padding-top: 2px;
}
.dt-v {
  font-size: clamp(13px, 1.05vw, 15.5px); line-height: 1.45;
  color: var(--text); opacity: calc(.86 + var(--near, 0) * .14);
  text-shadow: 0 1px 14px rgba(5,6,14,.9);
}
/* proximity: the row leans toward the pointer and its rule brightens */
.dt-row {
  --near: 0;
  transform: translateX(calc(var(--near, 0) * 7px));
}
.dt-row::after { opacity: calc(.55 + var(--near, 0) * .45); }
html[lang="fa"] .dt-row { transform: translateX(calc(var(--near, 0) * -7px)); }
html[lang="fa"] .dt-in { flex-direction: row-reverse; }
html[lang="fa"] .dt-l { letter-spacing: 0; }
html[lang="fa"] .dt-v { line-height: 1.85; }

/* ---- the closing card (section 7 beat 2) ---- */
.fin-eyebrow {
  font-size: 9px; letter-spacing: .34em; color: var(--amber);
  margin-bottom: 20px;
}
.fin-h {
  font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; line-height: 1.12;
  letter-spacing: .01em; color: var(--text);
  text-shadow: 0 2px 26px rgba(5,6,14,.85);
  margin-bottom: 16px; text-wrap: balance;
}
.fin-sub {
  font-size: clamp(12px, 1vw, 14px); line-height: 1.6;
  color: var(--cyan); opacity: .8; letter-spacing: .04em;
  margin-bottom: 38px;
}
html[lang="fa"] .fin-h { font-family: var(--fa); letter-spacing: 0; line-height: 1.45; }
html[lang="fa"] .fin-sub { letter-spacing: 0; }

/* CTAs — target-lock styling lives in hud.css. align-items keeps every button
   on one baseline no matter how long its label is. */
.ov-ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: stretch;
  margin-top: 0;
}
.ov-ctas .cta { justify-content: center; }
/* very narrow phones: stack full-width instead of an untidy 2+1 wrap */
@media (max-width: 560px) {
  .ov-ctas { flex-direction: column; align-items: stretch; }
  .ov-ctas .cta { width: 100%; }
}
.ov-foot { margin-top: 44px; font-size: 9px; color: var(--dim); letter-spacing: .3em; opacity: .7; }

/* ============ NARROW LAYOUT — phones + tablets in portrait ============ */
/* A 16:9 film inside a portrait viewport crops hard, so there is no empty half
   for a side column. Text goes to the bottom instead. Must stay in sync with
   `mobileMQ` in js/main.js. */
@media (max-width: 820px), (max-width: 1200px) and (orientation: portrait) {
  .ov, .ov[data-side="right"], .ov[data-side="left"] {
    left: 24px; right: 24px; top: auto; bottom: 12vh;
    transform: none; width: auto; text-align: left;
  }
  .ov-beat2 { left: 24px; right: 24px; transform: none; width: auto; top: auto; bottom: 14vh; }
  .ov-h { font-size: clamp(24px, 7.4vw, 34px); }
  .ov-body { font-size: 14px; max-width: none; }
  .ov-hint { margin-top: 22px; }
  .ov-more { margin-top: 16px; }
  .ov-ctas { justify-content: flex-start; gap: 10px; }
  html[lang="fa"] .ov-ctas { justify-content: flex-end; }
  .ov-foot { margin-top: 24px; }
  .fin-h { font-size: clamp(22px, 6.6vw, 30px); }
  .fin-sub { font-size: 11.5px; margin-bottom: 26px; }

  /* ---- phone layout of the reveal ----
     The stage is position:fixed + overflow:hidden, so anything taller than the
     viewport is CLIPPED, not scrollable. Everything below buys back height. */

  /* The prose card is desktop-only: at 375px it needs more height than the swap
     box has, and it would land on top of the rows. Its text is still fully
     present in the end index and READ mode. */
  .card { display: none; }
  /* With no card sharing the space, the body/chips return to NORMAL FLOW.
     They are position:absolute on desktop so the card can occupy the same box —
     leaving them absolute here collapses .ov-swap to zero height and the text
     lands on top of the headline above and the rows below. */
  .ov-swap { min-height: 0; position: static; }
  .ov-swap > .ov-body,
  .ov-swap > .ov-chips { position: static; inset: auto; }
  .ov-swap > .ov-chips { margin-top: 14px; }

  /* Stack label above value — the 96px label column left only ~230px for the
     value, wrapping long entries to three cramped lines. Stacked, each value
     gets the full width and usually fits on one. */
  .detail { margin-top: 18px; }
  .dt-row { padding: 8px 0; }
  .dt-in { display: block; }
  .dt-l { display: block; min-width: 0; padding-top: 0; margin-bottom: 3px; font-size: 8px; }
  .dt-v { display: block; font-size: 13.5px; line-height: 1.4; }
  html[lang="fa"] .dt-v { line-height: 1.75; }

  /* Persian runs ~25% taller (headline 1.4, body 1.9, values 1.75). Drop the
     last row there so section 3 can never push up under the header. */
  html[lang="fa"] .dt-row:nth-child(n+5) { display: none; }

  /* The text now sits full-width over the portrait crop of the video, where the
     subject may be directly behind it. Deepen the shadow rather than dimming
     the footage — the background itself stays untouched. */
  .ov-h   { text-shadow: 0 2px 20px rgba(5,6,14,.95), 0 0 46px rgba(5,6,14,.8); }
  .ov-body, .dt-v { text-shadow: 0 1px 14px rgba(5,6,14,.95), 0 0 34px rgba(5,6,14,.75); }
  .fin-h  { text-shadow: 0 2px 20px rgba(5,6,14,.95), 0 0 46px rgba(5,6,14,.8); }

  /* sit a little lower on phones — 12vh is measured against the tall viewport,
     so it over-reserves once the address bar is showing */
  .ov, .ov[data-side="right"], .ov[data-side="left"] { bottom: 9vh; }
  .ov-beat2 { bottom: 11vh; }
}

/* ============ TABLETS IN PORTRAIT (iPad) ============ */
/* Uses the narrow layout above, but a tablet is not a big phone: at 768px the
   full-width text ran to ~101 characters per line (comfortable is 45–75), and
   phone-sized type looks undersized on a 10–13" screen held at arm's length. */
@media (min-width: 700px) and (max-width: 1200px) and (orientation: portrait) {
  .ov, .ov[data-side="right"], .ov[data-side="left"] {
    left: clamp(34px, 6vw, 68px);
    right: auto;
    width: min(600px, 78vw);          /* ≈62ch — a proper measure */
    bottom: 11vh;
  }
  .ov-beat2 { left: 0; right: 0; width: auto; bottom: 13vh; text-align: center; }
  html[lang="fa"] .ov, html[lang="fa"] .ov[data-side="right"], html[lang="fa"] .ov[data-side="left"] {
    left: auto; right: clamp(34px, 6vw, 68px);
  }

  .ov-index { font-size: 11px; margin-bottom: 26px; }
  .ov-h     { font-size: clamp(34px, 5vw, 46px); }
  .ov-sub   { font-size: 12px; }
  .ov-body  { font-size: 16.5px; line-height: 1.6; }
  html[lang="fa"] .ov-body { line-height: 1.95; }

  .detail  { margin-top: 26px; }
  .dt-row  { padding: 11px 0; }
  /* the label column fits again at this width — put it back beside the value */
  .dt-in   { display: flex; align-items: baseline; gap: 16px; }
  .dt-l    { display: block; min-width: 120px; font-size: 9px; margin-bottom: 0; padding-top: 2px; }
  .dt-v    { font-size: 15.5px; line-height: 1.45; }
  html[lang="fa"] .dt-in { flex-direction: row-reverse; }
  html[lang="fa"] .dt-v  { line-height: 1.8; }
  /* room for all five rows again */
  .dt-row:nth-child(n+5) { display: block; }
  html[lang="fa"] .dt-row:nth-child(n+5) { display: block; }

  .fin-eyebrow { font-size: 10px; }
  .fin-h   { font-size: clamp(30px, 4.4vw, 42px); }
  .fin-sub { font-size: 13.5px; margin-bottom: 34px; }
  .ov-ctas { justify-content: center; gap: 14px; }
  .ov-ctas .cta { width: auto; }
  .cta     { padding: 15px 24px; font-size: 10.5px; }
  .ov-foot { margin-top: 40px; }
  .chip    { font-size: 10px; padding: 8px 14px; }
}

/* Landscape tablets get the desktop side-column, but only ~768–1024px of height.
   Trim the vertical rhythm so the block never reaches the header. */
@media (min-width: 821px) and (max-height: 860px) and (orientation: landscape) {
  .ov { width: min(46vw, 500px); }
  .ov-h { font-size: clamp(24px, 2.7vw, 36px); }
  .ov-index { margin-bottom: 16px; }
  .ov-swap { min-height: 8em; }
  html[lang="fa"] .ov-swap { min-height: 10.5em; }
  .detail { margin-top: 18px; }
  .dt-row { padding: 8px 0; }
  .dt-v { font-size: 14px; }
}

/* ============ PHONE: text lives under the film band ============ */
/* Pairs with the 47vh film band in main.css. The text now sits on the dark
   ground below the picture instead of on top of a heavily cropped frame, so it
   reads like the desktop composition rather than fighting the image. */
@media (max-width: 560px) {
  .ov, .ov[data-side="right"], .ov[data-side="left"] {
    left: 22px; right: 22px; top: auto; bottom: 6.5vh; width: auto;
  }
  .ov-beat2 { left: 22px; right: 22px; bottom: 8vh; }

  /* the band gave back vertical room — restore a comfortable type scale */
  .ov-index { font-size: 9.5px; margin-bottom: 14px; }
  .ov-h     { font-size: clamp(25px, 7.6vw, 32px); line-height: 1.1; margin-bottom: 14px; }
  .ov-body  { font-size: 14.5px; line-height: 1.55; }
  html[lang="fa"] .ov-body { line-height: 1.85; }
  .ov-chips { margin-top: 12px; }
  .chip     { font-size: 9px; padding: 6px 10px; }

  /* the label column fits again on the dark ground — match iPad and desktop */
  .detail  { margin-top: 16px; }
  .dt-row  { padding: 7px 0; }
  .dt-in   { display: flex; align-items: baseline; gap: 12px; }
  .dt-l    { display: block; min-width: 84px; font-size: 8px; margin-bottom: 0; padding-top: 2px; }
  .dt-v    { font-size: 13.5px; line-height: 1.35; }
  html[lang="fa"] .dt-in { flex-direction: row-reverse; }
  html[lang="fa"] .dt-v  { line-height: 1.7; }
  /* four rows fit the ground comfortably; the fifth lives in the end index */
  .dt-row:nth-child(n+5) { display: none; }
  /* Persian runs ~25% taller and would push the block up into the bright part
     of the film band — give it one row fewer and slightly tighter leading */
  html[lang="fa"] .dt-row:nth-child(n+4) { display: none; }
  html[lang="fa"] .ov-h { line-height: 1.3; }
  html[lang="fa"] .ov-body { line-height: 1.75; }

  /* text now sits on near-black, so the heavy shadows are no longer needed */
  .ov-h { text-shadow: 0 2px 16px rgba(5,6,14,.7); }
  .ov-body, .dt-v { text-shadow: none; }
  .fin-h { text-shadow: 0 2px 16px rgba(5,6,14,.7); }
}

/* Very narrow phones (iPhone SE): the header items total ~316px at 375px wide,
   which wraps at 320px. Drop the surname and keep the A—R monogram. */
@media (max-width: 400px) {
  .hdr-full { display: none; }
  #hdr { padding: 14px 16px; }
  .hdr-right { gap: 12px; }
}

/* Short viewports — address bar visible, or a small phone in landscape.
   The stage clips rather than scrolls, so shed rows before anything is lost. */
@media (max-width: 820px) and (max-height: 730px) {
  .dt-row:nth-child(n+5) { display: none; }
  html[lang="fa"] .dt-row:nth-child(n+4) { display: none; }
  .ov-body { font-size: 13px; }
  .detail { margin-top: 12px; }
  .dt-row { padding: 6px 0; }
}

/* ============ REDUCED-MOTION CONTENT MODE ============ */
body.reduced .ov, body.reduced .ov-beat2 {
  position: relative; opacity: 1; pointer-events: auto;
  top: auto; left: auto; right: auto; bottom: auto; transform: none;
  padding: 12vh clamp(24px, 8vw, 120px) 4vh;
  width: min(680px, 92vw);
}
body.reduced .ov-h .fc { transform: none !important; opacity: 1 !important; }
body.reduced .ov-hint::after { animation: none; }
body.reduced .ov-ctas { justify-content: flex-start; }

.deck-list { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.deck-list-item {
  border-inline-start: 2px solid var(--line); padding-inline-start: 16px;
}
.deck-list-item .dli-tag { font-size: 9px; letter-spacing: .2em; color: var(--amber); }
.deck-list-item strong { display: block; margin: 4px 0 6px; font-size: 15px; }
.deck-list-item p { font-size: 13.5px; line-height: 1.6; color: var(--text); opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .pre-mono, .ov-hint::after { animation: none; }
}