/* =========================================================
   REALM HQ — FX LAYER v2
   Second-pass cinematics: targeting reticle, signal
   interference, stagger cascades, section brackets, click
   pulses, glyph scramble, media wipes.
   Loaded after fx.css. Degrades to static without JS.
   ========================================================= */

/* ---------------------------------------------------------
   12. TARGETING RETICLE (fine pointers, wide viewports)
   --------------------------------------------------------- */
#fxRet{
  position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
  width:44px; height:44px; margin:-22px 0 0 -22px;
  opacity:0; transition:opacity .35s ease;
  will-change:transform;
}
#fxRet.is-live{ opacity:1; }
#fxRet i{
  position:absolute; width:11px; height:11px;
  border:1.5px solid var(--fx-gold);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, opacity .28s ease;
  opacity:.85;
}
#fxRet i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
#fxRet i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
#fxRet i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
#fxRet i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
#fxRet u{
  position:absolute; inset:50% auto auto 50%;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  background:var(--fx-gold); border-radius:50%;
  box-shadow:0 0 8px rgba(212,175,55,.9);
  transition:transform .28s ease, opacity .28s ease;
}
#fxRet b{
  position:absolute; top:26px; left:30px; white-space:nowrap;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:8.5px; letter-spacing:.2em; font-weight:400;
  color:rgba(212,175,55,.62); text-transform:uppercase;
  opacity:0; transition:opacity .3s ease;
}
#fxRet.is-live b{ opacity:1; }

/* locked on to something interactive */
#fxRet.is-lock i{ transform:scale(1.95); border-color:var(--fx-gold-hot); opacity:1; }
#fxRet.is-lock u{ transform:scale(2.6); }
#fxRet.is-lock b::after{ content:" · LOCK"; color:var(--fx-gold-hot); }
#fxRet.is-down i{ transform:scale(1.15); }

html.fx-reticle, html.fx-reticle body{ cursor:none; }
html.fx-reticle input, html.fx-reticle textarea, html.fx-reticle select,
html.fx-reticle [contenteditable]{ cursor:auto; }
@media (pointer:coarse){ #fxRet{ display:none !important; } }
@media (max-width:900px){ #fxRet{ display:none !important; } }

/* ---------------------------------------------------------
   13. SIGNAL INTERFERENCE — rare full-page transmission fault
   --------------------------------------------------------- */
#fxNoise{
  position:fixed; inset:0; z-index:99970; pointer-events:none;
  opacity:0; overflow:hidden;
}
#fxNoise.is-fire{ animation:fxNoiseFlash .46s steps(3,end) 1; }
@keyframes fxNoiseFlash{
  0%{ opacity:0; } 8%{ opacity:1; } 62%{ opacity:.85; } 100%{ opacity:0; }
}
#fxNoise .fx-static{
  position:absolute; inset:-20%;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
#fxNoise.is-fire .fx-static{ animation:fxStaticJit .46s steps(4,end) 1; }
@keyframes fxStaticJit{
  0%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(-9px,6px,0); }
  50%{ transform:translate3d(7px,-8px,0); }
  75%{ transform:translate3d(-5px,3px,0); }
  100%{ transform:translate3d(0,0,0); }
}
#fxNoise .fx-tear{
  position:absolute; left:-8%; right:-8%; height:var(--h,22px);
  top:var(--t,30%);
  background:linear-gradient(90deg, rgba(214,64,44,.22), rgba(232,228,212,.30) 40%, rgba(127,224,168,.20));
  mix-blend-mode:screen; opacity:0;
}
#fxNoise.is-fire .fx-tear{ animation:fxTear .46s cubic-bezier(.6,0,.3,1) 1; }
#fxNoise.is-fire .fx-tear:nth-child(3){ animation-delay:.06s; }
#fxNoise.is-fire .fx-tear:nth-child(4){ animation-delay:.13s; }
@keyframes fxTear{
  0%{ opacity:0; transform:translateX(-40px) scaleY(.4); }
  20%{ opacity:1; transform:translateX(26px) scaleY(1); }
  60%{ opacity:1; transform:translateX(-18px) scaleY(.7); }
  100%{ opacity:0; transform:translateX(38px) scaleY(.2); }
}
#fxNoise .fx-fault{
  position:absolute; left:26px; bottom:22px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--fx-gold); text-shadow:2px 0 rgba(214,64,44,.7), -2px 0 rgba(127,224,168,.55);
  opacity:0;
}
#fxNoise.is-fire .fx-fault{ animation:fxFault .46s steps(2,end) 1; }
@keyframes fxFault{ 0%{opacity:0} 15%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

/* ---------------------------------------------------------
   14. SECTION CORNER BRACKETS — draw in on entry
   --------------------------------------------------------- */
.fx-brackets{
  position:absolute; inset:10px; pointer-events:none; z-index:4;
}
.fx-brackets i{
  position:absolute; width:20px; height:20px;
  border:1px solid rgba(212,175,55,.55);
  opacity:0; transform:scale(.4);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}
.fx-brackets i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.fx-brackets i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.fx-brackets i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.fx-brackets i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }
.fx-in > .fx-brackets i{ opacity:1; transform:scale(1); }
.fx-in > .fx-brackets i:nth-child(2){ transition-delay:.09s; }
.fx-in > .fx-brackets i:nth-child(3){ transition-delay:.18s; }
.fx-in > .fx-brackets i:nth-child(4){ transition-delay:.27s; }

/* ---------------------------------------------------------
   15. CLICK PULSE — gold scan ring from the point of contact
   --------------------------------------------------------- */
