/* ============================================================
   RELEVANTE.IA — CAPA FINAL DE EFECTOS
   Marquee · barra de progreso · flecha que dispara ·
   flash del canto · bases de magnético y tilt.
   Módulo aislado: no toca reglas existentes.
   ============================================================ */

/* ---------- Cortina lima entre páginas ---------- */
.transicion {
  position: fixed;
  inset: 0;
  background: var(--accent);
  z-index: 260;
  transform: translateY(100%);
  pointer-events: none;
}
.transicion.cubre {
  transition: transform 460ms cubic-bezier(0.7, 0, 0.2, 1);
  transform: translateY(0);
}
.transicion.cubre.se-va {
  transition: transform 520ms cubic-bezier(0.7, 0, 0.2, 1);
  transform: translateY(-100%);
}

/* ---------- Anillo del puntero ---------- */
.cursor-anillo {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 1.5px solid #FFFFFF;
  border-radius: 50%;
  pointer-events: none;
  z-index: 400;
  mix-blend-mode: difference;   /* se invierte solo: negro sobre blanco, blanco sobre negro */
  transition: width 250ms ease, height 250ms ease, margin 250ms ease, background 250ms ease, opacity 300ms ease;
  opacity: 0;
}
.cursor-anillo.esta-vivo { opacity: 1; }
.cursor-anillo.esta-activo {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: rgba(221, 245, 10, 0.28);
  border-color: var(--accent);
  mix-blend-mode: normal;
}

/* ---------- Barra de progreso de lectura ---------- */
.progreso-lectura {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 300;
  pointer-events: none;
}

/* ---------- Flecha del logo: dispara al hover ---------- */
.marca:hover .marca__flecha { animation: flecha-dispara 550ms cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes flecha-dispara {
  0%   { transform: translate(0, 0); opacity: 1; }
  42%  { transform: translate(12px, -12px); opacity: 0; }
  50%  { transform: translate(-12px, 12px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* ---------- Flash del canto al asentarse cada cara ---------- */
.cubo__canto.flash { animation: canto-flash 550ms ease; }
@keyframes canto-flash {
  0%   { box-shadow: 0 0 0 rgba(221, 245, 10, 0); }
  40%  { box-shadow: 0 0 28px 5px rgba(221, 245, 10, 0.95); opacity: 1; }
  100% { box-shadow: 0 0 0 rgba(221, 245, 10, 0); }
}

/* ---------- Bases de magnético y tilt (el JS pone el transform) ---------- */
.es-magnetico {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease;
  will-change: transform;
}
.es-magnetico.se-suelta { transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 250ms ease; }
.con-tilt { will-change: transform; }
.con-tilt.sin-transicion { transition: none !important; }