/* ==========================================================================
   14. CREATIVE AGENCY ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* 1. Pulso Neón / Radar en Indicadores de Estado y Píldoras */
.hero__pill-dot,
.contact-badge__dot,
.status-dot,
.footer-tech-badge__dot {
    position: relative;
}

.hero__pill-dot::after,
.contact-badge__dot::after,
.status-dot::after,
.footer-tech-badge__dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.8;
    animation: radarPulse 2.4s cubic-bezier(0.2, 1, 0.4, 1) infinite;
    pointer-events: none;
}

@keyframes radarPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.9;
    }
    70%, 100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

/* 2. Microinteracciones de Elevación & Resplandor en Tarjetas */
.contact-form-card,
.tech-direct-card,
.channels-card,
.location-card,
.stat {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

.contact-form-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 180, 255, 0.35);
    box-shadow: 0 24px 55px rgba(0, 70, 180, 0.1), 0 2px 10px rgba(0, 0, 0, 0.02);
}

.tech-direct-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 55px rgba(0, 40, 140, 0.35);
}

.channels-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 180, 255, 0.32);
    box-shadow: 0 20px 48px rgba(0, 60, 160, 0.09);
}

.location-card:hover {
    box-shadow: 0 26px 60px rgba(0, 60, 150, 0.1);
}

.stat:hover {
    transform: translateY(-3px);
}

.channel-icon,
.feature-icon-wrapper {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background 0.25s ease, 
                color 0.25s ease;
}

.channel-item:hover .channel-icon {
    transform: scale(1.12) rotate(4deg);
    background: rgba(0, 170, 255, 0.22);
}

.location-feature-card:hover .feature-icon-wrapper {
    transform: scale(1.14) rotate(4deg);
    background: rgba(0, 160, 255, 0.22);
    color: #009dff;
}

.footer__social-link:hover {
    transform: translateY(-3px) scale(1.08);
}

/* 3. Animaciones de Revelación Suave al Hacer Scroll (Scroll Reveal) */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

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

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.32s; }

/* 4. Entrada Inicial Suave de la Sección Hero */
@keyframes heroEntranceFadeUp {
    0% {
        opacity: 0;
        transform: translateY(22px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__content {
    animation: heroEntranceFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__media {
    animation: heroEntranceFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

/* Accesibilidad: Respeta las preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .reveal-fade-up,
    .hero__content,
    .hero__media {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .hero__image-wrapper::after,
    .btn--primary::after,
    .btn-submit-tech::after,
    .hero__pill-dot::after,
    .contact-badge__dot::after,
    .status-dot::after,
    .footer-tech-badge__dot::after,
    .text-gradient,
    .text-gradient-cyan {
        animation: none !important;
    }
}