/* ==========================================
   SECOND DAWN - Stranger Things Retro Theme
   ========================================== */

/* ITC Benguiat - Stranger Things Font */
@font-face {
    font-family: "ITC Benguiat Std Bold Condensed";
    src: url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.eot");
    src: url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/92018831ffcad60e6a2bb24921f564c6.svg#ITC Benguiat Std Bold Condensed")format("svg");
    font-display: swap;
}

/* CSS Variables */
:root {
    --color-black: #0a0a0a;
    --color-dark: #0f0f0f;
    --color-red: #ff1a1a;
    --color-red-dark: #8b0000;
    --color-red-glow: #ff3333;
    --color-cream: #e8e0d5;
    --color-grey: #333;
    --font-title: 'Bebas Neue', sans-serif;
    --font-title-main: 'ITC Benguiat Std Bold Condensed', 'Bebas Neue', sans-serif;
    --font-body: 'Special Elite', monospace;
}

/* Reset & Base */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-black);
    color: var(--color-cream);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    cursor: crosshair;
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* ==========================================
   VHS & RETRO OVERLAY EFFECTS
   ========================================== */

.vhs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    /* Red tint - fades out with blend */
    background: 
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 26, 26, 0.02) 50%,
            transparent 100%
        );
    opacity: calc(1 - var(--upside-down-blend, 0));
    animation: vhsFlicker 0.15s infinite;
}

/* Blue VHS overlay that fades in */
.vhs-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(40, 70, 140, 0.03) 50%,
        transparent 100%
    );
    opacity: var(--upside-down-blend, 0);
    transition: opacity 0.8s ease-out;
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
}

.noise {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 998;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04;
    animation: noiseMove 0.5s steps(10) infinite;
}

.vhs-tracking {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 997;
    /* Red tracking line - fades with blend */
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 45%,
        rgba(255, 26, 26, 0.03) 45%,
        rgba(255, 26, 26, 0.03) 55%,
        transparent 55%,
        transparent 100%
    );
    opacity: calc(1 - var(--upside-down-blend, 0) * 0.8);
    animation: vhsTracking 8s linear infinite;
}

/* Blue tracking line overlay */
.vhs-tracking::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 45%,
        rgba(40, 70, 140, 0.03) 45%,
        rgba(40, 70, 140, 0.03) 55%,
        transparent 55%,
        transparent 100%
    );
    opacity: var(--upside-down-blend, 0);
    transition: opacity 0.8s ease-out;
}

@keyframes vhsFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.98; }
    25%, 75% { opacity: 0.99; }
}

@keyframes noiseMove {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}

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

/* ==========================================
   ANIMATED BACKGROUND
   ========================================== */

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.fog {
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(139, 0, 0, 0.15) 0%,
        transparent 50%
    );
    filter: blur(60px);
    opacity: 0.6;
}

.fog-1 {
    top: -50%;
    left: -50%;
    animation: fogDrift1 25s ease-in-out infinite;
}

.fog-2 {
    top: -30%;
    right: -50%;
    animation: fogDrift2 30s ease-in-out infinite;
    animation-delay: -10s;
}

.fog-3 {
    bottom: -50%;
    left: -30%;
    animation: fogDrift3 35s ease-in-out infinite;
    animation-delay: -5s;
}

@keyframes fogDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10%, 5%) rotate(5deg); }
    50% { transform: translate(5%, 10%) rotate(-5deg); }
    75% { transform: translate(-5%, 5%) rotate(3deg); }
}

@keyframes fogDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-15%, 10%) rotate(-8deg); }
    66% { transform: translate(5%, -5%) rotate(5deg); }
}

@keyframes fogDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(20%, -10%) rotate(10deg); }
}

.red-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at center,
        rgba(255, 26, 26, 0.08) 0%,
        rgba(139, 0, 0, 0.04) 30%,
        transparent 60%
    );
    animation: redPulse 4s ease-in-out infinite;
}

@keyframes redPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--color-red);
    border-radius: 50%;
    opacity: 0;
    animation: floatUp 10s linear infinite;
    box-shadow: 0 0 6px var(--color-red), 0 0 12px var(--color-red-dark);
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translateY(-100vh) scale(1);
    }
}

.floating-lights {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-light {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--color-red-glow);
    border-radius: 50%;
    filter: blur(2px);
    box-shadow: 
        0 0 20px var(--color-red),
        0 0 40px var(--color-red),
        0 0 60px var(--color-red-dark);
    animation: floatLight 15s ease-in-out infinite;
}

