/* =====================================================================
   SkyTrading SmartPro — capa de efectos inmersivos
   Se carga después de style.css. Todo es aditivo: si el JS no corre,
   la web sigue funcionando igual.
   ===================================================================== */

/* ------------------------- VELO DE ENTRADA --------------------------- */
.fx-veil{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:var(--black);
  transition:opacity .7s var(--ease),visibility .7s;
}
.fx-veil.gone{opacity:0;visibility:hidden;pointer-events:none}
.fx-veil-mark{
  width:38px;height:38px;border-radius:12px;background:var(--grad);
  box-shadow:0 0 40px rgba(139,92,246,.7);
  animation:veilPulse 1.1s var(--ease) infinite alternate;
}
@keyframes veilPulse{
  from{transform:scale(.82) rotate(-6deg);opacity:.55}
  to  {transform:scale(1.06) rotate(6deg);opacity:1}
}

/* --------------------------- CURSOR SUAVE ---------------------------- */
/* El cursor nativo se mantiene visible: esto es sólo un halo que lo sigue. */
.fx-ring{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1px solid rgba(167,139,250,.32);
  background:radial-gradient(circle,rgba(139,92,246,.07),transparent 70%);
  opacity:0;transition:opacity .35s,width .3s var(--ease),height .3s var(--ease),
             margin .3s var(--ease),border-color .3s,background .3s;
  will-change:transform;
}
.fx-ring.on{opacity:1}
.fx-ring.hot{
  width:46px;height:46px;margin:-23px 0 0 -23px;
  border-color:rgba(196,181,253,.5);
  background:radial-gradient(circle,rgba(139,92,246,.12),transparent 72%);
}
.fx-trail{
  position:fixed;top:0;left:0;z-index:94;pointer-events:none;
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:rgba(196,181,253,.28);filter:blur(2px);opacity:0;
  transition:opacity .4s;will-change:transform;
}
.fx-trail.on{opacity:1}

/* ------------------------ PARTÍCULAS DE FONDO ------------------------ */
.fx-particles{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}

/* ------------------------- NAVEGACIÓN POR PUNTOS --------------------- */
.fx-dots{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:88;
  display:flex;flex-direction:column;gap:16px;align-items:flex-end;
  opacity:0;transition:opacity .5s var(--ease)
}
.fx-dots.on{opacity:1}
.fx-dot{display:flex;align-items:center;gap:10px;cursor:pointer;background:none;border:0;padding:0}
.fx-dot i{
  display:block;width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.22);transition:all .35s var(--ease)
}
.fx-dot span{
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);
  opacity:0;transform:translateX(8px);transition:all .35s var(--ease);white-space:nowrap
}
.fx-dot:hover span{opacity:1;transform:none}
.fx-dot:hover i{background:rgba(196,181,253,.7)}
.fx-dot.active i{background:var(--violet-2);box-shadow:0 0 0 4px rgba(139,92,246,.18),0 0 14px rgba(139,92,246,.8);transform:scale(1.25)}
.fx-dot.active span{opacity:1;transform:none;color:#d9d2f5}
@media (max-width:1180px){.fx-dots{display:none}}

/* --------------------- REVELADO PALABRA POR PALABRA ------------------ */
.fx-unit{
  display:inline-block;opacity:0;transform:translateY(18px) rotateX(-32deg);
  transform-origin:50% 100%;filter:blur(5px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
  will-change:transform,opacity
}
.fx-split.in .fx-unit{opacity:1;transform:none;filter:none}

/* ---------------------- BRILLO QUE SIGUE AL MOUSE -------------------- */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(139,92,246,.07),rgba(59,130,246,.03) 44%,transparent 66%);
  opacity:0;transition:opacity .4s var(--ease)
}
.fx-spot:hover::after{opacity:1}
/* borde que se ilumina del lado del cursor */
.fx-spot::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
             rgba(167,139,250,.3),transparent 60%);
  opacity:0;transition:opacity .4s var(--ease);padding:1px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
/* si el navegador no soporta el recorte del borde, no se muestra nada */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .fx-spot::before{display:none}
}
.fx-spot:hover::before{opacity:1}

/* --------------------------- BOTÓN MAGNÉTICO ------------------------- */
.fx-mag{will-change:transform}

/* ------------------------- LÍNEA DE SECCIÓN -------------------------- */
.fx-rule{
  height:1px;width:100%;margin:0 auto;position:relative;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.35),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.2s var(--ease)
}
.fx-rule.in{transform:scaleX(1)}

/* ----------------------------- TICKER -------------------------------- */
.fx-ticker{
  position:relative;z-index:1;overflow:hidden;padding:20px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.014);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
