/* ═══════════════════════════════════════════════════════════════
   AVC v2 — 05 demonstration (#demo): poster + muted preview, one play
   control in the hero's language, six chapters, scope note.
   The modal's base rules live in css/chrome.css.
   ═══════════════════════════════════════════════════════════════ */
#demo{ --sec-bg:var(--bg); --light-at:50% 58%; --light:.09; --light-size:76% 46%; }
#demo .demo-player{ width:min(100%, max(480px, calc((100vh - 150px) * 16 / 9))); width:min(100%, max(480px, calc((100svh - 150px) * 16 / 9))); margin-inline:auto; container-type:inline-size; }

/* ── frame ──────────────────────────────────────────────────────── */
#demo .demo-frame{ position:relative; display:grid; place-items:center; aspect-ratio:16 / 9; isolation:isolate; cursor:pointer; overflow:hidden; border-radius:var(--r-xl);
  background:#02050b; box-shadow:inset 0 0 0 1px rgba(140,175,225,.18), 0 0 0 1px rgba(0,0,0,.5), 0 50px 110px -46px rgba(0,0,0,.95), 0 0 90px -40px rgba(30,120,255,.45); -webkit-tap-highlight-color:transparent; }
#demo .demo-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
#demo .demo-poster, #demo .demo-preview{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
#demo .demo-poster{ filter:brightness(.78) saturate(.9); transition:filter var(--dur-state) var(--ease); }
#demo .demo-preview{ opacity:0; filter:brightness(.78) saturate(.9); transition:opacity .9s var(--ease), filter var(--dur-state) var(--ease); }
#demo .demo-frame.is-live .demo-preview{ opacity:1; }
#demo .demo-frame:hover .demo-poster, #demo .demo-frame:hover .demo-preview{ filter:brightness(.88) saturate(.96); }
#demo .demo-shade{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 34% at 50% 52%, rgba(2,5,11,.55), rgba(2,5,11,0) 100%), radial-gradient(130% 100% at 50% 46%, rgba(2,5,11,0) 56%, rgba(2,5,11,.55) 100%), linear-gradient(180deg, rgba(2,5,11,.3), rgba(2,5,11,0) 22%); }
#demo .demo-frame::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:color; background:rgba(16,40,92,.42); }

/* the play control: a glowing disc and two lines of text on dark glass */
#demo .demo-play{ position:static; display:inline-flex; align-items:center; gap:16px; padding:10px 24px 10px 10px; border:0; border-radius:20px; cursor:pointer; text-align:left;
  background:linear-gradient(180deg, rgba(14,30,60,.78), rgba(6,14,30,.78)); box-shadow:inset 0 0 0 1px rgba(130,185,255,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px -18px rgba(0,0,0,.9), 0 0 40px -14px rgba(30,144,255,.55);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:box-shadow var(--dur-hover) var(--ease); }
