/* ============================================================
   SteinTecDev — FX layer (index.html extras)
   Magnetic cursor, 3D tilt, cursor spotlight, scroll progress,
   heading shimmer. The constellation + aura background live in
   the shared fx-bg.(css|js). Purely additive — degrades to a
   calm static page under prefers-reduced-motion / coarse pointer.
   ============================================================ */

/* ---- index has positioned content at z-index:3, so the shared
   constellation/aura can sit above the bg layers here ---- */
.fx-field, .fx-glow{ z-index:1 }

/* ---- scroll progress ---- */
.fx-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:100;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--copper), var(--copper-2) 55%, var(--signal));
  box-shadow:0 0 12px var(--copper), 0 0 4px var(--copper-2);
  will-change:transform;
}

/* ---- custom cursor (fine pointers only, toggled by JS) ----
   hardware "crosshair": ink ring + orange center dot ---- */
html.fx-cursor, html.fx-cursor *{ cursor:none !important }
.fx-cur, .fx-cur-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; will-change:transform;
}
.fx-cur{
  width:28px; height:28px; border:1.5px solid var(--text);
  box-shadow:0 0 0 1px rgba(255,255,255,.4);
  transition:width .3s var(--ease), height .3s var(--ease),
             border-color .3s var(--ease), background .3s var(--ease);
}
.fx-cur.is-hover{
  width:50px; height:50px;
  background:color-mix(in oklab, var(--copper) 12%, transparent);
  border-color:var(--copper);
}
.fx-cur-dot{ width:6px; height:6px; background:var(--copper) }

/* ---- glossy "light reflection" sheen on cards / panels ---- */
.fx-spot{ position:relative; --spot:0; --mx:50%; --my:50% }
.fx-spot::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit; overflow:hidden;
  background:radial-gradient(240px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--copper) 22%, transparent), transparent 60%);
  opacity:var(--spot); transition:opacity .35s var(--ease);
}
.fx-spot.cyanish::after{
  background:radial-gradient(240px circle at var(--mx) var(--my),
    color-mix(in oklab, var(--signal) 22%, transparent), transparent 60%);
}
/* keep card content above the spotlight wash */
.fx-spot > *{ position:relative; z-index:1 }
/* tilt elements need a transform-friendly transition while idle */
.fx-tilt{ transform-style:preserve-3d; will-change:transform }

/* ---- animated gradient shimmer on display headings ---- */
.hero__title em,
.cta__title em,
.sec-head__title em{
  background:linear-gradient(100deg,
    var(--copper-d) 0%, var(--copper) 30%, var(--copper-2) 46%, var(--copper) 62%, var(--copper-d) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:fxShimmer 7s linear infinite;
}
@keyframes fxShimmer{ to{ background-position:220% 0 } }

/* ---- magnetic targets get a snappier return ---- */
.fx-mag{ will-change:transform }

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hero__title em, .cta__title em, .sec-head__title em{ animation:none }
}