@keyframes floatLight {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(100px, -50px) scale(1.5);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50px, -100px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(-100px, 50px) scale(1.2);
        opacity: 0.6;
    }
}

/* ==========================================
   MAIN CONTENT
   ========================================== */

.main-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

/* ==========================================
   TITLE - STRANGER THINGS STYLE
   ========================================== */

.title-container {
    position: relative;
    margin-bottom: 1rem;
}

.title-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 26, 26, 0.3) 0%,
        transparent 70%
    );
    filter: blur(40px);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.main-title {
    font-family: var(--font-title-main);
    font-size: clamp(4rem, 15vw, 12rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 0.9;
    color: transparent;
    position: relative;
    text-transform: uppercase;
}

.title-line {
    display: flex;
    justify-content: center;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-red);
    position: relative;
}

/* Individual floating letters - Stranger Things style */
.letter {
    display: inline-block;
    position: relative;
    animation: letterFlicker1 6s ease-in-out infinite;
    /* Base dim color for unlit portions */
    -webkit-text-stroke: 2px var(--color-red-dark);
    /* Allow glow to overflow */
    overflow: visible;
}

/* Bright spot overlay - simulates lamp behind letter (STATIC positions) */
.letter::after {
    content: attr(data-letter);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    -webkit-text-stroke: 2px var(--color-red);
    /* Static radial gradient - different position per letter using --i */
    mask-image: radial-gradient(
        ellipse 150% 120% at var(--lamp-x, 50%) var(--lamp-y, 50%),
        black 0%,
        black 20%,
        transparent 70%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 150% 120% at var(--lamp-x, 50%) var(--lamp-y, 50%),
        black 0%,
        black 20%,
        transparent 70%
    );
}

/* Static lamp positions - each letter gets a fixed spot based on position */
.letter[style*="--i:0"]::after { --lamp-x: 40%; --lamp-y: 25%; }
.letter[style*="--i:1"]::after { --lamp-x: 70%; --lamp-y: 75%; }
.letter[style*="--i:2"]::after { --lamp-x: 30%; --lamp-y: 60%; }
.letter[style*="--i:3"]::after { --lamp-x: 60%; --lamp-y: 30%; }
.letter[style*="--i:4"]::after { --lamp-x: 45%; --lamp-y: 80%; }
.letter[style*="--i:5"]::after { --lamp-x: 75%; --lamp-y: 40%; }
.letter[style*="--i:6"]::after { --lamp-x: 35%; --lamp-y: 70%; }
.letter[style*="--i:7"]::after { --lamp-x: 65%; --lamp-y: 25%; }
.letter[style*="--i:8"]::after { --lamp-x: 50%; --lamp-y: 65%; }
.letter[style*="--i:9"]::after { --lamp-x: 40%; --lamp-y: 35%; }

/* Different flicker patterns for groups of letters */
.letter:nth-child(3n+1) {
    animation: letterFlicker1 5s ease-in-out infinite;
}

.letter:nth-child(3n+2) {
    animation: letterFlicker2 7s ease-in-out infinite;
}

.letter:nth-child(3n) {
    animation: letterFlicker3 6s ease-in-out infinite;
}

/* Outline-only glow layer behind each letter - subtle, concentrated at hot spots */
.letter::before {
    content: attr(data-letter);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    -webkit-text-stroke: 3px var(--color-red-glow);
    filter: blur(4px);
    z-index: -1;
    opacity: 0.4;
    /* Subtle glow concentrated at lamp hot spots */
    mask-image: radial-gradient(
        ellipse 120% 100% at var(--lamp-x, 50%) var(--lamp-y, 50%),
        black 0%,
        transparent 50%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 120% 100% at var(--lamp-x, 50%) var(--lamp-y, 50%),
        black 0%,
        transparent 50%
    );
}

/* Static glow positions - match the ::after lamp positions */
.letter[style*="--i:0"]::before { --lamp-x: 40%; --lamp-y: 25%; }
.letter[style*="--i:1"]::before { --lamp-x: 70%; --lamp-y: 75%; }
.letter[style*="--i:2"]::before { --lamp-x: 30%; --lamp-y: 60%; }
.letter[style*="--i:3"]::before { --lamp-x: 60%; --lamp-y: 30%; }
.letter[style*="--i:4"]::before { --lamp-x: 45%; --lamp-y: 80%; }
.letter[style*="--i:5"]::before { --lamp-x: 75%; --lamp-y: 40%; }
.letter[style*="--i:6"]::before { --lamp-x: 35%; --lamp-y: 70%; }
.letter[style*="--i:7"]::before { --lamp-x: 65%; --lamp-y: 25%; }
.letter[style*="--i:8"]::before { --lamp-x: 50%; --lamp-y: 65%; }
.letter[style*="--i:9"]::before { --lamp-x: 40%; --lamp-y: 35%; }

