/* css/hud.css */
@layer hud {

/* HUD */
/* Scanlines + slow rolling scan bar (fixed, non-interactive) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
    opacity: 0.45;
}

body::before {
    content: "";
    position: fixed;
    top: -160px;
    left: 0;
    right: 0;
    height: 160px;
    z-index: 1100;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(211, 240, 10, 0.07), transparent);
    animation: scan-roll 9s linear infinite;
}

@keyframes scan-roll {
    to { transform: translateY(calc(100vh + 160px)); }
}

/* Hero name: chromatic glitch bursts */
.hero h1 span {
    position: relative;
}

.hero h1 span::before,
.hero h1 span::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.hero h1 span::before {
    color: var(--red);
    animation: glitch-a 6s steps(1) infinite;
}

.hero h1 span::after {
    color: var(--purple-light);
    animation: glitch-b 6s steps(1) 0.15s infinite;
}

@keyframes glitch-a {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 1; clip-path: inset(10% 0 62% 0); transform: translate(-7px, 0); }
    93% { clip-path: inset(55% 0 20% 0); transform: translate(5px, 0); }
    95% { clip-path: inset(30% 0 40% 0); transform: translate(-3px, 0); }
    97% { clip-path: inset(75% 0 5% 0); transform: translate(6px, 0); }
}

@keyframes glitch-b {
    0%, 90%, 100% { opacity: 0; }
    92% { opacity: 1; clip-path: inset(60% 0 15% 0); transform: translate(6px, 0); }
    94% { clip-path: inset(15% 0 55% 0); transform: translate(-5px, 0); }
    96% { clip-path: inset(40% 0 35% 0); transform: translate(4px, 0); }
}

/* One page-load sequence: hero lines scan in, top to bottom */
.hero-main > * {
    animation: boot-in 0.5s steps(6, end) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

.hero-main > :nth-child(2) { --i: 1; }
.hero-main > :nth-child(3) { --i: 2; }
.hero-main > :nth-child(4) { --i: 3; }
.hero-main > :nth-child(5) { --i: 4; }
.hero-main > :nth-child(6) { --i: 5; }
.hero-main > :nth-child(7) { --i: 6; }

@keyframes boot-in {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* Monospace readout labels */
.system-label, .hero-kicker, .portrait-code, .portrait-footer span, .data-cell span,
.spec-row span, .project-topline > p, .live-status, .project-spec span, .stack-row span,
.capability-top, .capability-footer, .education-code, .contact-left > p:first-child,
.section-banner, .footer-brand, .footer-message {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.project-role {
    margin: -8px 0 20px;
    color: var(--gray-dark);
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section-heading h2::before {
    content: "// ";
    color: var(--purple-light);
}

.contact-left h3 span::after {
    content: "_";
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Targeting-bracket corners on key panels */
.portrait-panel,
.project-feature,
.education-interface,
.contact-zone {
    position: relative;
}

.portrait-panel::before,
.project-feature::before,
.education-interface::before,
.contact-zone::before {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(var(--lime), var(--lime)) top left / 18px 2px no-repeat,
        linear-gradient(var(--lime), var(--lime)) top left / 2px 18px no-repeat,
        linear-gradient(var(--lime), var(--lime)) top right / 18px 2px no-repeat,
        linear-gradient(var(--lime), var(--lime)) top right / 2px 18px no-repeat,
        linear-gradient(var(--lime), var(--lime)) bottom left / 18px 2px no-repeat,
        linear-gradient(var(--lime), var(--lime)) bottom left / 2px 18px no-repeat,
        linear-gradient(var(--lime), var(--lime)) bottom right / 18px 2px no-repeat,
        linear-gradient(var(--lime), var(--lime)) bottom right / 2px 18px no-repeat;
}


}