/* ========================================
   Scroll Glitch Transition Effect
   ======================================== */

/* Section Intro - Fixed positioning */
.section_intro {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    transition: none;
    overflow: hidden; /* Contain pseudo-elements */
}

/* Section Interaction - Positioned below */
.section_interaction {
    position: relative;
    margin-top: 100vh;
    min-height: 100vh;
    z-index: 200;
    background: #000;
    overflow: hidden; /* Contain pseudo-elements */
}

/* Glitch transition states */
.section_intro.glitch-active {
    animation: section-glitch-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Intense glitch-out animation for section_intro */
@keyframes section-glitch-out {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0px) hue-rotate(0deg);
    }
    10% {
        opacity: 0.9;
        transform: translate(-10px, 5px) scale(1.02, 0.98);
        filter: blur(0px) hue-rotate(0deg);
    }
    20% {
        opacity: 0.8;
        transform: translate(10px, -5px) scale(0.98, 1.02);
        filter: blur(1px) hue-rotate(90deg);
    }
    30% {
        opacity: 0.7;
        transform: translate(-15px, 10px) scale(1.05, 0.95);
        filter: blur(2px) hue-rotate(180deg);
    }
    40% {
        opacity: 0.6;
        transform: translate(20px, -10px) scale(0.95, 1.05);
        filter: blur(3px) hue-rotate(270deg);
    }
    50% {
        opacity: 0.5;
        transform: translate(-20px, 15px) scale(1.08, 0.92);
        filter: blur(5px) hue-rotate(360deg);
    }
    60% {
        opacity: 0.4;
        transform: translate(15px, -15px) scale(0.92, 1.08);
        filter: blur(8px) hue-rotate(180deg);
    }
    70% {
        opacity: 0.3;
        transform: translate(-25px, 20px) scale(1.1, 0.9);
        filter: blur(12px) hue-rotate(90deg);
    }
    80% {
        opacity: 0.2;
        transform: translate(30px, -20px) scale(0.9, 1.1);
        filter: blur(15px) hue-rotate(270deg);
    }
    90% {
        opacity: 0.1;
        transform: translate(-35px, 25px) scale(1.15, 0.85);
        filter: blur(20px) hue-rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, -100%) scale(0.8, 1.2);
        filter: blur(30px) hue-rotate(180deg);
        pointer-events: none;
    }
}

/* RGB split glitch overlay during transition */
.section_intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, 
            rgba(255, 0, 0, 0) 0%,
            rgba(255, 0, 0, 0.3) 50%,
            rgba(255, 0, 0, 0) 100%
        );
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: screen;
}

.section_intro.glitch-active::before {
    animation: rgb-split-red 0.6s ease-out forwards;
}

@keyframes rgb-split-red {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(0);
    }
    20% { 
        opacity: 0.8; 
        transform: translateX(-15px);
    }
    40% { 
        opacity: 1; 
        transform: translateX(20px);
    }
    60% { 
        opacity: 0.6; 
        transform: translateX(-25px);
    }
    80% { 
        opacity: 0.3; 
        transform: translateX(15px);
    }
}

/* Cyan channel split */
.section_intro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, 
            rgba(0, 255, 255, 0) 0%,
            rgba(0, 255, 255, 0.3) 50%,
            rgba(0, 255, 255, 0) 100%
        );
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    mix-blend-mode: screen;
}

.section_intro.glitch-active::after {
    animation: rgb-split-cyan 0.6s ease-out forwards;
}

@keyframes rgb-split-cyan {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(0);
    }
    20% { 
        opacity: 0.8; 
        transform: translateX(15px);
    }
    40% { 
        opacity: 1; 
        transform: translateX(-20px);
    }
    60% { 
        opacity: 0.6; 
        transform: translateX(25px);
    }
    80% { 
        opacity: 0.3; 
        transform: translateX(-15px);
    }
}

/* Scanline interference during glitch */
.glitch-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.1) 3px,
        rgba(255, 255, 255, 0.1) 4px
    );
    opacity: 0;
    z-index: 8500;
    pointer-events: none;
    animation: scanline-interference 0.6s ease-out;
}

@keyframes scanline-interference {
    0% {
        opacity: 0;
        transform: translateY(0) scaleY(1);
    }
    20% {
        opacity: 0.8;
        transform: translateY(-50px) scaleY(1.5);
    }
    40% {
        opacity: 1;
        transform: translateY(100px) scaleY(0.5);
    }
    60% {
        opacity: 0.6;
        transform: translateY(-100px) scaleY(2);
    }
    80% {
        opacity: 0.3;
        transform: translateY(50px) scaleY(0.8);
    }
    100% {
        opacity: 0;
        transform: translateY(0) scaleY(1);
    }
}

