/* ============================================================
   GlobalSoftServer — animaciones.css
   Logo animado + micro-interacciones (azul #2f7bff → cian #22d3ee)
   Se carga DESPUÉS de styles.css. Solo anima transform / opacity /
   filter / background-position para máximo rendimiento.
   ============================================================ */

/* ============================================================
   1. LOGO — La nube (svg): flotar suave + glow pulsante
   ============================================================ */
.logo svg {
  /* Dos animaciones en bucle: bobbing vertical + glow con drop-shadow */
  animation:
    logo-flotar 3.4s ease-in-out infinite,
    logo-glow 2.8s ease-in-out infinite;
  transform-origin: center;
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    filter .45s ease;
  will-change: transform, filter;
}

@keyframes logo-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes logo-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px rgba(34, 211, 238, .35))
      drop-shadow(0 0 4px rgba(47, 123, 255, .18));
  }
  50% {
    filter:
      drop-shadow(0 0 6px rgba(34, 211, 238, .75))
      drop-shadow(0 0 12px rgba(47, 123, 255, .45));
  }
}

/* Hover sobre el logo completo: la nube reacciona con más energía */
.logo:hover svg {
  /* El keyframe de rebote toma el mando; el glow se intensifica */
  animation:
    logo-rebote 1.6s ease-in-out infinite,
    logo-glow-fuerte 1.6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 8px rgba(34, 211, 238, .9))
    drop-shadow(0 0 16px rgba(47, 123, 255, .55));
}

@keyframes logo-rebote {
  0%, 100% { transform: translateY(0) scale(1.08) rotate(0deg); }
  30%      { transform: translateY(-4px) scale(1.12) rotate(-6deg); }
  60%      { transform: translateY(-1px) scale(1.1) rotate(4deg); }
}

@keyframes logo-glow-fuerte {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(34, 211, 238, .7))
      drop-shadow(0 0 12px rgba(47, 123, 255, .4));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(34, 211, 238, 1))
      drop-shadow(0 0 22px rgba(47, 123, 255, .7));
  }
}

/* ============================================================
   2. LOGO — Texto "SoftServer": shimmer degradado en bucle
   ============================================================ */
.logo .texto-degradado {
  /* Degradado más ancho para poder desplazarlo y crear el brillo */
  background: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-2) 25%,
    #ffffff 50%,
    var(--accent-2) 75%,
    var(--accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: logo-shimmer 4.5s linear infinite;
  will-change: background-position;
}

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

/* En hover el brillo recorre el texto más rápido */
.logo:hover .texto-degradado {
  animation-duration: 1.6s;
}

/* ============================================================
   3. LOGO — Conjunto: leve escala al hover
   ============================================================ */
.logo {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: left center;
}

.logo:hover {
  transform: scale(1.03);
}

/* ============================================================
   4. BOTONES — Sheen (brillo que cruza) + elevación al hover
   ============================================================ */
.boton {
  position: relative;
  overflow: hidden;
  /* Conserva las transiciones originales y añade filter */
  transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
}

/* Franja de brillo que atraviesa el botón */
.boton::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, .35) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.boton:hover::after {
  animation: boton-sheen .75s ease;
}

@keyframes boton-sheen {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

/* Elevación sutil (sin romper el translateY que ya trae .boton-primario) */
.boton-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(47, 123, 255, .5);
}

.boton-secundario:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 211, 238, .22);
}

/* ============================================================
   5. TARJETAS — Elevación + borde acento al hover
   ============================================================ */
.tarjeta,
.tarjeta-plan {
  transition:
    transform .3s cubic-bezier(.34, 1.4, .64, 1),
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.tarjeta:hover,
.tarjeta-plan:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(47, 123, 255, .25);
}

/* ============================================================
   6. TÍTULOS — Shimmer muy sutil y lento en encabezados
   (excluye el logo, que tiene su propia animación más rápida)
   ============================================================ */
.titulo-seccion .texto-degradado,
.hero h1 .texto-degradado {
  background: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent-2) 30%,
    #bfe9ff 50%,
    var(--accent-2) 70%,
    var(--accent) 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titulo-shimmer 8s linear infinite;
  will-change: background-position;
}

@keyframes titulo-shimmer {
  0%   { background-position: 220% center; }
  100% { background-position: -220% center; }
}

/* ============================================================
   7. Accesibilidad — desactivar animaciones en bucle
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .logo svg,
  .logo:hover svg,
  .logo .texto-degradado,
  .logo:hover .texto-degradado,
  .titulo-seccion .texto-degradado,
  .hero h1 .texto-degradado {
    animation: none !important;
  }

  /* El texto degradado del logo debe seguir siendo legible sin shimmer */
  .logo .texto-degradado {
    background: var(--gradient);
    background-size: auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .boton:hover::after { animation: none; }

  .logo,
  .logo svg,
  .boton,
  .boton-primario:hover,
  .boton-secundario:hover,
  .tarjeta,
  .tarjeta-plan {
    transition: none;
  }

  /* Conserva la señal de hover pero sin desplazamientos animados */
  .logo:hover,
  .logo:hover svg,
  .boton-primario:hover,
  .boton-secundario:hover,
  .tarjeta:hover,
  .tarjeta-plan:hover {
    transform: none;
  }
}