/**
 * Surreal Mode - Dream Logic Aesthetic
 * 
 * Reality-bending, impossible geometry, hallucinogenic.
 * Inspired by the World Bible's "surreal mode" - warped perspectives,
 * floating elements, chromatic hallucinations.
 */

/* ============================================
   SURREAL MODE - Container State
   ============================================ */

[data-mode="surreal"] {
    /* Alien/dream color palette */
    --mode-primary: var(--rot-slime);
    --mode-secondary: #ff6b35;
    --mode-accent: #9d4edd;

    /* Deep, shifting backgrounds */
    --mode-bg-void: #050510;
    --mode-bg-deep: #0a0a1a;
    --mode-bg-surface: #0f0f24;

    --rot-void: var(--mode-bg-void);
    --rot-deep: var(--mode-bg-deep);
    --rot-surface: var(--mode-bg-surface);
    --rot-border: #1f1f4a;

    /* Ethereal text */
    --rot-text-primary: #d0d0ff;
    --rot-text-muted: #9090c0;
    --rot-text-dim: #5050a0;

    /* Intense, otherworldly effects */
    --active-glow: var(--glow-slime);
    --glow-intensity: 1.5;
    --scanline-opacity: 0.04;
    --noise-intensity: 0.1;
    --chromatic-offset: 3px;
    --vignette-intensity: 0.3;
    --flicker-intensity: 0.5;

    /* Surreal warping */
    --warp-intensity: 2deg;
    --float-distance: 10px;
}

/* ============================================
   SURREAL MODE - Reality Warp
   ============================================ */

[data-mode="surreal"] body {
    animation: reality-wobble 20s ease-in-out infinite;
}

@keyframes reality-wobble {

    0%,
    100% {
        filter: hue-rotate(0deg);
    }

    25% {
        filter: hue-rotate(10deg);
    }

    50% {
        filter: hue-rotate(-5deg);
    }

    75% {
        filter: hue-rotate(5deg);
    }
}

/* ============================================
   SURREAL MODE - Floating Elements
   ============================================ */

[data-mode="surreal"] .hero-content {
    animation: float-dream 8s ease-in-out infinite;
    filter: blur(0.3px);
    transform: perspective(1000px) rotateY(var(--warp-intensity));
}

@keyframes float-dream {

    0%,
    100% {
        transform:
            perspective(1000px) rotateY(var(--warp-intensity)) translateY(0);
    }

    50% {
        transform:
            perspective(1000px) rotateY(calc(var(--warp-intensity) * -1)) translateY(calc(var(--float-distance) * -1));
    }
}

[data-mode="surreal"] .feature {
    animation: card-float calc(6s + var(--animation-delay, 0s)) ease-in-out infinite;
    --animation-delay: 0s;
}

[data-mode="surreal"] .feature:nth-child(1) {
    --animation-delay: 0s;
}

[data-mode="surreal"] .feature:nth-child(2) {
    --animation-delay: 2s;
}

[data-mode="surreal"] .feature:nth-child(3) {
    --animation-delay: 4s;
}

@keyframes card-float {

    0%,
    100% {
        transform: translateY(0) rotateX(0);
    }

    50% {
        transform: translateY(-8px) rotateX(2deg);
    }
}

/* ============================================
   SURREAL MODE - Overlays
   ============================================ */

[data-mode="surreal"] .rot-overlay {
    opacity: 1;
    mix-blend-mode: screen;
}

[data-mode="surreal"] .rot-overlay__scanlines {
    opacity: var(--scanline-opacity);
    animation: scanline-phase 5s linear infinite;
}

@keyframes scanline-phase {
    0% {
        filter: hue-rotate(0deg);
    }

    100% {
        filter: hue-rotate(360deg);
    }
}

[data-mode="surreal"] .rot-overlay__vignette {
    opacity: var(--vignette-intensity);
    background: radial-gradient(ellipse at center,
            transparent 40%,
            rgba(157, 78, 221, 0.3) 70%,
            rgba(57, 255, 20, 0.1) 100%);
    animation: vignette-pulse 10s ease-in-out infinite;
}

@keyframes vignette-pulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }
}

[data-mode="surreal"] .rot-overlay__grain {
    opacity: var(--noise-intensity);
    animation: grain-shift 0.3s steps(5) infinite;
    filter: hue-rotate(90deg);
}

@keyframes grain-shift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(-1%, 1%) scale(1.01);
    }

    50% {
        transform: translate(1%, -1%) scale(0.99);
    }

    75% {
        transform: translate(-1%, -1%) scale(1.01);
    }
}

/* ============================================
   SURREAL MODE - Chromatic Aberration
   ============================================ */

[data-mode="surreal"] .heading-glitch {
    position: relative;
    text-shadow:
        var(--chromatic-offset) 0 var(--rot-slime),
        calc(var(--chromatic-offset) * -1) 0 var(--mode-accent),
        0 var(--chromatic-offset) rgba(255, 107, 53, 0.5);
    animation: chromatic-drift 4s ease-in-out infinite;
}

