/* ============================================================
   Selma — Signature FX styles
   Six brand-unique motion layers. Designed for restraint.
   ============================================================
   Imported by /ui_kits/marketing/styles.css (already pulls
   tokens). Keep selectors namespaced under .sfx- so this can
   be lifted into other surfaces (decks, dashboard, etc).
   ============================================================ */

/* ---------- 1. VOICE RIPPLES ----------
   Concentric ring emitted from a click point. 700ms fade.
   Element is injected as <span class="sfx-ripple"> at the
   click coords by signatureFX.js → initRipples(el).
*/
.sfx-ripple {
  position: absolute;
  width: 12px; height: 12px;
  margin-left: -6px; margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(129,140,248,0.55) 0%,
    rgba(6,182,212,0.35) 35%,
    rgba(236,72,153,0.20) 70%,
    transparent 80%);
  pointer-events: none;
  z-index: 100;
  animation: sfxRipple 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  mix-blend-mode: screen;
}
@keyframes sfxRipple {
  0%   { transform: scale(0.4); opacity: 0.85; }
  60%  { opacity: 0.45; }
  100% { transform: scale(28);  opacity: 0;    }
}

/* ---------- 2. AMBIENT WIND PARTICLES ----------
   Canvas overlay, no CSS for the dots themselves.
   Element + sizing rules only. */
.sfx-particles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* ---------- 3. AURORA HERO BG ----------
   Three layered radial-gradient sheets flowing on
   independent slow loops. Pure CSS, mobile-safe. */
.sfx-aurora {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.sfx-aurora__sheet {
  position: absolute;
  inset: -25%;
  filter: blur(60px);
  opacity: 0.35;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.sfx-aurora__sheet--a {
  background:
    radial-gradient(ellipse 60% 40% at 25% 35%, rgba(129,140,248,0.55), transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(129,140,248,0.30), transparent 60%);
  animation: sfxAuroraA 28s ease-in-out infinite;
}
.sfx-aurora__sheet--b {
  background:
    radial-gradient(ellipse 55% 35% at 70% 30%, rgba(6,182,212,0.45), transparent 60%),
    radial-gradient(ellipse 45% 30% at 20% 75%, rgba(6,182,212,0.25), transparent 60%);
  animation: sfxAuroraB 32s ease-in-out infinite;
}
.sfx-aurora__sheet--c {
  background:
    radial-gradient(ellipse 50% 30% at 50% 50%, rgba(236,72,153,0.30), transparent 65%),
    radial-gradient(ellipse 40% 25% at 90% 20%, rgba(236,72,153,0.18), transparent 65%);
  animation: sfxAuroraC 36s ease-in-out infinite;
  opacity: 0.25;
}
@keyframes sfxAuroraA {
  0%, 100% { transform: translate3d(0,0,0)   rotate(0deg); }
  33%      { transform: translate3d(40px,-20px,0) rotate(2deg); }
  66%      { transform: translate3d(-30px,30px,0) rotate(-1.5deg); }
}
@keyframes sfxAuroraB {
  0%, 100% { transform: translate3d(0,0,0)   rotate(0deg); }
  50%      { transform: translate3d(-50px,40px,0) rotate(-2deg); }
}
@keyframes sfxAuroraC {
  0%, 100% { transform: translate3d(0,0,0)   rotate(0deg); }
  40%      { transform: translate3d(35px,55px,0) rotate(1.5deg); }
  80%      { transform: translate3d(-45px,-30px,0) rotate(-1deg); }
}

/* ---------- 4. SOUNDWAVE BREATHING ----------
   Wraps the existing .soundwave with a sine-driven scale
   so the whole bar group breathes ~5s while individual
   bars still wave at 1.2s. */
.sfx-breath { animation: sfxBreath 5.5s ease-in-out infinite; transform-origin: center; }
@keyframes sfxBreath {
  0%, 100% { transform: scaleY(0.92); opacity: 0.85; }
  50%      { transform: scaleY(1.08); opacity: 1.00; }
}

/* ---------- 5. WORD-BY-WORD REVEAL ----------
   data-sfx-words attribute on a heading triggers JS to
   wrap each word in <span class="sfx-word">. CSS handles
   the staggered fade + light glitch. */
.sfx-word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sfx-word.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* Glitch tick — fires once at reveal */
.sfx-word.is-in {
  animation: sfxGlitch 320ms steps(3) 1;
}
@keyframes sfxGlitch {
  0%   { text-shadow: -2px 0 rgba(6,182,212,0.6), 2px 0 rgba(236,72,153,0.5); }
  50%  { text-shadow:  1px 0 rgba(129,140,248,0.5), -1px 0 rgba(6,182,212,0.4); }
  100% { text-shadow: none; }
}

/* ---------- 6. CURSOR GLOW ----------
   A 360px halo following the pointer across .sfx-cursor-zone.
   Pure CSS variables driven by JS (--cx, --cy). */
.sfx-cursor-zone { position: relative; }
.sfx-cursor-zone::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--cx, 50%) var(--cy, 50%),
              rgba(129,140,248,0.18) 0%,
              rgba(6,182,212,0.10) 30%,
              transparent 55%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 350ms ease;
  mix-blend-mode: screen;
}
.sfx-cursor-zone:hover::after { opacity: 1; }

/* ---------- Reduced motion + mobile fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  .sfx-aurora__sheet { animation: none; }
  .sfx-breath        { animation: none; }
  .sfx-word          { opacity: 1; filter: none; transform: none; transition: none; animation: none; }
  .sfx-ripple        { display: none; }
}
@media (hover: none), (max-width: 640px) {
  /* No cursor → no halo, no canvas particles */
  .sfx-cursor-zone::after { display: none; }
  .sfx-particles          { display: none; }
}