/* ================================================
   GRAPHICA — Animaciones de Entrada Reutilizables
   v1.0

   Uso:
   · Agrega la clase .grph-* al elemento en el HTML.
   · Un IntersectionObserver añade .visible cuando
     el elemento entra en la vista del usuario.
   · Las clases de rotación (.grph-spin) son
     inmediatas — no necesitan observer.
================================================ */

/* ── Keyframes ────────────────────────────────── */

@keyframes grph-entrada-izquierda {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes grph-entrada-derecha {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes grph-entrada-zoom {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes grph-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Blanco y negro → color al entrar en vista ── */
/* Observer añade la clase .visible al elemento    */

.grph-reveal-bw {
  filter: grayscale(100%);
  transition: filter 1.5s ease;
}

.grph-reveal-bw.visible {
  filter: grayscale(0%);
}

/* ── Zoom + fade al entrar en vista ─────────────── */
/* Ideal para headings. Observer añade .visible    */

.grph-zoom-fade {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.grph-zoom-fade.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Rotación continua ───────────────────────── */

.grph-spin {
  animation: grph-spin 12s linear infinite;
}

/* ── Zoom In (desde 0.3 a 1) ────────────────── */

@keyframes grph-zoom-in {
  0%  { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; }
}

.grph-zoom-in {
  opacity: 0;
}

.grph-zoom-in.visible {
  animation: grph-zoom-in 0.8s ease both;
}

/* ── Fade In ─────────────────────────────────── */

@keyframes grph-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.grph-fade-in {
  opacity: 0;
}

.grph-fade-in.visible {
  animation: grph-fade-in 0.8s ease both;
}

/* ── Fade In Up ──────────────────────────────── */

@keyframes grph-fade-in-up {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.grph-fade-in-up {
  opacity: 0;
}

.grph-fade-in-up.visible {
  animation: grph-fade-in-up 0.8s ease both;
}

/* ── Línea animada bajo enlaces ──────────────── */

@keyframes grph-link-line {
  0%   { width: 0%; }
  10%  { width: 100%; }
  90%  { width: 100%; }
  100% { width: 0%; }
}

.grph-link-animated {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.grph-link-animated::after {
  content: '';
  display: block;
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 0;
  animation: grph-link-line 5s linear infinite;
}

/* ── Salto (bounce) ──────────────────────────── */

@keyframes grph-salto {
  0%   { transform: translateY(0); }
  5%   { transform: translateY(-25px); }
  10%  { transform: translateY(0); }
  15%  { transform: translateY(-10px); }
  20%  { transform: translateY(0); }
  25%  { transform: translateY(-5px); }
  30%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.grph-salto {
  animation: grph-salto 3s ease infinite;
}