/* Remove letter-spacing from last letter of each line */
.letter:last-child {
    letter-spacing: 0;
}

/* Middle letters - combined flicker and float */
.letter-mid {
    animation: letterFlicker1 5s ease-in-out infinite, letterFloatVertical 12s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

.letter-mid:nth-child(3n+2) {
    animation: letterFlicker2 7s ease-in-out infinite, letterFloatVertical 12s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

.letter-mid:nth-child(3n) {
    animation: letterFlicker3 6s ease-in-out infinite, letterFloatVertical 12s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

/* Edge letters - combined flicker and float */
.letter-edge {
    animation: letterFlicker1 5s ease-in-out infinite, letterFloatHorizontal 14s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

.letter-edge:nth-child(3n+2) {
    animation: letterFlicker2 7s ease-in-out infinite, letterFloatHorizontal 14s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

.letter-edge:nth-child(3n) {
    animation: letterFlicker3 6s ease-in-out infinite, letterFloatHorizontal 14s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-delay: 0s, calc(var(--i) * 0.6s);
}

/* Three different flicker patterns for variety */
@keyframes letterFlicker1 {
    0%, 100% { opacity: 1; }
    4% { opacity: 1; }
    5% { opacity: 0.6; }
    6% { opacity: 1; }
    50% { opacity: 1; }
    51% { opacity: 0.7; }
    52% { opacity: 1; }
}

@keyframes letterFlicker2 {
    0%, 100% { opacity: 1; }
    30% { opacity: 1; }
    31% { opacity: 0.5; }
    32% { opacity: 0.8; }
    33% { opacity: 1; }
    70% { opacity: 1; }
    71% { opacity: 0.7; }
    72% { opacity: 1; }
}

@keyframes letterFlicker3 {
    0%, 100% { opacity: 1; }
    15% { opacity: 1; }
    16% { opacity: 0.6; }
    17% { opacity: 1; }
    80% { opacity: 1; }
    81% { opacity: 0.5; }
    82% { opacity: 0.8; }
    83% { opacity: 1; }
}

@keyframes letterFloatVertical {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-1.5px);
    }
    50% {
        transform: translateY(-3px);
    }
    75% {
        transform: translateY(-1.5px);
    }
}

@keyframes letterFloatHorizontal {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(1px);
    }
    50% {
        transform: translateX(2px);
    }
    75% {
        transform: translateX(1px);
    }
}

.line-1 {
    animation-delay: 0s;
}

.line-2 {
    animation-delay: 0.5s;
    font-size: 1.1em;
}

.line-2 .letter {
    letter-spacing: 0.25em;
}

.line-2 .letter:last-child {
    letter-spacing: 0;
}

/* ==========================================
   DEMOGORGON PROXIMITY EFFECT
   Intensifying flicker as mouse gets closer
   ========================================== */

.title-container {
    --flicker-intensity: 0;
}

/* Approaching - subtle increase in flicker */
.demogorgon-approaching .letter {
    animation: flickerApproaching 2s ease-in-out infinite !important;
}

.demogorgon-approaching .letter:nth-child(2n) {
    animation: flickerApproaching 1.8s ease-in-out infinite !important;
    animation-delay: 0.3s !important;
}

/* Close - more aggressive flicker */
.demogorgon-close .letter {
    animation: flickerClose 0.8s ease-in-out infinite !important;
}

.demogorgon-close .letter:nth-child(2n) {
    animation: flickerClose 0.6s ease-in-out infinite !important;
    animation-delay: 0.1s !important;
}

.demogorgon-close .letter:nth-child(3n) {
    animation: flickerClose 0.9s ease-in-out infinite !important;
    animation-delay: 0.2s !important;
}

/* Near - chaotic flickering like demogorgon is RIGHT THERE */
.demogorgon-near .letter {
    animation: flickerChaos 0.15s steps(2) infinite !important;
}

.demogorgon-near .letter:nth-child(2n) {
    animation: flickerChaos 0.12s steps(2) infinite !important;
    animation-delay: 0.05s !important;
}

.demogorgon-near .letter:nth-child(3n) {
    animation: flickerChaos 0.18s steps(2) infinite !important;
    animation-delay: 0.08s !important;
}

.demogorgon-near .letter:nth-child(5n) {
    animation: flickerChaos 0.1s steps(2) infinite !important;
}

/* Glow stays subtle even when close */
.demogorgon-close .letter::before,
.demogorgon-near .letter::before {
    opacity: 0.5;
    -webkit-text-stroke: 3px var(--color-red);
    filter: blur(4px);
}

@keyframes flickerApproaching {
    0%, 100% { opacity: 1; }
    10% { opacity: 0.85; }
    12% { opacity: 1; }
    40% { opacity: 1; }
    42% { opacity: 0.7; }
    44% { opacity: 1; }
    70% { opacity: 1; }
    71% { opacity: 0.8; }
    73% { opacity: 1; }
}

@keyframes flickerClose {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.4; }
    10% { opacity: 1; }
    15% { opacity: 0.7; }
    20% { opacity: 1; }
    50% { opacity: 1; }
    52% { opacity: 0.3; }
    54% { opacity: 0.8; }
    56% { opacity: 1; }
    80% { opacity: 1; }
    82% { opacity: 0.5; }
    85% { opacity: 1; }
}

@keyframes flickerChaos {
    0% { opacity: 1; }
    25% { opacity: 0.2; }
    50% { opacity: 0.9; }
    75% { opacity: 0.1; }
    100% { opacity: 1; }
}

/* Burned out state - container level */
.burned-out .title-glow {
    opacity: 0.1 !important;
}

/* ==========================================
   UPSIDE DOWN EFFECT - Gradual blue shift based on void letters
   Uses --upside-down-blend (0 = normal, 1 = full upside down)
   ========================================== */

body {
    --upside-down-blend: 0;
}

/* Blue overlay that fades in over the red elements */
.background-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(30, 50, 100, 0.3) 0%,
        rgba(20, 35, 70, 0.2) 40%,
        transparent 70%
    );
    opacity: var(--upside-down-blend);
    transition: opacity 0.8s ease-out;
    pointer-events: none;
    z-index: 5;
}

