/* retro.css - Retro VHS CRT TV Vibe */

/* Noise overlay for the entire body */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.06;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)"/%3E%3C/svg%3E');
}

/* Global typography retro glitchy effects */
h1,
h2,
h3,
.highlight {
    text-shadow: 2px 2px 0px #ff0055, -2px -2px 0px #00ffff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.kicker {
    text-shadow: 1px 1px 0px #00ffff;
    color: #fff !important;
}

/* Add subtle scanlines to the entire page */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    z-index: 9998;
    background-size: 100% 3px, 3px 100%;
    pointer-events: none;
}

/* Retro CRT TV Frame specific to the hero image */
.crt-tv-container {
    position: relative;
    display: inline-block;
    padding: 30px;
    background: linear-gradient(135deg, #111, #222);
    /* TV Casing */
    border-radius: 40px;
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.9),
        0 15px 30px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(255, 255, 255, 0.1),
        -10px 0 0 #0f0f0f,
        10px 0 0 #0f0f0f;
    border: 4px solid #333;
    width: 100%;
    max-width: 450px;
    z-index: 10;
    transform: rotateY(-11deg) rotateX(5deg) translateY(6px);
}

/* TV Details (buttons, vent, etc) */
.crt-tv-container::before {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 30px;
    width: 15px;
    height: 15px;
    background: #333;
    border-radius: 50%;
    box-shadow: 0 -25px 0 #333, 0 -50px 0 #333, inset 0 2px 5px #000;
}

.crt-tv-container::after {
    content: "SONY";
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: #555;
    font-size: 10px;
    font-family: sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
}

/* Screen wrapper */
.crt-screen {
    position: relative;
    overflow: hidden;
    border-radius: 30px 30px 30px 30px;
    background: #0a0a0a;
    box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.1), inset 0 0 60px rgba(0, 0, 0, 0.9);
    border: 6px solid #000;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base image inside screen */
.crt-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: contrast(1.4) saturate(1.2) sepia(0.2) hue-rotate(-15deg);
    display: block;
    transform: none;
    /* override previous hero-cutout transforms */
}

/* CRT Scanlines specific to TV screen */
.crt-screen::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg,
            rgba(255, 0, 0, 0.08),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.08));
    z-index: 2;
    background-size: 100% 4px, 4px 100%;
    pointer-events: none;
}

/* CRT Screen Glow and Curve */
.crt-screen::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
    border-radius: 20px;
    z-index: 3;
    pointer-events: none;
}

/* VHS Glitch Animation on Image */
.vhs-glitch {
    animation: glitch-anim 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        transform: translate(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }

    2% {
        transform: translate(2px, 0px) skewX(1deg);
        filter: hue-rotate(10deg);
    }

    4% {
        transform: translate(-2px, 1px) skewX(-1deg);
        filter: hue-rotate(-10deg);
    }

    6% {
        transform: translate(0) skewX(0deg);
        filter: hue-rotate(0deg);
    }

    50% {
        transform: translate(0);
    }

    52% {
        transform: translate(1px, -1px);
        opacity: 0.9;
    }

    54% {
        transform: translate(0);
        opacity: 1;
    }

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

/* VHS tracking line */
.vhs-tracking {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10%;
    background: rgba(255, 255, 255, 0.05);
    z-index: 4;
    opacity: 0.2;
    animation: tracking 5s infinite linear;
    pointer-events: none;
}

@keyframes tracking {
    0% {
        bottom: 0;
        opacity: 0;
        height: 10%;
    }

    10% {
        opacity: 0.3;
        height: 12%;
    }

    20% {
        opacity: 0;
        bottom: 100%;
        height: 5%;
    }

    100% {
        bottom: 100%;
        opacity: 0;
    }
}

/* VHS Text overlay */
.vhs-text {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000, 0 0 10px #fff;
    z-index: 4;
    pointer-events: none;
    animation: blink 1s step-end infinite;
}

.vhs-time {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000, 0 0 10px #fff;
    z-index: 4;
    pointer-events: none;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Make buttons feel retro */
.btn {
    border-radius: 0 !important;
    box-shadow: 4px 4px 0px #ff0055 !important;
    border: 2px solid #fff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #ff0055 !important;
}

.card {
    border-radius: 0 !important;
    border: 2px solid var(--border);
    box-shadow: 8px 8px 0px rgba(0, 255, 255, 0.2) !important;
}

.card:hover {
    box-shadow: 12px 12px 0px rgba(255, 0, 85, 0.4) !important;
    transform: translate(-4px, -4px) !important;
}

/* HORROR ELEMENTS */
.blood-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at center, transparent 30%, rgba(138, 3, 3, 0.6) 100%);
    pointer-events: none;
    z-index: 9997;
    opacity: 0;
}

