@property --brand-accent {
    syntax: '<color>';
    initial-value: #ff6b35;
    inherits: true;
}

:root {
    --brand-accent: #ff6b35;
    animation: colorCycle 20s linear infinite;

    --glitch-label: 'NO SIGNAL';
}

@keyframes colorCycle {
    0% {
        --brand-accent: #ff6b35;
    }

    20% {
        --brand-accent: #00f0ff;
    }

    40% {
        --brand-accent: #39ff14;
    }

    60% {
        --brand-accent: #ff0000;
    }

    80% {
        --brand-accent: #ffff00;
    }

    100% {
        --brand-accent: #ff6b35;
    }
}

@keyframes fadeOrange {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeBlue {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeGreen {
    0%, 20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeRed {
    0%, 40% {
        opacity: 0;
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeYellow {
    0%, 60% {
        opacity: 0;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.logo-fade-orange {
    animation: fadeOrange 20s linear infinite;
}

.logo-fade-blue {
    animation: fadeBlue 20s linear infinite;
}

.logo-fade-green {
    animation: fadeGreen 20s linear infinite;
}

.logo-fade-red {
    animation: fadeRed 20s linear infinite;
}

.logo-fade-yellow {
    animation: fadeYellow 20s linear infinite;
}

@layer base {
    html, body {
        margin: 0;
        padding: 0;
        background-color: #131313;
        color: #e5e2e1;
    }

    body {
        overscroll-behavior: none;
    }

    main > :first-child {
        margin-top: 0 !important;
    }

    main > :last-child {
        margin-bottom: 0 !important;
    }

    .glitch-hover:hover {
        animation: glitch 0.2s linear infinite;
        text-shadow: 2px 0 var(--brand-accent),-2px 0 #7df4ff;
    }

    @keyframes glitch {
        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)
        }
    }

    .duct-tape {
        background-color: #353534;
        position: relative;
        overflow: hidden;
    }

        .duct-tape::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.1;
            pointer-events: none;
        }
}

::-webkit-scrollbar {
    display: none;
}

@font-face {
    font-family: typewriter;
    src: url('fonts/ELEGANT_TYPEWRITER_Regular.ttf');
}

.typewriter {
    font-family: typewriter;
}


@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* The Record Component */
.record-container {
    position: relative;
    width: 300px;
    height: 300px;
    cursor: pointer;
    perspective: 1000px;
}

.record-sleeve {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255,255,255,0.1);
}

.vinyl-record {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    width: 290px;
    height: 290px;
    background: radial-gradient(circle at center, #111 0%, #222 30%, #111 31%, #222 50%, #111 51%, #222 70%, #111 71%, #222 100%);
    border-radius: 50%;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(0) rotate(0deg);
}

    /* Record grooves effect */
    .vinyl-record::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: repeating-radial-gradient( circle at center, transparent 0, transparent 2px, rgba(255,255,255,0.03) 3px, transparent 4px );
    }

.record-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #000;
}

.record-label-text {
    color: #000;
    font-family: 'Anton', sans-serif;
    font-size: 10px;
    text-align: center;
    line-height: 1;
}

/* Interaction */
.record-container:hover .vinyl-record,
.record-container:focus-within .vinyl-record {
    transform: translateX(65%) rotate(120deg);
}

.record-container:hover .record-sleeve {
    transform: scale(1.02);
}

/* Gritty Overlay */
.gritty-overlay {
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');
    opacity: 0.2;
    pointer-events: none;
    z-index: 30;
}

.status-stamp {
    position: absolute;
    top: 10px;
    left: -10px;
    transform: rotate(-15deg);
    padding: 4px 8px;
    background: #ff0000;
    color: #fff;
    font-family: 'Anton', sans-serif;
    font-size: 12px;
    z-index: 40;
    box-shadow: 2px 2px 0 #000;
}

.glitch-label::after {
    content: var(--glitch-label);
}


/* =========================================================
   GLITCH TRANSITION
   ========================================================= */

#glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    /* Used by the generated message */
    --glitch-message: "";
}

    /* Overlay is activated by JavaScript */
    #glitch-overlay.active {
        opacity: 1;
    }


    /* ---------------------------------------------------------
   Scanlines
   --------------------------------------------------------- */

    #glitch-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( to bottom, transparent 0, transparent 3px, rgba(255, 255, 255, 0.08) 4px );
        opacity: 0;
    }


    /* ---------------------------------------------------------
   Static / noise
   --------------------------------------------------------- */

    #glitch-overlay::after {
        content: "";
        position: absolute;
        inset: -50%;
        background-image: repeating-radial-gradient( circle at 0 0, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 1px, transparent 1px, transparent 3px );
        opacity: 0;
        mix-blend-mode: screen;
    }


/* ---------------------------------------------------------
   Glitch message
   --------------------------------------------------------- */

