/**
 * Rot Mode - Default Binary Rot Aesthetic
 * 
 * Heavy glitch, neon saturation, propaganda feel
 * This is the default mode representing the core Binary Rot visual DNA
 */

/* ============================================
   ROT MODE - Container State
   ============================================ */

[data-mode="rot"] {
    /* Primary color overrides (defaults, usually same as design-tokens) */
    --mode-primary: var(--rot-magenta);
    --mode-secondary: var(--rot-aqua);
    --mode-accent: var(--rot-slime);

    /* Background tones */
    --mode-bg-void: var(--rot-void);
    --mode-bg-deep: var(--rot-deep);
    --mode-bg-surface: var(--rot-surface);

    /* Glow intensity */
    --active-glow: var(--glow-magenta);
    --glow-intensity: 1;

    /* Effect intensities */
    --scanline-opacity: 0.08;
    --noise-intensity: 0.15;
    --chromatic-offset: 2px;
    --vignette-intensity: 0.4;
    --flicker-intensity: 1;

    /* Animation speeds */
    --glitch-frequency: 4s;
    --scanline-speed: 10s;
}

/* ============================================
   ROT MODE - Overlay States
   ============================================ */

[data-mode="rot"] .rot-overlay {
    opacity: 1;
    pointer-events: none;
}

[data-mode="rot"] .rot-overlay__scanlines {
    opacity: var(--scanline-opacity);
}

[data-mode="rot"] .rot-overlay__vignette {
    opacity: var(--vignette-intensity);
}

[data-mode="rot"] .rot-overlay__grain {
    opacity: var(--noise-intensity);
}

[data-mode="rot"] .rot-overlay__flicker {
    animation: crt-flicker 0.1s infinite;
}

/* ============================================
   ROT MODE - Typography Enhancement
   ============================================ */

[data-mode="rot"] .heading-glitch {
    text-shadow:
        var(--chromatic-offset) 0 var(--rot-aqua),
        calc(var(--chromatic-offset) * -1) 0 var(--rot-magenta);
    animation: subtle-glitch var(--glitch-frequency) infinite;
}

[data-mode="rot"] .text-neon {
    color: var(--rot-aqua);
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

/* ============================================
   ROT MODE - Interactive Elements
   ============================================ */

[data-mode="rot"] .btn {
    border-color: var(--rot-magenta);
    box-shadow:
        0 0 10px rgba(255, 0, 255, 0.3),
        inset 0 0 10px rgba(255, 0, 255, 0.1);
}

[data-mode="rot"] .btn:hover {
    background: linear-gradient(135deg,
            rgba(255, 0, 255, 0.2),
            rgba(0, 255, 204, 0.2));
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.5),
        0 0 40px rgba(0, 255, 204, 0.3),
        inset 0 0 15px rgba(255, 0, 255, 0.2);
}

[data-mode="rot"] .social-btn {
    border-color: var(--rot-aqua);
}

[data-mode="rot"] .social-btn:hover {
    background: rgba(0, 255, 204, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.4);
}

/* ============================================
   ROT MODE - Feature Cards
   ============================================ */

[data-mode="rot"] .feature {
    border-color: var(--rot-border);
    background: linear-gradient(135deg,
            rgba(255, 0, 255, 0.05),
            transparent 50%,
            rgba(0, 255, 204, 0.05));
}

[data-mode="rot"] .feature:hover {
    border-color: var(--rot-magenta);
    box-shadow:
        0 0 20px rgba(255, 0, 255, 0.2),
        inset 0 0 30px rgba(255, 0, 255, 0.05);
}

[data-mode="rot"] .feature h3 {
    color: var(--rot-aqua);
}

/* ============================================
   ROT MODE - Video/Gallery Cards
   ============================================ */

[data-mode="rot"] .video-card {
    border-color: var(--rot-border);
}

[data-mode="rot"] .video-card:hover {
    border-color: var(--rot-aqua);
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.3);
}

[data-mode="rot"] .video-card img {
    transition: filter var(--duration-normal);
}

[data-mode="rot"] .video-card:hover img {
    filter: brightness(1.1) saturate(1.2);
}

/* ============================================
   ROT MODE - Testimonials
   ============================================ */

[data-mode="rot"] .testimonial {
    border-left-color: var(--rot-magenta);
    background: rgba(255, 0, 255, 0.05);
}

[data-mode="rot"] .testimonial span {
    color: var(--rot-magenta);
}

/* ============================================
   ROT MODE - Random Glitch Events
   ============================================ */

@keyframes subtle-glitch {

    0%,
    95%,
    100% {
        transform: none;
        filter: none;
    }

    96% {
        transform: translateX(-2px) skewX(-0.5deg);
        filter: hue-rotate(20deg);
    }

    97% {
        transform: translateX(2px) skewX(0.5deg);
        filter: hue-rotate(-20deg);
    }

    98% {
        transform: translateX(-1px);
        filter: none;
    }
}

/* Random glitch burst on :target */
[data-mode="rot"] :target {
    animation: target-glitch 0.5s ease-out;
}

@keyframes target-glitch {
    0% {
        filter: brightness(2) hue-rotate(90deg);
        transform: scale(1.02);
    }

    50% {
        filter: brightness(1.5) hue-rotate(-45deg);
        transform: scale(0.99);
    }

    100% {
        filter: none;
        transform: none;
    }
}

/* ============================================
   ROT MODE - Scroll-Linked Corruption
   ============================================ */

[data-mode="rot"] .hero-content {
    --corruption: 0;
}

[data-mode="rot"] .story-content,
[data-mode="rot"] .gallery-grid,
[data-mode="rot"] .testimonials-grid {
    /* Elements that get progressively corrupted on scroll */
    filter:
        saturate(calc(1 + var(--corruption, 0) * 0.3)) contrast(calc(1 + var(--corruption, 0) * 0.1));
}