@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;0,900;1,800&family=Space+Grotesk:wght@700&display=swap');

/* Reset e Configurações Globais */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
}

body {
    background-color: #050508;
    color: #ffffff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Container de Palco 1920x1080 com Proporção Travada */
#stage-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: radial-gradient(circle at 85% 50%, #20080c 0%, #08070d 50%, #030305 100%);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
    transform-origin: center center;
}

/* Camada da Imagem de Fundo Personalizada */
#bg-image-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 1080px;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Canvas dos Feixes de Luz */
#beams-canvas {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    z-index: 2;
    pointer-events: none;
}

/* Efeito de Granulação Analógica (Film Grain Sutil) */
.film-grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.04;
    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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Área Central do Countdown */
#countdown-display-wrapper {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Tipografia e Efeito Glitch de Aberração Cromática */
.chromatic-timer {
    position: relative;
    font-size: 260px;
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    text-shadow: 
        -5px 0 0 rgba(0, 229, 255, 0.95),   /* Camada Ciano/Azul à Esquerda */
        5px 0 0 rgba(255, 23, 68, 0.95),    /* Camada Vermelha à Direita */
        0 0 40px rgba(255, 255, 255, 0.25); /* Glow Central */
    will-change: transform, text-shadow;
}

/* Camadas de Aberração e Distorção Dinâmica (Glitch) */
.chromatic-timer::before,
.chromatic-timer::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
}

/* Canal Ciano (Deslocado) */
.chromatic-timer::before {
    color: #00f0ff;
    z-index: -1;
    transform: translate(-3px, 0);
    opacity: 0.85;
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

/* Canal Vermelho (Deslocado) */
.chromatic-timer::after {
    color: #ff1844;
    z-index: -2;
    transform: translate(3px, 0);
    opacity: 0.85;
    animation: glitch-anim-2 3.2s infinite linear alternate-reverse;
}

/* Animações de Aberração Óptica e Leve Trepidação de Vídeo */
@keyframes glitch-anim-1 {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translate(-4px, 0);
    }
    15% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(-7px, 1px);
    }
    17% {
        clip-path: inset(0 0 0 0);
        transform: translate(-4px, 0);
    }
    45% {
        clip-path: inset(50% 0 35% 0);
        transform: translate(-6px, -1px);
    }
    48% {
        clip-path: inset(0 0 0 0);
        transform: translate(-4px, 0);
    }
    80% {
        clip-path: inset(10% 0 75% 0);
        transform: translate(-8px, 0);
    }
    82% {
        clip-path: inset(0 0 0 0);
        transform: translate(-4px, 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(-4px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translate(4px, 0);
    }
    22% {
        clip-path: inset(40% 0 45% 0);
        transform: translate(7px, -1px);
    }
    25% {
        clip-path: inset(0 0 0 0);
        transform: translate(4px, 0);
    }
    60% {
        clip-path: inset(70% 0 15% 0);
        transform: translate(8px, 1px);
    }
    63% {
        clip-path: inset(0 0 0 0);
        transform: translate(4px, 0);
    }
    90% {
        clip-path: inset(30% 0 55% 0);
        transform: translate(6px, 0);
    }
    92% {
        clip-path: inset(0 0 0 0);
        transform: translate(4px, 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate(4px, 0);
    }
}

/* Custom Scrollbar para Painéis Flutuantes */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
    background: rgba(56, 189, 248, 0.4);
    border-radius: 4px;
}