/* Fade out red elements as blue comes in - use blend variable directly */
.fog {
    transition: opacity 0.8s ease-out;
    opacity: calc(0.6 * (1 - var(--upside-down-blend) * 0.7));
}

.red-glow {
    transition: opacity 0.8s ease-out;
    opacity: calc(0.5 * (1 - var(--upside-down-blend) * 0.8));
}

/* Particles fade out, replaced by blue ambience */
.particle {
    transition: opacity 0.8s ease-out;
}

/* Floating lights dim */
.floating-light {
    transition: opacity 0.8s ease-out;
}

/* Individual letter void state - black with noise/static effect */
.letter.void {
    animation: none !important;
    color: #0a0a0a !important;
    -webkit-text-stroke: 2px #1a1a1a !important;
    position: relative;
    filter: blur(0.5px);
}

.letter.void::before {
    content: attr(data-letter) !important;
    position: absolute;
    top: 0;
    left: 0;
    color: transparent !important;
    -webkit-text-stroke: 3px #111 !important;
    filter: blur(4px) !important;
    opacity: 0.8 !important;
    z-index: -1;
    animation: voidPulse 0.5s steps(3) infinite !important;
}

/* Noisy void effect - flickering static */
.letter.void::after {
    content: attr(data-letter);
    position: absolute;
    top: 0;
    left: 0;
    color: transparent;
    -webkit-text-stroke: 2px rgba(20, 20, 20, 0.6);
    filter: blur(2px);
    opacity: 0.5;
    animation: voidNoise 0.1s steps(2) infinite;
}

@keyframes voidPulse {
    0%, 100% { opacity: 0.6; filter: blur(4px); }
    50% { opacity: 0.8; filter: blur(6px); }
}

@keyframes voidNoise {
    0% { 
        transform: translate(0, 0);
        opacity: 0.3;
    }
    50% { 
        transform: translate(1px, -1px);
        opacity: 0.5;
    }
    100% { 
        transform: translate(-1px, 1px);
        opacity: 0.4;
    }
}

/* Recovery animation - letter coming back from the void */
.letter:not(.void) {
    transition: none;
}

