/**
 * Styles the homepage's responsive post-hero metrics band.
 * Depends on shared homepage tokens and the value-label markup rendered by index.php.
 */

.home-page .hero-stats-band {
    --hero-stats-grid-size: 42px;
    background:
        linear-gradient(90deg, transparent, var(--accent-05) 50%, transparent),
        var(--gradient-dark-bg);
    border-bottom: 1px solid var(--hero-code-line-soft);
    border-top: 1px solid var(--hero-code-line);
    overflow: visible;
    padding: 42px 0;
    padding: clamp(30px, 4.5vw, 54px) 0;
    position: relative;
    z-index: 1;
}

.home-page .hero-stats-band::before {
    background:
        linear-gradient(var(--accent-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-05) 1px, transparent 1px);
    background-size: 100% var(--hero-stats-grid-size), var(--hero-stats-grid-size) 100%;
    content: '';
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    position: absolute;
}

.home-page .hero-stats-band::after {
    background: var(--gradient-top-border);
    box-shadow: 0 0 24px var(--accent-30);
    content: '';
    height: 1px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: min(60%, 640px);
}

.home-page .hero-stats-band > .container {
    position: relative;
    z-index: 1;
}

.home-page .hero-stats-band .hero-stats {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: clamp(8px, 1.5vw, 18px);
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    max-width: var(--hero-code-content-width);
    overflow: visible;
    padding: 0;
    position: relative;
}

.home-page .hero-stats-band .stat {
    --stat-accent: var(--accent);
    --stat-surface-highlight: var(--hero-code-panel-strong);
    --stat-texture: var(--accent-05);
    align-items: center;
    background:
        radial-gradient(circle, var(--stat-texture) 0 0.7px, transparent 1px) 0 0 / 8px 8px,
        repeating-linear-gradient(0deg, transparent 0, transparent 3px, var(--stat-texture) 4px) 0 0 / 100% 4px,
        linear-gradient(160deg, var(--stat-surface-highlight), var(--hero-code-panel));
    border: 1px solid var(--accent-20);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 var(--accent-10), 0 14px 34px var(--hero-code-panel);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    padding: 22px var(--hero-code-stat-gap) 20px;
    position: relative;
    text-align: center;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
    z-index: 0;
}

