/* Audio chapter illustrations. Typography stays live HTML — selectable, readable,
   fixable without regenerating artwork. Motion is layered on top and is entirely
   optional: see the prefers-reduced-motion block at the foot of this file, which
   returns the player to the plain chapter-swap it was before 2026-09-18. */

.visual-player{margin:24px 0;background:var(--card);border:1px solid var(--rule);border-radius:12px;overflow:hidden}

/* The stage owns the aspect box so the eleven cards can stack inside it.
   container-type:size gives the cards both cqw and cqh to size against. */
.visual-stage{position:relative;aspect-ratio:1672/941;container-type:size;background:#f6f1e6;overflow:hidden}

.chapter-visual{position:absolute;inset:0;margin:0!important;overflow:hidden;color:#16473f;background:#f6f1e6}
.chapter-visual[hidden]{display:none}                    /* the no-JS state: card 1 only */
.chapter-visual>img{position:absolute;top:-2.5%;left:-2.5%;width:105%;height:105%;
  object-fit:cover;transform-origin:50% 50%}

/* Stacked mode. chapter-visuals.js adds .is-stacked once it has taken over, so a
   reader without JS never sees eleven cards piled on each other. */
.visual-stage.is-stacked .chapter-visual{opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s}
.visual-stage.is-stacked .chapter-visual.is-current{opacity:1;visibility:visible;
  transition:opacity .45s ease}
.visual-stage.is-stacked .chapter-visual.is-current>img{will-change:transform}

/* --- the copy block ------------------------------------------------------- */

.chapter-visual .visual-copy{position:absolute;top:9%;left:6%;width:56%;z-index:2}
.chapter-visual.wide-copy .visual-copy{width:77%}
.chapter-visual .visual-kicker{margin:0;font:500 clamp(10px,2cqw,22px)/1.4 "DM Sans",sans-serif!important;
  letter-spacing:.08em;text-transform:uppercase;color:#16473f}
.chapter-visual h2{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(22px,5.4cqw,64px);
  line-height:1.1;color:#16473f;margin:3.5% 0 0;font-weight:400;text-wrap:balance}
.chapter-visual .visual-detail{font:clamp(11px,2.4cqw,28px)/1.45 "DM Sans",sans-serif!important;
  margin:4% 0 0;color:#16473f}
.chapter-visual .visual-flow{display:flex;align-items:center;gap:2%;margin-top:5%;
  font-size:clamp(11px,2.6cqw,30px);line-height:1.4}
.visual-flow strong,.visual-flow span:not(.flow-arrow){padding:2% 3%;border-radius:6px;
  background:#f6f1e6ed;border:1px solid #b0bbae}
.visual-flow strong{background:#16473f;color:#fff}
.chapter-visual.questions h2{font-size:clamp(19px,4.5cqw,52px)}
.chapter-visual .visual-questions{padding:0;list-style:none;display:grid;gap:10px;margin:4% 0 0}
.visual-stage .chapter-visual .visual-copy .visual-questions li{background:#f6f1e6ee;
  border-left:3px solid #98732e;padding:2% 3%;font:clamp(12px,2.7cqw,32px)/1.35 "DM Sans",sans-serif}

/* Staggered reveal. Each direct child of the caption comes in on its own beat as the
   chapter opens; the questions card then walks its two items in behind that. */
.visual-stage.is-stacked .visual-copy>*{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.visual-stage.is-stacked .chapter-visual.is-current .visual-copy>*{opacity:1;transform:none}
.visual-stage.is-stacked .visual-copy>*:nth-child(1){transition-delay:.10s}
.visual-stage.is-stacked .visual-copy>*:nth-child(2){transition-delay:.26s}
.visual-stage.is-stacked .visual-copy>*:nth-child(3){transition-delay:.42s}
.visual-stage.is-stacked .visual-copy>*:nth-child(4){transition-delay:.58s}
.visual-stage.is-stacked .visual-questions li{opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.visual-stage.is-stacked .is-current .visual-questions li{opacity:1;transform:none}
.visual-stage.is-stacked .is-current .visual-questions li:nth-child(1){transition-delay:.85s}
.visual-stage.is-stacked .is-current .visual-questions li:nth-child(2){transition-delay:1.25s}

/* A hairline that grows across the chapter, under the heading. Decorative. */
.chapter-visual .visual-underline{display:block;height:2px;background:#16473f;opacity:.4;
  width:10%;margin-top:3%}
.visual-stage:not(.is-stacked) .visual-underline{display:none}

/* --- word to listen for --------------------------------------------------- */

.visual-word{position:absolute;left:6%;bottom:9%;z-index:3;display:flex;align-items:stretch;
  max-width:52cqw;opacity:0;transform:translateX(-18px);pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.visual-word.is-on{opacity:1;transform:none}
.visual-word .bar{width:3px;background:#98732e;flex:none}
.visual-word .body{background:#f6f1e6f5;border:1px solid #b0bbae;border-left:none;
  padding:1.8cqh 2cqw;display:grid;gap:.7cqh;min-width:0}
.visual-word .lbl{font:600 clamp(8px,1.15cqw,14px)/1 "DM Sans",sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#6c5216}
.visual-word .pair{display:flex;align-items:baseline;gap:1.6cqw;flex-wrap:wrap}
.visual-word .ar{font-family:"Amiri",serif;font-size:clamp(18px,3.4cqw,42px);line-height:1.75;
  color:#16473f;direction:rtl}
.visual-word .tr{font:italic 600 clamp(12px,2cqw,25px)/1.2 "DM Sans",sans-serif;color:#16473f}
.visual-word .gloss{font:clamp(10px,1.55cqw,19px)/1.35 "DM Sans",sans-serif;color:#2c3b39}

/* Below a 560px-wide stage the frame is too small for a floating card, so it becomes a
   band across the foot of the picture instead. The copy block sits at the top, so
   nothing collides at any size. */
/* A stage narrower than 560px cannot spare the room: the full card would cover half
   the picture. The word and its transliteration still appear, as one slim band; the
   gloss is a tap away on the Arabic words page and is in the transcript below. */
@container (max-width:560px){
  .visual-word{left:0;right:0;bottom:6px;max-width:none}
  .visual-word .bar{width:2px}
  .visual-word .body{flex:1;display:flex;align-items:baseline;gap:8px;
    border-left:none;border-right:none;border-bottom:none;border-radius:0;
    padding:4px 10px 5px;background:#f6f1e6f7;overflow:hidden}
  .visual-word .lbl,.visual-word .gloss{display:none}
  .visual-word .pair{gap:8px;flex-wrap:nowrap;min-width:0}
  .visual-word .ar{font-size:19px;line-height:1.75;white-space:nowrap}
  .visual-word .tr{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* --- progress rail -------------------------------------------------------- */

.visual-rail{position:absolute;left:0;right:0;bottom:0;height:6px;z-index:4;
  background:#16473f2e}
.visual-rail .fill{height:100%;width:0;background:#1a6b62}
.visual-rail .tick{position:absolute;bottom:0;width:2px;height:11px;background:#16473f;opacity:.4}
.visual-stage:not(.is-stacked) .visual-rail{display:none}

/* --- toolbar and chapter list --------------------------------------------- */

.visual-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--rule)}
.visual-toolbar[hidden]{display:none}
.visual-toolbar label{font-size:.85rem}
.visual-toolbar select{min-width:0;flex:1;max-width:100%;min-height:44px;background:var(--card);
  color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:8px}
.visual-toolbar button{min-height:44px;padding:8px 12px;border:1px solid var(--rule);
  border-radius:6px;background:var(--card);color:var(--link);cursor:pointer}
.visual-player .audio-player{border:0;border-radius:0;margin:0}
.visual-note{font:.8rem/1.9 "DM Sans",sans-serif!important;color:var(--muted);margin:0 16px 12px}
.visual-player .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The chapter list under the player doubles as the jump control once JS is up. */
ol.chapters li[aria-current="true"]{position:relative}
ol.chapters li[aria-current="true"]>a{font-weight:600;color:var(--teal-text)}

/* --- fullscreen ----------------------------------------------------------- */

.visual-player:fullscreen{border:0;border-radius:0;overflow:auto;background:var(--bg);
  padding:12px;display:flex;flex-direction:column;align-items:center}
.visual-player:fullscreen .visual-stage{width:min(100%,calc((100dvh - 310px)*1672/941));
  min-width:min(100%,420px);flex-shrink:0}
.visual-player:fullscreen .visual-toolbar,
.visual-player:fullscreen .audio-player,
.visual-player:fullscreen .visual-note{width:min(100%,1000px)}

@media(max-width:420px){
  .visual-toolbar{gap:8px;padding:10px}
  .visual-toolbar label{display:none}
  .visual-toolbar select{flex-basis:65%}
  .chapter-visual .visual-kicker{letter-spacing:.02em}
  .chapter-visual h2{font-size:5.8cqw}
  .chapter-visual.questions h2{font-size:5cqw}
  .chapter-visual .visual-questions{gap:5px}
}

/* --- reduced motion ------------------------------------------------------- */
/* Everything above degrades to the plain swap. chapter-visuals.js reads the same
   query and stops writing transforms, so no pan or zoom is applied either. */
@media (prefers-reduced-motion:reduce){
  .visual-stage.is-stacked .chapter-visual,
  .visual-stage.is-stacked .visual-copy>*,
  .visual-stage.is-stacked .visual-questions li,
  .visual-word{transition:none!important}
  .visual-stage.is-stacked .chapter-visual{visibility:hidden}
  .visual-stage.is-stacked .chapter-visual.is-current{visibility:visible}
  .visual-stage.is-stacked .visual-copy>*,
  .visual-stage.is-stacked .visual-questions li{opacity:1;transform:none}
  .chapter-visual>img{transform:none!important}
}

@media print{.visual-player{display:none}}