/* Digital noise overlay */
.glitch-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px
        );
    opacity: 0;
    z-index: 8501;
    pointer-events: none;
    animation: noise-interference 0.6s ease-out;
}

@keyframes noise-interference {
    0%, 100% {
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90% {
        opacity: 1;
    }
    20%, 40%, 60%, 80% {
        opacity: 0.3;
    }
}

/* Section interaction reveal */
.section_interaction {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section_interaction.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   REVERSE GLITCH TRANSITION (Scroll Up)
   ======================================== */

/* Section interaction glitch-out when scrolling up - FAST VERSION */
.section_interaction.glitch-out-fast {
    animation: section-interaction-glitch-out-fast 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Section interaction glitch-out when scrolling up - NORMAL (unused but kept) */
.section_interaction.glitch-out {
    animation: section-interaction-glitch-out 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes section-interaction-glitch-out {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0px) hue-rotate(0deg);
    }
    10% {
        opacity: 0.9;
        transform: translate(10px, -5px) scale(1.02, 0.98);
        filter: blur(0px) hue-rotate(0deg);
    }
    20% {
        opacity: 0.8;
        transform: translate(-10px, 5px) scale(0.98, 1.02);
        filter: blur(1px) hue-rotate(-90deg);
    }
    30% {
        opacity: 0.7;
        transform: translate(15px, -10px) scale(1.05, 0.95);
        filter: blur(2px) hue-rotate(-180deg);
    }
    40% {
        opacity: 0.6;
        transform: translate(-20px, 10px) scale(0.95, 1.05);
        filter: blur(3px) hue-rotate(-270deg);
    }
    50% {
        opacity: 0.5;
        transform: translate(20px, -15px) scale(1.08, 0.92);
        filter: blur(5px) hue-rotate(-360deg);
    }
    60% {
        opacity: 0.4;
        transform: translate(-15px, 15px) scale(0.92, 1.08);
        filter: blur(8px) hue-rotate(-180deg);
    }
    70% {
        opacity: 0.3;
        transform: translate(25px, -20px) scale(1.1, 0.9);
        filter: blur(12px) hue-rotate(-90deg);
    }
    80% {
        opacity: 0.2;
        transform: translate(-30px, 20px) scale(0.9, 1.1);
        filter: blur(15px) hue-rotate(-270deg);
    }
    90% {
        opacity: 0.1;
        transform: translate(35px, -25px) scale(1.15, 0.85);
        filter: blur(20px) hue-rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 100%) scale(0.8, 1.2);
        filter: blur(30px) hue-rotate(-180deg);
        pointer-events: none;
    }
}

/* Section intro glitch-in - FAST VERSION (scroll up) */
.section_intro.glitch-in-fast {
    display: block !important;
    opacity: 0;
    transform: translate(0, 100%) scale(0.8, 1.2);
    filter: blur(30px) hue-rotate(180deg);
    animation: section-intro-glitch-in-fast 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Section intro glitch-in (reverse animation) - NORMAL (unused but kept) */
.section_intro.glitch-in {
    display: block !important;
    opacity: 0;
    transform: translate(0, 100%) scale(0.8, 1.2);
    filter: blur(30px) hue-rotate(180deg);
    animation: section-intro-glitch-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes section-intro-glitch-in {
    0% {
        opacity: 0;
        transform: translate(0, 100%) scale(0.8, 1.2);
        filter: blur(30px) hue-rotate(180deg);
    }
    10% {
        opacity: 0.1;
        transform: translate(-35px, 25px) scale(1.15, 0.85);
        filter: blur(20px) hue-rotate(0deg);
    }
    20% {
        opacity: 0.2;
        transform: translate(30px, -20px) scale(0.9, 1.1);
        filter: blur(15px) hue-rotate(270deg);
    }
    30% {
        opacity: 0.3;
        transform: translate(-25px, 20px) scale(1.1, 0.9);
        filter: blur(12px) hue-rotate(90deg);
    }
    40% {
        opacity: 0.4;
        transform: translate(15px, -15px) scale(0.92, 1.08);
        filter: blur(8px) hue-rotate(180deg);
    }
    50% {
        opacity: 0.5;
        transform: translate(-20px, 15px) scale(1.08, 0.92);
        filter: blur(5px) hue-rotate(360deg);
    }
    60% {
        opacity: 0.6;
        transform: translate(20px, -10px) scale(0.95, 1.05);
        filter: blur(3px) hue-rotate(270deg);
    }
    70% {
        opacity: 0.7;
        transform: translate(-15px, 10px) scale(1.05, 0.95);
        filter: blur(2px) hue-rotate(180deg);
    }
    80% {
        opacity: 0.8;
        transform: translate(10px, -5px) scale(0.98, 1.02);
        filter: blur(1px) hue-rotate(90deg);
    }
    90% {
        opacity: 0.9;
        transform: translate(-5px, 2px) scale(1.01, 0.99);
        filter: blur(0px) hue-rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
        pointer-events: auto;
    }
}

/* RGB split for interaction section (opposite direction) */
.section_interaction::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, 
            rgba(255, 0, 0, 0) 0%,
            rgba(255, 0, 0, 0.3) 50%,
            rgba(255, 0, 0, 0) 100%
        );
    opacity: 0;
    z-index: 10;
    pointer-events: none;
    mix-blend-mode: screen;
}

.section_interaction.glitch-out::before {
    animation: rgb-split-red-reverse 0.6s ease-out forwards;
}

@keyframes rgb-split-red-reverse {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(0);
    }
    20% { 
        opacity: 0.8; 
        transform: translateX(15px);
    }
    40% { 
        opacity: 1; 
        transform: translateX(-20px);
    }
    60% { 
        opacity: 0.6; 
        transform: translateX(25px);
    }
    80% { 
        opacity: 0.3; 
        transform: translateX(-15px);
    }
}

