/**
 * animations.css — Utilidades de animación compartidas
 */

/* Texto letra por letra (usado por textReveal.js) */
.char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}

/* Estado inicial de líneas reveladas por scroll (usado por reveal.js con GSAP) */
.reveal-lines h1, .reveal-lines h2, .reveal-lines h3 { will-change: transform; }

/* Tilt 3D en tarjetas (aplicado vía tilt.js con transform inline) */
[data-tilt] { transform-style: preserve-3d; transition: transform 0.25s var(--ease-out); }

/* tilt.js y magnetic.js solo corren en desktop (mismo breakpoint que acá);
   will-change promueve una capa de composición por elemento, y en mobile
   esos elementos nunca animan — sería memoria de GPU tirada a la basura en
   gama media/baja. Se reserva solo para donde el efecto sí corre. */
@media (min-width: 861px) {
  [data-tilt] { will-change: transform; }
  [data-magnetic] { will-change: transform; }
}

/* Rotación lenta para watermarks de logo (isotipo de fondo por sección) */
@keyframes watermarkSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes watermarkSpinCenterY {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
@keyframes watermarkSpinCenterXY {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Anillos de crecimiento expandiéndose de fondo — compartido entre secciones (excepto hero) */
.section-rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.section-rings circle {
  fill: none;
  stroke: var(--c-marfil);
  stroke-width: 0.6;
  transform-origin: 500px 500px;
  animation: ringsExpandContract 7s ease-in-out infinite;
}
.section-rings circle:nth-child(even) { stroke: var(--c-terracota); opacity: 0.6; }
.section-rings circle:nth-child(1) { animation-delay: -0.6s; }
.section-rings circle:nth-child(2) { animation-delay: -1.2s; }
.section-rings circle:nth-child(3) { animation-delay: -1.8s; }
.section-rings circle:nth-child(4) { animation-delay: -2.4s; }
.section-rings circle:nth-child(5) { animation-delay: -3s; }
.section-rings circle:nth-child(6) { animation-delay: -3.6s; }
.section--light .section-rings circle { stroke: var(--c-cafe-albura); }

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

/* 8 secciones × ~6 círculos = ~48 animaciones infinitas corriendo siempre,
   incluso fuera de viewport — compositing constante de fondo mientras el
   usuario hace scroll en mobile. Es puro detalle decorativo (opacity 0.07),
   se apaga en mobile sin pérdida visual notoria. */
@media (max-width: 860px) {
  .section-rings circle { animation: none; }
}

/* Marca de foco visible para accesibilidad con teclado */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-terracota);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up { opacity: 1 !important; transform: none !important; }
}