/* Explainer (animated TPP walkthrough) - shared by the respondent survey and the
   Studio preview. Loaded by both survey.html and studio.html. */
/* ================= explainer overlay ================= */
.overlay{position:fixed;inset:0;background:rgba(12,24,34,.72);z-index:60;display:grid;
  place-items:center;padding:18px;animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-box{background:#fff;border-radius:14px;max-width:660px;width:100%;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.35);animation:riseIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.overlay-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;background:var(--accent);color:#fff;flex-wrap:wrap}
.ex-badge{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.16);padding:4px 10px;border-radius:5px}
.ex-hint{font-size:11.5px;opacity:.8}
.ex-controls{display:flex;align-items:center;gap:8px;padding:12px 16px 16px;flex-wrap:wrap}
.ex-btn{border:1px solid var(--line);background:#fff;padding:8px 15px;border-radius:7px;
  font:inherit;font-size:13px;cursor:pointer;font-weight:600}
.ex-btn:hover{background:#f4f7f9}
.ex-btn.ghost{background:transparent;border-color:transparent;color:var(--muted);font-weight:400}
.ex-btn.ghost:hover{background:#eef2f5;color:var(--ink)}
.ex-scene{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* scene entrance animations */
.a-fade{animation:aFade .6s ease both}
.a-rise{animation:aRise .6s cubic-bezier(.16,1,.3,1) both}
.a-pop{animation:aPop .45s cubic-bezier(.34,1.56,.64,1) both}
.a-pulse{animation:aPulse 2.4s ease-in-out infinite}
.a-grow{transform-origin:center bottom;animation:aGrow 1s cubic-bezier(.16,1,.3,1) both}
.a-draw{stroke-dasharray:120;stroke-dashoffset:120;animation:aDraw .9s ease forwards}
.a-donut{stroke-dasharray:415;stroke-dashoffset:415;animation:aDonut 1.3s cubic-bezier(.16,1,.3,1) forwards}
@keyframes aFade{from{opacity:0}to{opacity:1}}
@keyframes aRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes aPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes aPulse{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.6;transform:scale(1.06)}}
@keyframes aGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes aDraw{to{stroke-dashoffset:0}}
@keyframes aDonut{to{stroke-dashoffset:290}}

.ex-close{margin-left:auto;background:rgba(255,255,255,.16);border:none;color:#fff;width:40px;height:40px;
  min-width:40px;min-height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;font-size:21px;line-height:1;cursor:pointer}
.ex-close:hover{background:rgba(255,255,255,.3)}
@media(max-width:640px){.overlay-head .ex-close{width:44px;height:44px;min-width:44px;min-height:44px;font-size:23px}}
.ex-fallback{padding:16px 22px 20px;font-size:14px;line-height:1.6;color:var(--ink)}
.ex-fallback ul{margin:10px 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ex-fallback-note{color:var(--muted);font-size:12.5px;margin:10px 0 0}
.ex-hint{margin-right:2px}

/* ------------------------------------------------------------------ cinematic layer
   The walkthrough is watched, not read: a letterboxed stage, a slow drift on the artwork,
   a caption that lights up word by word with the voice, and a timeline that reads like a
   video scrubber.  Everything here degrades to the plain layout above when motion is
   reduced or the browser has no `aspect-ratio`. */

/* the stage: 16:9, dark, vignetted */
.ex-shell{position:relative}
.ex-stage{position:relative;aspect-ratio:16/9;max-height:52vh;background:
  radial-gradient(120% 90% at 50% 0%,#14384c 0%,#0b2434 55%,#081a26 100%);
  border-radius:12px;overflow:hidden;isolation:isolate}
.ex-vignette{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(78% 68% at 50% 42%,transparent 40%,rgba(4,14,22,.55) 100%),
    linear-gradient(180deg,rgba(4,14,22,.28) 0%,transparent 22%,transparent 62%,rgba(4,14,22,.5) 100%)}
.ex-art{position:absolute;inset:0;background:#f8fbfc;border-radius:0;overflow:hidden;
  opacity:0;transition:opacity .6s ease,transform 7s cubic-bezier(.33,0,.2,1);
  transform:scale(1.02) translate3d(0,0,0);will-change:transform,opacity}
.ex-art.on{opacity:1;transform:scale(1.06) translate3d(var(--kb-x,2%),var(--kb-y,-1.5%),0)}
.scene-svg,.scene-media{display:block;width:100%;height:100%;object-fit:contain}
.scene-svg{padding:2% 2.5%;box-sizing:border-box}

/* ambient light follows the scene, the way a title card picks up its subject */
.ex-ambient{position:absolute;inset:-18px 0 auto 0;height:60%;opacity:.5;pointer-events:none;
  transition:background 1.1s ease;
  background:radial-gradient(70% 100% at 50% 0%,rgba(127,212,240,.3),transparent 72%)}
.ex-shell[data-scene="safety"] .ex-ambient{background:radial-gradient(70% 100% at 50% 0%,rgba(224,155,45,.3),transparent 72%)}
.ex-shell[data-scene="efficacy"] .ex-ambient{background:radial-gradient(70% 100% at 50% 0%,rgba(46,168,130,.28),transparent 72%)}
.ex-shell[data-scene="cdx"] .ex-ambient,.ex-shell[data-scene="mechanism"] .ex-ambient{background:radial-gradient(70% 100% at 50% 0%,rgba(77,182,221,.32),transparent 72%)}
.ex-shell[data-scene="access"] .ex-ambient,.ex-shell[data-scene="attributes"] .ex-ambient{background:radial-gradient(70% 100% at 50% 0%,rgba(26,127,75,.26),transparent 72%)}
.ex-shell[data-scene="trial"] .ex-ambient,.ex-shell[data-scene="patient"] .ex-ambient{background:radial-gradient(70% 100% at 50% 0%,rgba(127,212,240,.34),transparent 72%)}
.ex-shell.muted .ex-ambient{opacity:.22;filter:saturate(.4)}

/* ---- the caption: karaoke, driven by the narration clock ---- */
.ex-caption{padding:16px 18px 10px;display:flex;flex-direction:column;gap:6px;min-height:92px}
.ex-caption strong{font-size:17px;color:var(--accent);letter-spacing:-.01em;line-height:1.25}
.ex-caption #ex-sub{font-size:16.5px;line-height:1.65;color:var(--ink);max-width:62ch;
  transition:opacity .3s ease}
.ex-caption .w{transition:color .18s ease,opacity .3s ease,transform .18s ease;
  display:inline-block}
.ex-caption .w.done{color:var(--muted)}
.ex-caption .w.cur{color:var(--accent-2);font-weight:700;transform:translateY(-1px)}
.ex-caption .w:not(.done):not(.cur){opacity:.42}
.ex-shell.muted .ex-caption .w{opacity:1 !important;color:var(--ink) !important;transform:none !important}
.ex-caption.cap-in{animation:capIn .55s cubic-bezier(.16,1,.3,1) both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- the level meter: five bars that breathe with the narration ---- */
.ex-sound{position:absolute;right:14px;bottom:12px;z-index:4;display:flex;align-items:flex-end;
  gap:3px;height:26px;padding:6px 8px;border-radius:8px;
  background:rgba(6,20,30,.42);backdrop-filter:blur(3px)}
.ex-sound i{display:block;width:3px;height:100%;border-radius:2px;background:#8fe3ff;
  transform:scaleY(.12);transform-origin:bottom;transition:transform .09s linear}
.ex-sound.off{opacity:0;transform:translateY(4px)}
.ex-sound{transition:opacity .3s ease,transform .3s ease}

/* ---- the timeline: a scrubber with chapter markers and a time readout ---- */
.ex-bar{padding:4px 18px 0}
.ex-track{position:relative;height:6px;background:#e6edf1;border-radius:99px;overflow:visible}
.ex-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:99px;box-shadow:0 0 10px rgba(18,120,158,.45)}
.ex-chaps{position:absolute;inset:0}
.ex-dot{position:absolute;top:-3px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:#fff;border:2px solid #c3d3dd;cursor:pointer;padding:0;
  transition:transform .18s ease,border-color .18s ease,background .18s ease}
.ex-dot:hover{transform:scale(1.35);border-color:var(--accent-2)}
.ex-dot.cur{background:var(--accent-2);border-color:#fff;transform:scale(1.4);
  box-shadow:0 0 0 4px rgba(18,120,158,.18)}
.ex-dot::after{content:attr(data-title);position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  background:#0b2434;color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:5}
.ex-dot:hover::after{opacity:1}
.ex-time{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  padding-top:5px;font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---- controls ---- */
.ex-controls{display:flex;align-items:center;gap:8px;padding:10px 18px 16px;flex-wrap:wrap}
.ex-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:78px}
.ex-btn.primary:hover{background:#0d648a;border-color:#0d648a}
.ex-btn.ic{padding:8px 11px;font-size:14px;line-height:1}
.ex-sound-ctl{margin-left:2px}
.ex-scene{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- the "browser blocked autoplay" card: ask, do not guess ---- */
.ex-bigplay{position:absolute;inset:0;z-index:6;display:grid;place-content:center;justify-items:center;
  gap:12px;border:none;background:rgba(6,20,30,.55);color:#fff;cursor:pointer;
  backdrop-filter:blur(2px);animation:fadeIn .25s ease}
.ex-bigplay-ring{position:relative;width:74px;height:74px;border-radius:50%;
  background:rgba(255,255,255,.14);display:grid;place-items:center;
  box-shadow:0 0 0 0 rgba(143,227,255,.5);animation:ring 2.1s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(143,227,255,.45)}70%{box-shadow:0 0 0 22px rgba(143,227,255,0)}100%{box-shadow:0 0 0 0 rgba(143,227,255,0)}}
.ex-bigplay-tri{position:absolute;font-size:26px;line-height:1;margin-left:4px}
.ex-bigplay em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.02em}

/* paused: the meter settles and the drift stops with it */
.ex-shell.paused .ex-art.on{animation-play-state:paused}
.ex-shell.paused .ex-sound i{transform:scaleY(.1)}

/* ---- motion preferences: keep the words, lose the movement ---- */
@media (prefers-reduced-motion: reduce){
  .ex-art{transition:opacity .25s ease;transform:none !important}
  .ex-art.on{transform:none !important}
  .ex-caption .w{transition:none;transform:none !important}
  .ex-bigplay-ring{animation:none}
  .ex-ambient{transition:none}
  .overlay,.overlay-box{animation:none}
}

/* ---- no `aspect-ratio` (older engines): a fixed height instead of a collapsed stage ---- */
@supports not (aspect-ratio: 16 / 9){
  .ex-stage{height:300px}
}

/* explainer v2 artwork motion */
.a-ecg{stroke-dasharray:640;stroke-dashoffset:640;animation:aEcg 2.6s ease-out forwards}
@keyframes aEcg{to{stroke-dashoffset:0}}
.a-ants{stroke-dasharray:7 7;animation:aAnts 1s linear infinite}
@keyframes aAnts{to{stroke-dashoffset:-14}}
.a-spin{animation:aSpin 5s linear infinite}
@keyframes aSpin{to{transform:rotate(360deg)}}
.a-float{animation:aFloatY 3.4s ease-in-out infinite}
@keyframes aFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.a-bub{animation:aBubY 3s ease-in infinite}
@keyframes aBubY{0%{transform:translateY(0);opacity:0}15%{opacity:.6}100%{transform:translateY(-64px);opacity:0}}
.a-wave{animation:aWaveX 2.8s linear infinite}
@keyframes aWaveX{to{transform:translateX(-40px)}}
.a-orbit{animation:aOrbitR 9s linear infinite}
@keyframes aOrbitR{to{transform:rotate(360deg)}}
.a-km{stroke-dasharray:760;stroke-dashoffset:760;animation:aKmDraw 2.4s ease-out forwards}
@keyframes aKmDraw{to{stroke-dashoffset:0}}
.a-helix{stroke-dasharray:420;stroke-dashoffset:420;animation:aHelixDraw 1.8s ease forwards}
@keyframes aHelixDraw{to{stroke-dashoffset:0}}
.a-stamp{animation:aStampIn .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes aStampIn{0%{opacity:0;transform:scale(1.7) rotate(-14deg)}60%{opacity:1;transform:scale(.95) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}

@media (max-width:640px){
  .overlay{padding:10px}
  .overlay-box{padding:14px 12px 16px;border-radius:14px}
  .ex-caption{padding:12px 12px 8px;min-height:76px}
  .ex-caption strong{font-size:15px}
  .ex-caption #ex-sub{font-size:14px;line-height:1.5}
  .ex-controls{padding:8px 10px;gap:6px;flex-wrap:wrap}
}