.fx-pulse{
  position:fixed; z-index:99975; pointer-events:none;
  width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%;
  border:1.5px solid var(--fx-gold);
  animation:fxPulse .72s cubic-bezier(.15,.75,.25,1) forwards;
}
@keyframes fxPulse{
  0%{ transform:scale(.35); opacity:.9; box-shadow:0 0 18px rgba(212,175,55,.6); }
  100%{ transform:scale(9); opacity:0; box-shadow:0 0 0 rgba(212,175,55,0); }
}

/* ---------------------------------------------------------
   16. MEDIA WIPE — images decode into view
   --------------------------------------------------------- */
.fx-media{ position:relative; overflow:hidden; }
.fx-media > img, .fx-media > video{
  clip-path:inset(0 100% 0 0);
  filter:grayscale(1) contrast(1.15) brightness(.75);
  transition:clip-path 1s cubic-bezier(.65,0,.2,1), filter 1.1s ease .25s;
  will-change:clip-path, filter;
}
.fx-media.fx-in > img, .fx-media.fx-in > video{
  clip-path:inset(0 0 0 0); filter:none;
}
.fx-media::before{
  content:""; position:absolute; top:0; bottom:0; width:3px; z-index:3;
  left:0; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--fx-gold-hot), transparent);
  box-shadow:0 0 22px 4px rgba(212,175,55,.7);
}
.fx-media.fx-in::before{ animation:fxMediaScan 1s cubic-bezier(.65,0,.2,1) forwards; }
@keyframes fxMediaScan{
  0%{ left:0; opacity:0; } 10%{ opacity:1; }
  90%{ opacity:1; } 100%{ left:100%; opacity:0; }
}

/* ---------------------------------------------------------
   17. GLYPH SCRAMBLE on nav hover
   --------------------------------------------------------- */
.fx-scram{ font-variant-ligatures:none; }
.fx-scram.fx-busy{ color:var(--fx-gold-hot); }

/* ---------------------------------------------------------
   18. STAGGER CASCADE — grid children arrive in sequence
   --------------------------------------------------------- */
.fx-sec[data-fx-stagger]{ transition-delay:var(--fx-d,0ms); }

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #fxRet, #fxNoise{ display:none !important; }
  html.fx-reticle, html.fx-reticle body{ cursor:auto !important; }
  .fx-brackets{ display:none !important; }
  .fx-pulse{ display:none !important; }
  .fx-media > img, .fx-media > video{ clip-path:none !important; filter:none !important; }
  .fx-media::before{ display:none !important; }
  .fx-sec[data-fx-stagger]{ transition-delay:0ms !important; }
}

/* =========================================================
   FX v3 — header behaviour, cursor trail, power-on sweeps,
   idle prompt, page exit transition.
   ========================================================= */

/* ---------------------------------------------------------
   19/20. HEADER — handled in nav.css (.hdr-lite.is-stuck,
   .hdr-lite-depth). Nothing needed here.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   21. CURSOR EMBER TRAIL
   --------------------------------------------------------- */
.fx-ember{
  position:fixed; z-index:99998; pointer-events:none;
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:var(--fx-gold, #D4AF37);
  box-shadow:0 0 6px rgba(212,175,55,.8);
  opacity:.75;
  animation:fxEmber 900ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes fxEmber{
  0%{ opacity:.75; transform:translate3d(0,0,0) scale(1); }
  100%{ opacity:0; transform:translate3d(0,-16px,0) scale(.3); }
}

/* ---------------------------------------------------------
   22. POWER-ON SWEEP — a band of light crosses a card the
   first time it lands on screen.
   --------------------------------------------------------- */
.fx-pwr{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; border-radius:inherit;
  opacity:0;
}
.fx-pwr.is-run{ opacity:1; }
.fx-pwr i{
  position:absolute; top:0; bottom:0; left:0; width:38%;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(212,175,55,.05) 35%,
    rgba(212,175,55,.16) 50%,
    rgba(212,175,55,.05) 65%,
    transparent 100%);
  transform:translate3d(-140%,0,0);
}
.fx-pwr.is-run i{ animation:fxPwr 1s cubic-bezier(.25,.7,.25,1) forwards; }
@keyframes fxPwr{
  0%{ transform:translate3d(-140%,0,0); }
  100%{ transform:translate3d(360%,0,0); }
}

/* ---------------------------------------------------------
   23. IDLE PROMPT
   --------------------------------------------------------- */
#fxIdle{
  position:fixed; left:20px; bottom:18px; z-index:99960;
  pointer-events:none;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(212,175,55,.5);
  opacity:0; transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease;
}
#fxIdle.is-on{ opacity:1; transform:translateY(0); }
#fxIdle em{ font-style:normal; color:rgba(232,228,212,.32); }
#fxIdle s{
  text-decoration:none; display:inline-block;
  width:6px; height:11px; margin-left:6px; vertical-align:-1px;
  background:rgba(212,175,55,.7);
  animation:fxCaret 1.05s steps(1,end) infinite;
}
@keyframes fxCaret{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }
@media (max-width:640px){ #fxIdle{ display:none; } }

/* ---------------------------------------------------------
   24. PAGE EXIT — the transmission drops before it reconnects
   --------------------------------------------------------- */
html.fx-exit body{
  animation:fxExit .3s ease forwards;
}
@keyframes fxExit{
  0%{ opacity:1; filter:none; }
  35%{ opacity:.85; filter:contrast(1.5) brightness(1.25); transform:translate3d(2px,0,0); }
  100%{ opacity:0; filter:contrast(2) brightness(.5); transform:translate3d(-6px,0,0); }
}
html.fx-exit #fxRet, html.fx-exit #fxIdle{ opacity:0 !important; }

@media (prefers-reduced-motion: reduce){
  .fx-ember, .fx-pwr, #fxIdle{ display:none !important; }
  html.fx-exit body{ animation:none !important; }
}