/* ============================================================
   SkyLynx FX — shared modern effects layer
   Loaded after each page's inline <style> so it can refine timings.
   Everything degrades gracefully + respects reduced motion.
   ============================================================ */

@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* Scroll progress bar */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,#0ea5e9,#06b6d4,#10d9a0);
  box-shadow:0 0 14px rgba(6,182,212,.65);transition:width .08s linear;pointer-events:none}

/* Cursor spotlight */
.fx-cursor{position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(6,182,212,.14),rgba(16,217,160,.05) 35%,transparent 62%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s;will-change:transform}
@media (hover:none),(pointer:coarse){.fx-cursor{display:none}}

/* Magnetic + tilt smoothing */
.fx-magnetic{will-change:transform;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fx-tilt{transition:transform .3s cubic-bezier(.16,1,.3,1);will-change:transform}

/* Floating aurora blobs (injected into heroes) */
.fx-blob{position:absolute;border-radius:50%;filter:blur(72px);opacity:.42;pointer-events:none;z-index:1;
  animation:fxFloat 20s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(46px,-34px) scale(1.12)}66%{transform:translate(-34px,24px) scale(.92)}}

/* Animated conic gradient border (injected onto featured cards) */
.fx-glow-border{position:relative}
.fx-glow-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--fx-a),transparent 0deg,#06b6d4 60deg,#10d9a0 120deg,transparent 200deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fxSpin 6s linear infinite;pointer-events:none;z-index:2}
@keyframes fxSpin{to{--fx-a:360deg}}

/* Shimmering gradient text */
.grad-text{background-size:220% auto;animation:fxShine 9s linear infinite}
@keyframes fxShine{to{background-position:220% center}}

/* Magnetic back-to-top button */
.fx-top{position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:50%;
  background:linear-gradient(118deg,#0ea5e9,#06b6d4 52%,#10d9a0);display:grid;place-items:center;
  cursor:pointer;z-index:120;border:0;opacity:0;transform:translateY(22px) scale(.8);pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
  box-shadow:0 12px 32px rgba(14,165,233,.5)}
.fx-top.show{opacity:1;transform:none;pointer-events:auto}
.fx-top svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.6}
.fx-top:hover{box-shadow:0 16px 40px rgba(14,165,233,.65)}

/* Lenis smooth-scroll baseline */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* Subtle photographic background textures (Unsplash, free license).
   Applied to dark sections via fx.js. Texture sits above the section
   background but below content (.wrap raised to z-index:1). */
.fx-textured{position:relative}
.fx-textured>.wrap{position:relative;z-index:1}
.fx-textured::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-repeat:no-repeat;background-position:center}
.fx-tex-a::after{background-image:url('assets/tex-digital.jpg');background-position:right top;
  opacity:.20;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(115deg,transparent 38%,#000 100%);
  mask-image:linear-gradient(115deg,transparent 38%,#000 100%)}
.fx-tex-b::after{background-image:url('assets/tex-fluid.jpg');opacity:.10;mix-blend-mode:soft-light}

@media(prefers-reduced-motion:reduce){
  .fx-blob,.fx-glow-border::before,.grad-text{animation:none}
  .fx-cursor{display:none}
  .grad-text{background-size:auto}
}