/* ===== 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}

/* ---- top bar (every page): a light beam travels along the bottom edge, a soft
   glow follows the mouse, the logo breathes and the icons light up. fx.js adds
   the two decorative layers; without it the bar looks exactly as before. ---- */
.topbar{transition:box-shadow .3s}
.topbar.fx-scrolled{box-shadow:0 10px 28px rgba(0,0,0,.45)}
/* no z-index here: a stacking context would cut the logo off from the bar behind it,
   and its black background (hidden by mix-blend-mode:screen) would show as a square */
.topbar-in{position:relative}
.fx-beam{position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; pointer-events:none; z-index:2}
.fx-beam::before{content:""; position:absolute; top:0; left:0; width:24%; height:100%; background:linear-gradient(90deg,transparent,#4fc3ff,#ff4433,transparent); box-shadow:0 0 8px rgba(255,68,51,.7); animation:fx-beam 7s linear infinite}
@keyframes fx-beam{from{transform:translateX(-100%)} to{transform:translateX(420%)}}
.fx-glow{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(260px 80px at var(--gx,50%) 100%,rgba(79,195,255,.13),transparent 70%)}
.topbar:hover .fx-glow{opacity:1}
/* the logo breathes: a soft red light behind it. It hangs on .brand, not inside .mark,
   because .mark crops its contents (overflow:hidden) and the light would end in straight
   edges; and it is not a filter on the image (a drop-shadow outlines its square edge).
   The circle is centred on the logo (24px from the brand's right edge in RTL) and fades
   to nothing before its own edge. */
.topbar .brand{position:relative}
.topbar .brand::before{content:""; position:absolute; top:50%; right:-14px; width:76px; height:76px; margin-top:-38px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,68,51,.42),rgba(255,68,51,.12) 55%,transparent); opacity:0; pointer-events:none; animation:fx-mark 4.5s ease-in-out infinite}
.topbar .mark{position:relative}
@keyframes fx-mark{50%{opacity:1}}
.topbar .brand-name i{text-shadow:0 0 12px rgba(255,68,51,.4)}
.topnav a svg{transition:transform .2s, filter .2s}
.topnav a:hover svg{filter:drop-shadow(0 0 6px rgba(79,195,255,.75))}
.topnav a.active svg{filter:drop-shadow(0 0 6px rgba(255,68,51,.8))}
.icon-btn .dot:not([hidden])::after{content:""; position:absolute; inset:0; border-radius:50%; background:inherit; animation:fx-ping 1.8s ease-out infinite}
@keyframes fx-ping{to{transform:scale(2.6); opacity:0}}

@media (prefers-reduced-motion:reduce){
  .fx-beam,.fx-glow{display:none}
  .topbar .brand::before,.icon-btn .dot::after{animation:none}
  .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} }