/* ============================================================
   LA FERRE · Animaciones web vivas
   Capa de movimiento sobre el build de Next.js. No cambia colores,
   tipografía ni layout: solo cómo se mueven las cosas.
   Reglas: 1 easing con rebote · 2 entradas escalonadas ·
           3 parallax por capas · 4 micromovimiento · 5 luz que sigue el puntero
   ============================================================ */

:root {
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --viva-in: 520ms;
  --viva-stagger: 80ms;
  --scroll: 0;
}

/* ---------- 1. Curvas con rebote en lo que ya existe ---------- */
.press {
  transition:
    transform 220ms var(--ease-bounce),
    background-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    outline-color 180ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .press:hover { transform: translateY(-2px); }
}
.press:active { transform: scale(0.96); }

.reveal {
  transition:
    opacity 600ms var(--ease-out),
    transform 600ms var(--ease-bounce);
}

/* ---------- 2. Entradas escalonadas ---------- */
@keyframes vivaIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.viva-stagger [data-viva] { opacity: 0; }
.viva-stagger.is-visible [data-viva] {
  animation: vivaIn var(--viva-in) var(--ease-bounce) both;
  animation-delay: calc(var(--i, 0) * var(--viva-stagger));
}
/* después de entrar, soltamos la animación para no pisar
   los estilos inline de React (filtros del catálogo, carrusel) */
.viva-stagger.is-done [data-viva] { opacity: 1; animation: none; }

/* ---------- 3. Parallax por capas (hero) ---------- */
.viva-parallax { will-change: transform; }
.viva-layer-back  { transform: translate3d(0, calc(var(--scroll) * -0.08px), 0); }
.viva-layer-mid   { transform: translate3d(0, calc(var(--scroll) *  0.22px), 0); }
.viva-layer-front { transform: translate3d(0, calc(var(--scroll) *  0.06px), 0); }
@media (max-width: 767px) {
  .viva-layer-back  { transform: translate3d(0, calc(var(--scroll) * -0.04px), 0); }
  .viva-layer-mid   { transform: translate3d(0, calc(var(--scroll) *  0.10px), 0); }
  .viva-layer-front { transform: none; }
}

/* ---------- 4. Micromovimiento constante ---------- */
@keyframes vivaFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-5px); }
}
@keyframes vivaBreathe {
  from { transform: scale(1); }
  to   { transform: scale(1.03); }
}
@keyframes vivaTilt {
  from { transform: rotate(-1.2deg) translateY(0); }
  to   { transform: rotate(1.2deg) translateY(-3px); }
}
.viva-float   { animation: vivaFloat 3.6s var(--ease-in-out) infinite alternate; }
.viva-breathe { animation: vivaBreathe 4s var(--ease-in-out) infinite alternate; }
.viva-tilt    { animation: vivaTilt 4.4s var(--ease-in-out) infinite alternate; }
.viva-float.press:hover,
.viva-breathe.press:hover { animation-play-state: paused; }
/* desfase para que no se muevan al unísono */
.viva-d1 { animation-delay: -0.9s; }
.viva-d2 { animation-delay: -1.8s; }
.viva-d3 { animation-delay: -2.7s; }

/* ---------- 5. Luz que sigue el puntero ---------- */
.viva-glow { position: relative; isolation: isolate; }
.viva-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    var(--glow-c, rgba(255, 255, 255, 0.28)),
    transparent 42%
  );
  transition: opacity 400ms var(--ease-out);
}
.viva-glow.is-lit::after { opacity: 1; }
/* sobre amarillo el brillo debe ser más marcado, sobre navy más suave */
.viva-glow.bg-yellow { --glow-c: rgba(255, 255, 255, 0.5); }
.viva-glow.bg-navy, .viva-glow.bg-wa { --glow-c: rgba(255, 255, 255, 0.22); }
/* sobre cards blancas el brillo es azul marino muy tenue */
#catalogo article.viva-glow { --glow-c: rgba(8, 8, 94, 0.09); }
/* borde con gradiente que se desplaza en hover (cards del catálogo) */
.viva-glow-border { position: relative; }
.viva-glow-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0 60%,
    var(--yellow, #ffea00) 70%,
    transparent 80%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .viva-glow-border:hover::before { opacity: 1; animation: vivaSpin 2.4s linear infinite; }
}
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes vivaSpin { to { --angle: 360deg; } }

/* ---------- Accesibilidad / rendimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .press { transition-duration: 120ms; transition-timing-function: var(--ease-out); }
  .press:hover { transform: none; }
  .reveal { transition: opacity 300ms linear; transform: none; }
  .viva-stagger [data-viva] { opacity: 1; animation: none !important; }
  .viva-layer-back, .viva-layer-mid, .viva-layer-front { transform: none !important; }
  .viva-float, .viva-breathe, .viva-tilt { animation: none !important; }
  .viva-glow::after, .viva-glow-border::before { display: none; }
}