.burned-out .letter:not(.void) {
    animation: recoverFromVoid 0.4s ease-out forwards !important;
}

@keyframes recoverFromVoid {
    0% { 
        opacity: 0.2;
        -webkit-text-stroke-color: rgba(255, 26, 26, 0.3);
    }
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.4;
    }
    100% { 
        opacity: 1;
        -webkit-text-stroke-color: var(--color-red);
    }
}

.subtitle-container {
    margin-top: 1rem;
    overflow: hidden;
}

.subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    letter-spacing: 0.5em;
    color: var(--color-cream);
    opacity: 0.7;
    text-transform: uppercase;
    animation: subtitleFade 2s ease-out forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes subtitleFade {
    0% { 
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: 1em;
    }
    100% { 
        opacity: 0.7;
        transform: translateY(0);
        letter-spacing: 0.5em;
    }
}

/* ==========================================
   TAGLINE / TYPEWRITER
   ========================================== */

.tagline-container {
    margin: 2rem 0;
    min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tagline {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--color-cream);
    opacity: 0.8;
    letter-spacing: 0.1em;
}

.cursor {
    display: inline-block;
    color: var(--color-red);
    animation: cursorBlink 0.8s step-end infinite;
    font-weight: bold;
}

@keyframes cursorBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ==========================================
   DISCORD BUTTON
   ========================================== */

.cta-container {
    margin: 2rem 0;
}

.discord-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2.5rem;
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    letter-spacing: 0.2em;
    color: var(--color-cream);
    background: linear-gradient(
        180deg,
        rgba(139, 0, 0, 0.8) 0%,
        rgba(80, 0, 0, 0.9) 100%
    );
    border: 2px solid var(--color-red);
    text-decoration: none;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 
        0 0 20px rgba(255, 26, 26, 0.3),
        inset 0 0 20px rgba(255, 26, 26, 0.1);
}

.discord-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.discord-btn:hover::before {
    left: 100%;
}

.discord-btn:hover {
    transform: scale(1.05);
}

.btn-glitch {
    position: relative;
}

/* VHS Glitch - Sliced horizontal displacement */
.btn-glitch::before,
.btn-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.btn-glitch::before {
    color: #0ff;
    z-index: -1;
}

.btn-glitch::after {
    color: #f0f;
    z-index: -1;
}

/* VHS tracking lines that appear on hover */
.discord-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    opacity: 0;
}

.discord-btn:hover .btn-glitch::before {
    animation: vhsGlitchCyan 0.4s steps(2) infinite;
    opacity: 0.7;
}

.discord-btn:hover .btn-glitch::after {
    animation: vhsGlitchMagenta 0.4s steps(2) infinite;
    opacity: 0.7;
}

.discord-btn:hover::after {
    animation: btnTracking 0.15s steps(1) infinite;
    opacity: 1;
}

/* Main button content glitch on hover */
.discord-btn:hover .btn-glitch {
    animation: vhsTextJitter 0.1s steps(1) infinite;
}

/* Cyan channel - shifts left and clips */
@keyframes vhsGlitchCyan {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    10% { 
        clip-path: inset(40% 0 20% 0);
        transform: translate(-4px, 0);
    }
    20% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    30% { 
        clip-path: inset(10% 0 60% 0);
        transform: translate(-3px, 0);
    }
    40% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    50% { 
        clip-path: inset(70% 0 10% 0);
        transform: translate(-5px, 0);
    }
    60% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    70% { 
        clip-path: inset(25% 0 45% 0);
        transform: translate(-2px, 0);
    }
    80% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    90% { 
        clip-path: inset(55% 0 25% 0);
        transform: translate(-4px, 0);
    }
}

/* Magenta channel - shifts right and clips */
@keyframes vhsGlitchMagenta {
    0%, 100% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    15% { 
        clip-path: inset(20% 0 50% 0);
        transform: translate(4px, 0);
    }
    25% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    35% { 
        clip-path: inset(60% 0 15% 0);
        transform: translate(3px, 0);
    }
    45% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    55% { 
        clip-path: inset(5% 0 70% 0);
        transform: translate(5px, 0);
    }
    65% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    75% { 
        clip-path: inset(45% 0 30% 0);
        transform: translate(2px, 0);
    }
    85% { 
        clip-path: inset(0 0 0 0);
        transform: translate(0);
    }
    95% { 
        clip-path: inset(30% 0 40% 0);
        transform: translate(4px, 0);
    }
}

