/* ========================================
   SWITCH Soluciones Tecnológicas
   Animaciones y Transiciones - Rediseño 2026
   ======================================== */

/* ========================================
   KEYFRAMES
   ======================================== */

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(10px);
  }
  60% {
    transform: translateX(-50%) translateY(5px);
  }
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

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

@keyframes scaleIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes heroImageFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* ========================================
   HERO ANIMATIONS
   ======================================== */

.hero-icon-wrapper {
  animation: float 3s ease-in-out infinite;
}

.hero-title {
  animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.badge-cta {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-image {
  animation: slideInRight 1s ease-out 0.3s both;
}

.hero-image img {
  animation: heroImageFloat 6s ease-in-out 1.5s infinite;
}

.scroll-down {
  animation: bounceDown 2s ease-in-out infinite;
}

/* Circulos decorativos del hero */
.hero::before {
  animation: pulse 5s ease-in-out infinite;
}

.hero::after {
  animation: pulse 6s ease-in-out infinite 1.5s;
}

/* ========================================
   HOVER ANIMATIONS
   ======================================== */

.servicio-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}

.proyecto-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

.feature-item {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease,
              border-color 0.3s ease;
}

.cliente-logo {
  transition: transform 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
}

.stat-item {
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Servicio icon hover */
.servicio-card:hover .servicio-icon img,
.servicio-card:hover .servicio-icon svg {
  transform: scale(1.08);
  transition: transform 0.3s ease;
}

.servicio-icon img,
.servicio-icon svg {
  transition: transform 0.3s ease;
}

/* ========================================
   WHATSAPP FLOAT ANIMATION
   ======================================== */

.whatsapp-float {
  animation: whatsappPulse 2s infinite;
}

.whatsapp-float:hover {
  animation: none;
}

/* ========================================
   FORM ANIMATIONS
   ======================================== */

.form-group input,
.form-group textarea {
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.form-message {
  animation: fadeInUp 0.4s ease-out;
}

.btn-submit {
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-submit:active {
  transform: scale(0.98);
}

/* ========================================
   NAV LINK ANIMATIONS
   ======================================== */

.nav-link::after {
  transition: width 0.3s ease;
}

/* ========================================
   HEADER TRANSITION
   ======================================== */

.header-sticky {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ========================================
   SOCIAL SIDEBAR ANIMATIONS
   ======================================== */

.social-sidebar a {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.social-sidebar a:nth-child(1) {
  animation: fadeIn 0.5s ease-out 0.6s both;
}

.social-sidebar a:nth-child(2) {
  animation: fadeIn 0.5s ease-out 0.8s both;
}

/* ========================================
   FOOTER LINK HOVER
   ======================================== */

.footer-links a,
.footer-contact a {
  transition: color 0.3s ease;
}

/* ========================================
   LOADING SPINNER
   ======================================== */

.btn-submit.loading .btn-loading svg {
  animation: spin 0.8s linear infinite;
}

/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}