/* Conkavo FX — estilos de la capa de movimiento (ver conkavo-fx.js).
   Todo cuelga de atributos data-fx-* o clases fx-* que agrega el script:
   si el script no corre, nada de esto aplica y la página queda como siempre. */

/* ── Fondo animado del hero ──────────────────────────────────────────── */
.fx-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.8s cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.fx-hero-bg.is-on { opacity: 1; }
.fx-hero-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Velo para que el titular siempre se lea sobre el fondo */
.fx-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,13,10,.78) 0%, rgba(14,13,10,.42) 42%, rgba(14,13,10,0) 72%),
    linear-gradient(0deg, #0E0D0A 0%, rgba(14,13,10,0) 26%),
    linear-gradient(180deg, rgba(14,13,10,.55) 0%, rgba(14,13,10,0) 22%);
}
@media (max-width: 880px) {
  .fx-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(14,13,10,.3) 0%, rgba(14,13,10,.5) 45%, rgba(14,13,10,.28) 72%, #0E0D0A 100%);
  }
}
/* Copia del mismo fondo sobre la slide amarilla, como sombra dorada */
.fx-hero-bg-ink {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  mix-blend-mode: multiply; filter: invert(1) grayscale(1) contrast(1.15); opacity: .5;
}

/* ── Profundidad entre secciones apiladas ────────────────────────────── */
[data-fx-stack] { isolation: isolate; }
[data-fx-stack]::after {
  content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
  border-radius: inherit; background: #050403; opacity: var(--fx-dim, 0);
  will-change: opacity; /* capa propia: oscurecer no repinta la sección */
}

/* ── Titulares que suben palabra por palabra ─────────────────────────── */
.fx-line-mask { padding: .12em 0 .14em; margin: -.12em 0 -.14em; }
.fx-w { will-change: transform; }
/* Titulares que se "encienden" con el scroll: palabras en línea para no
   romper subrayados ni saltos de línea */
.fx-hw { display: inline !important; }

/* ── Pasos: línea dorada que avanza ──────────────────────────────────── */
[data-fx-step] { position: relative; }
[data-fx-step]::after {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: #DFBF12; box-shadow: 0 0 14px rgba(223,191,18,.75);
  transform: scaleX(var(--fx-p, 0)); transform-origin: left center;
}

/* ── Cinta amarilla: se inclina con la velocidad del scroll ──────────── */
[data-fx-marquee] [data-amb] > span {
  transform: skewX(var(--fx-skew, 0deg));
}

/* ── El hilo que recorre la página (dorado en oscuro, tinta en amarillo) ─ */
[data-fx-trace] { isolation: isolate; }
.fx-trace {
  position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; overflow: visible;
  color: #DFBF12; --fx-node-bg: #0E0D0A; --fx-hot: #FFF4BE;
}
.fx-trace.is-ink { color: #0E0D0A; --fx-node-bg: #DFBF12; --fx-hot: #0E0D0A; }
.fx-trace path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fx-trace.is-live { will-change: transform; } /* capa propia mientras está en pantalla */
.fx-trace .fx-trace-guide { stroke-width: 1; stroke-dasharray: 2 9; stroke-opacity: .1; }
.fx-trace.is-ink .fx-trace-guide { stroke-opacity: .16; }
.fx-trace .fx-trace-glow { stroke-width: 9; stroke-opacity: .15; }
.fx-trace .fx-trace-line { stroke-width: 1.8; }
.fx-trace-node { fill: var(--fx-node-bg); stroke: currentColor; stroke-width: 1.5; transition: fill .35s; }
.fx-trace-node.is-lit { fill: currentColor; }
.fx-trace-pulse { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; }
.fx-trace-head, .fx-trace-pkt { fill: var(--fx-hot); }
.fx-trace-pkt { fill-opacity: .85; }
@media (max-width: 899px) {
  .fx-trace .fx-trace-line { stroke-width: 1.5; }
  .fx-trace .fx-trace-glow { stroke-width: 6; }
}

/* ── Sólo con mouse: brillo que sigue al cursor, anillo y botones ────── */
@media (hover: hover) and (pointer: fine) {
  [data-fx-spot] { position: relative; isolation: isolate; }
  [data-fx-spot]::before,
  [data-fx-spot]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .4s ease;
  }
  [data-fx-spot]::before {
    z-index: -1;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(223,191,18,.14), transparent 62%);
  }
  [data-fx-spot]::after {
    padding: 1px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(223,191,18,.95), rgba(223,191,18,0) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
  }
  [data-fx-spot]:hover::before,
  [data-fx-spot]:hover::after { opacity: 1; }

  .fx-cursor {
    position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none;
    width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 1.5px solid #DFBF12; box-shadow: 0 0 0 1px rgba(14,13,10,.4), inset 0 0 0 1px rgba(14,13,10,.4);
    opacity: 0; transition: width .35s cubic-bezier(.16,1,.3,1), height .35s cubic-bezier(.16,1,.3,1),
      margin .35s cubic-bezier(.16,1,.3,1), background-color .35s, opacity .3s, border-color .35s;
  }
  .fx-cursor.is-on { opacity: 1; }
  .fx-cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background-color: rgba(223,191,18,.18); }
  .fx-cursor.is-text { opacity: 0; }
  .fx-cursor.is-down { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
}