/* ============================================================
   SPARTACUS — FX LAYER (showpiece effects)
   Loads AFTER ux.css. Adds the "premium" flourishes:
   gold glitter, animated text, section transitions, spotlights.

     11  Glitter + gold dust
     12  Animated headings (shine, word reveal)
     13  Section transitions + dividers
     14  Cursor spotlight on cards
     15  Advanced button variants
     16  Image reveals
     17  Reduced-motion overrides
   ============================================================ */

/* ---------- 11 · GLITTER + GOLD DUST ---------- */
/* Canvas field painted by fx.js — fixed, behind content, above the aurora. */
#fx-dust{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.55;mix-blend-mode:screen;
}
/* Sparkle burst particles (spawned on click / on CTA hover) */
.sprk{
  position:fixed;width:6px;height:6px;pointer-events:none;z-index:9998;
  background:radial-gradient(circle,#fff6d8 0%,var(--gold-2) 35%,rgba(233,196,90,0) 70%);
  border-radius:50%;
  animation:sprkFly var(--sd,.7s) cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sprkFly{
  0%  {transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx,0),var(--dy,0)) scale(.2);opacity:0}
}
/* Static twinkles that sit on gold accents */
.twinkle{position:relative}
.twinkle::before,.twinkle::after{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(233,196,90,.65) 30%,transparent 62%);
  opacity:0;
}
.twinkle::before{top:-6px;right:-4px;animation:tw 3.4s var(--e-smooth) infinite}
.twinkle::after {bottom:-4px;left:-6px;animation:tw 3.4s var(--e-smooth) 1.7s infinite}
@keyframes tw{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  45%    {opacity:1;transform:scale(1.15) rotate(45deg)}
  60%    {opacity:.25;transform:scale(.8) rotate(70deg)}
}

/* ---------- 12 · ANIMATED HEADINGS ---------- */
/* Word-by-word rise. fx.js wraps words in <span class="w"><i>word</i></span>. */
/* NOTE: .fx-words is applied to the heading itself — never set `display`
   here or a block <h1> turns inline and collapses into the line above it. */
.fx-words .w{display:inline-block;overflow:hidden;vertical-align:top}
.fx-words .w > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%) rotate(2deg);opacity:0;
  transition:transform .75s var(--e-out),opacity .55s var(--e-out);
  transition-delay:calc(var(--i,0) * 55ms);
}
.fx-words.in .w > i{transform:none;opacity:1}

/* Light sweep across big headings when they enter view */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.30) 50%,transparent 64%);
  transform:translateX(-115%);
}
.fx-shine.in::after{animation:shineSweep 1.5s var(--e-out) .35s}
@keyframes shineSweep{to{transform:translateX(115%)}}

/* Gold underline that draws itself under section titles */
.section-title.in::after,.page-title.in::after{
  content:"";display:block;height:3px;width:0;margin-top:14px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--gold-2),transparent);
  animation:drawLine 1s var(--e-out) .3s forwards;
}
@keyframes drawLine{to{width:190px}}

/* ---------- 13 · SECTION TRANSITIONS + DIVIDERS ---------- */
/* Whole-section entrance: content lifts + a soft glow passes through. */
.fx-sec{position:relative}
.fx-sec::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(233,196,90,.55),transparent);
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform 1.1s var(--e-out);
}
.fx-sec.in::before{transform:scaleX(1)}
/* animated diagonal light bar that drifts behind alternating sections */
.fx-sec.in::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(115deg,transparent 42%,rgba(225,29,42,.07) 50%,transparent 58%);
  background-size:260% 100%;
  animation:barDrift 14s linear infinite;
}
@keyframes barDrift{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* Scroll-linked parallax (fx.js sets --py) */
.fx-par{transform:translate3d(0,var(--py,0),0);will-change:transform}

/* ---------- 14 · CURSOR SPOTLIGHT ---------- */
/* fx.js sets --mx/--my on hovered cards; a soft gold light follows the pointer. */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;border-radius:inherit;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(233,196,90,.16),rgba(225,29,42,.08) 38%,transparent 62%);
  transition:opacity var(--t-slow) var(--e-out);
}
.fx-spot:hover::before{opacity:1}
.fx-spot > *{position:relative;z-index:1}

/* ---------- 15 · ADVANCED BUTTON VARIANTS ---------- */
/* Animated gradient border that traces the CTA */
.btn-gold,.btn-primary{background-size:180% 180%;animation:gradShift 8s var(--e-smooth) infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* glow ring that expands on hover */
.btn-primary::after,.btn-gold::after{transition:opacity var(--t-mid) var(--e-out)}
.btn-primary:hover,.btn-gold:hover{filter:saturate(1.12) brightness(1.06)}
/* ghost buttons draw a gold border on hover */
.btn-ghost{background-image:linear-gradient(90deg,var(--gold),var(--red));background-size:0% 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size var(--t-slow) var(--e-out),transform var(--t-mid) var(--e-spring),border-color var(--t-mid),color var(--t-mid)}
.btn-ghost:hover{background-size:100% 2px}
/* nav "Book Trial" gets a permanent soft heartbeat so the CTA never disappears */
.nav-cta .btn-primary{animation:gradShift 8s var(--e-smooth) infinite,ctaBeat 3.6s var(--e-smooth) infinite}
@keyframes ctaBeat{
  0%,100%{box-shadow:0 14px 30px -10px var(--red-glow),0 0 0 0 rgba(225,29,42,.45)}
  55%    {box-shadow:0 18px 36px -10px var(--red-glow),0 0 0 12px rgba(225,29,42,0)}
}

/* ---------- 16 · IMAGE REVEALS ---------- */
/* Images wipe in behind a gold edge instead of just fading. */
.fx-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--e-out)}
.fx-wipe.in{clip-path:inset(0 0 0 0)}

/* ---------- 17 · REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  #fx-dust{display:none}
  .sprk,.twinkle::before,.twinkle::after{display:none}
  .fx-words .w > i{transform:none!important;opacity:1!important;transition:none}
  .fx-shine::after,.fx-sec::after{display:none}
  .section-title.in::after,.page-title.in::after{animation:none;width:190px}
  .fx-sec::before{transform:scaleX(1)}
  .fx-par{transform:none!important}
  .fx-wipe{clip-path:none!important;transition:none}
  .btn-gold,.btn-primary,.nav-cta .btn-primary{animation:none}
}

/* Phones: drop the heaviest effects to protect scroll performance */
@media (max-width:640px){
  #fx-dust{opacity:.35}
  .fx-spot::before{display:none}      /* no cursor on touch anyway */
  .fx-sec.in::after{display:none}
}