.flash-blood {
    animation: flashBlood 0.4s forwards;
}

@keyframes flashBlood {
    0% {
        opacity: 0;
        background-color: transparent;
    }

    10% {
        opacity: 0.9;
        background-color: rgba(255, 0, 0, 0.4);
    }

    50% {
        opacity: 0.5;
        background-color: rgba(138, 0, 0, 0.2);
    }

    100% {
        opacity: 0;
        background-color: transparent;
    }
}

.ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9996;
    opacity: 0;
    filter: blur(4px) drop-shadow(0 0 20px white);
    color: rgba(255, 255, 255, 0.8);
    mix-blend-mode: screen;
    animation: ghostAppear 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes ghostAppear {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(50px) rotate(-10deg);
    }

    30% {
        opacity: 0.8;
        transform: scale(1.5) translateY(0) rotate(5deg);
    }

    70% {
        opacity: 0.6;
        transform: scale(1.8) translateY(-20px) rotate(-5deg);
        filter: blur(2px) drop-shadow(0 0 40px red);
    }

    100% {
        opacity: 0;
        transform: scale(2.5) translateY(-50px) rotate(10deg);
    }
}

.falling-text {
    position: fixed;
    color: #ff0033;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.9;
    text-shadow: 2px 2px 0px black, 0 0 10px red;
    animation: fallDown linear forwards;
}

@keyframes fallDown {
    0% {
        top: -100px;
        opacity: 1;
        transform: rotate(0deg);
        filter: blur(0px);
    }

    80% {
        opacity: 0.8;
        filter: blur(1px);
    }

    100% {
        top: 110vh;
        opacity: 0;
        transform: rotate(15deg);
        filter: blur(4px);
    }
}

.distort-reality {
    animation: realityDistort 0.6s infinite !important;
}

@keyframes realityDistort {
    0% {
        transform: skew(0deg, 0deg) scale(1);
        filter: invert(0) contrast(1);
    }

    25% {
        transform: skew(4deg, -2deg) scale(1.03);
        filter: invert(0.3) saturate(3) hue-rotate(90deg);
    }

    50% {
        transform: skew(-6deg, 5deg) scale(0.97);
        filter: invert(0.8) hue-rotate(180deg) blur(2px);
        background-color: darkred;
    }

    75% {
        transform: skew(3deg, -3deg) scale(1.02);
        filter: invert(0.2) saturate(0) sepia(1);
    }

    100% {
        transform: skew(0deg, 0deg) scale(1);
        filter: invert(0) contrast(1);
    }
}

.text-broken {
    display: inline-block;
    animation: brokenText 0.1s infinite alternate;
    color: red !important;
    text-shadow: 3px 0px 0px #00ffff, -3px 0px 0px #ff0055 !important;
}

@keyframes brokenText {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    25% {
        transform: translate(-3px, 3px) skewX(20deg);
        opacity: 0.8;
    }

    50% {
        transform: translate(4px, -2px) rotate(5deg) scale(1.1);
        opacity: 0.4;
    }

    75% {
        transform: translate(-2px, 2px) rotate(-10deg);
        opacity: 0.9;
    }

    100% {
        transform: translate(3px, -1px) skewX(-10deg);
        opacity: 0.2;
    }
}