/**
 * Defines the homepage kinetic code wall and integrated content treatment.
 * Depends on shared design tokens plus the homepage hero markup and WebGL canvas.
 */

/* Homepage kinetic code wall */
.home-page {
    --hero-code-background: var(--primary-dark);
    --hero-code-focus: rgba(5, 5, 8, 0.18);
    --hero-code-shade: rgba(5, 5, 8, 0.56);
    --hero-code-overlay-focus: rgba(5, 5, 8, 0.22);
    --hero-code-overlay-panel: rgba(5, 5, 8, 0.48);
    --hero-code-overlay-shade: rgba(5, 5, 8, 0.64);
    --hero-code-line: rgba(255, 255, 255, 0.13);
    --hero-code-line-soft: rgba(255, 255, 255, 0.045);
    --hero-code-panel: rgba(5, 5, 8, 0.42);
    --hero-code-panel-strong: rgba(5, 5, 8, 0.80);
    --hero-code-copy-shadow: rgba(5, 5, 8, 0.4);
    --hero-code-copy-scrim: rgba(5, 5, 8, 0.52);
    --hero-code-copy: var(--gray-300);
    --hero-code-muted: var(--gray-400);
    --hero-nav-glass: rgba(5, 5, 8, 0.1);
    --hero-nav-line: rgba(255, 255, 255, 0.1);
    --hero-code-glow: rgba(var(--accent-rgb), 0.24);
    --hero-code-crt-line: rgba(255, 255, 255, 0.055);
    --hero-code-button-copy: var(--gray-200, #e4e4e7);
    --hero-code-heading-size: 64px;
    --hero-code-copy-size: 24px;
    --hero-code-content-width: 1040px;
    --hero-code-copy-width: 800px;
    --hero-code-terminal-width: 640px;
    --hero-code-content-gutter: clamp(20px, 5vw, 68px);
    --hero-code-top-space: clamp(112px, 14vh, 148px);
    --hero-code-bottom-space: clamp(44px, 7vh, 76px);
    --hero-code-section-gap: clamp(20px, 3vh, 32px);
    --hero-code-small-gap: clamp(12px, 2vh, 20px);
    --hero-code-stat-gap: clamp(14px, 2.4vw, 40px);
    --hero-code-blur: 26px;
    --hero-code-scanline-size: 4px;
}

@supports (font-size: clamp(1px, 2vw, 3px)) {
    .home-page {
        --hero-code-heading-size: clamp(64px, 8.8vw, 124px);
        --hero-code-copy-size: clamp(24px, 2vw, 30px);
    }
}

.home-page .navbar {
    border-bottom-color: var(--hero-nav-line);
    box-shadow: inset 0 -1px 0 var(--hero-code-line-soft);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .home-page .navbar:not(.scrolled) {
        -webkit-backdrop-filter: blur(15px) saturate(1.35);
        backdrop-filter: blur(15px) saturate(1.35);
        background: var(--hero-nav-glass);
    }
}

.home-page .navbar.scrolled {
    border-bottom-color: var(--accent-10);
    box-shadow: none;
}

.home-page .hero-code-wall {
    background: var(--hero-code-background);
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    isolation: isolate;
    min-height: 100svh;
    overflow: clip;
    padding: var(--hero-code-top-space) 0 var(--hero-code-bottom-space);
    touch-action: pan-y;
}

.home-page #hero-canvas {
    bottom: 0;
    display: block;
    height: 100%;
    inset: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 0;
}

.home-page .hero-code-wall::before,
.home-page .hero-code-wall::after {
    bottom: 0;
    content: '';
    inset: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.home-page .hero-code-wall::before {
    background: radial-gradient(ellipse at center, var(--hero-code-overlay-focus) 0%, var(--hero-code-overlay-panel) 48%, var(--hero-code-overlay-shade) 100%);
}

.home-page .hero-code-wall::after {
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--hero-code-scanline-size) - 1px), var(--hero-code-crt-line) var(--hero-code-scanline-size)),
        linear-gradient(90deg, var(--hero-code-panel) 0%, transparent 18%, transparent 82%, var(--hero-code-panel) 100%);
}

