/*
 * Live demo section — faithful slice of the FramedShot editor sidebar
 * paired with a big animated preview on the right.
 *
 * 10s loop, 5 stages of 20% each:
 *   1. Color  (0–20%)   — pick a swatch, gradient morphs yellow→cyan→purple
 *   2. Padding (20–40%) — drag the padding slider
 *   3. Shadow  (40–60%) — drag the shadow slider
 *   4. Roundness (60–80%) — drag the image-roundness slider
 *   5. Toggle  (80–100%) — flip Gradient → Solid pill, bg becomes solid colour
 *
 * A faux cursor walks the palette and "clicks" each control at the start of
 * its stage; the corresponding action plays out right after the click.
 */

.live-demo {
    padding: 80px 20px 56px;
    background: var(--surface);
}
@media (min-width: 768px) {
    .live-demo { padding: 112px 32px 80px; }
}
.live-demo .container { max-width: 1200px; margin: 0 auto; }

.live-demo-sub {
    color: var(--on-surface-variant);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 14px 0 36px;
    max-width: 520px;
}

/* ============================================================
 * Stage
 * ============================================================ */
.live-demo-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 720px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(251,188,0,0.10), transparent 55%),
        radial-gradient(circle at 86% 88%, rgba(6,182,212,0.10), transparent 55%),
        linear-gradient(180deg, #1a1714 0%, #131110 100%);
    border: 1px solid var(--outline-variant);
    box-shadow: 0 30px 80px rgba(0,0,0,0.40);
}

.ld-shell {
    position: absolute; inset: 24px;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
}
@media (min-width: 1100px) {
    .ld-shell { grid-template-columns: 380px 1fr; gap: 32px; }
}

/* ============================================================
 * Palette — mini editor sidebar (cursor positioning context)
 * ============================================================ */
