/* ============================================================================
   Siphrix — FX layer  ·  the "wow" polish (loads last)
   Film grain · button sheen · card spotlight · animated gradients · glow.
   100% self-contained — noise is an inline SVG data-URI, no external assets.
   ============================================================================ */

/* --- Film grain over everything (very subtle) ---------------------------- */
body::after { /* extend the existing grid wash with fine grain */
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 56px 56px, 56px 56px, 120px 120px;
}

/* --- Animated gradient text --------------------------------------------- */
.gradient-text {
  background: linear-gradient(110deg, var(--teal) 0%, var(--cyan) 35%, var(--teal-bright) 60%, var(--teal) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: grad-pan 7s linear infinite;
}
@keyframes grad-pan { to { background-position: 220% center; } }
@media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } }

/* --- Button sheen sweep -------------------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn-primary { background-size: 160% auto; }
.btn-primary:hover { background-position: right center; }

/* --- Card spotlight (uses --mx/--my set by site.js tilt) ----------------- */
[data-tilt] { position: relative; }
[data-tilt]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--t) var(--ease);
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(43,212,189,.14), transparent 60%);
}
[data-tilt]:hover::before { opacity: 1; }
[data-tilt] > * { position: relative; z-index: 1; }

/* --- Eyebrow shimmer ----------------------------------------------------- */
.eyebrow { position: relative; overflow: hidden; }
.eyebrow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(43,212,189,.18), transparent);
  transform: translateX(-100%); animation: eb-sheen 5s ease-in-out infinite;
}
@keyframes eb-sheen { 0%,60% { transform: translateX(-100%);} 80%,100% { transform: translateX(100%);} }
@media (prefers-reduced-motion: reduce) { .eyebrow::after { display: none; } }

/* --- Scroll progress glow ------------------------------------------------ */
.scroll-progress { box-shadow: 0 0 14px var(--allow-glow), 0 0 4px var(--teal); }

/* --- Section divider glow lines ------------------------------------------ */
.section + .section::before {
  content: ""; display: block; height: 1px; width: min(680px, 70%);
  margin: 0 auto; background: var(--grad-line); opacity: .5;
}

/* --- Heading entrance (paired with [data-reveal]) ------------------------ */
.js [data-reveal] h2 { background-clip: padding-box; }

/* --- Glow orbs (decorative, place with .glow-orb) ------------------------ */
.glow-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; }
.glow-orb.teal { background: radial-gradient(circle, rgba(43,212,189,.5), transparent 70%); }
.glow-orb.violet { background: radial-gradient(circle, rgba(139,123,255,.4), transparent 70%); }

/* --- Cursor-follow ambient glow (set by site.js) ------------------------- */
#cursor-glow {
  position: fixed; top: 0; left: 0; width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(43,212,189,.08), transparent 60%);
  transition: opacity .5s var(--ease); will-change: transform;
  transform: translate(var(--cx, -999px), var(--cy, -999px));
}
body:hover #cursor-glow { opacity: 1; }
@media (pointer: coarse) { #cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { #cursor-glow { display: none; } }

/* --- Stat / number flair ------------------------------------------------- */
.hero-meta .stat b, .kpi-card .k-val { text-shadow: 0 0 24px rgba(43,212,189,.18); }

/* --- Nav brand mark pulse ----------------------------------------------- */
.brand .mark { position: relative; }
.brand .mark::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  box-shadow: 0 0 0 0 var(--allow-glow); animation: mark-pulse 3.5s var(--ease) infinite;
}
@keyframes mark-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(43,212,189,.0);} 50% { box-shadow: 0 0 18px 2px rgba(43,212,189,.25);} }
@media (prefers-reduced-motion: reduce) { .brand .mark::after { animation: none; } }