/* File:     v3-steps.css
 * Layer:    3-components/steps
 * Version:  1.0.0
 * Depends:  tokens.css (var(--v3-*))
 * Selectors: .v3-mint-before-grid, .v3-mint-step-card, .v3-mint-step-num,
 *            .v3-mint-step-desc, .v3-mint-step-label
 * Spec:     v3/specs/XRPDomains-Frontend-Architecture.md (component layer)
 *
 * 3-step indicator — single source of truth for register flow (search.html)
 * AND Continue modal (resume flow).  Both contexts share markup; this file
 * is the ONLY place CSS lives.
 *
 * Architecture choice — per-item connector lines (NOT a global line on the
 * grid).  Each step except the first carries a left-side ::before that
 * draws a line within the gap between this step and the previous one.  The
 * line cannot, by construction, cross any circle — no math, no mask hacks,
 * no breakage when the background colour or layout changes.
 *
 * Size variants via CSS custom properties:
 *   --step-circle-size   default 44px (register page)
 *   --step-line-top      default 22px (half of circle height)
 *   --step-line-clearance default 6px (gap between circle edge and line)
 *
 * State classes on .v3-mint-step-card:
 *   .is-active   — current step, accent ring + halo
 *   .is-done     — completed, filled accent
 *   .is-error    — failed, red ring
 *   (no class)   — pending, dim outline
 */

/* ============================================================
   1. GRID — flexbox container, evenly distributes 3 steps
   ============================================================ */
.v3-mint-before-grid {
    --step-circle-size: 44px;
    --step-line-top: 22px;          /* circle radius */
    --step-line-clearance: 6px;     /* gap between line and circle edge */
    --step-line-color: rgba(255, 255, 255, 0.10);
    --step-line-done-color: var(--v3-accent, #25aae1);

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
    padding: 8px 6% 0;
    position: relative;
    transition: --progress-1 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   2. STEP CARD — flex column with circle on top, label below
   ============================================================ */
.v3-mint-step-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 4px 8px;
    background: transparent;
    border: 0;
    position: relative;
    /* z-index keeps card content above any sibling connector line. */
    z-index: 1;
}

/* ============================================================
   3. CONNECTOR LINE — per-step ::before on every step EXCEPT first
   ============================================================
   Line lives entirely in the gap between THIS card's circle and the
   PREVIOUS card's circle.  It can never enter a circle by definition.

   Geometry:
     - right edge of line = 50% (center of this card) - clearance
                                                       - circle radius
     - left edge of line  = -50% (extends into previous card's right half)
                          + clearance + circle radius
   In layout terms the easiest expression is to anchor the line to the
   card's left half + the previous card's right half via percentages.
*/
.v3-mint-step-card:not(:first-child)::before {
    content: '';
    position: absolute;
    top: var(--step-line-top);
    /* Line spans from -50% (into previous card) to (50% - half circle) of
       this card, with a small clearance so it doesn't touch either circle. */
    left: calc(-50% + (var(--step-circle-size) / 2) + var(--step-line-clearance));
    right: calc(50% + (var(--step-circle-size) / 2) + var(--step-line-clearance));
    height: 1px;
    background: var(--step-line-color);
    border-radius: 1px;
    z-index: 0;
    pointer-events: none;
    transition: background-color 320ms ease;
}

/* Line fills with accent when the step (or any prior step) is done. */
.v3-mint-step-card.is-done:not(:first-child)::before,
.v3-mint-step-card.is-active:not(:first-child)::before {
    background: var(--step-line-done-color);
}

/* ============================================================
   4. STEP CIRCLE — the numbered/checked badge
   ============================================================ */
.v3-mint-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--step-circle-size);
    height: var(--step-circle-size);
    border-radius: 50%;
    background: var(--v3-bg-2, #0a0c10);
    border: 1.5px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.40);
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 17px;
    font-weight: 700;
    transition: background-color 320ms ease, border-color 320ms ease,
                color 320ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- Active state — current step, animated halo ----- */
.v3-mint-step-card.is-active .v3-mint-step-num {
    background: var(--v3-bg-2, #0a0c10);
    border-color: rgba(93, 200, 240, 0.95);
    color: rgba(93, 200, 240, 1);
    transform: scale(1.06);
    box-shadow: 0 0 18px rgba(93, 200, 240, 0.18);
}
.v3-mint-step-card.is-active .v3-mint-step-num::before,
.v3-mint-step-card.is-active .v3-mint-step-num::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid rgba(93, 200, 240, 0.8);
    pointer-events: none;
    animation: v3-step-ripple 2.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
    z-index: -1;
}
.v3-mint-step-card.is-active .v3-mint-step-num::after { animation-delay: 1.3s; }

