/**
 * Philosophy Text Animations - Simple Working Version
 * Clean philosophy phrase rotation with minimal tech effects
 */

/* CSS Custom Properties for easy timing adjustments */
:root {
    --philosophy-transition-duration: 300ms;
    --philosophy-transition-easing: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* HERO HEADER TEXT FADE IN ANIMATION */
#hero-header-text {
    opacity: 0;
    animation: hero-text-fade-in 0.5s ease-out 0.3s forwards;
}

@keyframes hero-text-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Make text containers positioned for scanline overlay */
#philosophy-positive,
#philosophy-negative {
    position: relative;
    display: inline-block;
    transition: opacity 0.3s ease-out;
}

/* Permanent scanline overlay - always visible with 6-second continuous animation */
#philosophy-positive::after,
#philosophy-negative::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(115, 190, 211, 0.03) 2px,
        rgba(115, 190, 211, 0.03) 4px
    );
    z-index: 1;
    opacity: 1;
    animation: philosophy-continuous-scanline 6s ease-in-out infinite;
}

/* Negative text uses slightly different timing */
#philosophy-negative::after {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(207, 87, 60, 0.03) 2px,
        rgba(207, 87, 60, 0.03) 4px
    );
    animation: philosophy-continuous-scanline-negative 6s ease-in-out infinite;
}

/* Transition OUT - text leaving with digital decay */
@keyframes philosophy-transition-out {
    0% { 
        text-shadow: none;
        opacity: 1;
        letter-spacing: 0;
        filter: blur(0) brightness(1);
        transform: scaleX(1) skewX(0deg);
    }
    25% {
        text-shadow: 
            1px 0 0 rgba(255, 0, 100, 0.2),
            -1px 0 0 rgba(0, 255, 255, 0.2);
        opacity: 0.95;
        filter: blur(0) brightness(1.05);
        transform: scaleX(1) skewX(0.5deg);
    }
    50% {
        text-shadow: 
            2px 0 0 rgba(255, 0, 100, 0.4),
            -2px 0 0 rgba(0, 255, 255, 0.4),
            0 0 2px rgba(115, 190, 211, 0.2);
        opacity: 0.6;
        letter-spacing: 0.3px;
        filter: blur(0.3px) brightness(0.95);
        transform: scaleX(0.98) skewX(-0.5deg);
    }
    75% {
        text-shadow: 
            3px 0 0 rgba(255, 0, 100, 0.3),
            -3px 0 0 rgba(0, 255, 255, 0.3),
            0 0 4px rgba(115, 190, 211, 0.1);
        opacity: 0.2;
        letter-spacing: 0.1px;
        filter: blur(0.5px) brightness(0.9);
        transform: scaleX(0.96) skewX(0deg);
    }
    100% {
        text-shadow: 
            4px 0 0 rgba(255, 0, 100, 0.1),
            -4px 0 0 rgba(0, 255, 255, 0.1);
        opacity: 0;
        letter-spacing: 0;
        filter: blur(0.8px) brightness(0.8);
        transform: scaleX(0.94) skewX(0deg);
    }
}

