/* ============================================================
   "One spark" animated story — Support Us page
   Markup: includes/support-story.php   Motion: assets/js/support-story.js
   ============================================================ */

.ss-section { padding-bottom: 24px; }
.ss-section .hm-head { margin-bottom: 28px; }

.ss-stage {
    position: relative;
    width: 100%;
    max-width: max(560px, calc((100vh - 150px) * 16 / 9));
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    overflow: hidden;
    background: #050a16;
    isolation: isolate;
    container-type: inline-size;
    box-shadow: 0 30px 80px -30px rgba(4, 47, 46, .55), 0 0 0 1px rgba(15, 118, 110, .12);
    font-family: 'Outfit', sans-serif;
    color: #fff;
}
.ss-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-glyph { font: 800 22px 'Outfit', sans-serif; }

.ss-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(2, 6, 18, .55) 100%),
                linear-gradient(to top, rgba(2, 6, 18, .55), transparent 38%);
}

/* captions */
.ss-captions { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; pointer-events: none; }
.ss-cap-line {
    position: absolute; left: 6%; right: 6%; bottom: 0; margin: 0;
    font-weight: 800; font-size: 4.6cqw; line-height: 1.08; letter-spacing: -.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}
.ss-cap-line em, .ss-end-title em { font-style: normal; color: #fbbf24; }
.ss-word { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }

/* counters */
.ss-counters { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; opacity: 0; pointer-events: none; }
.ss-counters-title { margin: 0 0 1.4cqw; font: 700 1.3cqw 'Plus Jakarta Sans', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(4, 47, 46, .8); }
.ss-counter-row { display: flex; justify-content: center; gap: 1.6cqw; }
.ss-counter {
    min-width: 15cqw; padding: 1.3cqw 2cqw; border-radius: 1.6cqw;
    background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -12px rgba(4, 47, 46, .45); color: #0f172a;
}
.ss-counter strong { display: block; font-weight: 800; font-size: 3.6cqw; line-height: 1; color: #0f766e; font-variant-numeric: tabular-nums; }
.ss-counter small { display: block; margin-top: .5cqw; font: 600 1.15cqw 'Plus Jakarta Sans', sans-serif; color: #334155; }

/* end card */
.ss-end {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 0 6%; opacity: 0; pointer-events: none;
    background: radial-gradient(70% 70% at 50% 50%, rgba(4, 30, 32, .72), rgba(4, 30, 32, .35));
}
.ss-end.is-live { pointer-events: auto; }
.ss-end-title { margin: 0; font-weight: 800; font-size: 5cqw; line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 6px 30px rgba(0, 0, 0, .4); }
.ss-end-sub { margin: 1.4cqw 0 0; max-width: 46cqw; font: 500 1.5cqw/1.5 'Plus Jakarta Sans', sans-serif; color: rgba(255, 255, 255, .88); }
.ss-end-url { margin: 1.6cqw 0 0; padding: .9cqw 2.4cqw; border-radius: 99px; background: #fbbf24; color: #134e4a; font-weight: 800; font-size: 2cqw; }
.ss-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.2cqw; }
.ss-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px;
    font: 700 15px 'Plus Jakarta Sans', sans-serif; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
}
.ss-btn svg { width: 18px; height: 18px; }
.ss-btn-primary { background: #fbbf24; color: #134e4a; box-shadow: 0 10px 30px -10px rgba(251, 191, 36, .8); }
.ss-btn-primary:hover { transform: translateY(-2px); background: #fcd34d; }
.ss-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.ss-btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .2); }
.ss-btn:focus-visible, .ss-ctl:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

/* controls */
.ss-controls { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; z-index: 3; }
.ss-ctl {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px; justify-content: center;
    border: 0; border-radius: 99px; cursor: pointer; color: #fff; font: 600 13px 'Plus Jakarta Sans', sans-serif;
    background: rgba(15, 23, 42, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: background .2s, opacity .3s;
}
.ss-ctl:hover { background: rgba(15, 23, 42, .7); }
.ss-ctl svg { width: 17px; height: 17px; }
.ss-replay span { display: none; }
.ss-stage.is-done .ss-replay span { display: inline; }
.ss-stage.is-done .ss-toggle { display: none; }
.ss-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); z-index: 3; }
.ss-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #14b8a6, #fbbf24); }
.ss-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* video harness brand tag */
.ss-brand {
    position: absolute; left: 3.2cqw; top: 3cqw; display: flex; align-items: center; gap: 1cqw;
    font: 700 1.6cqw 'Plus Jakarta Sans', sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .92);
}
.ss-brand-dot { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 1.4cqw #fbbf24; }

/* portrait / phone layout (class set by JS from the stage's aspect ratio) */
.ss-stage.is-portrait .ss-cap-line { font-size: 9.2cqw; }
.ss-stage.is-portrait .ss-captions { bottom: 13%; }
.ss-stage.is-portrait .ss-counters { bottom: 10%; }
.ss-stage.is-portrait .ss-counters-title { font-size: 2.8cqw; margin-bottom: 3cqw; }
.ss-stage.is-portrait .ss-counter-row { flex-direction: column; align-items: center; gap: 2.4cqw; }
.ss-stage.is-portrait .ss-counter { min-width: 56cqw; padding: 2.6cqw 4cqw; border-radius: 4cqw; }
.ss-stage.is-portrait .ss-counter strong { font-size: 9cqw; }
.ss-stage.is-portrait .ss-counter small { font-size: 3cqw; margin-top: 1cqw; }
.ss-stage.is-portrait .ss-end-title { font-size: 10.5cqw; }
.ss-stage.is-portrait .ss-end-sub { font-size: 3.6cqw; max-width: 80cqw; margin-top: 3cqw; }
.ss-stage.is-portrait .ss-end-url { font-size: 4.4cqw; margin-top: 4cqw; padding: 2cqw 5cqw; }
.ss-stage.is-portrait .ss-end-actions { margin-top: 5cqw; flex-direction: column; align-items: stretch; width: 100%; max-width: 300px; }
.ss-stage.is-portrait .ss-end-actions .ss-btn { justify-content: center; }
.ss-stage.is-portrait .ss-brand { font-size: 3.4cqw; left: 6cqw; top: 6cqw; gap: 2cqw; }
.ss-stage.is-portrait .ss-brand-dot { width: 2.4cqw; height: 2.4cqw; }

@media (max-width: 640px) {
    .ss-stage { aspect-ratio: 4 / 5; border-radius: 20px; max-width: none; }
    .ss-controls { right: 10px; top: 10px; }
}

/* extended story: in-scene text */
.ss-t-ui { font: 700 10.5px 'Plus Jakarta Sans', sans-serif; fill: #fff; }
.ss-t-big { font: 800 26px 'Outfit', sans-serif; fill: #0f172a; }
.ss-t-mono { font: 700 17px Consolas, 'Courier New', monospace; fill: #0f172a; }
.ss-t-mono2 { font: 700 14px Consolas, 'Courier New', monospace; fill: #0d9488; }
.ss-t-stars { font: 800 16px 'Outfit', sans-serif; fill: #f59e0b; letter-spacing: 2px; }
.ss-t-row { font: 600 11px 'Plus Jakarta Sans', sans-serif; fill: #334155; }
.ss-t-a { font: 800 34px 'Outfit', sans-serif; fill: #d97706; }

/* chapter dots */
.ss-chapters { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 6px; z-index: 3; }
.ss-chap {
    position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
    background: rgba(255, 255, 255, .45); transition: width .3s, background .3s;
}
.ss-chap::before { content: ''; position: absolute; inset: -8px -3px; } /* bigger tap target */
.ss-chap:hover { background: rgba(255, 255, 255, .8); }
.ss-chap.is-active { width: 26px; background: #fbbf24; }
.ss-chap-label {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(4px); white-space: nowrap;
    padding: 4px 9px; border-radius: 8px; background: rgba(15, 23, 42, .85); color: #fff;
    font: 600 12px 'Plus Jakarta Sans', sans-serif; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.ss-chap:hover .ss-chap-label, .ss-chap:focus-visible .ss-chap-label { opacity: 1; transform: translateX(-50%); }
.ss-chap:focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }
.ss-stage.is-portrait .ss-chapters { left: 50%; transform: translateX(-50%); bottom: 12px; }

.ss-section { scroll-margin-top: 90px; }