/* ============================================================
   /v3/css/v3-skel.css                                    v1.0
   ============================================================
   Single source of truth for skeleton-loading visuals across v3.

   Goals (cross-checked with Frontend-Architecture.md §1):
     - Anti-duplication: v3-ai-recommend, pending-banner, batch-action,
       mydomains-list, activity-timeline each invented their own
       skeleton CSS.  This file replaces them with one shared set.
     - Easy-debug: search ".v3-skel-" → see every use.
     - Future-proof: new components add ONE markup class; CSS already
       there.  No new @keyframes per component.

   Naming
     .v3-skel-shimmer   Apply to any element to give it the moving
                        gradient sweep.  Pairs with .v3-skel-line /
                        .v3-skel-dot / .v3-skel-block (shapes) or any
                        bespoke shape the caller already styles.
     .v3-skel-line      Horizontal placeholder bar (text line).
     .v3-skel-dot       Tiny circle (badge / icon placeholder).
     .v3-skel-block     Rectangle (image / thumbnail placeholder).
     .v3-skel-card      Wrapper matching a generic card shell —
                        padding + radius + background tint.

   State helpers (caller toggles ONE class on the parent):
     .is-loading        Show skeleton children, hide real children.
     .is-loaded         Show real children, hide skeleton children.
     (default = neither flipped; component decides initial state)

   Stagger
     Within any grid / row of skeleton cards, the children get a
     per-position animation-delay via :nth-child rules so the sweep
     ripples across the row instead of pulsing in unison.

   Reduced motion
     prefers-reduced-motion: reduce → animation disabled, base
     colour pulse instead of sweep.  ONE place to maintain.

   Tokens
     --v3-skel-base    Resting fill of the placeholder.
     --v3-skel-shine   Highlight colour the sweep transits.
     --v3-skel-radius  Default corner radius for shapes.
   ============================================================ */

:root {
    --v3-skel-base:   rgba(255, 255, 255, 0.06);
    --v3-skel-shine:  rgba(255, 255, 255, 0.22);
    --v3-skel-radius: 6px;
    --v3-skel-speed:  1.2s;
}

/* ============================================================
   PRIMITIVES — shape + shimmer
   ============================================================ */
.v3-skel-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--v3-skel-base);
    border-radius: var(--v3-skel-radius);
    isolation: isolate;
}
.v3-skel-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Narrow + sharp sweep: bright band ~30% wide, sharp shoulders */
    background: linear-gradient(
        90deg,
        transparent 30%,
        var(--v3-skel-shine) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    animation: v3-skel-sweep var(--v3-skel-speed) linear infinite;
    /* Subtle blur kill — keeps the band crisp on retina displays */
    will-change: transform;
}

@keyframes v3-skel-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%);  }
}

/* Shape utilities — use alone or combine with .v3-skel-shimmer */
.v3-skel-line {
    display: block;
    height: 12px;
    width:  60%;
    border-radius: var(--v3-skel-radius);
}
.v3-skel-line.is-short  { width: 32%; }
.v3-skel-line.is-medium { width: 48%; }
.v3-skel-line.is-long   { width: 78%; }
.v3-skel-line.is-full   { width: 100%; }

.v3-skel-dot {
    display: inline-block;
    width:  10px;
    height: 10px;
    border-radius: 50%;
}
.v3-skel-dot.is-md { width: 14px; height: 14px; }
.v3-skel-dot.is-lg { width: 20px; height: 20px; }

.v3-skel-block {
    display: block;
    width:  100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--v3-skel-radius);
}
.v3-skel-block.is-wide  { aspect-ratio: 3 / 1; }
.v3-skel-block.is-square{ aspect-ratio: 1 / 1; }
.v3-skel-block.is-tall  { aspect-ratio: 2 / 3; }

/* Card wrapper — matches a generic card shell so the placeholder
   doesn't reflow when the real card swaps in.                    */
.v3-skel-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   STATE TOGGLES on parent
   ============================================================ */
/* When the parent is .is-loading: show skeleton, hide content. */
.is-loading > .v3-skel-card,
.is-loading > .v3-skel-line,
.is-loading > .v3-skel-dot,
.is-loading > .v3-skel-block,
.is-loading .v3-skel-only {
    display: revert;
}
.is-loading > .v3-skel-real,
.is-loading .v3-skel-real {
    display: none !important;
}

/* When the parent is .is-loaded: hide skeleton, show content. */
.is-loaded > .v3-skel-card,
.is-loaded > .v3-skel-line,
.is-loaded > .v3-skel-dot,
.is-loaded > .v3-skel-block,
.is-loaded .v3-skel-only {
    display: none !important;
}
.is-loaded > .v3-skel-real,
.is-loaded .v3-skel-real {
    display: revert;
    /* gentle fade-in so the swap doesn't feel like a flash */
    animation: v3-skel-fade-in 200ms ease-out;
}

@keyframes v3-skel-fade-in {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ============================================================
   STAGGER — ripple sweep across a row of skeleton cards
   ============================================================ */
.v3-skel-grid > *:nth-child(3n+1) .v3-skel-shimmer::after { animation-delay: 0ms;   }
.v3-skel-grid > *:nth-child(3n+2) .v3-skel-shimmer::after { animation-delay: 160ms; }
.v3-skel-grid > *:nth-child(3n)   .v3-skel-shimmer::after { animation-delay: 320ms; }

/* 4-column grids (e.g. v3-tld-card with 4 TLDs) — stagger across 4 */
.v3-skel-grid.is-4col > *:nth-child(4n+1) .v3-skel-shimmer::after { animation-delay: 0ms;   }
.v3-skel-grid.is-4col > *:nth-child(4n+2) .v3-skel-shimmer::after { animation-delay: 120ms; }
.v3-skel-grid.is-4col > *:nth-child(4n+3) .v3-skel-shimmer::after { animation-delay: 240ms; }
.v3-skel-grid.is-4col > *:nth-child(4n)   .v3-skel-shimmer::after { animation-delay: 360ms; }

/* ============================================================
   REDUCED MOTION — disable sweep, pulse instead
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .v3-skel-shimmer::after {
        animation: none;
        background: transparent;
    }
    .v3-skel-shimmer {
        animation: v3-skel-pulse 2.2s ease-in-out infinite;
    }
    @keyframes v3-skel-pulse {
        0%, 100% { background: var(--v3-skel-base); }
        50%      { background: var(--v3-skel-shine); }
    }
    .is-loaded > .v3-skel-real,
    .is-loaded .v3-skel-real {
        animation: none;
    }
}

/* ============================================================
   THEME — light mode override
   Default tokens above target the dark theme of v3.  Light theme
   (if .theme-light is added on <body> later) flips the contrast.
   ============================================================ */
.theme-light {
    --v3-skel-base:  rgba(0, 0, 0, 0.06);
    --v3-skel-shine: rgba(0, 0, 0, 0.14);
}