@keyframes chromatic-drift {

    0%,
    100% {
        text-shadow:
            3px 0 var(--rot-slime),
            -3px 0 var(--mode-accent),
            0 3px rgba(255, 107, 53, 0.5);
    }

    33% {
        text-shadow:
            -2px 2px var(--rot-slime),
            2px -2px var(--mode-accent),
            -2px -2px rgba(255, 107, 53, 0.5);
    }

    66% {
        text-shadow:
            2px -1px var(--rot-slime),
            -2px 1px var(--mode-accent),
            1px 2px rgba(255, 107, 53, 0.5);
    }
}

[data-mode="surreal"] .text-neon {
    color: var(--rot-slime);
    text-shadow:
        0 0 10px currentColor,
        0 0 30px currentColor,
        0 0 60px var(--mode-accent);
    animation: neon-flicker 3s ease-in-out infinite;
}

@keyframes neon-flicker {

    0%,
    97%,
    100% {
        opacity: 1;
    }

    98% {
        opacity: 0.8;
    }

    99% {
        opacity: 1;
    }
}

/* ============================================
   SURREAL MODE - Buttons
   ============================================ */

[data-mode="surreal"] .btn {
    border: 2px solid var(--rot-slime);
    box-shadow:
        0 0 15px rgba(57, 255, 20, 0.3),
        inset 0 0 15px rgba(57, 255, 20, 0.1);
    animation: btn-glow-pulse 3s ease-in-out infinite;
}

@keyframes btn-glow-pulse {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(57, 255, 20, 0.3),
            inset 0 0 15px rgba(57, 255, 20, 0.1);
    }

    50% {
        box-shadow:
            0 0 25px rgba(57, 255, 20, 0.5),
            0 0 50px rgba(157, 78, 221, 0.3),
            inset 0 0 20px rgba(57, 255, 20, 0.2);
    }
}

[data-mode="surreal"] .btn:hover {
    background: linear-gradient(135deg,
            rgba(57, 255, 20, 0.3),
            rgba(157, 78, 221, 0.3));
    transform: scale(1.05) rotateX(5deg);
    box-shadow:
        0 0 40px rgba(57, 255, 20, 0.5),
        0 0 80px rgba(157, 78, 221, 0.3);
}

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

[data-mode="surreal"] .social-btn:hover {
    background: rgba(157, 78, 221, 0.3);
    box-shadow: 0 0 20px rgba(157, 78, 221, 0.4);
}

/* ============================================
   SURREAL MODE - Cards
   ============================================ */

[data-mode="surreal"] .feature {
    background: linear-gradient(135deg,
            rgba(57, 255, 20, 0.05),
            transparent 30%,
            rgba(157, 78, 221, 0.05) 70%,
            transparent);
    border-color: var(--rot-border);
    backdrop-filter: blur(2px);
}

[data-mode="surreal"] .feature:hover {
    border-color: var(--rot-slime);
    box-shadow:
        0 0 30px rgba(57, 255, 20, 0.2),
        0 10px 40px rgba(157, 78, 221, 0.1);
    transform: translateY(-8px) rotateX(5deg) rotateY(-2deg);
}

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

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

[data-mode="surreal"] .video-card:hover {
    border-color: var(--mode-accent);
    box-shadow: 0 0 30px rgba(157, 78, 221, 0.3);
}

[data-mode="surreal"] .video-card img {
    transition: all var(--duration-normal);
    filter: saturate(1.2) hue-rotate(10deg);
}

[data-mode="surreal"] .video-card:hover img {
    filter: saturate(1.5) hue-rotate(-20deg);
    transform: scale(1.05);
}

/* ============================================
   SURREAL MODE - Testimonials
   ============================================ */

[data-mode="surreal"] .testimonial {
    background: rgba(157, 78, 221, 0.05);
    border-left-color: var(--mode-accent);
}

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

/* ============================================
   SURREAL MODE - Random Hallucinations
   ============================================ */

[data-mode="surreal"] .rot-overlay__glitch-line {
    display: block;
    animation: hallucination 15s linear infinite;
    background: linear-gradient(90deg,
            transparent,
            rgba(57, 255, 20, 0.1),
            rgba(157, 78, 221, 0.1),
            transparent);
    mix-blend-mode: screen;
}

@keyframes hallucination {

    0%,
    90%,
    100% {
        opacity: 0;
        transform: translateY(0) scaleY(1);
    }

    92% {
        opacity: 0.5;
        transform: translateY(-30vh) scaleY(2);
    }

    94% {
        opacity: 0.3;
        transform: translateY(50vh) scaleY(0.5);
    }

    96% {
        opacity: 0.4;
        transform: translateY(-60vh) scaleY(3);
    }

    98% {
        opacity: 0;
    }
}

/* Impossible geometry shadows */
[data-mode="surreal"] .feature::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(57, 255, 20, 0.1);
    transform: rotate(3deg) translateZ(-10px);
    pointer-events: none;
    animation: impossible-shadow 8s ease-in-out infinite;
}

@keyframes impossible-shadow {

    0%,
    100% {
        transform: rotate(3deg) translateZ(-10px);
        opacity: 0.3;
    }

    50% {
        transform: rotate(-3deg) translateZ(-20px);
        opacity: 0.5;
    }
}