/* ssp/fx + ssp/race (fx.js). Loaded only on pages carrying either block.
   Transform and opacity only; nothing moves under prefers-reduced-motion. */

/* ---- Race ------------------------------------------------------------ */
.ssp.ssp-race{max-width:880px;margin:0 auto 40px;padding:32px 36px;border:1px solid rgba(209,188,255,.18);border-radius:24px;background:radial-gradient(120% 120% at 0% 0%,rgba(127,86,217,.16),transparent 55%),var(--card);box-sizing:border-box;}
.ssp-race .ssp-race-title{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--ink);}
.ssp-race .ssp-race-sub{margin:0 0 22px;font-size:15px;color:var(--muted);}
.ssp-race .ssp-race-heat{margin:0 0 22px;}
.ssp-race .ssp-race-heat-name{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary);}
.ssp-race .ssp-race-row{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 84px;align-items:center;gap:14px;margin:0 0 10px;}
.ssp-race .ssp-race-label{font-size:14px;font-weight:600;color:var(--muted);}
.ssp-race .is-ours .ssp-race-label{color:var(--ink);}
.ssp-race .ssp-race-track{position:relative;height:14px;border-radius:14px;background:rgba(255,255,255,.05);overflow:hidden;}
.ssp-race .ssp-race-bar{position:absolute;left:0;top:0;bottom:0;width:var(--w,100%);border-radius:14px;background:linear-gradient(90deg,#4b5468,#6b7488);transform-origin:left center;}
.ssp-race .is-ours .ssp-race-bar{background:linear-gradient(90deg,#7f56d9,#53d5fd);box-shadow:0 0 18px rgba(83,213,253,.55);}
.ssp-race .ssp-race-time{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;text-align:right;color:var(--muted);}
.ssp-race .is-ours .ssp-race-time{color:#53d5fd;}
.ssp-race .is-ours.is-done .ssp-race-time::after{content:" ✓";}
.ssp-race .ssp-race-note{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);}
@media (max-width:600px){
  .ssp.ssp-race{padding:24px 18px;}
  .ssp-race .ssp-race-row{grid-template-columns:minmax(0,1fr) 70px;}
  .ssp-race .ssp-race-label{grid-column:1/-1;}
}

/* ---- Wipes: speed line above section headings ------------------------ */
.ssp-fx-wipe{position:relative;}
.ssp-fx-wipe .ssp-fx-line{position:absolute;left:50%;top:-34px;width:min(720px,80vw);height:2px;margin-left:calc(min(720px,80vw) / -2);border-radius:2px;
  background:linear-gradient(90deg,transparent,#3a7bd5 20%,#7f56d9 55%,#53d5fd 85%,transparent);box-shadow:0 0 14px rgba(83,213,253,.6);transform:scaleX(0);transform-origin:left center;opacity:0;}
.ssp-fx-wipe.is-in .ssp-fx-line{animation:ssp-fx-speed 1.1s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes ssp-fx-speed{0%{transform:scaleX(0);opacity:1;}60%{transform:scaleX(1);opacity:1;}100%{transform:scaleX(1);opacity:.35;}}
.ssp-fx-wipe .ssp-sh-title{transition:opacity .6s ease .15s,transform .6s cubic-bezier(.2,.8,.2,1) .15s;}
.ssp-fx-wipe:not(.is-in) .ssp-sh-title{opacity:0;transform:translateY(14px);}

/* ---- Odometer flash on the pricing card ------------------------------ */
.ssp-fx-flash .ssp-plan-price{animation:ssp-fx-glow .7s ease;}
@keyframes ssp-fx-glow{0%{text-shadow:0 0 0 rgba(83,213,253,0);}35%{text-shadow:0 0 24px rgba(83,213,253,.75);}100%{text-shadow:0 0 0 rgba(83,213,253,0);}}

/* ---- Circuit traces behind the course hero --------------------------- */
.ssp-course-hero .ssp-fx-circuit{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55;}
.ssp-fx-circuit .ssp-fx-trace{fill:none;stroke:rgba(209,188,255,.12);stroke-width:1.5;}
.ssp-fx-circuit .ssp-fx-spark{fill:none;stroke:#53d5fd;stroke-width:2;stroke-linecap:round;stroke-dasharray:40 1600;stroke-dashoffset:1640;filter:drop-shadow(0 0 4px #53d5fd);animation:ssp-fx-pulse 6.5s linear infinite;}
@keyframes ssp-fx-pulse{to{stroke-dashoffset:0;}}

/* ---- Spotlight cards ------------------------------------------------- */
.ssp-fx-spot{position:relative;}
.ssp-fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(127,86,217,.18),transparent 60%);}
.ssp-fx-spot:hover::after{opacity:1;}
.ssp-fx-spot:hover{border-color:rgba(209,188,255,.4);}

/* ---- Stagger --------------------------------------------------------- */
.ssp-fx-js .ssp-fx-pre{opacity:0;transform:translateY(18px);}
.ssp-fx-stagger .ssp-features > *,.ssp-fx-stagger .ssp-faq > *,.ssp-fx-stagger .ssp-ch-list > *,.ssp-fx-stagger .ssp-reviews > *{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1),border-color .2s;}

/* ---- Live pulses ----------------------------------------------------- */
.ssp-fx-pulse .ssp-up-dot,.ssp-fx-pulse .ssp-dc-dot{animation:ssp-fx-live 2s ease-out infinite;}
@keyframes ssp-fx-live{0%{box-shadow:0 0 0 0 rgba(83,213,138,.6);}80%,100%{box-shadow:0 0 0 9px rgba(83,213,138,0);}}

@media (prefers-reduced-motion:reduce){
  .ssp-fx-wipe .ssp-fx-line,.ssp-fx-circuit .ssp-fx-spark,.ssp-fx-pulse .ssp-up-dot,.ssp-fx-flash .ssp-plan-price{animation:none;}
  .ssp-fx-wipe:not(.is-in) .ssp-sh-title{opacity:1;transform:none;}
}