.fx-track{display:flex;width:max-content;animation:tick 52s linear infinite}
.fx-ticker:hover .fx-track{animation-play-state:paused}
.fx-track span{
  font-family:'Sora',sans-serif;font-size:13px;letter-spacing:3.4px;text-transform:uppercase;
  color:rgba(157,151,189,.6);white-space:nowrap;
  display:flex;align-items:center;gap:30px;padding:0 15px
}
.fx-track span::after{
  content:'';width:5px;height:5px;border-radius:50%;background:rgba(139,92,246,.45);flex:none
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------- VELAS DE FONDO --------------------------
   La tira mide el doble del ancho y se desplaza con una animación CSS.
   El navegador la resuelve en el compositor: no repinta nada por cuadro. */
.fx-candles{
  position:absolute;left:0;bottom:0;height:58%;width:200%;
  opacity:.14;pointer-events:none;z-index:0;
  will-change:transform;
  animation:fx-drift var(--dur,120s) linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%)
}
@keyframes fx-drift{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-50%,0,0)}
}
.adquirir .container{position:relative;z-index:1}
.adquirir{overflow:hidden}

/* capas del hero: cuanto más lejos, más desenfoque y más lentas.
   Una sola máscara vertical: apilar dos capas con mask-composite no
   funciona igual en todos los navegadores y llegaba a borrar el canvas. */
.hero .fx-candles{
  z-index:1;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)
}
.fx-candles-far {height:78%;opacity:.24;filter:blur(4px)}
.fx-candles-near{height:46%;opacity:.17;filter:blur(1.5px)}

/* el contenido del hero siempre por encima de las velas */
.hero-inner{z-index:2}
.hero .scroll-hint{z-index:2}
.hero .hero-glow{z-index:0}   /* el resplandor va detrás de las velas */

@media (max-width:640px){
  .fx-candles-near{display:none}
  .fx-candles-far{opacity:.2;filter:blur(3px)}
}

/* --------------------- ENTRADA CON ZOOM (imágenes) ------------------- */
.fx-zoom{
  opacity:0;transform:scale(.955) translateY(26px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)
}
.fx-zoom.in{opacity:1;transform:none}

/* ===================== FADE IN GENERAL AL SCROLLEAR ==================== */
.fx-fade{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  will-change:opacity,transform
}
.fx-fade.in{opacity:1;transform:none}

/* versión sólo opacidad, para elementos que ya usan transform (parallax) */
.fx-fadeo{opacity:0;transition:opacity .9s var(--ease)}
.fx-fadeo.in{opacity:1}

/* en los títulos el recorrido es más corto: las palabras ya se mueven solas */
.fx-split.fx-fade{transform:translateY(10px)}

/* --------------------- GLOW SUAVE EN EL HERO AL MOVER ---------------- */
.hero-glow{transition:transform .6s var(--ease)}

/* --------------------------- ACCESIBILIDAD --------------------------- */
/* Con "reducir movimiento" activado se conserva el fundido (no molesta a nadie)
   y se quita todo lo que implique desplazamiento, parpadeo o movimiento continuo. */
/* La clase la pone main.js según la preferencia del sistema y el parámetro
   ?anim= de la URL. Así se puede forzar el movimiento para previsualizar. */
html.reduce-motion .reveal,
html.reduce-motion .reveal-left,
html.reduce-motion .reveal-right{
  transform:none!important;
  transition:opacity .8s ease!important
}
html.reduce-motion .reveal.in,
html.reduce-motion .reveal-left.in,
html.reduce-motion .reveal-right.in{opacity:1!important}
html.reduce-motion .fx-fade,
html.reduce-motion .fx-fadeo{transform:none!important;transition:opacity .8s ease!important}
html.reduce-motion .fx-fade.in,
html.reduce-motion .fx-fadeo.in{opacity:1!important}
html.reduce-motion .fx-zoom{transform:none!important;transition:opacity .8s ease!important}
html.reduce-motion .fx-zoom.in{opacity:1!important}
html.reduce-motion .fx-unit{opacity:1;transform:none;filter:none;transition:none}
html.reduce-motion .fx-rule{transform:scaleX(1)}
html.reduce-motion .fx-track,
html.reduce-motion .fx-candles{animation:none}
/* las partículas y las velas se siguen viendo: quedan quietas, no molestan */
html.reduce-motion .fx-ring,
html.reduce-motion .fx-trail,
html.reduce-motion .fx-veil{display:none}
html.reduce-motion .testi-media,
html.reduce-motion .frame-vertical,
html.reduce-motion .feat{transition:none}
@media (hover:none){
  .fx-ring,.fx-trail{display:none}
}