/* Transition IN - text materializing from data */
@keyframes philosophy-transition-in {
    0% {
        text-shadow: 
            4px 0 0 rgba(255, 0, 100, 0.1),
            -4px 0 0 rgba(0, 255, 255, 0.1);
        opacity: 0;
        letter-spacing: 0.5px;
        filter: blur(0.8px) brightness(1.2) contrast(1.5);
        transform: scaleX(1.06) skewX(0deg);
    }
    25% {
        text-shadow: 
            3px 0 0 rgba(255, 0, 100, 0.3),
            -3px 0 0 rgba(0, 255, 255, 0.3),
            0 0 3px rgba(115, 190, 211, 0.2);
        opacity: 0.4;
        letter-spacing: 0.3px;
        filter: blur(0.5px) brightness(1.1) contrast(1.3);
        transform: scaleX(1.04) skewX(-0.3deg);
    }
    50% {
        text-shadow: 
            2px 0 0 rgba(255, 0, 100, 0.4),
            -2px 0 0 rgba(0, 255, 255, 0.4);
        opacity: 0.8;
        letter-spacing: 0.1px;
        filter: blur(0.2px) brightness(1.05) contrast(1.1);
        transform: scaleX(1.02) skewX(0.2deg);
    }
    75% {
        text-shadow: 
            1px 0 0 rgba(255, 0, 100, 0.2),
            -1px 0 0 rgba(0, 255, 255, 0.2);
        opacity: 0.95;
        filter: blur(0) brightness(1.02) contrast(1);
        transform: scaleX(1) skewX(0deg);
    }
    90% {
        /* Slight flicker for authenticity */
        opacity: 0.98;
        filter: brightness(0.98);
    }
    100% { 
        text-shadow: none;
        opacity: 1;
        letter-spacing: 0;
        filter: blur(0) brightness(1) contrast(1);
        transform: scaleX(1) skewX(0deg);
    }
}

/* Classes for transition animations */
.philosophy-transition-out {
    animation: philosophy-transition-out var(--philosophy-transition-duration) var(--philosophy-transition-easing) forwards;
    will-change: transform, opacity, filter;
    transform-origin: center center;
}

.philosophy-transition-in {
    animation: philosophy-transition-in var(--philosophy-transition-duration) var(--philosophy-transition-easing) forwards;
    will-change: transform, opacity, filter;
    transform-origin: center center;
}

/* Staggered timing for positive and negative */
#philosophy-negative.philosophy-transition-out {
    animation-delay: 50ms;
}

#philosophy-negative.philosophy-transition-in {
    animation-delay: 50ms;
}

/* Continuous 6-second scanline animation - subtle breathing effect */
@keyframes philosophy-continuous-scanline {
    0% {
        opacity: 1;
        background-position: 0 0;
    }
    10% {
        opacity: 1.1;
        background-position: 0 -1px;
    }
    20% {
        opacity: 1.2;
        background-position: 0 -2px;
    }
    30% {
        opacity: 1.15;
        background-position: 0 0;
    }
    40% {
        opacity: 1.25;
        background-position: 0 1px;
    }
    50% {
        opacity: 1.3;
        background-position: 0 2px;
    }
    60% {
        opacity: 1.25;
        background-position: 0 1px;
    }
    70% {
        opacity: 1.2;
        background-position: 0 0;
    }
    80% {
        opacity: 1.15;
        background-position: 0 -1px;
    }
    90% {
        opacity: 1.1;
        background-position: 0 -2px;
    }
    100% {
        opacity: 1;
        background-position: 0 0;
    }
}

/* Continuous 6-second scanline animation for negative text - offset timing */
@keyframes philosophy-continuous-scanline-negative {
    0% {
        opacity: 1;
        background-position: 0 0;
    }
    8% {
        opacity: 1.15;
        background-position: 0 1px;
    }
    16% {
        opacity: 1.1;
        background-position: 0 2px;
    }
    24% {
        opacity: 1.2;
        background-position: 0 0;
    }
    32% {
        opacity: 1.25;
        background-position: 0 -1px;
    }
    40% {
        opacity: 1.15;
        background-position: 0 -2px;
    }
    48% {
        opacity: 1.3;
        background-position: 0 -1px;
    }
    56% {
        opacity: 1.2;
        background-position: 0 0;
    }
    64% {
        opacity: 1.25;
        background-position: 0 1px;
    }
    72% {
        opacity: 1.15;
        background-position: 0 2px;
    }
    80% {
        opacity: 1.2;
        background-position: 0 1px;
    }
    88% {
        opacity: 1.1;
        background-position: 0 0;
    }
    100% {
        opacity: 1;
        background-position: 0 0;
    }
}

/* INTRO ANIMATIONS - Cyberpunk attention grabbers */

