/* ── Base & Design Tokens ── */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.glass-panel {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
}

.brutalist-border {
    border: 2px solid white;
}

.neon-text-glow {
    text-shadow: 0 0 12px rgba(255, 11, 12, 0.4);
}

.brutalist-shadow {
    box-shadow: 8px 8px 0px 0px rgba(255, 11, 12, 1);
}

/* ── Keyframes ── */
@keyframes breathing-glow {
    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 11, 12, 0.4);
    }
    50% {
        box-shadow: 0 0 35px rgba(255, 11, 12, 0.8);
    }
}

@keyframes glitch-jitter {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

@keyframes text-flicker {
    0%,
    19.999%,
    22%,
    62.999%,
    64%,
    64.999%,
    70%,
    100% {
        opacity: 1;
    }
    20%,
    21.999%,
    63%,
    63.999%,
    65%,
    69.999% {
        opacity: 0.4;
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes grain-shift {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-1%, -1%);
    }
    50% {
        transform: translate(1%, 1%);
    }
    75% {
        transform: translate(-1%, 1%);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes boot-fade-in {
    to {
        opacity: 1;
    }
}

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

@keyframes flicker-dip {
    0% {
        filter: brightness(1);
    }
    30% {
        filter: brightness(1.08);
    }
    60% {
        filter: brightness(0.92);
    }
    100% {
        filter: brightness(1);
    }
}

@keyframes phone-pulse {
    0%,
    100% {
        transform: rotate(-90deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(-90deg) scale(1.1);
        opacity: 0.8;
    }
}