/* Estilos de la capa de efectos (fx.js). Usa las variables de app.css. */

/* Partículas: detrás del contenido, delante del fondo */
#fx-particulas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* Barra de progreso de scroll */
#fx-progreso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 90; pointer-events: none;
  background: var(--amber); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  box-shadow: 0 0 10px rgba(255,180,60,.45); }

/* Resplandor del cursor */
#fx-cursor { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s var(--ease);
  transform: translate3d(var(--x, -500px), var(--y, -500px), 0);
  background: radial-gradient(closest-side, rgba(255,180,60,.075), rgba(255,180,60,.025) 55%, transparent); }
#fx-cursor.fx-listo { opacity: 1; }

/* Entrada de página */
@keyframes fx-entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-entrada { animation: fx-entrada .55s var(--ease) both; }

/* Revelado: solo se oculta si el JS está activo y el usuario admite movimiento */
.fx-js [data-reveal] { opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--fx-retardo, 0ms); }
.fx-js [data-reveal="izquierda"] { transform: translate3d(-34px, 0, 0); }
.fx-js [data-reveal="derecha"] { transform: translate3d(34px, 0, 0); }
.fx-js [data-reveal="zoom"] { transform: scale(.94); }
.fx-js [data-reveal].fx-visible { opacity: 1; transform: none; }

/* Tarjetas con inclinación y brillo */
.fx-tarjeta { position: relative; --fx-rx: 0deg; --fx-ry: 0deg; --fx-mx: 50%; --fx-my: 50%; }
.fx-js .fx-tarjeta, .fx-tarjeta[data-inclinar] { transform: perspective(900px) rotateX(var(--fx-rx)) rotateY(var(--fx-ry));
  transition: transform .25s var(--ease); }
.fx-reducido .fx-tarjeta { transform: none; }
.fx-tarjeta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .3s var(--ease);
  background: radial-gradient(260px circle at var(--fx-mx) var(--fx-my), rgba(255,180,60,.11), transparent 70%); }
.fx-tarjeta.fx-activa::after { opacity: 1; }

/* Capas de parallax: sin parpadeos al moverse */
[data-parallax], [data-capa] { backface-visibility: hidden; }

/* Movimiento reducido: todo visible y quieto */
@media (prefers-reduced-motion: reduce) {
  .fx-entrada { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  #fx-particulas, #fx-cursor { display: none; }
}