/* ===== CYBER HACKED · shared visual effects =====
   Loaded on every page. Everything here is decorative: if this file or
   fx.js fails to load, every page still looks and works as before.
   Kept deliberately light: no blend modes, no will-change, no blur on large
   blocks. Those force the browser to repaint huge layers while scrolling
   and can leave blank areas on screen. */

/* ---- arrival on scroll ----
   Content is ALWAYS visible by default. The animation below only plays for a
   moment as an element arrives, and the class is removed when it ends, so a
   missed signal can never leave anything hidden. */
@keyframes fx-arrive{from{opacity:.15; transform:translateY(16px)}}
.fx-play{animation:fx-arrive .65s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:var(--fx-d,0s)}

/* ---- headings: faint words come into focus one after another
   (never letters: Arabic must stay joined) ---- */
@keyframes fx-word{from{opacity:.12; transform:translateY(.3em)}}
.fx-w{display:inline-block}
.fx-words-play .fx-w{animation:fx-word .6s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--fx-i,0) * 70ms)}

/* ---- spotlight that follows the mouse inside cards ---- */
.fx-spot{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--fx-c,120,170,255),.10),transparent 42%)}
.fx-edge{transition:border-color .25s, box-shadow .25s}
.fx-edge:hover{border-color:rgba(var(--fx-c,120,170,255),.45) !important; box-shadow:0 0 0 1px rgba(var(--fx-c,120,170,255),.12), 0 14px 34px rgba(0,0,0,.28)}

/* ---- cursor aura: a soft light that lives behind the content, never on top of it ---- */
#fx-aura{position:fixed; left:0; top:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; pointer-events:none; z-index:-1; opacity:0;
  background:radial-gradient(closest-side,rgba(255,80,60,.10),rgba(79,195,255,.05) 55%,transparent 72%); transition:opacity .4s; contain:strict}
body.fx-moving #fx-aura{opacity:1}

/* ---- primary buttons: a light sweep on hover ---- */
.btn-red,.btn-red:hover{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 66%); background-size:250% 100%; background-repeat:no-repeat}
.btn-red{background-position:120% 0}
.btn-red:hover{background-position:-30% 0; transition:background-position .7s ease, background-color .15s, transform .15s, box-shadow .15s}

/* ---- section kickers glow gently ---- */
@keyframes fx-glow{0%,100%{text-shadow:0 0 0 transparent} 50%{text-shadow:0 0 14px rgba(255,90,70,.45)}}
.kicker,.cshow-k,.sec-k{animation:fx-glow 4.5s ease-in-out infinite}

/* ---- thin page progress for long pages without their own ---- */
#fx-prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:9999; transform-origin:right; transform:scaleX(0); background:linear-gradient(90deg,#4fc3ff,#ff4433); pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .fx-play,.fx-words-play .fx-w{animation:none !important}
  #fx-aura{display:none}
  .kicker,.cshow-k,.sec-k{animation:none}
}
@media (hover:none){ #fx-aura{display:none} }