/* ==========================================================================
   FX layer — ambient & scroll-driven design
   Preloader · aurora mesh · cursor glow · film grain · curved dividers
   · richer reveals · parallax · pinned steps · scrollspy dots
   · split-text headlines · confetti. Reduced-motion safe.
   ========================================================================== */

/* Branded preloader -------------------------------------------------------- */
#ce-preloader {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  background: radial-gradient(900px 500px at 50% 40%, #16294b, var(--navy-900) 70%);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
#ce-preloader.done { opacity: 0; visibility: hidden; }
.pl-wrap { display: grid; place-items: center; gap: 20px; }
.pl-ring { position: relative; width: 104px; height: 104px; display: grid; place-items: center; }
.pl-ring svg.pl-track { position: absolute; inset: 0; transform: rotate(-90deg); }
.pl-ring .pl-emblem { width: 64px; height: 64px; animation: plPulse 1.6s ease-in-out infinite; }
.pl-name { font-family: var(--font-display); color: #fff; font-size: 1.05rem; letter-spacing: 0.02em; opacity: 0; animation: plFade 0.6s ease 0.25s forwards; }
.pl-name b { color: var(--gold-300); }
@keyframes plPulse { 0%, 100% { transform: scale(0.94); opacity: 0.85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes plFade { to { opacity: 1; } }
.pl-track circle { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 4; }
.pl-track circle.pl-arc { stroke: var(--gold-400); stroke-linecap: round; stroke-dasharray: 295; stroke-dashoffset: 295; animation: plArc 1.4s var(--ease) infinite; }
@keyframes plArc { 0% { stroke-dashoffset: 295; } 60% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 295; transform: rotate(360deg); } }
.pl-track { animation: plSpin 1.4s linear infinite; }
@keyframes plSpin { to { transform: rotate(360deg); } }
html.preloading, html.preloading body { overflow: hidden; }

/* Film grain --------------------------------------------------------------- */
.fx-grain {
  position: fixed; inset: -50%; z-index: 1440; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); } 25% { transform: translate(-4%, 3%); }
  50% { transform: translate(3%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(2%, 4%); }
}

/* Aurora mesh -------------------------------------------------------------- */
.fx-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-aurora b {
  position: absolute; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px;
  border-radius: 50%; filter: blur(70px); opacity: 0.45; mix-blend-mode: screen;
}
.fx-aurora b:nth-child(1) { background: radial-gradient(circle, #2a4a86, transparent 70%); top: -16%; left: -8%; animation: au1 18s ease-in-out infinite; }
.fx-aurora b:nth-child(2) { background: radial-gradient(circle, #b8860b, transparent 70%); bottom: -20%; right: -6%; opacity: 0.3; animation: au2 22s ease-in-out infinite; }
.fx-aurora b:nth-child(3) { background: radial-gradient(circle, #1f6fae, transparent 70%); top: 30%; right: 20%; opacity: 0.28; animation: au3 26s ease-in-out infinite; }
@keyframes au1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18%, 14%); } }
@keyframes au2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16%, -12%); } }
@keyframes au3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-12%, 16%) scale(1.15); } }
/* keep content above aurora in dark/hero sections */
.hero .container, .cta-band .inner, .bg-dark .container, .page-hero .container { position: relative; z-index: 1; }

/* Cursor-follow gold glow (dark sections) ---------------------------------- */
.fx-glow {
  position: fixed; width: 520px; height: 520px; border-radius: 50%; left: 0; top: 0;
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212,160,23,0.16), transparent 60%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.35s var(--ease);
}
.fx-glow.on { opacity: 1; }

/* Curved section dividers -------------------------------------------------- */
.fx-divider { position: absolute; left: 0; top: 0; width: 100%; line-height: 0; transform: translateY(-99%); pointer-events: none; z-index: 3; }
.fx-divider svg { display: block; width: 100%; height: 46px; }
@media (max-width: 640px) { .fx-divider svg { height: 28px; } }

/* Richer reveal (blur-in, applied on top of base .reveal) ------------------ */
.fx-reveal { filter: blur(9px); transition: filter 0.8s var(--ease); }
.fx-reveal.in { filter: blur(0); }

/* Scrollspy section dots --------------------------------------------------- */
.fx-dots { position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 13px; }
.fx-dots a { position: relative; width: 11px; height: 11px; border-radius: 50%; background: rgba(120,138,168,0.4); border: 1px solid rgba(120,138,168,0.6); transition: transform 0.25s var(--ease), background 0.25s; }
.fx-dots a:hover { background: var(--gold-400); }
.fx-dots a.active { background: var(--gold-500); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(184,134,11,0.18); }
.fx-dots a span {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: 0.76rem; font-weight: 600; color: #fff; background: var(--navy-800);
  padding: 5px 10px; border-radius: 7px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
  box-shadow: var(--shadow-sm);
}
.fx-dots a:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1180px) { .fx-dots { display: none; } }

/* Pinned 'how it works' ---------------------------------------------------- */
@media (min-width: 921px) {
  [data-pinned-steps] .feature-split > div:first-child { position: sticky; top: calc(var(--header-h) + 30px); align-self: start; }
}
[data-pinned-steps] .step { opacity: 0.4; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
[data-pinned-steps] .step.step-on { opacity: 1; }
[data-pinned-steps] .step.step-on::before { color: var(--gold-500); transform: scale(1.08); transform-origin: left; }
[data-pinned-steps] .step::before { transition: color 0.4s, transform 0.4s; }

/* Split-text headline ------------------------------------------------------ */
.fx-split .word { display: inline-block; overflow: hidden; vertical-align: top; }
.fx-split .word i { display: inline-block; font-style: inherit; transform: translateY(115%); transition: transform 0.7s var(--ease); }
.fx-split.in .word i { transform: none; }

/* Confetti canvas ---------------------------------------------------------- */
#fx-confetti { position: fixed; inset: 0; z-index: 2500; pointer-events: none; }

/* Animated success check (injected into form success) ---------------------- */
.fx-check { width: 26px; height: 26px; vertical-align: middle; margin-right: 8px; }
.fx-check circle { fill: none; stroke: var(--success); stroke-width: 3; stroke-dasharray: 76; stroke-dashoffset: 76; animation: drawc 0.5s var(--ease) forwards; }
.fx-check path { fill: none; stroke: var(--success); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: drawc 0.35s var(--ease) 0.35s forwards; }
@keyframes drawc { to { stroke-dashoffset: 0; } }

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-grain, .fx-aurora, .fx-glow { display: none !important; }
  .fx-reveal { filter: none; }
  .fx-split .word i { transform: none; }
  #ce-preloader { display: none !important; }
  .pl-track, .pl-track circle.pl-arc, .pl-ring .pl-emblem { animation: none; }
  [data-pinned-steps] .step { opacity: 1; }
  [data-pinned-steps] .feature-split > div:first-child { position: static; }
}