.home-page .hero-stats-band .stat::before {
    background: linear-gradient(100deg, transparent 0%, transparent 42%, var(--stat-accent) 50%, transparent 58%) -120% 0 / 220% 100% no-repeat;
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.home-page .hero-stats-band .stat::after {
    content: '';
    height: 26px;
    opacity: 0.78;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 14px;
    width: clamp(44px, 5vw, 56px);
    will-change: background-position, background-size, opacity;
    z-index: 2;
}

.home-page .hero-stats-band .stat-experience {
    --stat-hover-accent: var(--feature-color-3);
}

.home-page .hero-stats-band .stat-experience::after {
    background:
        radial-gradient(circle, var(--stat-accent) 0 2px, transparent 3px) 0 50% / 10px 10px repeat-x,
        linear-gradient(var(--stat-accent), var(--stat-accent)) 0 50% / 0% 1px no-repeat,
        linear-gradient(var(--hero-code-line), var(--hero-code-line)) 0 50% / 100% 1px no-repeat;
    animation: heroStatsTimeline 6.8s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
}

.home-page .hero-stats-band .stat-clients {
    --stat-hover-accent: var(--feature-color-6);
}

.home-page .hero-stats-band .stat-clients::after {
    background:
        radial-gradient(circle at 15% 50%, var(--stat-accent) 0 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle at 50% 20%, var(--stat-accent) 0 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle at 85% 70%, var(--stat-accent) 0 3px, transparent 4px) 0 0 / 100% 100% no-repeat,
        linear-gradient(25deg, transparent 47%, var(--stat-accent) 48% 52%, transparent 53%) 0 0 / 100% 100% no-repeat,
        radial-gradient(circle, var(--gray-50) 0 2px, transparent 3px) 0% 50% / 10px 10px no-repeat;
    animation: heroStatsNodes 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
    background-repeat: no-repeat;
}

.home-page .hero-stats-band .stat-projects {
    --stat-hover-accent: var(--feature-color-7);
}

.home-page .hero-stats-band .stat-projects::after {
    background:
        linear-gradient(var(--stat-accent), var(--stat-accent)) 0 100% / 5px 45% no-repeat,
        linear-gradient(var(--stat-accent), var(--stat-accent)) 9px 100% / 5px 70% no-repeat,
        linear-gradient(var(--stat-accent), var(--stat-accent)) 18px 100% / 5px 58% no-repeat,
        linear-gradient(var(--stat-accent), var(--stat-accent)) 27px 100% / 5px 92% no-repeat;
    animation: heroStatsActivity 5.6s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate;
}

.home-page .hero-stats-band .stat:hover {
    --stat-accent: var(--stat-hover-accent);
    --stat-surface-highlight: color-mix(in srgb, var(--stat-accent) 12%, var(--hero-code-panel-strong));
    --stat-texture: color-mix(in srgb, var(--stat-accent) 8%, transparent);
    border-color: var(--stat-accent);
    box-shadow: inset 0 0 28px var(--accent-05), 0 18px 42px var(--hero-code-panel);
    box-shadow:
        inset 0 0 28px color-mix(in srgb, var(--stat-accent) 10%, transparent),
        0 18px 42px color-mix(in srgb, var(--stat-accent) 24%, transparent);
    transform: translateY(-2px);
    z-index: 1;
}

.home-page .hero-stats-band .stat:hover::before {
    animation: heroStatsScanBeam 1.8s cubic-bezier(0.4, 0, 0.2, 1) 1;
    opacity: 0.32;
}

.home-page .hero-stats-band .stat:hover::after {
    animation-duration: 3.2s;
    opacity: 0.9;
}

.home-page .hero-stats-band .stat-value {
    color: var(--stat-accent);
    font-family: var(--font-mono);
    font-size: 50px;
    font-size: clamp(42px, 6.8vw, 82px);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.06em;
    line-height: 0.9;
    position: relative;
    text-shadow: 0 0 4px var(--accent-20), 0 0 14px var(--accent-20), 0 0 28px var(--accent-10);
    transition: color var(--transition-base), text-shadow var(--transition-base);
    white-space: nowrap;
    z-index: 2;
}

.home-page .hero-stats-band .stat-suffix {
    color: var(--gray-50);
    font-family: var(--font-sans);
    font-size: 0.52em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: normal;
    margin-left: 0.06em;
    vertical-align: 0.08em;
}

.home-page .hero-stats-band .stat:hover .stat-value {
    text-shadow:
        0 0 5px color-mix(in srgb, var(--stat-accent) 48%, transparent),
        0 0 18px color-mix(in srgb, var(--stat-accent) 34%, transparent),
        0 0 34px color-mix(in srgb, var(--stat-accent) 22%, transparent);
}

.home-page .hero-stats-band .stat-label {
    color: var(--hero-code-muted);
    font-size: 12px;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.08em;
    line-height: 1.35;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    z-index: 2;
}

@media (min-width: 1024px) {
    .home-page .hero-stats-band .stat-label {
        letter-spacing: 0.06em;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .home-page .hero-stats-band {
        padding: 26px 0;
    }

    .home-page .hero-stats-band .hero-stats {
        width: 100%;
    }

    .home-page .hero-stats-band .stat {
        gap: 8px;
        padding: 16px 8px 14px;
    }

    .home-page .hero-stats-band .stat::after {
        display: none;
    }

    .home-page .hero-stats-band .stat-value {
        font-size: 34px;
        font-size: clamp(32px, 10vw, 54px);
    }

    .home-page .hero-stats-band .stat-label {
        font-size: clamp(10px, 2.5vw, 12px);
        letter-spacing: 0.04em;
        line-height: 1.25;
    }
}

@keyframes heroStatsScanBeam {
    from {
        background-position: -120% 0;
    }

    to {
        background-position: 120% 0;
    }
}

@keyframes heroStatsTimeline {
    from {
        background-size: 10px 10px, 0% 1px, 100% 1px;
    }

    to {
        background-size: 10px 10px, 100% 1px, 100% 1px;
    }
}

@keyframes heroStatsNodes {
    from {
        background-position: 0 0, 0 0, 0 0, 0 0, 0% 50%;
    }

    to {
        background-position: 0 0, 0 0, 0 0, 0 0, 100% 50%;
    }
}

@keyframes heroStatsActivity {
    0% {
        background-size: 5px 26%, 5px 44%, 5px 32%, 5px 58%;
    }

    25% {
        background-size: 5px 72%, 5px 44%, 5px 32%, 5px 58%;
    }

    50% {
        background-size: 5px 72%, 5px 82%, 5px 32%, 5px 58%;
    }

    75% {
        background-size: 5px 72%, 5px 82%, 5px 64%, 5px 58%;
    }

    100% {
        background-size: 5px 72%, 5px 82%, 5px 64%, 5px 92%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero-stats-band .stat,
    .home-page .hero-stats-band .stat::before,
    .home-page .hero-stats-band .stat-value {
        transition: none;
    }

    .home-page .hero-stats-band .stat::before {
        animation: none;
    }

    .home-page .hero-stats-band .stat:hover::before {
        opacity: 0;
    }

    .home-page .hero-stats-band .stat::after {
        animation: none;
    }

    .home-page .hero-stats-band .stat:hover {
        transform: none;
    }
}