/*
 * ConcertOnly Branded Loader System
 * ==================================
 * Three semantic variations:
 *   Pulse — curtain / page transitions (gentle, ghost)
 *   Gold  — AI / smart operations (expanding gold bar)
 *   Beat  — data loading / search (fast gold blink)
 */

/* ── Design Tokens ── */
:root {
    --gm-loader-thin: 1.5px;
    --gm-loader-thick: 5px;
    --gm-loader-gap: 6px;
    --gm-loader-h: 22px;
    --gm-loader-gold: #c5a059;
    --gm-loader-ghost: #B5B2AB;
    --gm-loader-dur: 2.4s;
}

/* ── Shared Base ── */
.gm-loader {
    display: inline-flex;
    align-items: center;
    gap: var(--gm-loader-gap);
    height: var(--gm-loader-h);
    vertical-align: middle;
}

.gm-loader-line-thin {
    width: var(--gm-loader-thin);
    height: 100%;
    background: var(--gm-loader-ghost);
    border-radius: 1px;
}

.gm-loader-line-thick {
    width: var(--gm-loader-thick);
    height: 100%;
    background: var(--gm-loader-ghost);
    border-radius: 2px;
}

/* ── Pulse (Variation 1) — Curtain / Page Transition ──
   Dual-line gentle height pulse, ghost color, staggered */
.gm-loader-pulse .gm-loader-line-thin {
    animation: gm-pulse var(--gm-loader-dur) ease-in-out infinite;
}
.gm-loader-pulse .gm-loader-line-thick {
    animation: gm-pulse var(--gm-loader-dur) ease-in-out infinite;
    animation-delay: 0.6s;
}

@keyframes gm-pulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
    50%      { transform: scaleY(1);   opacity: 0.8; }
}

/* ── Gold (Variation 4) — AI / Smart Operations ──
   Thick bar gold expansion, thin bar subtle pulse */
.gm-loader-gold .gm-loader-line-thin {
    background: var(--gm-loader-gold);
    animation: gm-gold-thin 1.6s ease-in-out infinite;
}
.gm-loader-gold .gm-loader-line-thick {
    background: var(--gm-loader-gold);
    animation: gm-gold-thick 1.6s ease-in-out infinite;
}

@keyframes gm-gold-thick {
    0%, 100% { transform: scaleX(1);   opacity: 0.6; }
    50%      { transform: scaleX(3.6); opacity: 1; }
}
@keyframes gm-gold-thin {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50%      { opacity: 0.7; transform: scaleY(1); }
}

/* ── Beat (Variation 10) — Data Loading / Search ──
   Dual-line gold sync blink, fast tempo, staggered */
.gm-loader-beat .gm-loader-line-thin {
    background: var(--gm-loader-gold);
    animation: gm-beat 0.8s ease-in-out infinite;
}
.gm-loader-beat .gm-loader-line-thick {
    background: var(--gm-loader-gold);
    animation: gm-beat 0.8s ease-in-out infinite;
    animation-delay: 0.2s;
}

@keyframes gm-beat {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

/* ── Helpers ── */
.gm-loader-center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .gm-loader-pulse .gm-loader-line-thin,
    .gm-loader-pulse .gm-loader-line-thick,
    .gm-loader-gold .gm-loader-line-thin,
    .gm-loader-gold .gm-loader-line-thick,
    .gm-loader-beat .gm-loader-line-thin,
    .gm-loader-beat .gm-loader-line-thick {
        animation: none;
        opacity: 0.5;
    }
}