/* ==========================================================================
   efectos-web — hoja de estilos del módulo de movimiento
   Un solo archivo, sin dependencias. Se controla con variables CSS y con
   atributos data-fx en el HTML. Nada se oculta si el JavaScript no corre:
   las reglas que ocultan van todas bajo html.fx-on, que pone el propio JS.
   ========================================================================== */

:root {
  /* Paleta: sobrescríbelas con los colores del proyecto */
  --fx-accent: #e8963f;        /* color de acento: líneas al cursor, foco, cursor */
  --fx-ink: 15, 43, 64;        /* color base en RGB (sin rgb()) para las líneas */
  --fx-accent-rgb: 232, 150, 63;

  /* Intensidad: ver referencia "adaptacion-por-nicho.md" */
  --fx-rise: 18px;             /* cuánto sube un bloque al aparecer */
  --fx-speed: .7s;             /* duración de la aparición */
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-tilt: 5deg;             /* inclinación máxima de las tarjetas */
  --fx-lift: -4px;             /* elevación al pasar el ratón */
  --fx-parallax: 40px;         /* recorrido del parallax de los orbes */
}

/* ---------- 1. Aparición al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx-on [data-fx-reveal] {
    opacity: 0;
    transform: translateY(var(--fx-rise));
    transition: opacity var(--fx-speed) var(--fx-ease), transform var(--fx-speed) var(--fx-ease);
    transition-delay: var(--fx-delay, 0s);
  }
  html.fx-on [data-fx-reveal].is-fx-in { opacity: 1; transform: none; }
}

/* ---------- 2. Inclinación 3D y foco de luz ---------- */
[data-fx-tilt] {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg));
  transition: transform .6s var(--fx-ease), box-shadow .5s var(--fx-ease);
}
html.fx-on [data-fx-reveal][data-fx-tilt] { transform: perspective(900px) translateY(var(--fx-rise)); }
html.fx-on [data-fx-reveal][data-fx-tilt].is-fx-in { transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); }

[data-fx-spot] { position: relative; isolation: isolate; }
[data-fx-spot]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--fx-sx, 50%) var(--fx-sy, 50%), rgba(var(--fx-accent-rgb), .16), transparent 55%);
  opacity: 0; transition: opacity .4s ease;
}
[data-fx-spot]:hover::before { opacity: 1; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-fx-lift] { transition: transform .45s var(--fx-ease), box-shadow .45s ease, border-color .45s ease; }
  [data-fx-lift]:hover { transform: translateY(var(--fx-lift)); }
}

/* ---------- 3. Lienzo de partículas ---------- */
[data-fx-network] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------- 4. Orbes de color que siguen al ratón ---------- */
[data-fx-orbs] { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
[data-fx-orbs] > * {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform;
  transform: translate3d(calc(var(--fx-mx, 0) * var(--fx-k, 1) * var(--fx-parallax)), calc(var(--fx-my, 0) * var(--fx-k, 1) * var(--fx-parallax)), 0);
  transition: transform .8s var(--fx-ease);
}

/* ---------- 5. Palabra que rota en el titular ---------- */
[data-fx-rotator] > em { display: inline-block; font-style: inherit; transition: transform .5s var(--fx-ease), opacity .5s var(--fx-ease), filter .5s; }
[data-fx-rotator].is-fx-out > em { transform: translateY(-40%); opacity: 0; filter: blur(6px); }
[data-fx-rotator].is-fx-in > em { animation: fxWordIn .7s var(--fx-ease) both; }
@keyframes fxWordIn { from { transform: translateY(45%); opacity: 0; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }

/* ---------- 6. Banda deslizante ---------- */
[data-fx-marquee] { overflow: hidden; }
[data-fx-marquee] > * { display: flex; align-items: center; gap: 36px; width: max-content; animation: fxMarquee var(--fx-marquee-speed, 38s) linear infinite; }
[data-fx-marquee]:hover > * { animation-play-state: paused; }
@keyframes fxMarquee { to { transform: translateX(-50%); } }

/* ---------- 7. Cursor propio (solo ratón, opcional) ---------- */
.fx-cursor { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s; }
.fx-cursor.is-fx-on { opacity: 1; }
.fx-cursor__dot, .fx-cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.fx-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--fx-accent); }
.fx-cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(var(--fx-ink), .35);
  transition: width .35s var(--fx-ease), height .35s var(--fx-ease), margin .35s var(--fx-ease), background .3s, border-color .3s;
}
.fx-cursor.is-fx-hover .fx-cursor__ring {
  width: 70px; height: 70px; margin: -35px 0 0 -35px;
  background: rgba(var(--fx-accent-rgb), .12); border-color: rgba(var(--fx-accent-rgb), .6);
}
@media (hover: none), (pointer: coarse) { .fx-cursor { display: none; } }

/* ---------- 8. Barra de progreso de lectura ---------- */
[data-fx-progress] { transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

/* ---------- 9. Respeto al movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-fx-marquee] > * { animation-duration: 200s; }
  [data-fx-tilt], [data-fx-lift] { transition: none; }
}