/* =============================================
   APACHES COLECTIVO — ANIMACIONES
   ============================================= */

/* =============================================
   EFECTO GLITCH EN TITULOS
   ============================================= */
.glitch {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.glitch::before {
    left: 3px;
    text-shadow: -3px 0 var(--color-magenta);
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    animation: glitchTop 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

.glitch::after {
    left: -3px;
    text-shadow: 3px 0 var(--color-green);
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    animation: glitchBottom 4s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes glitchTop {
    0%, 90%, 100% {
        transform: none;
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    }
    91% {
        transform: translate(-4px, -2px);
        opacity: 0.8;
    }
    92% {
        transform: translate(4px, 2px);
        clip-path: polygon(0 5%, 100% 5%, 100% 30%, 0 30%);
    }
    93% {
        transform: translate(-2px, 0px);
    }
    94% {
        transform: none;
        opacity: 1;
    }
    95% {
        transform: translate(3px, -1px);
        clip-path: polygon(0 10%, 100% 10%, 100% 35%, 0 35%);
    }
    96% {
        transform: none;
    }
}

@keyframes glitchBottom {
    0%, 90%, 100% {
        transform: none;
        opacity: 1;
        clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    }
    91% {
        transform: translate(4px, 2px);
        opacity: 0.8;
    }
    92% {
        transform: translate(-4px, -2px);
        clip-path: polygon(0 65%, 100% 65%, 100% 95%, 0 95%);
    }
    93% {
        transform: translate(2px, 0px);
    }
    94% {
        transform: none;
        opacity: 1;
    }
    95% {
        transform: translate(-3px, 1px);
        clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%);
    }
    96% {
        transform: none;
    }
}

/* =============================================
   REVEAL ON SCROLL
   ============================================= */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-up.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Delays para cards en grid */
[data-delay="0"]   { transition-delay: 0ms;   }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }

/* =============================================
   HERO TITLE ANIMACION (LINEA POR LINEA)
   ============================================= */
.hero-title .glitch {
    opacity: 0;
    transform: translateY(60px);
    animation: heroLineReveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-title .glitch:first-child  { animation-delay: 0.2s; }
.hero-title .glitch:last-child   { animation-delay: 0.5s; }

@keyframes heroLineReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* reveal para elementos con clase reveal-up en hero */
.hero-eyebrow {
    animation: fadeInUp 0.7s 0.8s ease both;
}

.hero-subtitle {
    animation: fadeInUp 0.7s 1s ease both;
}

.hero-actions {
    animation: fadeInUp 0.7s 1.1s ease both;
}

.hero-stats {
    animation: fadeInUp 0.7s 1.2s ease both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   ORB FLOTANTE (FONDO HERO)
   ============================================= */
@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.15;
    }
    33% {
        transform: translate(30px, -20px) scale(1.05);
        opacity: 0.2;
    }
    66% {
        transform: translate(-20px, 30px) scale(0.95);
        opacity: 0.12;
    }
    100% {
        transform: translate(10px, -10px) scale(1.02);
        opacity: 0.18;
    }
}

/* =============================================
   SCROLL INDICATOR
   ============================================= */
@keyframes scrollPulse {
    0% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
    50% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
    51% {
        transform: scaleY(0);
        transform-origin: top;
    }
    100% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }
}

/* =============================================
   WAVE BARS PODCAST
   ============================================= */
@keyframes waveBar {
    0%   { height: 8px;  opacity: 0.4; }
    50%  { opacity: 1; }
    100% { height: 36px; opacity: 0.9; }
}

/* =============================================
   EFECTO NEON PULSE EN BOTONES
   ============================================= */
.btn-primary {
    animation: none;
}

.btn-primary:hover {
    animation: neonPulse 0.4s ease;
}

@keyframes neonPulse {
    0%   { box-shadow: 0 0 0 0 rgba(191, 255, 0, 0.7); }
    50%  { box-shadow: 0 0 20px 8px rgba(191, 255, 0, 0.2); }
    100% { box-shadow: 0 0 30px 0 rgba(191, 255, 0, 0.25); }
}

/* =============================================
   HOVER GLOW EN CARDS
   ============================================= */
.glass-card {
    transition: box-shadow 0.4s ease, transform 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(191, 255, 0, 0.12);
}

/* =============================================
   ANIMACION ENTRADA SECCION (NUMERO)
   ============================================= */
@keyframes countUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   BORDER NEON ANIMADO
   ============================================= */
@keyframes borderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =============================================
   NAV MOBILE SLIDE ITEMS
   ============================================= */
.nav--open .nav-link {
    animation: navItemIn 0.4s ease both;
}

.nav--open .nav-list li:nth-child(1) .nav-link { animation-delay: 0.1s; }
.nav--open .nav-list li:nth-child(2) .nav-link { animation-delay: 0.15s; }
.nav--open .nav-list li:nth-child(3) .nav-link { animation-delay: 0.2s; }
.nav--open .nav-list li:nth-child(4) .nav-link { animation-delay: 0.25s; }
.nav--open .nav-list li:nth-child(5) .nav-link { animation-delay: 0.3s; }
.nav--open .nav-list li:nth-child(6) .nav-link { animation-delay: 0.35s; }

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =============================================
   REDUCIR MOVIMIENTO (ACCESIBILIDAD)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .glitch::before,
    .glitch::after,
    .hero-orb,
    .podcast-wave span,
    .hero-scroll-line {
        animation: none;
    }

    .reveal-up,
    .reveal-left,
    .reveal-right {
        transition: opacity 0.4s ease;
        transform: none;
    }

    .hero-title .glitch,
    .hero-eyebrow,
    .hero-subtitle,
    .hero-actions,
    .hero-stats {
        animation: none;
        opacity: 1;
    }
}