/* ============================================================
   SWIMTIFIC · CAPA DE ANIMACIÓN (FASE 1)
   ------------------------------------------------------------
   Archivo independiente y no destructivo. Mejora la landing sin
   tocar css/styles.css. Solo se activa cuando JS añade la clase
   `st-motion-ready` al contenedor (mejora progresiva: si JS
   falla o el usuario prefiere menos movimiento, la página se ve
   exactamente como antes).

   Paleta heredada del proyecto:
     · Cyan de acento:   #00f2fe
     · Azul secundario:  #4facfe
     · Fondo oscuro:     #0b0f19
     · Texto muted:      #94a3b8 / #cbd5e1
   ============================================================ */

/* ------------------------------------------------------------
   0. RAÍZ DE ACTIVACIÓN
   ------------------------------------------------------------ */
/* Mientras JS no confirme que está listo, no aplicamos nada. */
.st-motion-ready .st-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.st-motion-ready .st-reveal.st-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de entrada */
.st-motion-ready .st-reveal.st-reveal--left  { transform: translateX(-48px); }
.st-motion-ready .st-reveal.st-reveal--right { transform: translateX(48px); }
.st-motion-ready .st-reveal.st-reveal--left.st-reveal--visible,
.st-motion-ready .st-reveal.st-reveal--right.st-reveal--visible {
  transform: translateX(0);
}

/* Escalado sutil para tarjetas */
.st-motion-ready .st-reveal.st-reveal--scale { transform: scale(0.94); }
.st-motion-ready .st-reveal.st-reveal--scale.st-reveal--visible { transform: scale(1); }

/* Respeto a usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .st-motion-ready .st-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------
   1. HERO: GRADIENTE ANIMADO EN EL LOGOTIPO "Swimtific"
   ------------------------------------------------------------ */
.st-motion-ready .hero-title .gradient-text {
  background: linear-gradient(
    100deg,
    #00f2fe 0%,
    #4facfe 25%,
    #ffffff 50%,
    #4facfe 75%,
    #00f2fe 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: st-shimmer 7s ease-in-out infinite;
}

@keyframes st-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ------------------------------------------------------------
   2. HERO: ONDAS DE AGUA SUTILES DE FONDO
   Se añaden como pseudoelementos sobre la sección hero sin
   tocar el marcado. Usamos gradientes radiales difusos que
   se desplazan despacio para evocar el reflejo del agua.
   ------------------------------------------------------------ */
.st-motion-ready .hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.st-motion-ready .hero-section::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(40% 60% at 18% 20%, rgba(0, 242, 254, 0.10), transparent 70%),
    radial-gradient(45% 60% at 82% 30%, rgba(79, 172, 254, 0.12), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  animation: st-tide 16s ease-in-out infinite alternate;
}

.st-motion-ready .hero-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 242, 254, 0.35),
    rgba(79, 172, 254, 0.15),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  animation: st-tide-line 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes st-tide {
  0%   { transform: translate3d(-3%, 0, 0) scale(1);    opacity: 0.85; }
  100% { transform: translate3d(3%, -2%, 0) scale(1.05); opacity: 1; }
}

@keyframes st-tide-line {
  0%, 100% { transform: scaleX(0);    opacity: 0; }
  40%      { transform: scaleX(1);    opacity: 1; }
  60%      { transform: scaleX(1);    opacity: 1; }
}

/* ------------------------------------------------------------
   3. CONTADORES ANIMADOS (HERO FLOATING CARDS)
   El cursor parpadea mientras se "escribe" el número.
   ------------------------------------------------------------ */
.st-motion-ready .fc-text strong.is-st-counting::after {
  content: "|";
  margin-left: 1px;
  color: #00f2fe;
  animation: st-blink 0.8s step-end infinite;
}

@keyframes st-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ------------------------------------------------------------
   4. MICRO-INTERACCIONES
   ------------------------------------------------------------ */

/* 4a. Tilt 3D suave sobre los mockups de la landing */
.st-motion-ready .mockup-window {
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}

.st-motion-ready .mockup-window.st-tilt {
  box-shadow:
    0 25px 50px -12px rgba(0, 242, 254, 0.25),
    0 0 0 1px rgba(0, 242, 254, 0.15);
}

/* 4b. Pulso de "respiración" en los CTA principales del hero */
.st-motion-ready .login-wrapper .btn-coach,
.st-motion-ready .login-wrapper .btn-register {
  position: relative;
}

.st-motion-ready .login-wrapper .btn-coach::before,
.st-motion-ready .login-wrapper .btn-register::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(0, 242, 254, 0.45);
  animation: st-cta-pulse 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes st-cta-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0, 242, 254, 0.40); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(0, 242, 254, 0);    opacity: 0; }
  100% { box-shadow: 0 0 0 0   rgba(0, 242, 254, 0);    opacity: 0; }
}

/* 4c. Elevación de tarjetas de pricing al pasar el ratón */
.st-motion-ready .pricing-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, border-color 0.3s ease;
}

.st-motion-ready .pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 45px -15px rgba(0, 242, 254, 0.35);
}

/* 4d. Línea de acento bajo los títulos de sección al entrar */
.st-motion-ready .section-title {
  position: relative;
}

.st-motion-ready .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  transform: translateX(-50%);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.st-motion-ready .st-reveal--visible .section-title::after,
.st-motion-ready .section-title.st-reveal--visible::after {
  width: 64px;
}

/* ------------------------------------------------------------
   5. LINTERNA DE ENTRADA INICIAL DEL HERO (Solo Escritorio)
   Entrada en cascada del texto del hero al cargar.
   ------------------------------------------------------------ */
@media (min-width: 951px) {
  .st-motion-ready .hero-text > * {
    opacity: 0;
    animation: st-hero-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .st-motion-ready .hero-text > *:nth-child(1) { animation-delay: 0.15s; }
  .st-motion-ready .hero-text > *:nth-child(2) { animation-delay: 0.30s; }
  .st-motion-ready .hero-text > *:nth-child(3) { animation-delay: 0.45s; }
  .st-motion-ready .hero-text > *:nth-child(4) { animation-delay: 0.60s; }

  .st-motion-ready .login-wrapper {
    opacity: 0;
    animation: st-hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  }

  @keyframes st-hero-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-motion-ready .hero-text > *,
  .st-motion-ready .login-wrapper,
  .st-motion-ready .hero-title .gradient-text,
  .st-motion-ready .hero-section::before,
  .st-motion-ready .hero-section::after,
  .st-motion-ready .fc-text strong.is-st-counting::after,
  .st-motion-ready .login-wrapper .btn-coach::before,
  .st-motion-ready .login-wrapper .btn-register::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}