/* ========================================
   SOPORTEINFO.NET - ANIMATIONS
   ======================================== */

/* ===== Fade In on Scroll ===== */
/* Disabled AOS opacity to ensure visibility */
[data-aos] {
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(50px);
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-right"] {
    transform: translateX(-50px);
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-left"] {
    transform: translateX(50px);
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

/* ===== Glitch Effect for Text ===== */
@keyframes glitch-anim {
    0% {
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        transform: translateX(0);
    }

    10% {
        clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
        transform: translateX(-5px);
    }

    20% {
        clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
        transform: translateX(5px);
    }

    30% {
        clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
        transform: translateX(-5px);
    }

    40% {
        clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
        transform: translateX(5px);
    }

    50% {
        clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
        transform: translateX(-5px);
    }

    60% {
        clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
        transform: translateX(5px);
    }

    70% {
        clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
        transform: translateX(-5px);
    }

    80% {
        clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
        transform: translateX(5px);
    }

    90% {
        clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
        transform: translateX(-5px);
    }

    100% {
        clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
        transform: translateX(0);
    }
}

/* ===== Neon Pulse Animation ===== */
@keyframes neonPulse {

    0%,
    100% {
        text-shadow: 0 0 10px var(--glow-cyan), 0 0 20px var(--glow-cyan);
    }

    50% {
        text-shadow: 0 0 20px var(--glow-cyan), 0 0 30px var(--glow-cyan), 0 0 40px var(--glow-cyan);
    }
}

.pulse-cyan {
    animation: neonPulse 2s ease-in-out infinite;
}

/* ===== Holographic Shimmer ===== */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.holographic {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 243, 255, 0.3) 25%,
            rgba(255, 0, 255, 0.3) 50%,
            rgba(0, 243, 255, 0.3) 75%,
            transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

/* ===== Floating Animation ===== */
@keyframes float {

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

    50% {
        transform: translateY(-20px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* ===== RGB Split Effect ===== */
@keyframes rgbSplit {

    0%,
    100% {
        text-shadow:
            -2px 0 0 var(--neon-cyan),
            2px 0 0 var(--neon-magenta);
    }

    50% {
        text-shadow:
            -4px 0 0 var(--neon-cyan),
            4px 0 0 var(--neon-magenta);
    }
}

.rgb-split {
    animation: rgbSplit 0.8s steps(2) infinite;
}

/* ===== Circuit Line Animation ===== */
@keyframes circuitFlow {
    0% {
        stroke-dashoffset: 1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.circuit-line {
    stroke-dasharray: 1000;
    animation: circuitFlow 5s linear infinite;
}

/* ===== Fade In/Out ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.fade-out {
    animation: fadeOut 0.5s ease-out;
}

/* ===== Scale In ===== */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.scale-in {
    animation: scaleIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== Slide From Left ===== */
@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-from-left {
    animation: slideFromLeft 0.6s ease-out;
}

/* ===== Slide From Right ===== */
@keyframes slideFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-from-right {
    animation: slideFromRight 0.6s ease-out;
}

/* ===== Data Stream Effect ===== */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.data-stream {
    animation: dataStream 5s linear infinite;
}

/* ===== Border Glow Pulse ===== */
@keyframes borderGlow {

    0%,
    100% {
        box-shadow: 0 0 5px var(--glow-cyan), inset 0 0 5px var(--glow-cyan);
    }

    50% {
        box-shadow: 0 0 20px var(--glow-magenta), inset 0 0 10px var(--glow-magenta);
    }
}

.border-glow-pulse {
    animation: borderGlow 2s ease-in-out infinite;
}

/* ===== Loading Spinner ===== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* ===== Type Writer Effect ===== */
@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    50% {
        border-color: transparent;
    }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--neon-cyan);
    white-space: nowrap;
    animation:
        typewriter 3s steps(40) 1s 1 normal both,
        blinkCursor 0.75s step-end infinite;
}