/* =========================================================
   REALM HQ — FX LAYER v1
   Site-wide cinematic animation system.
   Loaded last. Everything degrades to static if JS is off
   or prefers-reduced-motion is set.
   ========================================================= */

:root{
  --fx-gold:#D4AF37;
  --fx-gold-hot:#e7c877;
  --fx-bone:#e8e4d4;
  --fx-ink:#050506;
}

/* Let the ambient canvas sit behind everything without
   fighting per-page body backgrounds. */
html.fx{ background:#050506; }
html.fx body{ background-color:transparent !important; }

/* ---------------------------------------------------------
   1. AMBIENT CANVAS — drifting embers, shadow smoke, horizon grid
   --------------------------------------------------------- */
#fxAmbient{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; display:block;
  opacity:0; transition:opacity 1.6s ease;
}
#fxAmbient.is-live{ opacity:1; }

/* ---------------------------------------------------------
   2. BOOT VEIL — signal-lock entry / CRT collapse on exit
   --------------------------------------------------------- */
#fxVeil{
  position:fixed; inset:0; z-index:99990; pointer-events:none;
  display:grid; place-items:center; overflow:hidden;
}
#fxVeil.is-done{ display:none; }
#fxVeil .fx-veil-bar{
  position:absolute; left:0; right:0; height:50.5%;
  background:#050506;
  transform:translateY(0);
  transition:transform 1s cubic-bezier(.7,0,.2,1);
}
#fxVeil .fx-veil-bar.top{ top:0; }
#fxVeil .fx-veil-bar.bot{ bottom:0; }
#fxVeil.is-open .fx-veil-bar.top{ transform:translateY(-101%); }
#fxVeil.is-open .fx-veil-bar.bot{ transform:translateY(101%); }

#fxVeil .fx-veil-seam{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, var(--fx-gold), transparent);
  box-shadow:0 0 18px 2px rgba(212,175,55,.55);
  transform:scaleX(0); transform-origin:50% 50%;
  animation:fxSeam 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
#fxVeil.is-open .fx-veil-seam{ opacity:0; transition:opacity .5s ease .35s; }
@keyframes fxSeam{ 0%{transform:scaleX(0);opacity:0} 25%{opacity:1} 100%{transform:scaleX(1);opacity:1} }

#fxVeil .fx-veil-txt{
  position:relative; z-index:2;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--fx-gold); text-shadow:0 0 14px rgba(212,175,55,.5);
  transform:translateY(-22px);
  animation:fxVeilTxt 1.15s ease forwards;
}
@keyframes fxVeilTxt{ 0%{opacity:0} 30%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
#fxVeil.is-open .fx-veil-txt{ opacity:0; }

/* CRT collapse on internal navigation */
#fxVeil.is-collapse{ display:grid; }
#fxVeil.is-collapse .fx-veil-bar{ transition:transform .42s cubic-bezier(.7,0,.2,1); transform:translateY(0); }
#fxVeil.is-collapse .fx-veil-crt{
  position:absolute; inset:0; background:#050506;
  animation:fxCrt .46s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes fxCrt{
  0%{ transform:scaleY(1) scaleX(1); opacity:1; }
  70%{ transform:scaleY(.006) scaleX(1); opacity:1; }
  100%{ transform:scaleY(.006) scaleX(.02); opacity:1; }
}

/* ---------------------------------------------------------
   3. TRANSMISSION PROGRESS RAIL
   --------------------------------------------------------- */
#fxRail{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:99980; pointer-events:none;
  background:rgba(212,175,55,.08);
}
#fxRail i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#7d6531,var(--fx-gold) 60%,var(--fx-gold-hot));
  box-shadow:0 0 12px rgba(212,175,55,.7);
  transition:width .12s linear;
}
#fxRail b{
  position:absolute; top:8px; right:12px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:9px; letter-spacing:.24em; font-weight:400;
  color:rgba(212,175,55,.55); text-transform:uppercase;
}
@media (max-width:640px){ #fxRail b{ display:none; } }

/* ---------------------------------------------------------
   4. CURSOR SPOTLIGHT (fine pointers only)
   --------------------------------------------------------- */
#fxSpot{
  position:fixed; top:0; left:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; z-index:-1; pointer-events:none;
  border-radius:50%; opacity:0; transition:opacity .6s ease;
  background:radial-gradient(circle closest-side, rgba(212,175,55,.11), rgba(212,175,55,.045) 45%, transparent 72%);
  will-change:transform;
}
#fxSpot.is-live{ opacity:1; }
@media (pointer:coarse){ #fxSpot{ display:none; } }

/* ---------------------------------------------------------
   5. SECTION ENTRY — scanline sweep + lift
   --------------------------------------------------------- */
.fx-sec{
  opacity:0; transform:translate3d(0,42px,0);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.fx-sec.fx-in{ opacity:1; transform:none; }
.fx-sec::after{
  content:""; position:absolute; left:0; right:0; top:0; height:100%;
  pointer-events:none; opacity:0; z-index:5;
  background:linear-gradient(180deg, transparent 0%, rgba(212,175,55,.16) 48%, rgba(232,228,212,.28) 50%, rgba(212,175,55,.16) 52%, transparent 100%);
  mix-blend-mode:screen;
}
.fx-sec.fx-in::after{ animation:fxSweep 1.15s cubic-bezier(.3,.7,.3,1) .05s 1; }
@keyframes fxSweep{
  0%{ opacity:0; transform:translateY(-100%); }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ opacity:0; transform:translateY(100%); }
}

/* ---------------------------------------------------------
   6. DECRYPT HEADINGS
   --------------------------------------------------------- */
.fx-decrypt{ position:relative; }
.fx-decrypt.fx-busy{ color:var(--fx-gold); text-shadow:0 0 22px rgba(212,175,55,.35); }

/* ---------------------------------------------------------
   7. REDACTION WIPE — bar slides across text, then lifts
   --------------------------------------------------------- */
.fx-redact{ position:relative; display:block; }
.fx-redact::before{
  content:""; position:absolute; inset:-2px -6px; background:var(--fx-gold);
  transform:scaleX(0); transform-origin:0 50%; z-index:2; pointer-events:none;
  opacity:0;
}
.fx-redact.fx-in::before{ animation:fxRedact 1.05s cubic-bezier(.65,0,.2,1) forwards; }
@keyframes fxRedact{
  0%{ transform:scaleX(0); transform-origin:0 50%; opacity:1; }
  42%{ transform:scaleX(1); transform-origin:0 50%; opacity:1; }
  43%{ transform:scaleX(1); transform-origin:100% 50%; opacity:1; }
  100%{ transform:scaleX(0); transform-origin:100% 50%; opacity:1; }
}
.fx-redact > span.fx-redact-inner{ opacity:0; transition:opacity .25s ease .38s; display:inline; }
.fx-redact.fx-in > span.fx-redact-inner{ opacity:1; }

/* ---------------------------------------------------------
   8. TILT CARDS + GOLD SHEEN
   --------------------------------------------------------- */
.fx-tilt{
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  will-change:transform;
}
.fx-tilt.fx-hot{ transition:transform .08s linear, box-shadow .3s ease; box-shadow:0 26px 60px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(212,175,55,.28); }
.fx-tilt .fx-sheen{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--fx-mx,50%) var(--fx-my,50%), rgba(232,200,119,.20), rgba(212,175,55,.06) 40%, transparent 68%);
}
.fx-tilt.fx-hot .fx-sheen{ opacity:1; }

