/* ============================================================
   ANIMATIONS — CSS puro, premium, sin librerías JS pesadas
   ============================================================ */

/* ── Easing premium ── */
:root {
  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ════════════════════════════════════════════════════════════
   1. HERO — Slide-Up + Fade-In al cargar
   ════════════════════════════════════════════════════════════ */

.hero .hero-title,
.hero-card {
  animation-fill-mode: both;
}

.hero .hero-title {
  animation: heroSlideUp 0.9s var(--ease-premium) 0.15s both;
}

.hero-card {
  animation: heroSlideUp 0.8s var(--ease-premium) 0.5s both;
}

.hero-float-img,
.hero-float-card {
  animation-fill-mode: both;
}

.hero-float-img {
  animation: heroSlideRight 1s var(--ease-premium) 0.3s both;
}

.hero-float-card {
  animation: heroSlideRight 0.7s var(--ease-premium) 0.7s both;
}

@keyframes heroSlideUp {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes heroSlideRight {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── Hero underline accent ── */
.hero-underline {
  position: relative;
  display: inline-block;
  color: var(--accent);
  cursor: pointer;
}
.hero-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s;
  box-shadow: 0 0 6px var(--accent);
}
.hero-underline:hover::after {
  transform: scaleX(1);
  box-shadow: 0 0 14px var(--accent), 0 0 30px rgba(5, 150, 105, 0.3);
}

/* ── Scroll hint animation ── */

@media (prefers-reduced-motion: reduce) {
  .hero .hero-title,
  .hero-card,
  .hero-float-img,
  .hero-float-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════
   2. TARJETAS — Hover micro-interacciones premium
   ════════════════════════════════════════════════════════════ */

/* ── Shimmer text animation ── */
.word-shimmer {
  background: linear-gradient(
    105deg,
    var(--accent) 0%,
    var(--accent) 35%,
    #6ee7b7 48%,
    #a7f3d0 52%,
    var(--accent) 65%,
    var(--accent) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shimmer-slide 3.5s ease-in-out infinite;
}
.active .word-shimmer {
  opacity: 1;
}
@keyframes shimmer-slide {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

/* ── Plan cards hover ── */
.plan-card {
  transition:
    transform 0.5s var(--ease-premium),
    box-shadow 0.5s var(--ease-premium),
    border-color 0.4s;
}
.plan-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.06);
}
.plan-card .btn-primary {
  transition:
    transform 0.4s var(--ease-premium),
    background 0.3s,
    box-shadow 0.4s;
}
.plan-card:hover .btn-primary {
  transform: translateX(4px) translateY(-1px);
  box-shadow: 0 8px 28px rgba(5, 150, 105, 0.35);
}

/* ── Social icons hover ── */
.faq-item {
  transition:
    border-color 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium),
    transform 0.3s var(--ease-premium);
}
.faq-item:hover {
  transform: translateX(4px);
  border-color: var(--accent);
}

/* ── Social icons hover ── */
.contact-social a {
  transition:
    transform 0.4s var(--ease-bounce),
    color 0.3s,
    border-color 0.3s;
}
.contact-social a:hover {
  transform: translateY(-3px) scale(1.12);
}

/* ════════════════════════════════════════════════════════════
   3. SCROLL REVEAL — Entrada al hacer scroll
   ════════════════════════════════════════════════════════════ */

/* ── Clase base: oculto por defecto ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s var(--ease-premium),
    transform 0.8s var(--ease-premium);
}

/* ── Variantes de dirección ── */
.reveal-on-scroll.reveal-left {
  transform: translateX(-50px);
}
.reveal-on-scroll.reveal-right {
  transform: translateX(50px);
}
.reveal-on-scroll.reveal-scale {
  transform: translateY(30px) scale(0.92);
}

/* ── Activado ── */
.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Staggered delays ── */
.reveal-stagger-1 { transition-delay: 0s; }
.reveal-stagger-2 { transition-delay: 0.12s; }
.reveal-stagger-3 { transition-delay: 0.24s; }
.reveal-stagger-4 { transition-delay: 0.36s; }
.reveal-stagger-5 { transition-delay: 0.48s; }

/* ── CSS Scroll-Driven: navegadores compatibles (Chrome 115+) ── */
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    animation: revealScroll auto var(--ease-premium) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
    /* Se resetean al valor final de la animación sin depender de .active */
    opacity: 1;
    transform: none;
  }

  .reveal-on-scroll.reveal-left {
    animation: revealScrollLeft auto var(--ease-premium) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .reveal-on-scroll.reveal-right {
    animation: revealScrollRight auto var(--ease-premium) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .reveal-on-scroll.reveal-scale {
    animation: revealScrollScale auto var(--ease-premium) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}

@keyframes revealScroll {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes revealScrollLeft {
  0% { opacity: 0; transform: translateX(-50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes revealScrollRight {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes revealScrollScale {
  0% { opacity: 0; transform: translateY(30px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════
   4. PORTAFOLIO — Hover con zoom + brillo
   ════════════════════════════════════════════════════════════ */

.fan-card {
  border-radius: 1rem;
  overflow: hidden;
}

.fan-card img {
  transition:
    transform 0.7s var(--ease-premium),
    filter 0.5s var(--ease-premium);
  will-change: transform;
}

.fan-card:hover img {
  transform: scale(1.08);
  filter: brightness(1.05) contrast(1.03);
}

/* ════════════════════════════════════════════════════════════
   EXTRAS — Micro-animaciones adicionales
   ════════════════════════════════════════════════════════════ */

/* ── Input focus premium ── */
.form-input {
  transition:
    border-color 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium),
    transform 0.2s;
}
.form-input:focus {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1), 0 4px 12px rgba(5, 150, 105, 0.06);
}

/* ── Button submit hover ── */
.contact-form button[type="submit"] {
  transition:
    transform 0.4s var(--ease-premium),
    box-shadow 0.4s,
    background 0.3s;
}
.contact-form button[type="submit"]:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 40px rgba(5, 150, 105, 0.3);
}
.contact-form button[type="submit"]:active {
  transform: scale(0.98);
}

/* ── Link arrow animation ── */
.btn-link svg {
  transition: transform 0.35s var(--ease-premium);
}
.btn-link:hover svg {
  transform: rotate(90deg);
}

/* ── Nav link underline reveal ── */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-premium);
}
.nav-links a:not(.nav-cta):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-title,
  .hero-card,
  .hero-float-img,
  .hero-float-card {
    animation: none;
    opacity: 1;
    transform: none;
  }


  .stat-item:hover,
  .plan-card:hover,
  .faq-item:hover {
    transform: none;
  }

  .fan-card img {
    transition: none;
  }

}