/*
 * fx.css — efectos visuales reutilizables (inspirados en React Bits, portados a CSS/JS sin React).
 * Se activan con atributos data-fx="..." y los inicializa home/js/fx.js.
 *
 *   data-fx="aurora"     Fondo WebGL animado (React Bits: Aurora)
 *   data-fx="count-up"   Número que sube al entrar en pantalla (React Bits: CountUp)
 *   data-fx="spotlight"  Brillo + borde que siguen al puntero (React Bits: SpotlightCard)
 *   .fx-blur-word        Palabra que entra desenfocada (React Bits: BlurText)
 *   .fx-edge-fade        Bordes difuminados para carruseles/marquees (React Bits: LogoLoop)
 *   .fx-gradient-text    Texto con degradado en movimiento (React Bits: GradientText)
 *   .fx-shiny            Brillo que recorre el texto (React Bits: ShinyText)
 *   .fx-glow-border      Borde luminoso que gira alrededor del botón (React Bits: StarBorder)
 *   data-fx-click-spark  Chispas al hacer clic en cualquier parte (React Bits: ClickSpark)
 */

/* ===== Aurora ===== */
.fx-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Respaldo si no hay WebGL: un degradado estático con los mismos colores */
  background:
    radial-gradient(60% 45% at 25% 0%, rgba(19, 109, 236, 0.22), transparent 70%),
    radial-gradient(55% 40% at 75% 0%, rgba(6, 182, 212, 0.20), transparent 70%);
}
.fx-aurora.is-webgl { background: none; }
.fx-aurora canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.fx-aurora.is-ready canvas { opacity: 1; }

/* ===== BlurText ===== */
.fx-blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(-0.35em);
  animation: fx-blur-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes fx-blur-in {
  60% { opacity: 0.6; filter: blur(4px); transform: translateY(0.05em); }
  to  { opacity: 1;   filter: blur(0);   transform: translateY(0); }
}

/* ===== CountUp ===== */
[data-fx="count-up"] { font-variant-numeric: tabular-nums; }

/* ===== SpotlightCard ===== */
[data-fx="spotlight"] {
  --spot-color: rgba(19, 109, 236, 0.20);
  --spot-border: rgba(19, 109, 236, 0.9);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Brillo interior */
[data-fx="spotlight"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), var(--spot-color), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* Borde que se ilumina cerca del puntero */
[data-fx="spotlight"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot-border), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
[data-fx="spotlight"]:hover::before,
[data-fx="spotlight"]:hover::after { opacity: 1; }

/* ===== Bordes difuminados (marquee) ===== */
.fx-edge-fade {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* ===== CountUp: "pop" al terminar ===== */
[data-fx="count-up"].is-done {
  display: inline-block;
  animation: fx-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fx-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.8)); }
  100% { transform: scale(1); }
}

/* ===== GradientText ===== */
.fx-gradient-text {
  background-image: var(--fx-gradient, linear-gradient(90deg, #136dec, #22d3ee, #a855f7, #136dec));
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: fx-gradient-pan 6s linear infinite;
}
@keyframes fx-gradient-pan {
  to { background-position: 300% 0; }
}

/* ===== ShinyText ===== */
.fx-shiny {
  background-image: linear-gradient(110deg, currentColor 38%, #22d3ee 46%, #a855f7 54%, currentColor 62%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-shine 3.2s linear infinite;
}
@keyframes fx-shine {
  from { background-position: 150% 0; }
  to   { background-position: -100% 0; }
}

/* ===== StarBorder / borde luminoso ===== */
@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fx-glow-border {
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--ap-accent, #136dec), var(--ap-accent, #136dec)) padding-box,
    conic-gradient(from var(--fx-angle), #136dec, #22d3ee, #a855f7, #fbbf24, #136dec) border-box !important;
  animation: fx-spin 3s linear infinite, fx-glow 3s ease-in-out infinite;
}
.fx-glow-border:hover {
  animation-duration: 1.2s, 3s;
  transform: translateY(-2px) scale(1.03);
}
@keyframes fx-spin { to { --fx-angle: 360deg; } }
@keyframes fx-glow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(19, 109, 236, 0.55), 0 0 0 0 rgba(34, 211, 238, 0); }
  50%      { box-shadow: 0 12px 32px -6px rgba(168, 85, 247, 0.55), 0 0 24px 2px rgba(34, 211, 238, 0.35); }
}

/* ===== ClickSpark ===== */
.fx-spark {
  position: fixed;
  width: 3px;
  height: 14px;
  margin: -7px 0 0 -1.5px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 100002;
  transform: rotate(var(--a)) translateY(0);
  animation: fx-spark 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes fx-spark {
  0%   { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scaleY(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-40px) scaleY(0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-blur-word { animation: none; opacity: 1; filter: none; transform: none; }
  .fx-gradient-text, .fx-shiny, .fx-glow-border, [data-fx="count-up"].is-done { animation: none; }
}