/* ============ Shared interactive layer: cursor, transitions, spotlight ============ */

@media (hover: hover) and (pointer: fine) {
  html.has-fx-cursor, html.has-fx-cursor * { cursor: none !important; }
}

#fxCursorRing, #fxCursorDot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
}
#fxCursorDot {
  width: 6px; height: 6px;
  background: var(--primary, #5b63e6);
  transition: width .25s var(--ease-snap, ease), height .25s var(--ease-snap, ease), opacity .25s;
}
#fxCursorRing {
  width: 34px; height: 34px;
  border: 1px solid var(--primary, #5b63e6);
  opacity: 0.6;
  transition: width .35s var(--ease-snap, ease), height .35s var(--ease-snap, ease), opacity .35s, border-color .35s;
}
html.fx-hover #fxCursorRing { width: 64px; height: 64px; opacity: 1; background: rgba(91,99,230,0.08); }
html.fx-hover #fxCursorDot { width: 0; height: 0; }
@media (hover: none), (pointer: coarse) {
  #fxCursorRing, #fxCursorDot { display: none; }
}

/* ---- Page transition overlay ---- */
#fxTransition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: flex;
}
#fxTransition .fx-panel {
  flex: 1;
  background: var(--ink, #16151c);
  transform: translateY(-101%);
}
#fxTransition.fx-cover .fx-panel {
  transition: transform .55s var(--ease-snap, cubic-bezier(.65,0,.35,1));
  transform: translateY(0%);
}
#fxTransition.fx-reveal .fx-panel {
  transition: transform .65s .05s var(--ease-slow, cubic-bezier(.16,1,.3,1));
  transform: translateY(-101%);
}
#fxTransition .fx-panel:nth-child(2) { transition-delay: .04s; }
#fxTransition .fx-panel:nth-child(3) { transition-delay: .08s; }

/* ---- Spotlight reveal effect (image/panel that lights up under cursor) ---- */
.fx-spotlight {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx-spotlight .fx-spotlight-base {
  position: absolute; inset: 0;
  filter: grayscale(0.6) brightness(0.45) contrast(1.05);
  transition: filter .6s var(--ease-slow);
}
.fx-spotlight .fx-spotlight-glow {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(circle 160px at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 80%);
  transition: -webkit-mask-position .05s linear;
  filter: saturate(1.15) brightness(1.05);
}
.fx-spotlight:hover .fx-spotlight-base { filter: grayscale(0.6) brightness(0.3) contrast(1.05); }

canvas#fxParticles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---- Magnetic / hover-lift utility ---- */
.fx-magnetic { transition: transform .25s var(--ease-snap); will-change: transform; }

/* ---- Animated nav menu links ---- */
.fx-nav-link { position: relative; display: inline-block; overflow: hidden; }
.fx-nav-link .fx-nav-stack { display: block; transition: transform .5s var(--ease-snap); }
.fx-nav-link:hover .fx-nav-stack { transform: translateY(-100%); }
.fx-nav-link .fx-nav-line { display: block; }