/* ============================================================
   myPropIQ Learn — narration layer (full module)
   Ava guide in the gutter · per-scene captions · spotlights
   · scene gating · progress. Layers on top of module.css.
   ============================================================ */

/* progress bar */
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--amber); width: 0; z-index: 60; transition: width .12s linear; }

/* ───────── Ava guide (gutter, follows the active step) ───────── */
.ava {
  position: fixed; z-index: 45;
  left: clamp(14px, calc((100vw - 716px) / 2 - 134px), 320px);
  top: 50%; width: 116px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: top .3s ease-out, opacity .4s ease;
  opacity: 0; pointer-events: none;
}
/* during a narration session, scenes not yet reached are hidden until Ava arrives (or Skip) */
body.narrating .scene.future { display: none; }
/* during narration the playbar owns the controls — hide the per-scene buttons */
body.narrating .scene-controls, body.narrating .startbar { display: none; }
.ava.show { opacity: 1; pointer-events: auto; }
.ava .orb { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.ava .disc { width: 78px; height: 78px; border-radius: 50%; background: linear-gradient(140deg, var(--amber), var(--amber-deep)); display: grid; place-items: center; box-shadow: 0 8px 20px -7px rgba(185,110,31,.6); overflow: hidden; }
.ava .disc svg { width: 46px; height: 46px; margin-top: 6px; }
.ava .disc img { width: 100%; height: 100%; object-fit: cover; }
.ava .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); opacity: 0; pointer-events: none; }
.ava .wave { display: flex; align-items: flex-end; gap: 3px; height: 13px; opacity: 0; transition: opacity .25s; }
.ava .wave span { width: 3px; height: 4px; border-radius: 2px; background: var(--amber); }
.ava .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); text-align: center; }
.ava.speaking .orb { animation: avaBob 1.7s ease-in-out infinite; }
.ava.speaking .wave { opacity: 1; }
.ava.speaking .wave span { animation: avaEq .9s ease-in-out infinite; }
.ava.speaking .wave span:nth-child(2){ animation-delay:.12s } .ava.speaking .wave span:nth-child(3){ animation-delay:.24s } .ava.speaking .wave span:nth-child(4){ animation-delay:.36s }
.ava.speaking .ring { animation: avaRing 1.8s ease-out infinite; }
@keyframes avaEq { 0%,100%{height:4px} 50%{height:13px} }
@keyframes avaRing { 0%{opacity:.5;transform:scale(1)} 100%{opacity:0;transform:scale(1.5)} }
@keyframes avaBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }

/* mobile dock for Ava */
@media (max-width: 1120px) {
  .ava { left: 14px; bottom: 16px; top: auto !important; flex-direction: row; width: auto; gap: 10px;
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 7px 14px 7px 7px; box-shadow: var(--shadow-lift); transition: opacity .4s ease; }
  .ava .orb { width: 44px; height: 44px; } .ava .disc { width: 42px; height: 42px; } .ava .disc svg { width: 26px; height: 26px; }
  .ava .tag { display: none; } .ava .wave { height: 11px; }
}

/* ───────── spotlight on the active step ───────── */
.spot { transition: box-shadow .4s ease, background .4s ease; }
.spot.lit { box-shadow: 0 0 0 2px var(--amber), 0 18px 50px -22px rgba(28,25,23,.4); position: relative; z-index: 2; }
[data-theme="ink"] .spot.lit { box-shadow: 0 0 0 2px var(--amber), 0 18px 50px -18px rgba(0,0,0,.8); }

/* ───────── per-scene caption ───────── */
.cap-box { display: none; }
.cap-line { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.5; color: var(--ink);
  padding: 14px 18px; border-radius: 12px; background: var(--amber-soft); border-left: 3px solid var(--amber);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; display: none; }
.cap-line.on { display: block; opacity: 1; transform: none; }
.cap-box .cap-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; display: none; }
.cap-box.active .cap-head { display: block; }

/* ───────── per-scene listen control ───────── */
.scene-listen { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--amber-line); background: var(--amber-soft); color: var(--amber-deep); transition: all .16s; }
.scene-listen:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.scene-listen.playing { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.scene-listen .ic { width: 15px; height: 15px; }
.scene-listen .lbl-rec { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; opacity: .7; }
.scene-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.scene-controls .replay-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

/* ───────── single floating playbar ───────── */
.playbar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70;
  display: none; align-items: center; gap: 14px; padding: 9px 10px 9px 14px;
  background: var(--ink); color: var(--bg); border-radius: 999px; box-shadow: var(--shadow-lift); }
.playbar.show { display: flex; animation: pbIn .35s cubic-bezier(.22,1,.36,1); }
@keyframes pbIn { from { opacity: 0; } to { opacity: 1; } }
.playbar .pb-status { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--bg); opacity: .85; white-space: nowrap; }
.playbar .pb-btn { border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; border-radius: 999px; transition: all .15s; }
.playbar .pb-stop { width: 34px; height: 34px; justify-content: center; padding: 0; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.playbar .pb-stop:hover { background: color-mix(in srgb, var(--bg) 28%, transparent); }
.playbar .pb-skip { padding: 9px 16px; background: var(--amber); color: #fff; }
.playbar .pb-skip:hover { background: var(--amber-deep); }
.playbar .pb-close { width: 30px; height: 30px; justify-content: center; padding: 0; background: transparent; color: color-mix(in srgb, var(--bg) 55%, transparent); }
.playbar .pb-close:hover { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.playbar .pb-prev { width: 34px; height: 34px; justify-content: center; padding: 0; background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.playbar .pb-prev:hover { background: color-mix(in srgb, var(--bg) 28%, transparent); }
/* each scene fills the screen during narration so neither the previous nor next scene peeks in */
body.narrating .scene:not(.future) { min-height: calc(100vh - 64px); }
.playbar.paused .pb-status { opacity: 1; }
@media (max-width: 560px) { .playbar .pb-skip-lbl { display: none; } }
.scene-inner { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .scene-inner.fresh-in { animation: sceneIn .55s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes sceneIn { from { transform: translateY(14px); } to { transform: none; } }

/* sticky scene title */
.scene-head { position: sticky; top: 62px; z-index: 8; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); padding: 14px 0 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule); }
.scene-head .scene-tag { margin-bottom: 9px; }
.scene-head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.12; margin: 0; }
.scene-head .donezo { display: none; margin-left: 10px; vertical-align: middle; color: var(--moss); }
.scene.done .scene-head .donezo { display: inline-flex; }

/* completion */
.mod-complete { padding: 70px 0 30px; }

@media (max-width: 720px) {
  .scene-head { top: 56px; }
  .cap-line { font-size: 1.04rem; }
  /* The desktop spotlight (2px amber ring + soft outer shadow) is too
     subtle on phone — the user needs to clearly see which section AVA
     is currently narrating. Step it up: thicker ring + amber-tinted
     halo. Stays gated on .spot.lit so it ONLY shows during narration. */
  .spot.lit {
    box-shadow:
      0 0 0 3px var(--amber),
      0 0 0 8px var(--amber-soft),
      0 14px 40px -16px rgba(28,25,23,.45) !important;
    border-radius: 14px;
  }
}