/* Animated captions (animated-captions.php, js/animated-captions.js).
   .ac-s-<style> copies the looks of lib/animated_captions.php sv_ac_styles(): keep them in step. */

/* ---- Caption layer ---- */
.ac-layer { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; z-index: 3;
    padding: 0 var(--ml, 8%); --fs: 24px; --mv: 0px; text-align: center; }
.ac-p-bottom { align-items: flex-end; padding-bottom: var(--mv); }
.ac-p-top { align-items: flex-start; padding-top: var(--mv); }
.ac-p-middle { align-items: center; }
.ac-line { font-family: "Liberation Sans", Arial, Helvetica, "Noto Sans CJK SC", "DejaVu Sans", sans-serif; font-weight: 700;
    font-size: var(--fs); line-height: 1.2; color: #fff; -webkit-text-stroke: calc(var(--fs) * .2) #000; paint-order: stroke fill;
    text-shadow: 0 calc(var(--fs) * .03) 0 rgba(0, 0, 0, .5); white-space: pre-wrap; word-break: break-word; }
.ac-w { position: relative; display: inline-block; white-space: pre; }

.ac-s-bold .on { color: #FFE600; }

.ac-s-pop .on { color: #4ADE80; animation: ac-pop .17s ease-out both; }
@keyframes ac-pop { 0% { transform: scale(.85); } 53% { transform: scale(1.18); } 100% { transform: scale(1.12); } }

.ac-s-box .ac-line { -webkit-text-stroke-width: calc(var(--fs) * .16); text-shadow: none; }
.ac-s-box .on { background: #7C3AED; -webkit-text-stroke-width: 0; padding: 0 calc(var(--fs) * .16); margin: 0 calc(var(--fs) * -.16); }

.ac-s-karaoke .ac-line { -webkit-text-stroke-width: calc(var(--fs) * .18); }
.ac-s-karaoke .past { color: #22D3EE; }
.ac-s-karaoke .ac-w::after { content: attr(data-t); position: absolute; left: 0; top: 0; color: #22D3EE;
    clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
.ac-s-karaoke .past::after, .ac-s-karaoke .future::after { content: none; }

.ac-s-neon .ac-line { -webkit-text-stroke: calc(var(--fs) * .14) #1A1A1A; text-shadow: none; }
.ac-s-neon .on { -webkit-text-stroke: calc(var(--fs) * .2) #FF2E93; text-shadow: 0 0 calc(var(--fs) * .25) #FF2E93, 0 0 calc(var(--fs) * .1) #FF2E93; }

.ac-s-reveal .on { color: #FFD400; }
.ac-s-reveal .future { visibility: hidden; }

.ac-s-classic .ac-line { background: rgba(0, 0, 0, .62); padding: .08em .3em; border-radius: 4px; -webkit-text-stroke-width: calc(var(--fs) * .1); text-shadow: none; }
.ac-s-classic .on { color: #FFE58A; }

.ac-s-minimal .ac-line { font-weight: 400; -webkit-text-stroke-width: 0; text-shadow: 0 calc(var(--fs) * .06) calc(var(--fs) * .08) rgba(0, 0, 0, .7); }
.ac-s-minimal .ac-w:not(.on) { opacity: .62; }
.ac-s-minimal .on { text-decoration: underline; text-decoration-thickness: calc(var(--fs) * .07); text-underline-offset: .12em; }

/* ---- Demos (style picker and the page) ---- */
.ac-demo { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 9 / 16;
    background: radial-gradient(circle at 30% 20%, #5b6b8c, #1c2335 70%); }
.ac-demo.wide { aspect-ratio: 4 / 5; }
.ac-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ac-styles figure { margin: 0; }
.ac-styles figcaption { text-align: center; font-weight: 700; margin-top: 8px; color: var(--sv-ink, #0f172a); }

/* ---- The tool ---- */
.ac-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.ac-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ac-stage { position: relative; overflow: hidden; background: #000; border-radius: 14px; max-width: 100%; width: 315px; height: 560px; }
.ac-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-stage .ac-video-bg { filter: blur(18px) brightness(.8); transform: scale(1.15); object-fit: cover !important; }
.ac-stage .ac-video { z-index: 2; }
.ac-status { font-size: 14px; color: var(--sv-muted, #556179); text-align: center; min-height: 1.2em; }
.ac-status.bad, .ac-make-msg.bad, .ac-bad { color: #c0392b; }
.ac-make-msg.ok { color: #0b6b4c; }
.ac-controls h3 { font-size: 15px; font-weight: 800; margin: 16px 0 8px; color: var(--sv-ink, #0f172a); }
.ac-controls > h3:first-child { margin-top: 0; }
.ac-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ac-pick button { border: 2px solid transparent; background: none; padding: 0; border-radius: 12px; cursor: pointer; text-align: center; font-size: 12px; font-weight: 700; color: #2b3650; }
.ac-pick button .ac-demo { aspect-ratio: 1 / 1; border-radius: 10px; pointer-events: none; }
.ac-pick button.active { border-color: var(--sv-primary, #2f5bff); }
.ac-pick button .ac-pick-name { display: block; padding: 4px 2px; }
.ac-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-opts button { border: 1px solid var(--sv-line, #d5dceb); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.ac-opts button.active { background: var(--sv-primary, #2f5bff); border-color: var(--sv-primary, #2f5bff); color: #fff; }
.ac-make { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ac-make .btn { font-weight: 700; }
.ac-make-msg { margin-top: 8px; font-size: 14px; }
.ac-renders { list-style: none; padding: 0; margin: 0; }
.ac-renders li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sv-line, #e4e9f2); }
.ac-renders li small { display: block; color: var(--sv-muted, #556179); }
.ac-renders li b { word-break: break-all; }
.ac-working { color: var(--sv-muted, #556179); white-space: nowrap; }
.ac-card { background: #fff; border: 1px solid var(--sv-line, #e4e9f2); border-radius: 18px; padding: 22px; box-shadow: var(--sv-shadow, 0 10px 30px rgba(15, 23, 42, .07)); }
.ac-empty { text-align: center; padding: 10px; }
.ac-empty p { color: var(--sv-muted, #556179); }

@media (max-width: 900px) {
    .ac-tool { grid-template-columns: minmax(0, 1fr); }
    .ac-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .ac-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}