/* Los 6 efectos interactivos: lo mínimo para que funcionen.
   Los colores salen de variables; defínelas en la hoja de tu sitio:

     --fx-acento     color del progreso, los puntos y el cursor
     --fx-texto      color del texto del ticker
     --particula     "r, g, b" de las partículas 2D (sin rgba, solo los tres números)
     --sombra-alta   la sombra de una tarjeta levantada                          */

:root {
  --fx-acento: #4fc3e8;
  --fx-texto: currentColor;
  --particula: 120, 200, 255;
  --sombra-alta: 0 18px 40px -12px rgba(0, 0, 0, .35);
  --curva-salida: cubic-bezier(.22, 1, .36, 1);   /* sale rápido y frena: la curva "premium" */
}

/* `hidden` tiene que esconder SIEMPRE. Cualquier `display` que escribas le
   gana al atributo si no está esta regla (pasó de verdad, dos veces). */
[hidden] { display: none !important; }

/* Texto solo para lectores de pantalla. */
.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- FX 5: barra de progreso ---------- */
#progreso {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  height: 3px; z-index: 60;
  background: var(--fx-acento);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- FX 5: puntos laterales ---------- */
#puntos {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px; z-index: 50;
}
#puntos button {
  width: 10px; height: 10px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--fx-acento); background: transparent; cursor: pointer;
  transition: transform .18s var(--curva-salida), background-color .18s;
}
#puntos button[aria-current="true"] { background: var(--fx-acento); transform: scale(1.3); }
#puntos button:focus-visible { outline: 2px solid var(--fx-acento); outline-offset: 3px; }
@media (max-width: 760px) { #puntos { display: none; } }   /* en el celular estorban */

/* ---------- FX 2: cursor magnético ---------- */
#cursor-punto, #cursor-anillo {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; opacity: 0; border-radius: 50%;
  will-change: transform;
}
#cursor-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--fx-acento); }
#cursor-anillo {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border: 1.5px solid var(--fx-acento);
  transition: scale .2s var(--curva-salida), opacity .3s;
}
#cursor-anillo.encima { scale: 1.6; }
/* Sin mouse de verdad, no existen. */
@media (hover: none), (pointer: coarse) { #cursor-punto, #cursor-anillo { display: none; } }

/* ---------- FX 3: partículas 2D ---------- */
#ambiente { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- FX 4: inclinación 3D ----------
   La sombra NO se anima con box-shadow (rehace el pintado en cada cuadro):
   está siempre puesta en una capa de atrás y solo cambia su opacidad. */
.tilt {
  position: relative;
  transition: transform .35s var(--curva-salida);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: var(--sombra-alta); opacity: 0;
  transition: opacity .3s var(--curva-salida);
  pointer-events: none;
}
.tilt.levantada { transition: transform .08s linear; }   /* sigue al mouse sin retraso */
.tilt.levantada::after { opacity: 1; }

/* ---------- FX 6: ticker infinito ---------- */
.ticker-marco { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
#ticker { display: inline-flex; gap: 3rem; color: var(--fx-texto); animation: fx-ticker 32s linear infinite; }
#ticker span::after { content: "•"; margin-left: 3rem; opacity: .4; }
.ticker-marco:hover #ticker { animation-play-state: paused; }
@keyframes fx-ticker { to { transform: translateX(-50%); } }

/* ---------- FX 6: aparición al hacer scroll ----------
   La regla que esconde depende de `html.js-reveal`, que pone el JS. Sin JS,
   no hay regla que esconda: la página se ve entera. */
html.js-reveal .rv:not(.visto) { opacity: 0; transform: translateY(16px); }
.rv { transition: opacity .55s var(--curva-salida), transform .55s var(--curva-salida); }
/* Escalonado: hasta 6 hermanos, 60 ms entre uno y otro. Más que eso es una fila de esperas. */
.rv:nth-child(2) { transition-delay: 60ms; }
.rv:nth-child(3) { transition-delay: 120ms; }
.rv:nth-child(4) { transition-delay: 180ms; }
.rv:nth-child(5) { transition-delay: 240ms; }
.rv:nth-child(6) { transition-delay: 300ms; }

/* ---------- Extra: titular que se escribe ---------- */
.tecleo-cursor {
  display: inline-block; width: .06em; height: .9em; margin-left: .06em;
  background: currentColor; vertical-align: -.08em;
  animation: fx-parpadeo 1s steps(1) infinite;
}
@keyframes fx-parpadeo { 50% { opacity: 0; } }

/* ---------- Movimiento reducido ----------
   Se quita el MOVIMIENTO, no el contenido: todo queda visible y quieto. */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .rv:not(.visto) { opacity: 1; transform: none; }
  .rv, .tilt, .tilt::after, #puntos button { transition: none; }
  #ticker { animation: none; }
  .tecleo-cursor { animation: none; }
}