#demo .demo-play::after{ content:""; position:absolute; inset:0; border-radius:var(--r-xl); }
#demo .demo-play__disc{ display:grid; place-items:center; width:58px; height:58px; border-radius:50%; flex:none;
  background:radial-gradient(75% 75% at 35% 28%, #5c9ef0 0%, #2a64c6 46%, #123476 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.36), inset 0 -3px 6px rgba(2,14,46,.5), 0 0 0 1px rgba(140,190,255,.36), 0 0 16px rgba(40,120,240,.34); }
#demo .demo-play__disc svg{ width:26px; height:26px; fill:#fff; margin-left:2px; filter:drop-shadow(0 1px 1px rgba(0,20,70,.45)); }
#demo .demo-play__text b{ display:block; font-family:var(--display); font-size:18px; line-height:1.25; font-weight:600; letter-spacing:-.01em; color:#f2f7ff; }
#demo .demo-play__text em{ display:flex; align-items:center; gap:8px; margin-top:4px; font-style:normal; font-size:13px; color:#a9c6ec; font-variant-numeric:tabular-nums; }
#demo .demo-play__text em i{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
#demo .demo-play:hover{ box-shadow:inset 0 0 0 1px rgba(160,205,255,.6), inset 0 1px 0 rgba(255,255,255,.10), 0 18px 50px -18px rgba(0,0,0,.9), 0 0 50px -12px rgba(30,144,255,.75); }
#demo .demo-play:hover .demo-play__disc{ box-shadow:inset 0 1px 0 rgba(255,255,255,.42), inset 0 -3px 6px rgba(2,14,46,.5), 0 0 0 1px rgba(160,205,255,.5), 0 0 22px rgba(60,140,250,.5); }
#demo .demo-play:focus-visible{ outline:none; box-shadow:var(--focus); }
#demo .demo-muted{ position:absolute; right:16px; bottom:16px; opacity:0; transition:opacity var(--dur-state) var(--ease); color:#d5e2f3; background:rgba(2,6,14,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#demo .demo-frame.is-live .demo-muted{ opacity:1; }

/* caption row */
#demo .demo-cap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; min-height:36px; margin-top:12px; }
#demo .demo-cap__item{ display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-caption); line-height:1.4; color:var(--dim); }
#demo .eq--static{ color:var(--acc); }

/* ── chapters ───────────────────────────────────────────────────── */
#demo .demo-chapters{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:24px 14px; margin-top:26px; }
#demo .chap{ display:flex; flex-direction:column; align-items:stretch; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; text-align:left; border-radius:var(--r-md); -webkit-tap-highlight-color:transparent; }
#demo .chap__media{ position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--r-md); background:var(--well); box-shadow:0 12px 24px -16px rgba(1,4,12,.85); }
#demo .chap__media img{ width:100%; height:100%; object-fit:cover; filter:brightness(.78) saturate(.88); transition:filter var(--dur-state) var(--ease), transform .9s var(--ease-out); }
#demo .chap__media::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(170,198,240,.14), inset 0 1px 0 rgba(255,255,255,.06); transition:box-shadow var(--dur-hover) var(--ease); }
#demo .chap__time{ position:absolute; left:8px; bottom:8px; z-index:1; display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:var(--r-xs);
  font-family:var(--small); font-size:12px; font-weight:600; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; background:rgba(2,6,14,.76); box-shadow:inset 0 0 0 1px rgba(170,198,240,.14); }
#demo .chap__key{ display:flex; align-items:center; gap:8px; margin-top:13px; font-family:var(--small); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); font-variant-numeric:tabular-nums; }
#demo .chap__name{ display:block; margin-top:6px; font-family:var(--display); font-size:15px; line-height:1.38; font-weight:600; letter-spacing:-.008em; color:var(--text); text-wrap:balance; transition:color var(--dur-hover) var(--ease); }
html[data-lang="ko"] #demo .chap__name{ line-height:1.5; letter-spacing:-.012em; }
#demo .chap:hover .chap__media img{ filter:none; transform:scale(1.035); }
#demo .chap:hover .chap__media::after{ box-shadow:inset 0 0 0 1px rgba(160,205,255,.38), inset 0 1px 0 rgba(255,255,255,.1); }
#demo .chap:hover .chap__name{ color:var(--acc-hi); }
#demo .chap:focus-visible{ outline:2px solid #7db4ff; outline-offset:4px; }
#demo .demo-note{ margin-top:clamp(34px, 4vw, 46px); }

@container (max-width:1000px){ #demo .demo-chapters{ column-gap:12px; } #demo .chap__name{ font-size:14px; } }
@container (max-width:860px){ #demo .demo-chapters{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@container (max-width:560px){
  #demo .demo-chapters{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px 12px; }
  #demo .demo-play{ padding:8px 16px 8px 8px; gap:12px; }
  #demo .demo-play__disc{ width:46px; height:46px; }
  #demo .demo-play__text b{ font-size:15.5px; }
  #demo .demo-play__text em{ font-size:12px; }
}
@media (max-width:760px){ #demo .demo-fs{ display:none; } }
/* the preview tag doubles as its pause control (shown only where the preview runs) */
#demo .demo-muted{ z-index:2; gap:7px; cursor:pointer; transition:opacity var(--dur-state) var(--ease), color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
#demo .demo-muted[hidden]{ display:none; }
#demo .demo-muted::before{ display:none; }
#demo .demo-muted .ic{ width:12px; height:12px; }
#demo .demo-muted .ic-play{ display:none; fill:currentColor; stroke:none; }
#demo .demo-muted[aria-pressed="true"] .ic-pause{ display:none; }
#demo .demo-muted[aria-pressed="true"] .ic-play{ display:inline; }
#demo .demo-muted[aria-pressed="true"], #demo .demo-muted:focus-visible{ opacity:1; }
#demo .demo-frame:not(.is-live) .demo-muted:not([aria-pressed="true"]):not(:focus-visible){ pointer-events:none; }   /* faded out between loops */
#demo .demo-muted:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(160,205,255,.5); }
@media (pointer:coarse){ #demo .demo-muted::after{ content:""; position:absolute; inset:-10px -8px; } }