@keyframes v3-step-ripple {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { opacity: 0.05; }
    100% { transform: scale(1.85); opacity: 0; }
}

/* ----- Done state — filled accent ----- */
.v3-mint-step-card.is-done .v3-mint-step-num {
    background: var(--v3-accent, #25aae1);
    border-color: var(--v3-accent, #25aae1);
    color: var(--v3-bg, #050608);
}

/* ----- Error state — red ring ----- */
.v3-mint-step-card.is-error .v3-mint-step-num {
    background: var(--v3-bg-2, #0a0c10);
    border-color: rgba(251, 113, 133, 0.65);
    color: rgba(251, 113, 133, 0.95);
}
.v3-mint-step-card.is-error .v3-mint-step-num::before,
.v3-mint-step-card.is-error .v3-mint-step-num::after {
    display: none !important;       /* no ripple on error */
}

/* ============================================================
   5. LABEL / DESC
   ============================================================ */
.v3-mint-step-desc {
    font-family: var(--v3-sans, 'Satoshi', system-ui, sans-serif);
    font-size: 12px;
    line-height: 1.4;
    color: var(--v3-ink-soft, #d4dae5);
    text-align: center;
    max-width: 140px;
    transition: color 320ms ease;
}
.v3-mint-step-card .v3-mint-step-num i {
    font-size: 14px;
    line-height: 1;
}

/* ============================================================
   6. COMPACT VARIANT — Continue modal (resume flow)
   ============================================================
   Smaller circles (32px) + mono caption style for the label.  Triggered
   by ancestor selector .v3-continue-modal — markup stays identical.
*/
.v3-continue-modal .v3-mint-before-grid {
    --step-circle-size: 32px;
    --step-line-top: 16px;          /* half of 32px */
    --step-line-clearance: 6px;
    padding: 8px 4% 0;
}

.v3-continue-modal .v3-mint-step-card {
    gap: 10px;
    padding: 0 4px 6px;
}

.v3-continue-modal .v3-mint-step-num {
    font-size: 12px;
    background: #0a0d12;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.42);
}
.v3-continue-modal .v3-mint-step-num i { font-size: 11px; }

.v3-continue-modal .v3-mint-step-card.is-active .v3-mint-step-num {
    border-color: rgba(93, 200, 240, 0.95);
    color: rgba(93, 200, 240, 1);
    background: #0a0d12;
    box-shadow:
        0 0 0 4px rgba(93, 200, 240, 0.10),
        0 0 0 1px rgba(93, 200, 240, 0.4) inset;
    transform: scale(1.08);
}

.v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-num {
    background: rgba(93, 200, 240, 0.95);
    border-color: rgba(93, 200, 240, 0.95);
    color: #050608;
}

.v3-continue-modal .v3-mint-step-desc {
    font-family: var(--v3-mono, 'JetBrains Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width: 100px;
}
.v3-continue-modal .v3-mint-step-card.is-active .v3-mint-step-desc {
    color: rgba(93, 200, 240, 1);
}
.v3-continue-modal .v3-mint-step-card.is-done .v3-mint-step-desc {
    color: rgba(255, 255, 255, 0.78);
}
.v3-continue-modal .v3-mint-step-card.is-error .v3-mint-step-desc {
    color: rgba(251, 113, 133, 0.95);
}

/* ============================================================
   7. RESPONSIVE — under 600px (continue modal on small phones)
   ============================================================ */
@media (max-width: 600px) {
    .v3-continue-modal .v3-mint-before-grid {
        --step-circle-size: 28px;
        --step-line-top: 14px;
        padding: 8px 2% 0;
    }
    .v3-continue-modal .v3-mint-step-desc {
        font-size: 9px;
        max-width: 80px;
    }
}

/* ============================================================
   8. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .v3-mint-step-card.is-active .v3-mint-step-num,
    .v3-mint-step-card.is-active .v3-mint-step-num::before,
    .v3-mint-step-card.is-active .v3-mint-step-num::after {
        animation: none !important;
        transform: none !important;
    }
    .v3-mint-step-num {
        transition: none;
    }
    .v3-mint-step-card:not(:first-child)::before {
        transition: none;
    }
}