.ld-palette {
    position: relative;
    background: rgba(20, 18, 16, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    padding: 16px;
    display: flex; flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.ld-section {
    position: relative;
    padding: 14px 14px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    transform-origin: left center;
    will-change: transform, border-color;
}
.ld-section::after {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 16px;
    border: 1.5px solid var(--primary);
    box-shadow: 0 0 0 6px rgba(251,188,0,0.12), 0 10px 30px rgba(251,188,0,0.18);
    opacity: 0;
    pointer-events: none;
}

.ld-section-title {
    display: block;
    font-family: var(--font-headline);
    font-size: 0.6rem;
    color: var(--on-surface-variant);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.ld-section-sub {
    display: block;
    font-family: var(--font-headline);
    font-size: 0.55rem;
    color: var(--on-surface-variant);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 10px 0 8px;
    opacity: 0.7;
}

/* ----- Pill toggle (Gradient/Solid, Linear/Radial) ----- */
.ld-pill-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
}
.ld-pill {
    text-align: center;
    padding: 8px 0;
    border-radius: 8px;
    font-family: var(--font-headline);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    letter-spacing: 0.02em;
}
.ld-pill--active {
    background: linear-gradient(180deg, #FFD56A, #FFBF00);
    color: #2a1a00;
    box-shadow: 0 4px 10px rgba(251,188,0,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ----- Colors section ----- */
.ld-color-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.ld-color-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
.ld-color-chip-swatch {
    width: 18px; height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.ld-color-chip-text {
    position: relative;
    flex: 1;
    height: 11px;
    font-family: var(--font-headline);
    font-size: 0.58rem;
    color: var(--on-surface-variant);
    letter-spacing: 0.02em;
    line-height: 11px;
}
.ld-color-chip-text span {
    position: absolute; inset: 0;
}
.ld-color-chip-text .ld-text-label { color: var(--on-surface-variant); opacity: 0.7; }
.ld-color-chip-text .ld-text-hex { color: var(--on-surface); font-weight: 600; }

.ld-swatch-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}
.ld-swatch {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1.5px solid rgba(255,255,255,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    position: relative;
}
.ld-swatch--active::before {
    content: '';
    position: absolute; inset: -3px;
    border-radius: 9px;
    border: 1.5px solid #fff;
}

/* ----- Effects section: sliders with numeric values ----- */
.ld-control {
    position: relative;
    margin-bottom: 12px;
    transform-origin: left center;
    will-change: transform;
}
.ld-control:last-child { margin-bottom: 0; }

.ld-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 8px;
}
.ld-label {
    font-family: var(--font-headline);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--on-surface);
}
.ld-value {
    position: relative;
    width: 48px;
    height: 13px;
    font-family: var(--font-headline);
    font-size: 0.70rem;
    color: var(--on-surface-variant);
    text-align: right;
    line-height: 13px;
}
.ld-value span {
    position: absolute; right: 0; top: 0;
}

.ld-slider {
    position: relative;
    width: 100%; height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
}
.ld-slider-fill {
    position: absolute; left: 0; top: 0;
    height: 100%;
    border-radius: 999px;
}
.ld-control--padding .ld-slider-fill   { background: var(--primary); width: 20%; }
.ld-control--shadow .ld-slider-fill    { background: var(--primary); width: 28%; }
.ld-control--roundness .ld-slider-fill { background: #06B6D4; width: 26%; }

.ld-thumb {
    position: absolute;
    top: 50%;
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.ld-control--padding .ld-thumb   { left: 20%; }
.ld-control--shadow .ld-thumb    { left: 28%; }
.ld-control--roundness .ld-thumb { left: 26%; background: #06B6D4; }

/* ============================================================
 * Cursor — fake pointer that walks the palette
 * ============================================================ */
.ld-cursor {
    position: absolute;
    top: 0; left: 0;
    width: 22px; height: 22px;
    z-index: 5;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
    will-change: transform, opacity;
    opacity: 0;
}
.ld-cursor svg { width: 100%; height: 100%; display: block; }

/* Click ripple — a yellow ring that radiates from the cursor's tip when it
 * "clicks" each control. The cursor's hot-spot is at SVG (5,3), so we anchor
 * the ring near there. */
.ld-cursor::after {
    content: '';
    position: absolute;
    top: -4px; left: -4px;
    width: 20px; height: 20px;
    border: 2px solid rgba(251, 188, 0, 0.95);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
 * Preview — dominant focal point on the right
 * ============================================================ */
.ld-preview {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-preview-bg {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 100%;
    border-radius: 18px;
    padding: 32px;
    background: linear-gradient(135deg, #FFBF00 0%, #06B6D4 100%);
    box-shadow: 0 12px 30px rgba(0,0,0,0.20);
    display: flex; align-items: center; justify-content: center;
}
.ld-preview-image {
    width: 100%; height: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1714;
    box-shadow: 0 4px 18px rgba(0,0,0,0.30);
}
.ld-preview-image img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* ============================================================
 * Caption pill — top-right
 * ============================================================ */
.ld-caption {
    position: absolute;
    top: 24px; right: 24px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(20, 18, 16, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.08);
    font-family: var(--font-headline);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--on-surface);
    z-index: 3;
    opacity: 0;
}
@media (min-width: 900px) { .ld-caption { top: 32px; right: 32px; font-size: 0.82rem; } }

.ld-caption-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 0 8px var(--primary);
}

/* ============================================================
 * Animations — 10s master timeline, 5 stages of 20% each
 *  Stage 1 (color):     0–20%  — delay  0
 *  Stage 2 (padding):  20–40%  — delay -8s
 *  Stage 3 (shadow):   40–60%  — delay -6s
 *  Stage 4 (roundness):60–80%  — delay -4s
 *  Stage 5 (toggle):   80–100% — delay -2s
 * ============================================================ */

.ld-preview-bg     { animation: ldPreview 10s ease-in-out infinite; }
.ld-preview-image  { animation: ldImage 10s ease-in-out infinite; }

/* Cursor walks and clicks */
/* Snappier easing — cursor moves quickly toward the target then settles, so it
 * arrives ahead of the action instead of trailing it. */
.ld-cursor         { animation: ldCursorMove 10s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.ld-cursor::after  { animation: ldCursorClick 10s linear infinite; }

/* Section spotlights (one per stage). Same keyframe, staggered via delay. */
.ld-section--color       { animation: ldSpot 10s ease-out infinite; }
.ld-section--color::after { animation: ldSpotGlow 10s ease-out infinite; }
.ld-section--background       { animation: ldSpot 10s ease-out infinite; animation-delay: -2s; }
.ld-section--background::after { animation: ldSpotGlow 10s ease-out infinite; animation-delay: -2s; }

/* Each effects control spotlights its own card */
.ld-control--padding   { animation: ldSpot 10s ease-out infinite; animation-delay: -8s; }
.ld-control--shadow    { animation: ldSpot 10s ease-out infinite; animation-delay: -6s; }
.ld-control--roundness { animation: ldSpot 10s ease-out infinite; animation-delay: -4s; }

/* Per-stage captions */
.ld-caption--color     { animation: ldCaption 10s ease-out infinite; }
.ld-caption--padding   { animation: ldCaption 10s ease-out infinite; animation-delay: -8s; }
.ld-caption--shadow    { animation: ldCaption 10s ease-out infinite; animation-delay: -6s; }
.ld-caption--roundness { animation: ldCaption 10s ease-out infinite; animation-delay: -4s; }
.ld-caption--toggle    { animation: ldCaption 10s ease-out infinite; animation-delay: -2s; }

/* Color chips morph during stage 1 */
.ld-color-start { animation: ldColorStart 10s ease-in-out infinite; }
.ld-color-end   { animation: ldColorEnd   10s ease-in-out infinite; }

/* Hex text swap during stage 1 (color) — direct selectors */
.ld-text-hex--from { animation: ldFadeOutEarly 10s ease-in-out infinite; }
.ld-text-hex--to   { animation: ldFadeInEarly  10s ease-in-out infinite; }

/* Sliders animate during their own stage — absolute keyframe timing, no delay */
.ld-control--padding .ld-slider-fill   { animation: ldFillPadding 10s ease-in-out infinite; }
.ld-control--padding .ld-thumb         { animation: ldThumbPadding 10s ease-in-out infinite; }
.ld-control--shadow .ld-slider-fill    { animation: ldFillShadow 10s ease-in-out infinite; }
.ld-control--shadow .ld-thumb          { animation: ldThumbShadow 10s ease-in-out infinite; }
.ld-control--roundness .ld-slider-fill { animation: ldFillRoundness 10s ease-in-out infinite; }
.ld-control--roundness .ld-thumb       { animation: ldThumbRoundness 10s ease-in-out infinite; }

/* Numeric value crossfade */
.ld-control--padding .ld-value-from   { animation: ldValuePaddingFrom   10s ease-in-out infinite; }
.ld-control--padding .ld-value-to     { animation: ldValuePaddingTo     10s ease-in-out infinite; }
.ld-control--shadow .ld-value-from    { animation: ldValueShadowFrom    10s ease-in-out infinite; }
.ld-control--shadow .ld-value-to      { animation: ldValueShadowTo      10s ease-in-out infinite; }
.ld-control--roundness .ld-value-from { animation: ldValueRoundnessFrom 10s ease-in-out infinite; }
.ld-control--roundness .ld-value-to   { animation: ldValueRoundnessTo   10s ease-in-out infinite; }

/* Stage 5 — Gradient/Solid pill toggle */
.ld-pill--gradient { animation: ldGradientPill 10s ease-in-out infinite; }
.ld-pill--solid    { animation: ldSolidPill    10s ease-in-out infinite; }

/* ============================================================
 * Keyframes
 * ============================================================ */

@keyframes ldPreview {
    /* Stage 1: color — gradient morph starts 0.2s after cursor click (at 3%). */
    0%, 4%  { background: linear-gradient(135deg, #FFBF00 0%, #FFA800 100%); padding: 32px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
    18%, 22% { background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%); padding: 32px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
    /* Stage 2: padding grows starting 0.2s after cursor lands at padding (20%). */
    38%, 42% { background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%); padding: 72px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
    /* Stage 3: shadow blooms starting 0.2s after cursor lands at shadow (40%). */
    58%, 80% { background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%); padding: 72px; box-shadow: 0 40px 100px rgba(139,92,246,0.55), 0 0 60px rgba(6,182,212,0.35); }
    /* Stage 4: roundness on inner image. bg holds. */
    /* Stage 5: bg flattens into a solid purple shortly after cursor clicks Solid (80%). */
    98%      { background: linear-gradient(135deg, #8B5CF6 0%, #8B5CF6 100%); padding: 72px; box-shadow: 0 40px 100px rgba(139,92,246,0.55), 0 0 60px rgba(6,182,212,0.35); }
    /* Reset to raw */
    100%     { background: linear-gradient(135deg, #FFBF00 0%, #FFA800 100%); padding: 32px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
}

@keyframes ldImage {
    0%, 62% { border-radius: 2px; }
    78%, 95% { border-radius: 36px; }
    100%    { border-radius: 2px; }
}

/* Section / control spotlight — appears for ~14% of the cycle (1.4s in a 10s loop)
 * which is roughly the visible portion of each 2s stage after the cursor lands. */
@keyframes ldSpot {
    0%, 1%    { transform: scale(1); border-color: rgba(255,255,255,0.05); }
    3%, 17%   { transform: scale(1.02); border-color: rgba(251,188,0,0.45); }
    19%, 100% { transform: scale(1); border-color: rgba(255,255,255,0.05); }
}

@keyframes ldSpotGlow {
    0%, 1%    { opacity: 0; }
    3%, 17%   { opacity: 1; }
    19%, 100% { opacity: 0; }
}

@keyframes ldCaption {
    0%, 1%    { opacity: 0; transform: translateY(-4px); }
    3%, 17%   { opacity: 1; transform: translateY(0); }
    19%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Color chip swatches & hex text — stage 1 action (4%→18%, just after cursor click at 3%) */
@keyframes ldColorStart {
    0%, 4%   { background: linear-gradient(135deg, #FFD56A, #FFBF00); }
    18%, 100% { background: linear-gradient(135deg, #67E8F9, #06B6D4); }
}
@keyframes ldColorEnd {
    0%, 4%   { background: linear-gradient(135deg, #67E8F9, #06B6D4); }
    18%, 100% { background: linear-gradient(135deg, #C4B5FD, #8B5CF6); }
}
@keyframes ldFadeOutEarly {
    0%, 7%   { opacity: 1; }
    13%, 100% { opacity: 0; }
}
@keyframes ldFadeInEarly {
    0%, 7%   { opacity: 0; }
    13%, 100% { opacity: 1; }
}

/* Per-stage slider + value keyframes — absolute timing, no delay.
 * Each stage's action fires after the cursor lands (~5% into the 20% stage). */

/* Stage 2: padding (20–40%) — action 22→38%, fires 0.2s after cursor click at 20% */
@keyframes ldFillPadding {
    0%, 22%   { width: 20%; }
    38%, 100% { width: 68%; }
}
@keyframes ldThumbPadding {
    0%, 22%   { left: 20%; }
    38%, 100% { left: 68%; }
}
@keyframes ldValuePaddingFrom {
    0%, 27%   { opacity: 1; }
    32%, 100% { opacity: 0; }
}
@keyframes ldValuePaddingTo {
    0%, 27%   { opacity: 0; }
    32%, 100% { opacity: 1; }
}

/* Stage 3: shadow (40–60%) — action 42→58%, fires 0.2s after cursor click at 40% */
@keyframes ldFillShadow {
    0%, 42%   { width: 28%; }
    58%, 100% { width: 78%; }
}
@keyframes ldThumbShadow {
    0%, 42%   { left: 28%; }
    58%, 100% { left: 78%; }
}
@keyframes ldValueShadowFrom {
    0%, 47%   { opacity: 1; }
    52%, 100% { opacity: 0; }
}
@keyframes ldValueShadowTo {
    0%, 47%   { opacity: 0; }
    52%, 100% { opacity: 1; }
}

/* Stage 4: roundness (60–80%) — action 62→78%, fires 0.2s after cursor click at 60% */
@keyframes ldFillRoundness {
    0%, 62%   { width: 26%; }
    78%, 100% { width: 76%; }
}
@keyframes ldThumbRoundness {
    0%, 62%   { left: 26%; }
    78%, 100% { left: 76%; }
}
@keyframes ldValueRoundnessFrom {
    0%, 67%   { opacity: 1; }
    72%, 100% { opacity: 0; }
}
@keyframes ldValueRoundnessTo {
    0%, 67%   { opacity: 0; }
    72%, 100% { opacity: 1; }
}

/* Stage 5: Gradient → Solid toggle (80–100%) — swap fires 0.2s after click at 80% */
@keyframes ldGradientPill {
    0%, 82% {
        background: linear-gradient(180deg, #FFD56A, #FFBF00);
        color: #2a1a00;
        box-shadow: 0 4px 10px rgba(251,188,0,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
    }
    86%, 95% {
        background: transparent;
        color: var(--on-surface-variant);
        box-shadow: none;
    }
    100% {
        background: linear-gradient(180deg, #FFD56A, #FFBF00);
        color: #2a1a00;
        box-shadow: 0 4px 10px rgba(251,188,0,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
    }
}
@keyframes ldSolidPill {
    0%, 82% {
        background: transparent;
        color: var(--on-surface-variant);
        box-shadow: none;
    }
    86%, 95% {
        background: linear-gradient(180deg, #FFD56A, #FFBF00);
        color: #2a1a00;
        box-shadow: 0 4px 10px rgba(251,188,0,0.30), inset 0 1px 0 rgba(255,255,255,0.4);
    }
    100% {
        background: transparent;
        color: var(--on-surface-variant);
        box-shadow: none;
    }
}

/* ============================================================
 * Cursor movement — coordinates are palette-local (palette is the cursor's
 * positioning context). The cursor arrives at each target *before* its action
 * starts and lingers through it, so the action reads as a direct response to
 * the click. Travel between stages is a tight 0.2s. Coordinates are pixel
 * approximations for the 340–380px wide palette at typical desktop widths.
 * ============================================================ */
@keyframes ldCursorMove {
    /* First cycle only: cursor flies in from off-stage and lands on the cyan
     * swatch before the colour action begins. Subsequent loops jump invisibly
     * at the boundary so the cursor is always at the swatch by stage 1 start.
     *
     * Hot-spot is at SVG (5, 3) within the 22x22 cursor, so the translate
     * values are (target_x - 5, target_y - 3) for the tip to land on target.
     * Coordinates measured against the actual palette layout. */
    0%       { transform: translate3d(-20px, 200px, 0); opacity: 0; }
    1%       { transform: translate3d(245px, 304px, 0); opacity: 0; }
    /* Stage 1 → cyan swatch (tip on swatch center 250, 307) */
    3%, 18%  { transform: translate3d(245px, 304px, 0); opacity: 1; }
    /* Stage 2 → padding slider (tip on track at thumb end position 253, 463) */
    20%, 38% { transform: translate3d(248px, 460px, 0); opacity: 1; }
    /* Stage 3 → shadow slider (tip at 284, 505) */
    40%, 58% { transform: translate3d(279px, 502px, 0); opacity: 1; }
    /* Stage 4 → roundness slider (tip at 278, 547) */
    60%, 78% { transform: translate3d(273px, 544px, 0); opacity: 1; }
    /* Stage 5 → Solid pill (tip on pill center 268, 79) */
    80%, 96% { transform: translate3d(263px, 76px, 0); opacity: 1; }
    /* Fade out, reset off-stage for the loop boundary */
    98%      { transform: translate3d(-20px, 200px, 0); opacity: 0; }
    100%     { transform: translate3d(-20px, 200px, 0); opacity: 0; }
}

/* Click ripple — fires exactly when the cursor lands.
 * Click moments: 3% (colour), 20% (padding), 40% (shadow), 60% (roundness), 80% (toggle) */
@keyframes ldCursorClick {
    0%, 2%   { transform: scale(0); opacity: 0; }
    3%       { transform: scale(0.5); opacity: 0.9; }
    9%       { transform: scale(2.4); opacity: 0; }
    10%, 19% { transform: scale(0); opacity: 0; }
    20%      { transform: scale(0.5); opacity: 0.9; }
    26%      { transform: scale(2.4); opacity: 0; }
    27%, 39% { transform: scale(0); opacity: 0; }
    40%      { transform: scale(0.5); opacity: 0.9; }
    46%      { transform: scale(2.4); opacity: 0; }
    47%, 59% { transform: scale(0); opacity: 0; }
    60%      { transform: scale(0.5); opacity: 0.9; }
    66%      { transform: scale(2.4); opacity: 0; }
    67%, 79% { transform: scale(0); opacity: 0; }
    80%      { transform: scale(0.5); opacity: 0.9; }
    86%      { transform: scale(2.4); opacity: 0; }
    87%, 100% { transform: scale(0); opacity: 0; }
}

/* Hover pause */
.live-demo-stage:hover * { animation-play-state: paused !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ld-preview-bg, .ld-preview-image, .ld-caption,
    .ld-section, .ld-section::after,
    .ld-control, .ld-color-start, .ld-color-end,
    .ld-slider-fill, .ld-thumb,
    .ld-text-hex--from, .ld-text-hex--to,
    .ld-value-from, .ld-value-to,
    .ld-pill--gradient, .ld-pill--solid,
    .ld-cursor, .ld-cursor::after { animation: none !important; }
    .ld-cursor { display: none; }
    .ld-preview-bg {
        background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
        padding: 72px;
        box-shadow: 0 36px 90px rgba(0,0,0,0.55);
    }
    .ld-preview-image { border-radius: 22px; }
}

/* Narrow-viewport layout (mobile + tablet + sub-1150px desktop):
 * Column stack with a content-sized stage so the full palette + preview are
 * always visible. The desktop 16:9 stage is too short to fit Background +
 * Colors + Effects below ~1150px, so we use this layout there instead of
 * clipping sections. Cursor is hidden because its palette-local coords don't
 * translate to a narrow column. */
@media (max-width: 1150px) {
    .live-demo-stage {
        aspect-ratio: auto;
        max-height: none;
        height: auto;
    }
    .ld-shell {
        position: static;
        inset: auto;
        margin: 16px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .ld-palette {
        padding: 14px;
        gap: 10px;
    }
    .ld-preview {
        width: 100%;
        aspect-ratio: 5 / 4;
    }
    .ld-section { padding: 12px 14px 14px; }
    .ld-swatch-grid { gap: 4px; }
    .ld-cursor { display: none; }
}