/* ===========================
   INDEX — ANIMATIONS
   =========================== */

/* ——— Keyframes ——— */

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

@keyframes idxRevealLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0);     }
}

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

@keyframes idxRevealScale {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes idxRevealScaleBounce {
  from { opacity: 0; transform: scale(0.9) translateY(40px); }
  70%  { opacity: 1; transform: scale(1.02) translateY(-5px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

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

@keyframes idxFloatBlob {
  0%,  100% { transform: translate(0,    0)     scale(1);    }
  33%        { transform: translate(28px, -20px) scale(1.05); }
  66%        { transform: translate(-18px, 16px) scale(0.95); }
}

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

@keyframes idxCountPulse {
  0%,  100% { transform: scale(1);    }
  50%        { transform: scale(1.07); }
}

@keyframes idxLineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes idxConnectorDraw {
  from { transform: scaleX(0); transform-origin: left center; }
  to   { transform: scaleX(1); transform-origin: left center; }
}

@keyframes idxStepCirclePop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ===========================
   SCROLL REVEAL — Universal
   =========================== */

[data-reveal-idx] {
  opacity: 0;
}

[data-reveal-idx="up"]    { transform: translateY(28px); }
[data-reveal-idx="left"]  { transform: translateX(-28px); }
[data-reveal-idx="right"] { transform: translateX(28px); }
[data-reveal-idx="scale"] { transform: scale(0.93) translateY(14px); }

[data-reveal-idx="up"].is-revealed-idx    { animation: idxRevealUp    0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal-idx="left"].is-revealed-idx  { animation: idxRevealLeft  0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal-idx="right"].is-revealed-idx { animation: idxRevealRight 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal-idx="scale"].is-revealed-idx { animation: idxRevealScale 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal-idx="fade"].is-revealed-idx  { animation: idxFadeIn      0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }

[data-reveal-idx].is-revealed-idx {
  animation-delay: var(--delay, 0ms);
}

/* ===========================
   HERO — Page-Load Animations
   =========================== */

.hero-section {
  isolation: isolate;
}

/* Blobs sit behind tsparticles (z-index 1) */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: idxFloatBlob var(--blob-duration, 16s) ease-in-out infinite;
  animation-delay: var(--blob-delay, 0s);
}

.hero-blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 40% 40%, #3b82f6, #1e40af);
  opacity: 0.08;
  top: -160px;
  right: -120px;
  --blob-duration: 18s;
  --blob-delay: 0s;
}

.hero-blob--2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle at 60% 60%, #93c5fd, #3b82f6);
  opacity: 0.10;
  bottom: -100px;
  left: -80px;
  --blob-duration: 13s;
  --blob-delay: -6s;
}

.hero-blob--3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #bfdbfe, #60a5fa);
  opacity: 0.09;
  top: 30%;
  left: 20%;
  --blob-duration: 20s;
  --blob-delay: -10s;
}

/* Immediate load animation for hero content children */
.hero-animate .hero-location {
  animation: idxRevealUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}

.hero-animate h1 {
  animation: idxRevealUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.32s;
}

.hero-animate p {
  animation: idxRevealUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.47s;
}

.hero-animate .hero-content-actions {
  animation: idxRevealUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.62s;
}

/* CTA shimmer */
.btn-hero {
  position: relative;
  overflow: hidden;
}

.btn-hero.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent   35%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent   65%
  );
  background-size: 200% 100%;
  animation: idxShimmer 3s linear infinite;
  animation-delay: 1.2s;
  pointer-events: none;
}

/* ===========================
   SISTEMA ATOM — Header + Grid Stagger
   =========================== */

.sistema-atom-grid .atom-feature {
  opacity: 0;
  transform: translateY(26px);
}

