/* ==========================================================================
   Francisco Nasich — Animaciones & Efectos de scroll
   Scroll reveal (.fi/.v) · Parallax hero · Blob animations
   ========================================================================== */

/* ─── Spotlight card glow ────────────────────────────────────── */
/* Asegura contexto de apilamiento en cards que no lo tienen */
.pain-card,
.t-metric,
.cred-card,
.option-card,
.faq-item {
  position: relative;
}

/* Surface glow: div.card-glow inyectado por JS */
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    260px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 110, 47, 0.09),
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.has-spotlight:hover > .card-glow {
  opacity: 1;
}

/* Border glow: ::before con técnica de mask CSS
   Solo en cards que no tienen ::before propio */
.has-spotlight-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;                  /* grosor del borde iluminado */
  border-radius: inherit;
  background: radial-gradient(
    220px at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 110, 47, 0.75),
    transparent 65%
  );
  /* Máscara: muestra solo el anillo del borde (excluye el interior) */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.has-spotlight-border:hover::before {
  opacity: 1;
}

/* --- Animaciones scroll --- */
.fi {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fi.v {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax suave en hero (controlado por JS) */
.hero-section.is-parallax .hero-bg-blobs {
  transform: translateY(var(--parallax-y, 0));
  transition: transform 0.1s linear;
}