/* ---------------------------------------------------------
   9. CREST FLOAT + GLITCH BURST
   --------------------------------------------------------- */
.fx-crest{ animation:fxFloat 7s ease-in-out infinite; }
@keyframes fxFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-5px) rotate(-1.2deg); } }
.fx-glitch{ animation:fxGlitch .42s steps(2,end) 1; }
@keyframes fxGlitch{
  0%{ transform:translate(0,0); filter:none; }
  20%{ transform:translate(-3px,1px); filter:drop-shadow(2px 0 rgba(214,64,44,.85)) drop-shadow(-2px 0 rgba(127,224,168,.7)); }
  40%{ transform:translate(3px,-1px); filter:drop-shadow(-3px 0 rgba(168,120,255,.8)); }
  60%{ transform:translate(-2px,0); filter:drop-shadow(2px 0 rgba(214,64,44,.7)); }
  100%{ transform:translate(0,0); filter:none; }
}

/* ---------------------------------------------------------
   10. HERO PARALLAX + TITLE CHARGE
   --------------------------------------------------------- */
.fx-parallax{ will-change:transform; }

.fx-charge{ position:relative; }
.fx-charge::after{
  content:""; position:absolute; left:0; bottom:-10px; height:2px; width:100%;
  background:linear-gradient(90deg, transparent, var(--fx-gold), transparent);
  transform:scaleX(0); transform-origin:50% 50%; opacity:.85;
  animation:fxCharge 1.6s cubic-bezier(.2,.8,.2,1) .5s forwards;
}
@keyframes fxCharge{ to{ transform:scaleX(1); } }

/* ---------------------------------------------------------
   11. MAGNETIC BUTTONS
   --------------------------------------------------------- */
.fx-mag{ will-change:transform; transition:transform .35s cubic-bezier(.2,.7,.2,1); }

/* ---------------------------------------------------------
   REDUCED MOTION — strip everything theatrical
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  #fxAmbient, #fxSpot, #fxVeil{ display:none !important; }
  .fx-sec{ opacity:1 !important; transform:none !important; }
  .fx-sec::after{ display:none !important; }
  .fx-redact::before{ display:none !important; }
  .fx-redact > span.fx-redact-inner{ opacity:1 !important; }
  .fx-crest, .fx-glitch{ animation:none !important; }
  .fx-charge::after{ animation:none !important; transform:scaleX(1); }
  .fx-tilt{ transition:none !important; }
}

/* sweep-only variant for elements already animated by the legacy .reveal system */
.fx-sec.fx-noshift{ opacity:1; transform:none; transition:none; }