/* Positive Intro - Gentle data stream fade-in */
@keyframes philosophy-intro-positive {
    0% {
        opacity: 0.7;
        text-shadow: 
            1px 0 0 rgba(0, 255, 255, 0.2),
            -1px 0 0 rgba(75, 167, 67, 0.2);
        filter: brightness(1.05) contrast(1.05);
    }
    10% {
        opacity: 0.8;
        text-shadow: 
            1.5px 0 0 rgba(0, 255, 255, 0.25),
            -1.5px 0 0 rgba(75, 167, 67, 0.25),
            0 0 4px rgba(115, 190, 211, 0.2);
        filter: brightness(1.06) contrast(1.06);
    }
    20% {
        opacity: 0.85;
        text-shadow: 
            2px 0 0 rgba(0, 255, 255, 0.3),
            -2px 0 0 rgba(75, 167, 67, 0.3),
            0 0 6px rgba(115, 190, 211, 0.25);
        filter: brightness(1.07) contrast(1.07);
    }
    50% {
        opacity: 1;
        text-shadow: 
            0.5px 0 0 rgba(0, 255, 255, 0.2),
            -0.5px 0 0 rgba(75, 167, 67, 0.2),
            0 0 12px rgba(115, 190, 211, 0.4);
        filter: brightness(1.1) contrast(1.1);
    }
    100% {
        opacity: 1;
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
}

/* Negative Intro - Gentle warning fade-in */
@keyframes philosophy-intro-negative {
    0% {
        opacity: 0.7;
        text-shadow: 
            -1px 0 0 rgba(207, 87, 60, 0.2),
            1px 0 0 rgba(207, 87, 60, 0.2);
        filter: brightness(0.98) contrast(1.05);
    }
    10% {
        opacity: 0.8;
        text-shadow: 
            -1.5px 0 0 rgba(207, 87, 60, 0.25),
            1.5px 0 0 rgba(255, 100, 0, 0.25),
            0 0 4px rgba(207, 87, 60, 0.2);
        filter: brightness(0.97) contrast(1.06);
    }
    20% {
        opacity: 0.85;
        text-shadow: 
            -2px 0 0 rgba(207, 87, 60, 0.3),
            2px 0 0 rgba(255, 100, 0, 0.3),
            0 0 6px rgba(207, 87, 60, 0.25);
        filter: brightness(0.96) contrast(1.07);
    }
    50% {
        opacity: 1;
        text-shadow: 
            -0.5px 0 0 rgba(207, 87, 60, 0.2),
            0.5px 0 0 rgba(255, 100, 0, 0.2),
            0 0 12px rgba(207, 87, 60, 0.4);
        filter: brightness(0.97) contrast(1.1);
    }
    100% {
        opacity: 1;
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
}

/* MIDPOINT ANIMATIONS - Success and Error Effects */

/* Midpoint Success Animation - Clean tech validation */
@keyframes philosophy-success-pulse {
    0%, 100% {
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
    20% {
        text-shadow: 
            0 1px 0 rgba(115, 190, 211, 0.3),
            0 -1px 0 rgba(75, 167, 67, 0.3);
        filter: brightness(1.05) contrast(1.05);
    }
    40% {
        text-shadow: 
            0 2px 0 rgba(115, 190, 211, 0.4),
            0 -2px 0 rgba(75, 167, 67, 0.4),
            0 0 4px rgba(115, 190, 211, 0.2);
        filter: brightness(1.08) contrast(1.08);
    }
    60% {
        text-shadow: 
            0 1px 0 rgba(115, 190, 211, 0.5),
            0 -1px 0 rgba(75, 167, 67, 0.5),
            0 0 6px rgba(75, 167, 67, 0.3);
        filter: brightness(1.1) contrast(1.1);
    }
    80% {
        text-shadow: 
            0 1px 0 rgba(115, 190, 211, 0.3),
            0 -1px 0 rgba(75, 167, 67, 0.3);
        filter: brightness(1.05) contrast(1.05);
    }
}

/* Midpoint Error Animation - Data corruption detection */
@keyframes philosophy-error-glitch {
    0%, 100% {
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
    15% {
        text-shadow: 
            1px 0 0 rgba(207, 87, 60, 0.4),
            -1px 0 0 rgba(207, 87, 60, 0.4);
        filter: brightness(0.98) contrast(1.1);
    }
    30% {
        text-shadow: 
            2px 0 0 rgba(207, 87, 60, 0.5),
            -2px 0 0 rgba(0, 255, 255, 0.2);
        filter: brightness(0.95) contrast(1.2);
    }
    45% {
        text-shadow: 
            1px 0 0 rgba(255, 0, 0, 0.3),
            -1px 0 0 rgba(0, 255, 255, 0.3),
            0 0 2px rgba(207, 87, 60, 0.2);
        filter: brightness(0.92) contrast(1.15);
    }
    60% {
        text-shadow: 
            2px 0 0 rgba(207, 87, 60, 0.4),
            -2px 0 0 rgba(0, 255, 255, 0.2);
        filter: brightness(0.96) contrast(1.1);
    }
    75% {
        text-shadow: 
            1px 0 0 rgba(207, 87, 60, 0.3),
            -1px 0 0 rgba(207, 87, 60, 0.3);
        filter: brightness(0.98) contrast(1.05);
    }
}

/* VALIDATION ANIMATIONS - System validation sweep */

/* Positive validation - left-to-right data sweep */
@keyframes philosophy-validation-positive {
    0% {
        text-shadow: 
            -20px 0 0 rgba(115, 190, 211, 0),
            -15px 0 0 rgba(75, 167, 67, 0);
        filter: brightness(1) contrast(1);
    }
    20% {
        text-shadow: 
            -10px 0 0 rgba(115, 190, 211, 0.2),
            -5px 0 0 rgba(75, 167, 67, 0.1);
        filter: brightness(1.05) contrast(1.05);
    }
    40% {
        text-shadow: 
            0 0 0 rgba(115, 190, 211, 0.3),
            5px 0 0 rgba(75, 167, 67, 0.2),
            0 0 8px rgba(115, 190, 211, 0.15);
        filter: brightness(1.08) contrast(1.08);
    }
    60% {
        text-shadow: 
            10px 0 0 rgba(115, 190, 211, 0.2),
            15px 0 0 rgba(75, 167, 67, 0.1),
            0 0 12px rgba(75, 167, 67, 0.2);
        filter: brightness(1.1) contrast(1.1);
    }
    80% {
        text-shadow: 
            20px 0 0 rgba(115, 190, 211, 0),
            25px 0 0 rgba(75, 167, 67, 0),
            0 0 6px rgba(115, 190, 211, 0.1);
        filter: brightness(1.05) contrast(1.05);
    }
    100% {
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
}

/* Negative validation - right-to-left security scan */
@keyframes philosophy-validation-negative {
    0% {
        text-shadow: 
            20px 0 0 rgba(207, 87, 60, 0),
            15px 0 0 rgba(255, 140, 0, 0);
        filter: brightness(1) contrast(1);
    }
    20% {
        text-shadow: 
            10px 0 0 rgba(207, 87, 60, 0.2),
            5px 0 0 rgba(255, 140, 0, 0.1);
        filter: brightness(0.98) contrast(1.05);
    }
    40% {
        text-shadow: 
            0 0 0 rgba(207, 87, 60, 0.3),
            -5px 0 0 rgba(255, 140, 0, 0.2),
            0 0 8px rgba(207, 87, 60, 0.15);
        filter: brightness(0.96) contrast(1.08);
    }
    60% {
        text-shadow: 
            -10px 0 0 rgba(207, 87, 60, 0.2),
            -15px 0 0 rgba(255, 140, 0, 0.1),
            0 0 12px rgba(255, 140, 0, 0.2);
        filter: brightness(0.94) contrast(1.1);
    }
    80% {
        text-shadow: 
            -20px 0 0 rgba(207, 87, 60, 0),
            -25px 0 0 rgba(255, 140, 0, 0),
            0 0 6px rgba(207, 87, 60, 0.1);
        filter: brightness(0.96) contrast(1.05);
    }
    100% {
        text-shadow: none;
        filter: brightness(1) contrast(1);
    }
}

/* ANIMATION CLASSES - Apply the effects */

/* Classes to apply intro animations */
.philosophy-intro-positive {
    animation: philosophy-intro-positive 1.5s ease-in-out;
    position: relative;
}

.philosophy-intro-negative {
    animation: philosophy-intro-negative 1.5s ease-in-out;
    position: relative;
}

/* Classes to apply midpoint animations - CONTINUOUS */
.philosophy-success-pulse {
    animation: philosophy-success-pulse 4s ease-in-out infinite;
    position: relative;
}

.philosophy-error-glitch {
    animation: philosophy-error-glitch 4.5s ease-in-out infinite;
    position: relative;
}

/* Classes to apply validation animations */
.philosophy-validation-positive {
    animation: philosophy-validation-positive 2.2s ease-out;
    position: relative;
}

.philosophy-validation-negative {
    animation: philosophy-validation-negative 2.2s ease-out;
    position: relative;
}

/* SCANLINE OVERLAYS for enhanced effects */

/* Scanline sweep overlay for intros */
.philosophy-intro-positive::after,
.philosophy-intro-negative::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -10px;
    right: -10px;
    height: 200%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(115, 190, 211, 0.15) 2px,
        rgba(115, 190, 211, 0.15) 4px
    );
    pointer-events: none;
    z-index: 3;
    animation: philosophy-intro-scanlines 1.5s ease-out;
    transition: opacity 0.3s ease-out;
}

.philosophy-intro-negative::after {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(207, 87, 60, 0.15) 2px,
        rgba(207, 87, 60, 0.15) 4px
    );
}

/* Scanline sweep for intro */
@keyframes philosophy-intro-scanlines {
    0% {
        background-position: 0 -20px;
        opacity: 1;
    }
    20% {
        opacity: 1.2;
    }
    50% {
        background-position: 0 0;
        opacity: 1.3;
    }
    80% {
        opacity: 1.2;
    }
    100% {
        background-position: 0 20px;
        opacity: 1;
    }
}

/* BETWEEN ANIMATIONS - Subtle scanline-only effects */

/* Positive scanline pulse - gentle wave */
@keyframes philosophy-between-scanlines-positive {
    0%, 100% {
        opacity: 1;
    }
    20% {
        opacity: 1.15;
    }
    50% {
        opacity: 1.25;
    }
    80% {
        opacity: 1.15;
    }
}

/* Negative scanline flicker - brief static */
@keyframes philosophy-between-scanlines-negative {
    0%, 100% {
        opacity: 1;
    }
    15% {
        opacity: 1.2;
    }
    30% {
        opacity: 1.1;
    }
    45% {
        opacity: 1.3;
    }
    60% {
        opacity: 1.15;
    }
    75% {
        opacity: 1.25;
    }
    90% {
        opacity: 1.1;
    }
}

/* Classes for between animations - standardized scanline effects */
.philosophy-scanline-pulse {
    position: relative;
}

.philosophy-scanline-pulse::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(115, 190, 211, 0.05) 2px,
        rgba(115, 190, 211, 0.05) 4px
    );
    pointer-events: none;
    z-index: 2;
    animation: philosophy-between-scanlines-positive 1.8s ease-in-out;
    transition: opacity 0.3s ease-out;
}

.philosophy-scanline-flicker {
    position: relative;
}

.philosophy-scanline-flicker::after {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(207, 87, 60, 0.08) 2px,
        rgba(207, 87, 60, 0.08) 4px
    );
    pointer-events: none;
    z-index: 2;
    animation: philosophy-between-scanlines-negative 1.8s ease-out;
    transition: opacity 0.3s ease-out;
}

/* Clean, no-motion base state */
.philosophy-idle {
    /* No animations, just static with scanlines */
}