.sistema-atom-grid.is-revealed-idx .atom-feature {
  animation: idxRevealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sistema-atom-grid.is-revealed-idx .atom-feature:nth-child(1) { animation-delay: 0ms;   }
.sistema-atom-grid.is-revealed-idx .atom-feature:nth-child(2) { animation-delay: 110ms; }
.sistema-atom-grid.is-revealed-idx .atom-feature:nth-child(3) { animation-delay: 220ms; }

/* ===========================
   MATERIAS — Grid Stagger
   =========================== */

/* Animación de los Planes (Cards en materias.php) */
.planes-grid .plan-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.planes-grid.is-revealed-idx .plan-card {
  animation: idxRevealScaleBounce 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.planes-grid.is-revealed-idx .plan-card:nth-child(1) { animation-delay: 100ms; }
.planes-grid.is-revealed-idx .plan-card:nth-child(2) { animation-delay: 250ms; }
.planes-grid.is-revealed-idx .plan-card:nth-child(3) { animation-delay: 400ms; }

/* Mantener compatibilidad si es que se usa materias-grid en otro lado */
.materias-grid .materia-card {
  opacity: 0;
  transform: translateY(26px);
}

.materias-grid.is-revealed-idx .materia-card {
  animation: idxRevealScaleBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.materias-grid.is-revealed-idx .materia-card:nth-child(1) { animation-delay: 0ms;   }
.materias-grid.is-revealed-idx .materia-card:nth-child(2) { animation-delay: 100ms;  }
.materias-grid.is-revealed-idx .materia-card:nth-child(3) { animation-delay: 200ms; }
.materias-grid.is-revealed-idx .materia-card:nth-child(4) { animation-delay: 300ms; }
.materias-grid.is-revealed-idx .materia-card:nth-child(5) { animation-delay: 400ms; }
.materias-grid.is-revealed-idx .materia-card:nth-child(6) { animation-delay: 500ms; }

/* ===========================
   STATS — Counter + Dividers
   =========================== */

.stat-item {
  position: relative;
}

.stat-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--divider-delay, 0.1s);
}

.stats.is-revealed-idx .stat-item::after {
  transform: scaleY(1);
}

.stat-item:last-child::after {
  display: none;
}

.stat-number.count-done {
  animation: idxCountPulse 0.4s ease;
}

/* ===========================
   PROCESO — Step-by-step Stagger
   =========================== */

.proceso-step {
  opacity: 0;
  transform: translateY(24px);
}

.proceso-steps.is-revealed-idx .proceso-step {
  animation: idxRevealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.proceso-steps.is-revealed-idx .proceso-step:nth-child(1) { animation-delay: 0ms;   }
.proceso-steps.is-revealed-idx .proceso-step:nth-child(2) { animation-delay: 130ms; }
.proceso-steps.is-revealed-idx .proceso-step:nth-child(3) { animation-delay: 260ms; }
.proceso-steps.is-revealed-idx .proceso-step:nth-child(4) { animation-delay: 390ms; }

/* Connector line draws left-to-right after step appears */
.step-connector {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.proceso-steps.is-revealed-idx .proceso-step:nth-child(1) .step-connector { transition-delay: 250ms; }
.proceso-steps.is-revealed-idx .proceso-step:nth-child(2) .step-connector { transition-delay: 380ms; }
.proceso-steps.is-revealed-idx .proceso-step:nth-child(3) .step-connector { transition-delay: 510ms; }

.proceso-steps.is-revealed-idx .step-connector {
  transform: scaleX(1);
}

/* ===========================
   OPINIONES — Cards Stagger
   =========================== */

.opiniones-grid .opinion-card {
  opacity: 0;
  transform: translateY(26px);
}

.opiniones-grid.is-revealed-idx .opinion-card {
  animation: idxRevealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.opiniones-grid.is-revealed-idx .opinion-card:nth-child(1) { animation-delay: 0ms;   }
.opiniones-grid.is-revealed-idx .opinion-card:nth-child(2) { animation-delay: 100ms; }
.opiniones-grid.is-revealed-idx .opinion-card:nth-child(3) { animation-delay: 200ms; }

/* ===========================
   UBICACIÓN — Details Reveal
   =========================== */

.ubicacion-detail[data-reveal-idx] {
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .ubicacion-detail[data-reveal-idx="up"] {
    transform: translateY(18px);
  }

  .ubicacion-map[data-reveal-idx="scale"] {
    transform: scale(0.96) translateY(10px);
  }
}

/* ===========================
   REDUCE MOTION — Accessibility
   =========================== */

@media (prefers-reduced-motion: reduce) {
  [data-reveal-idx],
  .hero-animate .hero-location,
  .hero-animate h1,
  .hero-animate p,
  .hero-animate .hero-content-actions,
  .sistema-atom-grid .atom-feature,
  .materias-grid .materia-card,
  .proceso-step,
  .opiniones-grid .opinion-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .hero-blob {
    animation: none !important;
  }

  .btn-hero.btn-primary::after {
    animation: none !important;
  }

  .step-connector {
    transform: scaleX(1) !important;
    transition: none !important;
  }

  .stat-item::after {
    transform: scaleY(1) !important;
    transition: none !important;
  }
}