/* fx.css - effects layer for fx.js (vanilla takes on React Bits components) */

/* Letter Glitch canvas, sits behind .hero > .wrap (z-index 1, set by the page) */
.fx-glitch-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}

/* Click Spark + Pixel Trail share one fixed canvas behind the page content; Pixel Transition gets its own on top */
.fx-sparks,.fx-cover{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;display:block}
.fx-sparks{z-index:0}
main,footer{position:relative;z-index:1}
.fx-cover{z-index:2147483647}

/* Pre-paint cover so a page reached via Pixel Transition never flashes before fx.js runs.
   Pure-CSS fail-safe: it hides itself after 0.9 s even if JS never runs. fx.js removes it at once. */
@media all{
  html:not(.fx-on):not(.calm)::after{content:"";position:fixed;inset:0;background:var(--bg,#050805);z-index:2147483647;pointer-events:none;animation:fx-pre 0s .9s forwards}
}
@keyframes fx-pre{to{visibility:hidden}}

/* Scroll Reveal: hidden state only exists once JS adds .fx-rv */
.rv.fx-rv{opacity:0;transform:translateY(16px);transition:opacity .48s steps(4,end),transform .48s steps(4,end);transition-delay:var(--fx-d,0ms)}
.rv.fx-rv.fx-in{opacity:1;transform:none}
@media print{.rv.fx-rv{opacity:1;transform:none}}

/* Spotlight Card + Tilted Card (.fx-card added by JS on fine pointers only) */
.fx-card{position:relative;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fx-card.fx-hot{transition:transform .08s linear}
.fx-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%),rgba(126,232,255,.16),transparent 70%)}
.fx-card.fx-hot::after{opacity:1}

/* Magnet: uses the individual `translate` property so it stacks with any page transform */
.fx-mag{translate:var(--mx,0px) var(--my,0px);transition:translate .25s cubic-bezier(.2,.8,.2,1)}

/* Konami 1UP toast + green flicker */
.fx-1up{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2147483645;pointer-events:none;
  font:24px/1 "Press Start 2P",monospace;color:var(--g,#39ff6a);background:var(--bg,#050805);
  padding:18px 22px;border:4px solid var(--g,#39ff6a);box-shadow:6px 6px 0 var(--dim,#1f7a3a);text-shadow:0 0 8px var(--g,#39ff6a)}
@media all{
  html.fx-flicker:not(.calm) body,html.fx-flicker:not(.calm) body *{animation:fx-flk .12s steps(2,end) 6}
}
@keyframes fx-flk{50%{color:var(--g,#39ff6a)}}