/* THE READ-ALONG — Ava reads, the page follows, and the book still looks like
 * the book. Everything here is a MARK: a hairline under the word being spoken
 * and a tick in the margin beside the line. Nothing is filled, nothing is
 * boxed, nothing is tinted. A highlighter would be faster to build and would
 * make the page look like a study guide, which is the one thing this object is
 * not. The reader can put even the marks away and keep the voice.
 *
 * The plate hold is the other half of it: when the reading reaches a plate the
 * voice stops for a breath and the photograph is allowed to be a photograph.
 */

:root{ --ra-curve:cubic-bezier(.165,.84,.44,1); }

/* ── the mark ──────────────────────────────────────────────────────────── */
/* Painted, not wrapped. The word is found with a Range and the rule is drawn
   under its rectangle, so not one character of the manuscript is touched — no
   spans injected, no reflow, no chance of the typesetting moving under a
   reader who is only listening. */
#ra-mark, #ra-line{
  position:fixed; pointer-events:none; z-index:40;
  opacity:0; transition:opacity 200ms var(--ra-curve);
}
#ra-mark{ height:1px; background:var(--gold); }
#ra-line{ width:1px; background:var(--gold); opacity:0; }
html[data-ra="on"] #ra-mark{ opacity:.92 }
html[data-ra="on"] #ra-line{ opacity:.42 }
html[data-ra="held"] #ra-mark, html[data-ra="held"] #ra-line{ opacity:0 }
@media (prefers-reduced-motion:no-preference){
  #ra-mark{ transition:opacity 200ms var(--ra-curve), transform 200ms var(--ra-curve) }
  #ra-line{ transition:opacity 400ms var(--ra-curve), transform 400ms var(--ra-curve), height 400ms var(--ra-curve) }
}

/* ── the bar ───────────────────────────────────────────────────────────── */
.ra{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:16px; padding:0 18px; height:52px;
  background:rgba(20,18,15,.72); backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid rgba(255,255,255,.09);
  font-family:"Manrope",system-ui,sans-serif;
  transform:translateY(100%); transition:transform 400ms var(--ra-curve);
}
.ra[data-up="1"]{ transform:none }
body:has(.ra[data-up="1"]) .rail{ padding-bottom:150px }

.ra button{ background:none; border:0; padding:0; cursor:pointer; color:#EFE6D8; font:inherit; outline:0 }
.ra button:focus-visible{ outline:1px solid var(--gold); outline-offset:3px }

.ra .play{
  width:30px; height:30px; flex:0 0 30px; border:1px solid rgba(239,230,216,.34);
  display:grid; place-items:center; transition:border-color 200ms var(--ra-curve);
}
.ra .play:hover{ border-color:var(--gold) }
.ra .play svg{ width:11px; height:12px; fill:#EFE6D8 }

.ra .said{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.ra .said b{
  font-family:"Cormorant Garamond",Garamond,serif; font-weight:400; font-size:15px;
  color:#F2E9DB; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em;
}
.ra .said i{
  font-style:normal; font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  color:#9A9081; white-space:nowrap;
}

/* The progress rule is a rule. It fills with ink, never with gold; the gold is
   one hairline tick sitting at the place the voice has got to. */
.ra .thread{ position:relative; flex:2 1 260px; height:14px; cursor:pointer; display:flex; align-items:center }
.ra .thread .bed{ position:absolute; left:0; right:0; height:1px; background:rgba(239,230,216,.20) }
.ra .thread .got{ position:absolute; left:0; height:1px; width:0; background:rgba(239,230,216,.62) }
.ra .thread .now{ position:absolute; width:1px; height:9px; background:var(--gold); left:0 }
.ra .thread:hover .now{ height:13px }
.ra .thread .now{ transition:height 200ms var(--ra-curve) }

.ra .t{ font-size:9.5px; letter-spacing:.14em; color:#8E8474; font-variant-numeric:tabular-nums; white-space:nowrap }
.ra .opt{ font-size:8.5px; letter-spacing:.22em; text-transform:uppercase; color:#8E8474 }
.ra .opt[aria-pressed="true"]{ color:#EFE6D8 }
.ra .opt:hover{ color:#EFE6D8 }
.ra .step{ font-size:14px; color:#9A9081; line-height:1 }
.ra .step:hover{ color:#EFE6D8 }
.ra .step[disabled]{ opacity:.28; cursor:default }

@media (max-width:820px){
  .ra{ gap:11px; padding:0 12px }
  .ra .said i, .ra .opt, .ra .t.left{ display:none }
  .ra .thread{ flex:1 1 90px }
}

/* ── the listen affordance, on the chapter opener ──────────────────────── */
/* Reachability: a narration only reachable from a bar nobody looked at does not
   exist. Every chapter opener carries its own invitation, in the room the
   reader actually lands in. */
.hear{
  position:absolute; left:.78in; bottom:.74in; z-index:3;
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:none; border:0; padding:6px 0; color:inherit; outline:0;
  font-family:"Manrope",sans-serif; font-size:8.5px; letter-spacing:.26em;
  text-transform:uppercase; opacity:.86; transition:opacity 200ms var(--ra-curve);
}
.hear:hover{ opacity:1 }
.hear:focus-visible{ outline:1px solid var(--gold); outline-offset:4px }
.hear .r{ width:26px; height:1px; background:var(--gold); display:block; transition:width 400ms var(--ra-curve) }
.hear:hover .r{ width:40px }
.sheet.op .hear{ color:#EDE6DC }
@media print{ .ra, .hear, #ra-mark, #ra-line{ display:none !important } }