/* Button tracking bar that rolls across on hover */
@keyframes btnTracking {
    0%, 100% { 
        background: transparent;
    }
    5% { 
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 20%,
            rgba(255, 255, 255, 0.03) 20%,
            rgba(255, 255, 255, 0.08) 22%,
            transparent 25%,
            transparent 100%
        );
    }
    20% { 
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.03) 40%,
            rgba(255, 255, 255, 0.08) 42%,
            transparent 45%,
            transparent 100%
        );
    }
    40% { 
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 60%,
            rgba(255, 255, 255, 0.03) 60%,
            rgba(255, 255, 255, 0.08) 62%,
            transparent 65%,
            transparent 100%
        );
    }
    60% { 
        background: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 80%,
            rgba(255, 255, 255, 0.03) 80%,
            rgba(255, 255, 255, 0.08) 82%,
            transparent 85%,
            transparent 100%
        );
    }
    75% {
        background: transparent;
    }
}

/* Text jitter - subtle horizontal displacement */
@keyframes vhsTextJitter {
    0%, 100% { 
        transform: translateX(0);
        filter: brightness(1);
    }
    10% { 
        transform: translateX(-1px);
    }
    20% { 
        transform: translateX(0);
        filter: brightness(1.1);
    }
    30% { 
        transform: translateX(1px);
    }
    40% { 
        transform: translateX(0);
    }
    50% { 
        transform: translateX(-1px);
        filter: brightness(0.95);
    }
    60% { 
        transform: translateX(1px);
    }
    70% { 
        transform: translateX(0);
        filter: brightness(1.05);
    }
    80% { 
        transform: translateX(-1px);
    }
    90% { 
        transform: translateX(0);
    }
}

.btn-scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
}

.discord-icon {
    width: 1.5em;
    height: 1.5em;
    filter: drop-shadow(0 0 5px var(--color-red));
}

/* ==========================================
   INFO TEXT
   ========================================== */

.info-container {
    margin-top: 2rem;
    max-width: 600px;
}

.info-text {
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    line-height: 1.8;
    color: var(--color-cream);
    opacity: 0.6;
    letter-spacing: 0.05em;
}

.highlight {
    color: var(--color-red);
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 26, 26, 0.5);
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 2rem;
    z-index: 10;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        transparent 100%
    );
}

.footer-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-text {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-cream);
    opacity: 0.4;
    letter-spacing: 0.1em;
}

.footer-divider {
    color: var(--color-red);
    opacity: 0.4;
}

.vhs-text {
    animation: vhsTextGlitch 5s infinite;
}

/* Copy to clipboard button */
.copy-btn {
    cursor: pointer;
    position: relative;
}

/* Copy toast notification - Cookie Clicker style float up */
.copy-toast {
    position: fixed;
    pointer-events: none;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-cream);
    opacity: 0;
    z-index: 100;
    text-shadow: 0 0 10px rgba(255, 26, 26, 0.5);
}

.copy-toast.show {
    animation: floatUpFade 1s ease-out forwards;
}

@keyframes floatUpFade {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes vhsTextGlitch {
    0%, 95%, 100% { 
        opacity: 0.4;
        transform: translateX(0);
    }
    96% {
        opacity: 0.6;
        transform: translateX(-2px);
        color: cyan;
    }
    97% {
        opacity: 0.4;
        transform: translateX(2px);
        color: var(--color-red);
    }
    98% {
        opacity: 0.5;
        transform: translateX(-1px);
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
    .main-title {
        letter-spacing: 0.2em;
    }
    
    .line-2 {
        letter-spacing: 0.3em;
    }
    
    .discord-btn {
        padding: 1rem 2rem;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-divider {
        display: none;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 1rem;
    }
    
    .subtitle {
        letter-spacing: 0.3em;
    }
    
    .info-text br {
        display: none;
    }
}

/* ==========================================
   LOADING ANIMATION
   ========================================== */

body.loading .main-content {
    opacity: 0;
}

body:not(.loading) .main-content {
    animation: fadeIn 1.5s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Chromatic Aberration on hover for special elements */
.discord-btn:hover {
    animation: chromaticShift 0.1s linear;
}

@keyframes chromaticShift {
    0% {
        text-shadow: 
            -2px 0 #ff0000,
            2px 0 #00ffff;
    }
    100% {
        text-shadow: 
            0 0 20px rgba(255, 26, 26, 0.5);
    }
}