.home-page .hero-code-wall .container {
    position: relative;
    z-index: 2;
}

.home-page .hero-code-wall .hero-content {
    isolation: isolate;
    max-width: var(--hero-code-content-width);
    padding: 0 var(--hero-code-content-gutter);
    position: relative;
    z-index: 2;
}

.home-page .hero-code-wall .hero-content::before {
    background: radial-gradient(ellipse at center, var(--hero-code-panel-strong) 0%, var(--hero-code-panel) 45%, transparent 76%);
    bottom: -12%;
    content: '';
    filter: blur(var(--hero-code-blur));
    inset: -12% -8%;
    left: -8%;
    pointer-events: none;
    position: absolute;
    right: -8%;
    top: -12%;
    z-index: -1;
}

.home-page .hero-code-wall h1 {
    font-size: 64px;
    font-size: var(--hero-code-heading-size);
    letter-spacing: -0.055em;
    line-height: 1;
    margin: 0 auto var(--hero-code-section-gap);
    max-width: var(--hero-code-content-width);
    text-shadow: 0 3px 30px var(--hero-code-panel-strong);
}

.home-page .hero-code-wall h1 .text-accent {
    color: var(--accent);
}

.home-page .hero-code-wall p {
    background: linear-gradient(90deg, transparent 0%, var(--hero-code-copy-scrim) 12%, var(--hero-code-copy-scrim) 88%, transparent 100%);
    border-radius: var(--radius-sm);
    color: var(--hero-code-copy);
    font-size: 24px;
    font-size: var(--hero-code-copy-size);
    line-height: 1.3;
    margin: 0 auto var(--hero-code-section-gap);
    max-width: var(--hero-code-copy-width);
    padding: 8px 18px;
    text-shadow: 0 3px 20px var(--hero-code-copy-shadow);
}

.home-page .hero-code-wall .terminal-preview {
    background: var(--hero-code-panel-strong);
    border-color: var(--hero-code-line);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 24px var(--accent-05), 0 14px 42px var(--hero-code-panel);
    column-gap: 0.25em;
    font-size: var(--font-size-base);
    margin: 0 auto;
    margin-bottom: 20px;
    max-width: min(100%, var(--hero-code-terminal-width));
    min-height: 48px;
    width: fit-content;
}

.home-page .hero-code-wall .terminal-output {
    min-width: 0;
    padding-left: 0;
    text-align: left;
}

.home-page .hero-code-wall .terminal-prompt {
    align-self: flex-start;
    margin-right: 0;
}

.home-page .hero-code-wall .terminal-text {
    color: var(--gray-300);
}

.home-page .hero-code-wall .terminal-cursor {
    vertical-align: -0.15em;
}

.home-page .hero-code-wall .hero-cta {
    margin: var(--hero-code-section-gap) 0;
}

.home-page .hero-code-wall .btn {
    --hero-cta-angle: 0deg;
    --hero-cta-border: rgba(255, 255, 255, 0.86);
    --hero-cta-border-width: 2px;
    --hero-cta-fill: linear-gradient(var(--hero-code-panel), var(--hero-code-panel));
    animation: heroCtaBorderSpin 12s linear infinite;
    background:
        var(--hero-cta-fill) padding-box,
        linear-gradient(var(--primary-dark), var(--primary-dark)) padding-box,
        linear-gradient(var(--hero-cta-angle), transparent 15%, var(--hero-cta-border) 50%, transparent 85%) border-box;
    border: var(--hero-cta-border-width) solid transparent;
    box-shadow: 0 12px 34px var(--hero-code-panel);
    overflow: hidden;
    position: relative;
}

.home-page .hero-code-wall .btn-primary {
    --hero-cta-fill: var(--accent);
    animation: heroCtaPulse 3.2s ease-in-out infinite;
    background: var(--hero-cta-fill);
    color: var(--primary-dark);
}

.home-page .hero-code-wall .btn-primary:hover {
    --hero-cta-fill: var(--accent-light);
    box-shadow: 0 0 34px var(--hero-code-glow);
}

