/* ==========================================================
   Necton — animaciones
   CSS normal (no requiere recompilar Tailwind).
   Respeta "reducir movimiento" del sistema operativo.
   ========================================================== */

/* ---------- Portada: parallax y entrada ---------- */
.hero-parallax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: translate;
  animation: hero-zoom 1.8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes hero-zoom {
  from { scale: 1.12; }
  to   { scale: 1; }
}

.entrada {
  animation: subir .9s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--retraso, 0s);
}
@keyframes subir {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Botones ---------- */
.btn-primary, .btn-light, .btn-ghost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Destello que cruza el botón */
.btn-primary::after, .btn-light::after, .btn-ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate .7s ease;
  pointer-events: none;
}
.btn-light::after { background: linear-gradient(110deg, transparent 30%, rgba(92, 200, 220, .35) 50%, transparent 70%); }
.btn-primary:hover, .btn-light:hover, .btn-ghost:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(11, 42, 69, .55);
}
.btn-primary:hover::after, .btn-light:hover::after, .btn-ghost:hover::after { translate: 120% 0; }
.btn-primary:active, .btn-light:active, .btn-ghost:active {
  transform: translateY(0) scale(.97);
  box-shadow: none;
  transition-duration: .08s;
}

/* Redes sociales */
.red-social { transition: transform .25s ease, background-color .2s ease; }
.red-social:hover { transform: translateY(-3px) rotate(-6deg); }

/* ---------- Imágenes ---------- */
/* Zoom suave al pasar el cursor */
.zoom-img img { transition: transform .9s cubic-bezier(.22, .61, .36, 1); }
.zoom-img:hover img { transform: scale(1.06); }

/* Aparición al hacer scroll (solo si hay JavaScript) */
.js .revelar-img img {
  opacity: 0;
  scale: 1.12;
  transition: opacity 1s ease, scale 1.4s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1);
}
.js .revelar-img.visible img { opacity: 1; scale: 1; }

.js .revelar {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s ease, translate .8s cubic-bezier(.22, .61, .36, 1), transform .3s ease, box-shadow .3s ease;
}
.js .revelar.visible { opacity: 1; translate: 0 0; }
.js blockquote.revelar { transition-delay: .25s; }

/* Tarjetas: se elevan al pasar el cursor */
.tarjeta { transition: transform .3s ease, box-shadow .3s ease, opacity .8s ease, translate .8s cubic-bezier(.22, .61, .36, 1); }
.tarjeta:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(11, 42, 69, .45); }

/* Logos de partners */
.logo-partner { transition: transform .3s ease, filter .3s ease; filter: saturate(.85); }
.logo-partner:hover { transform: translateY(-4px) scale(1.05); filter: saturate(1); }

/* ---------- Diagramas ---------- */
/* Modelo Necton: los círculos se unen */
.venn-circulo { transform-box: fill-box; transform-origin: center; }
.js .venn .venn-circulo {
  opacity: 0;
  scale: .6;
  transition: opacity .7s ease, scale .9s cubic-bezier(.34, 1.4, .64, 1);
  transition-delay: calc(var(--i) * .15s);
}
.js .venn.visible .venn-circulo { opacity: 1; scale: 1; }

/* Perfil de inmersión: la línea se dibuja y aparecen las etapas */
.js .perfil .perfil-linea {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(.45, 0, .2, 1);
}
.js .perfil.visible .perfil-linea { stroke-dashoffset: 0; }
.perfil-punto { transform-box: fill-box; transform-origin: center; }
.js .perfil .perfil-punto {
  scale: 0;
  transition: scale .5s cubic-bezier(.34, 1.6, .64, 1);
  transition-delay: calc(var(--i) * .45s);
}
.js .perfil.visible .perfil-punto { scale: 1; }

/* ---------- Accesibilidad: sin animaciones si el usuario lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-parallax, .entrada { animation: none; }
  .js .revelar, .js .revelar-img img, .js .venn .venn-circulo, .js .perfil .perfil-punto {
    opacity: 1; translate: none; scale: none; transition: none;
  }
  .js .perfil .perfil-linea { stroke-dashoffset: 0; transition: none; }
  .btn-primary::after, .btn-light::after, .btn-ghost::after { display: none; }
  .btn-primary:hover, .btn-light:hover, .btn-ghost:hover, .tarjeta:hover, .zoom-img:hover img,
  .red-social:hover, .logo-partner:hover { transform: none; }
}