/* Base styles */
body {
    background-color: #0c0a09;
    color: #e7e5e4;
}

/* CRT effect */
.crt::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.25) 50%),
        linear-gradient(90deg, rgba(255, 165, 0, 0.06), rgba(210, 105, 30, 0.02), rgba(255, 215, 0, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* Hide scrollbar */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Sepia filter */
.sepia-filter {
    filter: sepia(0.8) contrast(1.2) brightness(0.8);
}

/* Selection style */
::selection {
    background-color: #f59e0b;
    color: black;
}

/* Custom animations */
@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.animate-scanline {
    animation: scanline 8s linear infinite;
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin-slow {
    animation: spin 8s linear infinite;
}

/* 3D transforms */
.perspective-1000 {
    perspective: 1000px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}

/* Smooth image rendering for tilt effect */
img {
    image-rendering: -webkit-optimize-contrast;
}

/* CRT Animation Classes */
.crt-content {
    transform-origin: center center;
    will-change: transform, opacity, filter;
}

/* Turn OFF Animation */
.animate-crt-off {
    animation: crtTurnOff 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Turn ON Animation */
.animate-crt-on {
    animation: crtTurnOn 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes crtTurnOff {
    0% {
        transform: scale(1, 1);
        opacity: 1;
        filter: brightness(1) sepia(0.4);
    }
    40% {
        transform: scale(1, 0.005); /* Squash to line */
        opacity: 1;
        filter: brightness(3) sepia(0.4); /* Flash bright */
    }
    100% {
        transform: scale(0, 0); /* Squash to dot */
        opacity: 0;
        filter: brightness(5) sepia(0.4);
    }
}

@keyframes crtTurnOn {
    0% {
        transform: scale(1, 0.005); /* Start as line */
        opacity: 0;
        filter: brightness(3) sepia(0.4);
    }
    50% {
        transform: scale(1, 0.005);
        opacity: 1;
    }
    100% {
        transform: scale(1, 1); /* Expand fully */
        opacity: 1;
        filter: brightness(1) sepia(0.4);
    }
}