.home-page .hero-code-wall .btn-secondary {
    --hero-cta-border: var(--accent);
    --hero-cta-fill: var(--gradient-dark-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--hero-code-button-copy);
}

.home-page .hero-code-wall .btn-secondary:hover {
    --hero-cta-fill: linear-gradient(var(--accent-05), var(--accent-05));
    animation-duration: 3s;
}

@property --hero-cta-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes heroCtaBorderSpin {
    to { --hero-cta-angle: 360deg; }
}

@keyframes heroCtaPulse {
    0%,
    100% {
        box-shadow: 0 12px 34px var(--hero-code-panel);
        scale: 1;
    }

    50% {
        box-shadow: 0 12px 34px var(--hero-code-panel), 0 0 32px var(--accent-40);
        scale: 1.025;
    }
}

@keyframes heroCtaPulseTouch {
    0%,
    100% {
        box-shadow: 0 12px 34px var(--hero-code-panel);
    }

    50% {
        box-shadow: 0 12px 34px var(--hero-code-panel), 0 0 32px var(--accent-40);
    }
}

@media (hover: none), (pointer: coarse) {
    .home-page .hero-code-wall .btn-primary {
        animation: heroCtaPulseTouch 3.2s ease-in-out infinite;
    }

    .home-page .hero-code-wall .btn-primary:hover {
        transform: none;
    }
}


.home-page .hero-scene-unavailable {
    background:
        radial-gradient(ellipse at center, var(--hero-code-overlay-focus), var(--hero-code-overlay-shade)),
        repeating-linear-gradient(0deg, transparent 0, transparent calc(var(--hero-code-scanline-size) - 1px), var(--hero-code-crt-line) var(--hero-code-scanline-size)),
        linear-gradient(var(--accent-05) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-05) 1px, transparent 1px),
        var(--hero-code-background);
    background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px, auto;
}

.home-page .hero-scene-unavailable #hero-canvas {
    display: none;
}

@media (max-width: 768px) {
    .home-page {
        --hero-code-heading-size: 50px;
        --hero-code-content-gutter: 0;
        --hero-code-top-space: 112px;
        --hero-code-bottom-space: 42px;
        --hero-code-section-gap: 22px;
        --hero-code-stat-gap: 10px;
    }

    @supports (font-size: clamp(1px, 2vw, 3px)) {
        .home-page {
            --hero-code-heading-size: clamp(50px, 14.4vw, 78px);
        }
    }

    .home-page .hero-code-wall .hero-content::before {
        bottom: -6%;
        inset: -6% -4%;
        left: -4%;
        right: -4%;
        top: -6%;
    }

    .home-page .hero-code-wall h1 {
        font-size: 50px;
        font-size: var(--hero-code-heading-size);
    }

    .home-page .hero-code-wall p {
        font-size: 18px;
        font-size: clamp(18px, 5.2vw, 22px);
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-page .hero-code-wall .terminal-preview {
        font-size: var(--font-size-2xs);
        min-height: 44px;
        padding: 10px 14px;
    }

    .home-page .hero-code-wall .hero-cta {
        gap: 10px;
    }

}

@media (min-width: 769px) and (max-height: 800px) {
    .home-page {
        --hero-code-heading-size: 60px;
        --hero-code-top-space: 108px;
        --hero-code-bottom-space: 32px;
        --hero-code-section-gap: 18px;
    }

    @supports (font-size: clamp(1px, 2vw, 3px)) {
        .home-page {
            --hero-code-heading-size: clamp(60px, 7.8vw, 96px);
        }
    }

    .home-page .hero-code-wall h1 {
        font-size: 60px;
        font-size: var(--hero-code-heading-size);
    }

    .home-page .hero-code-wall .terminal-preview {
        min-height: 42px;
        padding-bottom: 10px;
        padding-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero-code-wall .hero-content,
    .home-page .hero-code-wall .terminal-preview,
    .home-page .hero-code-wall .terminal-cursor {
        animation: none;
    }

    .home-page .hero-code-wall .btn {
        animation: none;
    }
}