/**
 * SMESS "Signal" — the one loading/intro motion primitive.
 * Single source for every keyframe used across the app; see signal.js for
 * the controller (reduced-motion, visibility/intersection pause, intro gate)
 * and includes/signal.php for the PHP render helper.
 *
 * Requires signal-tokens.css loaded first.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Space+Mono:wght@400;700&display=swap');

/* ── Primitive: bars ──────────────────────────────────────────────────── */

.signal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    color: var(--signal-text-dim);
}

.signal--inline {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    vertical-align: baseline;
    gap: 0.4em;
}

.signal__bars {
    display: inline-flex;
    align-items: center;
    height: 1em;
    gap: 0.2em;
}

.signal__bar {
    width: 0.2em;
    height: 1em;
    border-radius: 0.09em;
    transform-origin: center;
    transform: scaleY(0.28);
    animation: signal-bar-scale 1.1s ease-in-out infinite;
    will-change: transform;
}

.signal__bar:nth-child(5n+1) { background: linear-gradient(to bottom, var(--signal-1-top), var(--signal-1-bot)); animation-duration: 0.92s; animation-delay: 0ms; }
.signal__bar:nth-child(5n+2) { background: linear-gradient(to bottom, var(--signal-2-top), var(--signal-2-bot)); animation-duration: 1.08s; animation-delay: 90ms; }
.signal__bar:nth-child(5n+3) { background: linear-gradient(to bottom, var(--signal-3-top), var(--signal-3-bot)); animation-duration: 0.85s; animation-delay: 180ms; }
.signal__bar:nth-child(5n+4) { background: linear-gradient(to bottom, var(--signal-4-top), var(--signal-4-bot)); animation-duration: 1.3s;  animation-delay: 270ms; }
.signal__bar:nth-child(5n+5) { background: linear-gradient(to bottom, var(--signal-5-top), var(--signal-5-bot)); animation-duration: 1.0s;  animation-delay: 360ms; }

@keyframes signal-bar-scale {
    0%, 100% { transform: scaleY(0.28); }
    50%      { transform: scaleY(1); }
}

/* Paused: off-screen (IntersectionObserver) or tab hidden (visibilitychange) — signal.js toggles this. */
.signal[data-paused="true"] .signal__bar {
    animation-play-state: paused;
}

/* Sizes: container font-size drives everything else via em units. */
.signal[data-size="xl"] { font-size: 72px; }
.signal[data-size="lg"] { font-size: 40px; }
.signal[data-size="md"] { font-size: 26px; }
.signal[data-size="sm"] { font-size: 16px; }
.signal[data-size="xs"] { font-size: 12px; }

.signal__label {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.34em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--signal-text-dim);
    white-space: nowrap;
}

/* sr-only label variant (e.g. chat-streaming bubble) */
.signal__label--sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Light-surface tone: deepen bars for contrast, darken the label. */
.signal[data-tone="light"] {
    color: var(--signal-text-mut);
}
.signal[data-tone="light"] .signal__bar:nth-child(5n+1) { background: linear-gradient(to bottom, #189B4E, #0E7A3D); }
.signal[data-tone="light"] .signal__bar:nth-child(5n+2) { background: linear-gradient(to bottom, #12904E, #0B6E3C); }
.signal[data-tone="light"] .signal__bar:nth-child(5n+3) { background: linear-gradient(to bottom, #0E8763, #095F49); }
.signal[data-tone="light"] .signal__bar:nth-child(5n+4) { background: linear-gradient(to bottom, #0B7963, #085A4A); }
.signal[data-tone="light"] .signal__bar:nth-child(5n+5) { background: linear-gradient(to bottom, #096F68, #06554F); }
.signal[data-tone="light"] .signal__label { color: var(--signal-text-mut); }

/* ── Reduced motion: freeze bars, single opacity pulse ───────────────── */
@media (prefers-reduced-motion: reduce) {
    .signal__bar {
        animation: signal-bar-pulse 1.6s ease-in-out infinite !important;
        transform: scaleY(0.7) !important;
    }
}
.signal--reduced-motion .signal__bar {
    animation: signal-bar-pulse 1.6s ease-in-out infinite !important;
    transform: scaleY(0.7) !important;
}
@keyframes signal-bar-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* ── Skeletons (data fetch / report generation) ──────────────────────── */
.signal-skeleton {
    position: relative;
    overflow: hidden;
    background: #141C28;
    border-radius: 8px;
}
.signal-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, #22303f, transparent);
    transform: translateX(-100%);
    animation: signal-shimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .signal-skeleton::after { animation: signal-skeleton-fade 1.6s ease-in-out infinite; transform: none; }
}
@keyframes signal-shimmer {
    100% { transform: translateX(100%); }
}
@keyframes signal-skeleton-fade {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 0.7; }
}

/* ── Intro overlay (variant="intro", once per 24h) ───────────────────── */
.signal-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(47,218,106,0.16), transparent 60%),
        var(--signal-bg-800);
    opacity: 0;
    pointer-events: none;
    transition: opacity 350ms ease;
}
/* Two-step reveal: JS sets data-mounted (display:grid, still opacity:0), then
   data-show on the next frame so the opacity change is actually transitioned
   rather than jumping straight from display:none. */
.signal-intro-overlay[data-mounted="true"] {
    display: grid;
}
.signal-intro-overlay[data-show="true"] {
    opacity: 1;
    pointer-events: auto;
}
.signal-intro-overlay[data-out="true"] {
    opacity: 0;
    pointer-events: none;
}
.signal-intro-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(80vw, 420px);
    aspect-ratio: 1;
}
.signal-intro-ring {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    border: 1px solid var(--signal-1);
    opacity: 0;
    animation: signal-ring 2.6s ease-out infinite;
}
.signal-intro-ring:nth-child(1) { animation-delay: 0ms; }
.signal-intro-ring:nth-child(2) { animation-delay: 860ms; }
.signal-intro-ring:nth-child(3) { animation-delay: 1720ms; }
@keyframes signal-ring {
    0%   { transform: scale(0.34); opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0; }
}
.signal-intro-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.signal-intro-content .signal__bars {
    filter: drop-shadow(0 0 12px rgba(47,218,106,0.45));
}
.signal-intro-wordmark {
    font-family: 'Montserrat', -apple-system, sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(28px, 6vw, 44px);
    color: var(--signal-text);
    opacity: 0;
    filter: blur(5px);
    transform: translateY(10px);
    animation: signal-wordmark 1s cubic-bezier(.2,.8,.2,1) 350ms forwards;
}
@keyframes signal-wordmark {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.signal-intro-micro {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--signal-text-dim);
    opacity: 0;
    animation: signal-wordmark 1s cubic-bezier(.2,.8,.2,1) 550ms forwards;
}

@media (prefers-reduced-motion: reduce) {
    .signal-intro-ring { display: none; }
    .signal-intro-wordmark, .signal-intro-micro {
        animation: none;
        opacity: 1;
        filter: none;
        transform: none;
    }
}