.glitch-message {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-size: clamp(1rem, 3vw, 2rem);
    font-weight: bold;
    letter-spacing: .35em;
    color: white;
    text-shadow: 3px 0 #ff003c, -3px 0 #00ffff;
    opacity: 0;
}


    /* Generated text */
    .glitch-message::before {
        content: var(--glitch-message);
    }


/* =========================================================
   GLITCH OUT
   ========================================================= */

#glitch-overlay.glitch-out {
    animation: glitch-overlay-out 180ms steps(5) forwards;
}

    #glitch-overlay.glitch-out::before {
        animation: glitch-scanlines 180ms steps(4) forwards;
    }

    #glitch-overlay.glitch-out::after {
        animation: glitch-noise 180ms steps(6) forwards;
    }

    #glitch-overlay.glitch-out .glitch-message {
        animation: glitch-message-out 180ms steps(4) forwards;
    }


/* =========================================================
   GLITCH IN
   ========================================================= */

#glitch-overlay.glitch-in {
    animation: glitch-overlay-in 250ms steps(6) forwards;
}

    #glitch-overlay.glitch-in::before {
        animation: glitch-scanlines-in 250ms steps(5) forwards;
    }

    #glitch-overlay.glitch-in::after {
        animation: glitch-noise-in 250ms steps(6) forwards;
    }

    #glitch-overlay.glitch-in .glitch-message {
        animation: glitch-message-in 250ms steps(5) forwards;
    }


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes glitch-overlay-out {

    0% {
        opacity: 0;
        transform: translateX(0);
    }

    20% {
        opacity: 1;
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(5px);
    }

    60% {
        transform: translateX(-7px);
    }

    80% {
        transform: translateX(3px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes glitch-overlay-in {

    0% {
        opacity: 1;
        transform: translateX(0);
    }

    20% {
        transform: translateX(6px);
    }

    40% {
        transform: translateX(-5px);
    }

    60% {
        transform: translateX(3px);
    }

    80% {
        transform: translateX(-2px);
    }

    100% {
        opacity: 0;
        transform: translateX(0);
    }
}


/* ---------------------------------------------------------
   Scanlines
   --------------------------------------------------------- */

@keyframes glitch-scanlines {

    0% {
        opacity: 0;
    }

    25% {
        opacity: .8;
    }

    50% {
        opacity: .3;
    }

    75% {
        opacity: .9;
    }

    100% {
        opacity: .5;
    }
}


@keyframes glitch-scanlines-in {

    0% {
        opacity: .5;
    }

    30% {
        opacity: .9;
    }

    60% {
        opacity: .4;
    }

    100% {
        opacity: 0;
    }
}


/* ---------------------------------------------------------
   Noise
   --------------------------------------------------------- */

@keyframes glitch-noise {

    0% {
        opacity: 0;
        transform: translate(0, 0);
    }

    20% {
        opacity: .8;
        transform: translate(-15px, 8px);
    }

    40% {
        opacity: .4;
        transform: translate(12px, -5px);
    }

    60% {
        opacity: .9;
        transform: translate(-8px, 12px);
    }

    80% {
        opacity: .5;
        transform: translate(5px, -10px);
    }

    100% {
        opacity: .2;
        transform: translate(0, 0);
    }
}


@keyframes glitch-noise-in {

    0% {
        opacity: .3;
    }

    25% {
        opacity: .8;
        transform: translate(10px, -5px);
    }

    50% {
        opacity: .5;
        transform: translate(-8px, 8px);
    }

    75% {
        opacity: .2;
        transform: translate(4px, -3px);
    }

    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}


/* ---------------------------------------------------------
   Message
   --------------------------------------------------------- */

@keyframes glitch-message-out {

    0% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }

    25% {
        opacity: 1;
        transform: translateX(-8px);
        clip-path: inset(20% 0 55% 0);
    }

    50% {
        transform: translateX(7px);
        clip-path: inset(55% 0 20% 0);
    }

    75% {
        opacity: 1;
        transform: translateX(-4px);
        clip-path: inset(35% 0 35% 0);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0);
    }
}


@keyframes glitch-message-in {

    0% {
        opacity: 1;
        transform: translateX(0);
        clip-path: inset(0);
    }

    25% {
        transform: translateX(8px);
        clip-path: inset(15% 0 60% 0);
    }

    50% {
        transform: translateX(-6px);
        clip-path: inset(60% 0 15% 0);
    }

    75% {
        transform: translateX(3px);
        clip-path: inset(30% 0 40% 0);
    }

    100% {
        opacity: 0;
        transform: translateX(0);
        clip-path: inset(0);
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #glitch-overlay,
    #glitch-overlay::before,
    #glitch-overlay::after,
    .glitch-message {
        animation: none !important;
        transition: none !important;
    }
}