.section_interaction::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, 
            rgba(0, 255, 255, 0) 0%,
            rgba(0, 255, 255, 0.3) 50%,
            rgba(0, 255, 255, 0) 100%
        );
    opacity: 0;
    z-index: 11;
    pointer-events: none;
    mix-blend-mode: screen;
}

.section_interaction.glitch-out::after {
    animation: rgb-split-cyan-reverse 0.6s ease-out forwards;
}

@keyframes rgb-split-cyan-reverse {
    0%, 100% { 
        opacity: 0; 
        transform: translateX(0);
    }
    20% { 
        opacity: 0.8; 
        transform: translateX(-15px);
    }
    40% { 
        opacity: 1; 
        transform: translateX(20px);
    }
    60% { 
        opacity: 0.6; 
        transform: translateX(-25px);
    }
    80% { 
        opacity: 0.3; 
        transform: translateX(15px);
    }
}

/* ========================================
   FAST ANIMATIONS (300ms for scroll up)
   ======================================== */

/* Fast interaction glitch-out */
@keyframes section-interaction-glitch-out-fast {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: blur(0px);
    }
    33% {
        opacity: 0.6;
        transform: translate(15px, -10px) scale(1.05, 0.95);
        filter: blur(5px) hue-rotate(-180deg);
    }
    66% {
        opacity: 0.3;
        transform: translate(-20px, 15px) scale(0.9, 1.1);
        filter: blur(15px) hue-rotate(-90deg);
    }
    100% {
        opacity: 0;
        transform: translate(0, 100%) scale(0.8, 1.2);
        filter: blur(30px) hue-rotate(-180deg);
        pointer-events: none;
    }
}

/* Fast intro glitch-in */
@keyframes section-intro-glitch-in-fast {
    0% {
        opacity: 0;
        transform: translate(0, 100%) scale(0.8, 1.2);
        filter: blur(30px) hue-rotate(180deg);
    }
    33% {
        opacity: 0.4;
        transform: translate(-20px, 15px) scale(1.08, 0.92);
        filter: blur(8px) hue-rotate(180deg);
    }
    66% {
        opacity: 0.8;
        transform: translate(10px, -5px) scale(0.98, 1.02);
        filter: blur(2px) hue-rotate(45deg);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
        pointer-events: auto;
    }
}

/* Fast scanline interference */
.glitch-scanlines-fast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(255, 255, 255, 0.1) 3px,
        rgba(255, 255, 255, 0.1) 4px
    );
    opacity: 0;
    z-index: 8500;
    pointer-events: none;
    animation: scanline-interference-fast 0.3s ease-out;
}

@keyframes scanline-interference-fast {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(50px) scaleY(1.5);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* Fast digital noise */
.glitch-noise-fast {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px
        );
    opacity: 0;
    z-index: 8501;
    pointer-events: none;
    animation: noise-interference-fast 0.3s ease-out;
}

@keyframes noise-interference-fast {
    0%, 100% {
        opacity: 0;
    }
    25%, 75% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}