/* MJ's Studio — click-to-navigate transition effects (loaded after premium.css).
   ONE cinematic effect per destination. The engine (js/transition.js) builds a
   <div class="nav-fx"> overlay and toggles .cover then .clear. transform/opacity/
   clip-path/static-gradients/mask only; built + destroyed per run. */
.nav-fx{position:fixed;inset:0;z-index:700;pointer-events:none;overflow:hidden}

/* ===================== curtains ===================== */
.nav-fx{ perspective:1500px; transform-style:preserve-3d; }

.nav-fx .fx-backstop{
  position:absolute; inset:0; opacity:0; z-index:1; transform:scale(1.04);
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(230,207,149,.28), rgba(230,207,149,0) 46%),
    radial-gradient(120% 120% at 50% 120%, rgba(168,134,63,.30), rgba(168,134,63,0) 50%),
    linear-gradient(180deg, #1c1812 0%, #15110c 55%, #120e09 100%);
}

.nav-fx .fx-curtain{
  position:absolute; top:0; bottom:0; width:54vw;
  transform-style:preserve-3d; will-change:transform, opacity; opacity:0; z-index:2;
}
.nav-fx .fx-left{ left:0; transform-origin:left center;
  transform:translateX(-108%) translateZ(-220px) rotateY(38deg); }
.nav-fx .fx-right{ right:0; transform-origin:right center;
  transform:translateX(108%) translateZ(-220px) rotateY(-38deg); }

.nav-fx .fx-cloth{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(21,17,12,.55), rgba(21,17,12,0) 22%, rgba(21,17,12,0) 78%, rgba(21,17,12,.55)),
    radial-gradient(130% 70% at 50% -8%, rgba(255,247,230,.42), rgba(255,247,230,0) 48%),
    linear-gradient(90deg, #15110c 0%, #5a4720 14%, #a8863f 30%, #c9a86a 44%, #e6cf95 50%, #c9a86a 56%, #a8863f 70%, #5a4720 86%, #15110c 100%);
}

.nav-fx .fx-fold{
  position:absolute; top:0; bottom:0;
  left:calc(var(--f) * (100% / var(--n)));
  width:calc(100% / var(--n));
  transform-origin:center top;
  background:
    linear-gradient(90deg,
      rgba(21,17,12,.78) 0%,
      rgba(21,17,12,.05) 24%,
      rgba(255,247,230,.45) 50%,
      rgba(21,17,12,.05) 76%,
      rgba(21,17,12,.78) 100%);
}

.nav-fx .fx-edge{
  position:absolute; top:0; bottom:0; width:3.2vw;
  background:
    linear-gradient(90deg, rgba(21,17,12,.0), rgba(201,168,106,.5) 55%, rgba(255,247,230,.92));
  clip-path:polygon(0 0,100% 0,68% 4%,100% 8%,68% 12%,100% 16%,68% 20%,100% 24%,68% 28%,100% 32%,68% 36%,100% 40%,68% 44%,100% 48%,68% 52%,100% 56%,68% 60%,100% 64%,68% 68%,100% 72%,68% 76%,100% 80%,68% 84%,100% 88%,68% 92%,100% 96%,68% 100%,0 100%);
}
.nav-fx .fx-left  .fx-edge{ right:-1.4vw; }
.nav-fx .fx-right .fx-edge{ left:-1.4vw; transform:scaleX(-1); }

.nav-fx .fx-bead{
  position:absolute; top:0; bottom:0; width:0.5vw;
  background:linear-gradient(180deg, rgba(255,247,230,.85), rgba(201,168,106,.65) 50%, rgba(255,247,230,.85));
  opacity:0;
}
.nav-fx .fx-left  .fx-bead{ right:-0.25vw; }
.nav-fx .fx-right .fx-bead{ left:-0.25vw; }

.nav-fx .fx-valance{
  position:absolute; left:-3vw; right:-3vw; top:0; height:26vh;
  display:flex; transform-origin:top center;
  transform:translateY(-104%); will-change:transform; z-index:4;
}
.nav-fx .fx-swag{
  flex:1 1 auto; height:100%; margin:0 -1.6%;
  background:
    radial-gradient(120% 96% at 50% 0%, #fff7e6, #e6cf95 22%, #c9a86a 44%, #a8863f 66%, #5a4720 100%),
    linear-gradient(90deg, rgba(21,17,12,.45), rgba(21,17,12,0) 24%, rgba(21,17,12,0) 76%, rgba(21,17,12,.45));
  border-radius:0 0 50% 50%/0 0 100% 100%;
  transform:translateY(calc(var(--off) * var(--off) * -1.0%));
}

.nav-fx .fx-rays{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform:translate(-50%,-50%); z-index:5; opacity:0; will-change:opacity, transform;
}
.nav-fx .fx-ray{
  position:absolute; left:0; top:0; width:var(--len); height:2.2px;
  transform-origin:0 50%; transform:rotate(var(--a)) scaleX(0);
  background:linear-gradient(90deg, rgba(255,247,230,.9), rgba(230,207,149,.5) 40%, rgba(230,207,149,0) 100%);
}

.nav-fx .fx-shock{
  position:absolute; left:50%; top:50%; width:30vmax; height:30vmax;
  transform:translate(-50%,-50%) scale(0); transform-origin:center; z-index:5; opacity:0;
  border-radius:50%; will-change:transform, opacity;
  background:
    radial-gradient(closest-side, rgba(255,247,230,0) 56%, rgba(255,247,230,.9) 66%, rgba(230,207,149,.4) 76%, rgba(230,207,149,0) 86%);
}

.nav-fx .fx-seam{
  position:absolute; top:0; bottom:0; left:50%; width:8vw;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:
    radial-gradient(22% 70% at 50% 50%, rgba(255,247,230,.95), rgba(255,247,230,0) 72%),
    linear-gradient(90deg, rgba(230,207,149,0), rgba(230,207,149,.6) 34%, #fff7e6 50%, rgba(230,207,149,.6) 66%, rgba(230,207,149,0));
  opacity:0; z-index:6;
}

.nav-fx .fx-core{
  position:absolute; left:50%; top:50%; width:46vmax; height:46vmax;
  transform:translate(-50%,-50%) scale(.2); transform-origin:center;
  border-radius:50%; opacity:0; z-index:6; will-change:transform, opacity;
  background:
    radial-gradient(closest-side, #fff7e6 0%, rgba(255,247,230,.96) 26%, rgba(230,207,149,.85) 48%, rgba(168,134,63,.55) 70%, rgba(21,17,12,0) 86%);
}

.nav-fx .fx-flash{
  position:absolute; inset:0; opacity:0; z-index:7;
  background:radial-gradient(70% 70% at 50% 50%, #fff7e6, rgba(255,247,230,.92) 42%, rgba(230,207,149,.0) 100%);
}

.nav-fx.cover .fx-backstop{ animation:fx-backstop-in 560ms cubic-bezier(.22,.7,.3,1) forwards; }
.nav-fx.cover .fx-left{ animation:fx-sweep-in-l 560ms cubic-bezier(.32,1.18,.46,1) forwards; }
.nav-fx.cover .fx-right{ animation:fx-sweep-in-r 560ms cubic-bezier(.32,1.18,.46,1) forwards; }
.nav-fx.cover .fx-fold{ animation:fx-billow 560ms cubic-bezier(.4,0,.2,1) var(--d) forwards; }
.nav-fx.cover .fx-bead{ animation:fx-bead-in 260ms ease-out 320ms forwards; }
.nav-fx.cover .fx-valance{ animation:fx-valance-drop 520ms cubic-bezier(.3,1.22,.5,1) 60ms forwards; }
.nav-fx.cover .fx-rays{ animation:fx-rays-burst 420ms cubic-bezier(.2,.7,.3,1) 300ms forwards; }
.nav-fx.cover .fx-ray{ animation:fx-ray-shoot 420ms cubic-bezier(.15,.85,.3,1) 300ms forwards; }
.nav-fx.cover .fx-shock{ animation:fx-shock-out 460ms cubic-bezier(.15,.75,.3,1) 320ms forwards; }
.nav-fx.cover .fx-seam{ animation:fx-seam-glint 420ms ease-out 300ms forwards; }
.nav-fx.cover .fx-core{ animation:fx-core-flare 440ms cubic-bezier(.2,.7,.3,1) 300ms forwards; }
.nav-fx.cover .fx-flash{ animation:fx-flash-seal 380ms ease-in 340ms forwards; }

@keyframes fx-backstop-in{
  0%{ opacity:0; transform:scale(1.10); }
  46%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes fx-sweep-in-l{
  0%{ opacity:0; transform:translateX(-108%) translateZ(-220px) rotateY(38deg); }
  16%{ opacity:1; }
  70%{ transform:translateX(7%) translateZ(50px) rotateY(-8deg); }
  100%{ opacity:1; transform:translateX(0) translateZ(0) rotateY(0deg); }
}
@keyframes fx-sweep-in-r{
  0%{ opacity:0; transform:translateX(108%) translateZ(-220px) rotateY(-38deg); }
  16%{ opacity:1; }
  70%{ transform:translateX(-7%) translateZ(50px) rotateY(8deg); }
  100%{ opacity:1; transform:translateX(0) translateZ(0) rotateY(0deg); }
}
@keyframes fx-billow{
  0%{ transform:scaleX(calc(var(--sway) * 1.22)) skewX(7deg); }
  62%{ transform:scaleX(calc(var(--sway) * .96)) skewX(-2.5deg); }
  100%{ transform:scaleX(var(--sway)) skewX(0deg); }
}
@keyframes fx-bead-in{ 0%{ opacity:0; } 100%{ opacity:.85; } }
@keyframes fx-valance-drop{
  0%{ transform:translateY(-104%); }
  72%{ transform:translateY(3%); }
  100%{ transform:translateY(0%); }
}
@keyframes fx-rays-burst{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(0deg); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.25) rotate(14deg); }
}
@keyframes fx-ray-shoot{
  0%{ transform:rotate(var(--a)) scaleX(0); }
  45%{ transform:rotate(var(--a)) scaleX(1); }
  100%{ transform:rotate(var(--a)) scaleX(.85); }
}
@keyframes fx-shock-out{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(0); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.6); }
}
@keyframes fx-seam-glint{
  0%{ opacity:0; transform:translateX(-50%) scaleX(0); }
  55%{ opacity:1; transform:translateX(-50%) scaleX(1.2); }
  100%{ opacity:.8; transform:translateX(-50%) scaleX(1); }
}
@keyframes fx-core-flare{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  55%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); }
  100%{ opacity:.7; transform:translate(-50%,-50%) scale(1.3); }
}
@keyframes fx-flash-seal{
  0%{ opacity:0; }
  100%{ opacity:.92; }
}

.nav-fx.clear .fx-backstop{ opacity:1; animation:fx-backstop-out 540ms cubic-bezier(.5,0,.75,.4) 30ms forwards; }
.nav-fx.clear .fx-flash{ opacity:.92; animation:fx-flash-out 220ms ease-out forwards; }
.nav-fx.clear .fx-core{ opacity:.7; animation:fx-core-out 260ms ease-out forwards; }
.nav-fx.clear .fx-seam{ opacity:.8; animation:fx-seam-out 220ms ease-in forwards; }
.nav-fx.clear .fx-shock{ opacity:0; }
.nav-fx.clear .fx-rays{ opacity:0; }
.nav-fx.clear .fx-valance{ animation:fx-valance-lift 460ms cubic-bezier(.5,0,.7,.2) forwards; }
.nav-fx.clear .fx-left{ opacity:1; animation:fx-sweep-out-l 540ms cubic-bezier(.6,0,.82,.28) 40ms forwards; }
.nav-fx.clear .fx-right{ opacity:1; animation:fx-sweep-out-r 540ms cubic-bezier(.6,0,.82,.28) 40ms forwards; }
.nav-fx.clear .fx-fold{ animation:fx-billow-out 540ms cubic-bezier(.6,0,.82,.28) 40ms forwards; }
.nav-fx.clear .fx-bead{ opacity:0; }

@keyframes fx-backstop-out{ 0%{ opacity:1; } 100%{ opacity:0; } }
@keyframes fx-flash-out{ 0%{ opacity:.92; } 100%{ opacity:0; } }
@keyframes fx-core-out{ 0%{ opacity:.7; } 100%{ opacity:0; } }
@keyframes fx-seam-out{
  0%{ opacity:.8; transform:translateX(-50%) scaleX(1); }
  100%{ opacity:0; transform:translateX(-50%) scaleX(.15); }
}
@keyframes fx-valance-lift{
  0%{ transform:translateY(0%); }
  100%{ transform:translateY(-106%); }
}
@keyframes fx-sweep-out-l{
  0%{ opacity:1; transform:translateX(0) translateZ(0) rotateY(0deg); }
  100%{ opacity:0; transform:translateX(-120%) translateZ(-260px) rotateY(42deg); }
}
@keyframes fx-sweep-out-r{
  0%{ opacity:1; transform:translateX(0) translateZ(0) rotateY(0deg); }
  100%{ opacity:0; transform:translateX(120%) translateZ(-260px) rotateY(-42deg); }
}
@keyframes fx-billow-out{
  0%{ transform:scaleX(var(--sway)) skewX(0deg); }
  100%{ transform:scaleX(calc(var(--sway) * 1.3)) skewX(9deg); }
}

/* ===================== supernova ===================== */
.nav-fx{ perspective:1300px; }
.nav-fx .sn-stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 50%, rgba(21,17,12,0) 54%, #1c1812 82%, #15110c 100%);
  opacity:0;
}
.nav-fx.cover .sn-stage{ animation:sn-stage-in 300ms ease-out forwards; }
.nav-fx.clear .sn-stage{ opacity:1; }
@keyframes sn-stage-in{ from{opacity:0} 60%{opacity:1} to{opacity:1} }

.nav-fx .sn-implode{ position:absolute; inset:0; transform:translateZ(0); }
.nav-fx .sn-instreak{
  position:absolute; left:50%; top:50%; width:var(--w); height:var(--len);
  transform-origin:50% 0%;
  transform:rotate(var(--a)) translateY(0) scaleY(1);
  background:linear-gradient(to top, rgba(230,207,149,0) 0%, var(--gold,#c9a86a) 45%, var(--gold-2,#e6cf95) 100%);
  opacity:0; border-radius:2px; will-change:transform,opacity;
}
.nav-fx.cover .sn-instreak{ animation:sn-instreak 360ms cubic-bezier(.5,0,.85,.4) var(--dl) forwards; }
@keyframes sn-instreak{
  0%{ opacity:0; transform:rotate(var(--a)) translateY(calc(var(--len) * -1)) scaleY(1.2); }
  35%{ opacity:.9; }
  100%{ opacity:0; transform:rotate(var(--a)) translateY(-2px) scaleY(.03); }
}
.nav-fx .sn-inring{
  position:absolute; left:50%; top:50%; width:92vmax; height:92vmax;
  margin:-46vmax 0 0 -46vmax; border-radius:50%;
  border:2px solid var(--gold-2,#e6cf95);
  background:radial-gradient(circle, rgba(230,207,149,0) 64%, rgba(201,168,106,.22) 70%, rgba(230,207,149,0) 76%);
  opacity:0; transform:scale(1) rotateX(10deg); will-change:transform,opacity;
}
.nav-fx.cover .sn-inring{ animation:sn-inring 380ms cubic-bezier(.55,0,.85,.4) var(--rdl) forwards; }
.nav-fx .sn-inring2{ border-color:var(--gold,#c9a86a); }
@keyframes sn-inring{
  0%{ opacity:0; transform:scale(1.08) rotateX(10deg); }
  30%{ opacity:.95; }
  100%{ opacity:0; transform:scale(.015) rotateX(10deg); }
}

.nav-fx .sn-seam{
  position:absolute; left:50%; top:50%; width:62vmax; height:3px;
  margin:-1.5px 0 0 -31vmax; border-radius:3px; transform:scaleX(0);
  background:linear-gradient(to right, rgba(255,247,230,0) 0%, var(--gold-2,#e6cf95) 30%, #fff7e6 50%, var(--gold-2,#e6cf95) 70%, rgba(255,247,230,0) 100%);
  opacity:0; will-change:transform,opacity;
}
.nav-fx.cover .sn-seam{ animation:sn-seam 360ms cubic-bezier(.3,.7,.2,1) 250ms forwards; }
@keyframes sn-seam{
  0%{ opacity:0; transform:scaleX(0) scaleY(1); }
  20%{ opacity:1; transform:scaleX(1) scaleY(1); }
  55%{ opacity:1; transform:scaleX(1) scaleY(3); }
  100%{ opacity:0; transform:scaleX(.2) scaleY(8); }
}

.nav-fx .sn-core{
  position:absolute; left:50%; top:50%; width:44vmax; height:44vmax;
  margin:-22vmax 0 0 -22vmax; border-radius:50%;
  background:radial-gradient(circle, #fff7e6 0%, #fff7e6 14%, var(--gold-2,#e6cf95) 30%, var(--gold,#c9a86a) 48%, rgba(168,134,63,0) 72%);
  opacity:0; transform:scale(0); will-change:transform,opacity;
}
.nav-fx.cover .sn-core{ animation:sn-core 620ms cubic-bezier(.2,.75,.15,1) 320ms forwards; }
@keyframes sn-core{
  0%{ opacity:0; transform:scale(0); }
  8%{ opacity:1; transform:scale(.1); }
  42%{ opacity:1; transform:scale(2.8); }
  100%{ opacity:1; transform:scale(6.8); }
}
.nav-fx .sn-flash{
  position:absolute; inset:0; opacity:0; will-change:opacity;
  background:radial-gradient(circle at 50% 50%, #fff7e6 0%, #fff7e6 28%, var(--gold-2,#e6cf95) 56%, var(--gold,#c9a86a) 100%);
}
.nav-fx.cover .sn-flash{ animation:sn-flash 560ms cubic-bezier(.4,0,.3,1) 300ms forwards; }
@keyframes sn-flash{
  0%{ opacity:0; } 30%{ opacity:0; } 46%{ opacity:1; } 100%{ opacity:1; }
}
.nav-fx.clear .sn-flash{ opacity:1; animation:sn-flash-out 300ms ease-in forwards; }
@keyframes sn-flash-out{ from{opacity:1} to{opacity:0} }

.nav-fx .sn-burst{ position:absolute; left:50%; top:50%; width:0; height:0; transform:translateZ(40px); }
.nav-fx .sn-ray{
  position:absolute; left:0; top:0; width:var(--rw); height:var(--long);
  transform-origin:50% 0%;
  transform:rotate(var(--a)) translateY(0) scaleY(0);
  background:linear-gradient(to bottom, #fff7e6 0%, var(--gold-2,#e6cf95) 24%, var(--gold,#c9a86a) 50%, rgba(201,168,106,0) 100%);
  opacity:0; border-radius:3px; will-change:transform,opacity;
}
.nav-fx.cover .sn-ray{ animation:sn-ray 600ms cubic-bezier(.12,.85,.25,1) calc(330ms + var(--rdl)) forwards; }
@keyframes sn-ray{
  0%{ opacity:0; transform:rotate(var(--a)) translateY(0) scaleY(0); }
  14%{ opacity:1; transform:rotate(var(--a)) translateY(0) scaleY(.25); }
  60%{ opacity:1; transform:rotate(var(--a)) translateY(0) scaleY(1); }
  100%{ opacity:.35; transform:rotate(var(--a)) translateY(0) scaleY(1.12); }
}
.nav-fx .sn-shock{
  position:absolute; left:50%; top:50%; width:30vmax; height:30vmax;
  margin:-15vmax 0 0 -15vmax; border-radius:50%;
  border:0.9vmax solid var(--gold-2,#e6cf95);
  background:radial-gradient(circle, rgba(255,247,230,0) 70%, rgba(255,247,230,.28) 80%, rgba(255,247,230,0) 88%);
  opacity:0; transform:scale(0); will-change:transform,opacity;
}
.nav-fx.cover .sn-shock{ animation:sn-shock 600ms cubic-bezier(.1,.7,.2,1) 330ms forwards; }
.nav-fx .sn-shock2{ border-color:var(--gold,#c9a86a); }
.nav-fx.cover .sn-shock2{ animation:sn-shock 660ms cubic-bezier(.1,.7,.2,1) 390ms forwards; }
@keyframes sn-shock{
  0%{ opacity:0; transform:scale(0); } 12%{ opacity:1; } 100%{ opacity:0; transform:scale(7); }
}
.nav-fx .sn-spark{
  position:absolute; left:50%; top:50%; width:var(--ss); height:var(--ss);
  margin:calc(var(--ss) * -.5) 0 0 calc(var(--ss) * -.5); border-radius:50%;
  background:radial-gradient(circle, #fff7e6 0%, var(--gold-2,#e6cf95) 50%, rgba(230,207,149,0) 100%);
  opacity:0; transform:rotate(var(--a)) translateX(0) scale(.3);
  transform-origin:50% 50%; will-change:transform,opacity;
}
.nav-fx.cover .sn-spark{ animation:sn-spark 580ms cubic-bezier(.15,.8,.25,1) calc(350ms + var(--sdl)) forwards; }
@keyframes sn-spark{
  0%{ opacity:0; transform:rotate(var(--a)) translateX(0) scale(.3); }
  20%{ opacity:1; transform:rotate(var(--a)) translateX(calc(var(--d) * .35)) scale(1); }
  100%{ opacity:0; transform:rotate(var(--a)) translateX(var(--d)) scale(.2); }
}

.nav-fx .sn-glory{
  position:absolute; left:50%; top:50%; width:170vmax; height:170vmax;
  margin:-85vmax 0 0 -85vmax;
  background:conic-gradient(from 0deg,
    rgba(255,247,230,0) 0deg, rgba(255,247,230,.5) 4deg, rgba(255,247,230,0) 9deg,
    rgba(230,207,149,0) 21deg, rgba(230,207,149,.42) 25deg, rgba(230,207,149,0) 30deg,
    rgba(255,247,230,0) 42deg, rgba(255,247,230,.5) 46deg, rgba(255,247,230,0) 51deg,
    rgba(230,207,149,0) 63deg, rgba(230,207,149,.42) 67deg, rgba(230,207,149,0) 72deg,
    rgba(255,247,230,0) 84deg, rgba(255,247,230,.5) 88deg, rgba(255,247,230,0) 93deg,
    rgba(230,207,149,0) 105deg, rgba(230,207,149,.42) 109deg, rgba(230,207,149,0) 114deg,
    rgba(255,247,230,0) 126deg, rgba(255,247,230,.5) 130deg, rgba(255,247,230,0) 135deg,
    rgba(230,207,149,0) 147deg, rgba(230,207,149,.42) 151deg, rgba(230,207,149,0) 156deg,
    rgba(255,247,230,0) 168deg, rgba(255,247,230,.5) 172deg, rgba(255,247,230,0) 177deg,
    rgba(230,207,149,0) 189deg, rgba(230,207,149,.42) 193deg, rgba(230,207,149,0) 198deg,
    rgba(255,247,230,0) 210deg, rgba(255,247,230,.5) 214deg, rgba(255,247,230,0) 219deg,
    rgba(230,207,149,0) 231deg, rgba(230,207,149,.42) 235deg, rgba(230,207,149,0) 240deg,
    rgba(255,247,230,0) 252deg, rgba(255,247,230,.5) 256deg, rgba(255,247,230,0) 261deg,
    rgba(230,207,149,0) 273deg, rgba(230,207,149,.42) 277deg, rgba(230,207,149,0) 282deg,
    rgba(255,247,230,0) 294deg, rgba(255,247,230,.5) 298deg, rgba(255,247,230,0) 303deg,
    rgba(230,207,149,0) 315deg, rgba(230,207,149,.42) 319deg, rgba(230,207,149,0) 324deg,
    rgba(255,247,230,0) 336deg, rgba(255,247,230,.5) 340deg, rgba(255,247,230,0) 345deg,
    rgba(230,207,149,0) 357deg, rgba(230,207,149,.42) 360deg);
  opacity:0; transform:scale(.2) rotate(0deg); will-change:transform,opacity;
}
.nav-fx.cover .sn-glory{ animation:sn-glory 640ms cubic-bezier(.15,.7,.2,1) 320ms forwards; }
@keyframes sn-glory{
  0%{ opacity:0; transform:scale(.2) rotate(0deg); }
  44%{ opacity:.85; transform:scale(1) rotate(14deg); }
  100%{ opacity:.5; transform:scale(1.35) rotate(28deg); }
}
.nav-fx.clear .sn-glory{ animation:sn-glory-out 280ms ease-in forwards; }
@keyframes sn-glory-out{ from{opacity:.5} to{opacity:0; transform:scale(1.6) rotate(36deg);} }

.nav-fx .sn-mark{
  position:absolute; width:18vmin; height:18vmin; opacity:0;
  transform:translateZ(80px) scale(.35) rotate(-14deg); will-change:transform,opacity;
}
.nav-fx .sn-mark svg{ width:100%; height:100%; display:block; }
.nav-fx .sn-mark .d-fill{ fill:#15110c; stroke:var(--gold-deep,#a8863f); stroke-width:1.2; }
.nav-fx .sn-mark .d-facet{ stroke:var(--gold-2,#e6cf95); stroke-width:1; fill:none; }
.nav-fx.cover .sn-mark{ animation:sn-mark 600ms cubic-bezier(.2,.85,.2,1) 430ms forwards; }
@keyframes sn-mark{
  0%{ opacity:0; transform:translateZ(80px) scale(.35) rotate(-14deg); }
  40%{ opacity:1; transform:translateZ(80px) scale(1.08) rotate(0deg); }
  100%{ opacity:.95; transform:translateZ(80px) scale(1) rotate(0deg); }
}
.nav-fx.clear .sn-mark{ animation:sn-mark-out 280ms ease-in forwards; }
@keyframes sn-mark-out{ from{opacity:.95} to{opacity:0; transform:translateZ(80px) scale(1.3) rotate(8deg);} }

.nav-fx .sn-iris{
  position:absolute; inset:0; opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,247,230,.9) 0%, rgba(255,247,230,0) 16%),
    radial-gradient(circle at 50% 50%, rgba(230,207,149,0) 60%, var(--gold-2,#e6cf95) 78%, var(--gold,#c9a86a) 90%, rgba(201,168,106,0) 100%),
    radial-gradient(circle at 50% 50%, #1c1812 0%, #1c1812 55%, #15110c 100%);
  clip-path:circle(150% at 50% 50%); will-change:clip-path,opacity;
}
.nav-fx.cover .sn-iris{ animation:sn-iris-in 200ms linear 480ms forwards; }
@keyframes sn-iris-in{ from{opacity:0} to{opacity:1} }
.nav-fx.clear .sn-iris{ opacity:1; animation:sn-iris-close 520ms cubic-bezier(.5,0,.25,1) forwards; }
@keyframes sn-iris-close{
  0%{ clip-path:circle(150% at 50% 50%); opacity:1; }
  80%{ clip-path:circle(9% at 50% 50%); opacity:1; }
  100%{ clip-path:circle(0% at 50% 50%); opacity:1; }
}

/* ===================== shatter ===================== */
.nav-fx .sh-scene{
  position:absolute; inset:0;
  perspective:1100px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
}

/* LIT gold coverage backstop — specular highlight + espresso falloff, NOT a flat fill */
.nav-fx .sh-back{
  position:absolute; inset:-3%;
  opacity:0;
  background:
    radial-gradient(120% 95% at 38% 30%, #fff7e6 0%, rgba(255,247,230,0) 34%),
    radial-gradient(150% 120% at 64% 78%, rgba(21,17,12,.55) 0%, rgba(21,17,12,0) 46%),
    linear-gradient(128deg, #e6cf95 0%, #c9a86a 30%, #a8863f 60%, #6f5a2b 86%, #4a3c1d 100%);
  will-change:opacity;
}
.nav-fx.cover .sh-back{ animation:sh-back-in 620ms cubic-bezier(.55,0,.25,1) forwards; }
.nav-fx.clear .sh-back{ opacity:1; animation:sh-back-out 500ms cubic-bezier(.5,0,.85,.35) forwards; }
@keyframes sh-back-in{
  0%{ opacity:0; }
  46%{ opacity:0; }   /* stay clear while panels are still flying in */
  72%{ opacity:1; }   /* fully opaque well before the wall locks — double-locks coverage */
  100%{ opacity:1; }
}
@keyframes sh-back-out{
  0%{ opacity:1; }
  28%{ opacity:1; }   /* hold opaque across the scroll-jump */
  100%{ opacity:0; }
}

.nav-fx .sh-wall{
  position:absolute; inset:0;
  transform-style:preserve-3d;
}

/* each facet: a LIT crystal quad — specular glint + corner sheen + dark bevel + gold body */
.nav-fx .sh-panel{
  position:absolute;
  width:calc(100% / 6 + 2px);    /* +bleed so seams never show at rest */
  height:calc(100% / 5 + 2px);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  will-change:transform,opacity;
  background:
    linear-gradient(calc(122deg * var(--spec)),
      rgba(255,247,230,0) 28%,
      rgba(255,247,230,.9) 47%,
      rgba(255,247,230,0) 62%),
    radial-gradient(150% 130% at 80% 88%,
      rgba(21,17,12,0) 38%,
      rgba(21,17,12,.6) 100%),
    radial-gradient(120% 120% at 22% 16%,
      rgba(255,247,230,.5) 0%,
      rgba(255,247,230,0) 40%),
    linear-gradient(135deg,
      #e6cf95 0%, #c9a86a 36%, #a8863f 70%, #6f5a2b 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255,247,230,.55),    /* static lit top-left edge (allowed) */
    inset -1px -1px 0 rgba(21,17,12,.6);        /* static beveled bottom-right edge */
  transform:translateZ(-1900px)
            rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
            scale(1.06);
  opacity:0;
}

/* COVER: tumble in from deep space, de-rotate, overshoot toward camera, lock flush */
.nav-fx.cover .sh-panel{
  animation:sh-in 620ms cubic-bezier(.16,.86,.26,1) forwards;
  animation-delay:var(--cd);
}
@keyframes sh-in{
  0%{
    transform:translateZ(-1900px)
              rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz))
              scale(1.06);
    opacity:0;
  }
  16%{ opacity:1; }
  80%{ transform:translateZ(70px) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
  100%{ transform:translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity:1; }
}

/* CLEAR: explode forward past the camera, spin + fade like shattered glass */
.nav-fx.clear .sh-panel{
  opacity:1;
  transform:translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scale(1);
  animation:sh-out 500ms cubic-bezier(.5,0,.78,.18) forwards;
  animation-delay:var(--xd);
}
@keyframes sh-out{
  0%{ transform:translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity:1; }
  30%{ opacity:1; }
  100%{
    transform:translate3d(var(--fx),var(--fy),1600px)
              rotateX(var(--ox)) rotateY(var(--oy)) rotateZ(var(--oz))
              scale(2.7);
    opacity:0;
  }
}

/* SHOCKWAVE — hot white-gold core + 6-spoke light-ray burst (the kaboom) */
.nav-fx .sh-flash{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(.18);
  transform-origin:50% 50%;
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(255,247,230,.98) 0%,
      rgba(255,247,230,.6) 26%,
      rgba(230,207,149,.3) 50%,
      rgba(230,207,149,0) 72%),
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,247,230,0) 0deg, rgba(255,247,230,.55) 12deg, rgba(255,247,230,0) 30deg,
      rgba(255,247,230,0) 84deg, rgba(255,247,230,.55) 96deg, rgba(255,247,230,0) 114deg,
      rgba(255,247,230,0) 168deg, rgba(255,247,230,.55) 180deg, rgba(255,247,230,0) 198deg,
      rgba(255,247,230,0) 252deg, rgba(255,247,230,.55) 264deg, rgba(255,247,230,0) 282deg,
      rgba(255,247,230,0) 360deg);
  will-change:transform,opacity;
}
.nav-fx.cover .sh-flash{ animation:sh-flash 620ms cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes sh-flash{
  0%,58%{ opacity:0; transform:scale(.18) rotate(0deg); }
  80%{ opacity:.98; transform:scale(1.3) rotate(14deg); }   /* peaks exactly as wall locks */
  100%{ opacity:0; transform:scale(1.8) rotate(26deg); }
}

/* ===================== spinzoom ===================== */
.nav-fx{ transform-style:preserve-3d; }

/* espresso ground — guaranteed opaque backstop, lit from center so gold reads as light */
.nav-fx .sz-ground{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, #1c1812 0%, #15110c 58%, #0d0a07 100%);
  opacity:0;
}
.nav-fx .sz-stage{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  display:flex; align-items:center; justify-content:center;
}

/* radial burst halo */
.nav-fx .sz-burst{
  position:absolute; left:50%; top:50%;
  width:160vmax; height:160vmax; margin:-80vmax 0 0 -80vmax;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,247,230,0.95) 0%,
    rgba(230,207,149,0.65) 14%,
    rgba(201,168,106,0.35) 30%,
    rgba(168,134,63,0.14) 48%,
    rgba(21,17,12,0) 70%);
  opacity:0; transform:scale(0.18) translateZ(-300px);
  will-change:transform,opacity;
}

/* conic god-ray disc — 36 lit spokes baked into the gradient */
.nav-fx .sz-rays{
  position:absolute; left:50%; top:50%;
  width:230vmax; height:230vmax; margin:-115vmax 0 0 -115vmax;
  border-radius:50%;
  background:conic-gradient(from 0deg at 50% 50%,
    rgba(255,247,230,0.0) 0deg, rgba(255,247,230,0.42) 3deg, rgba(255,247,230,0.0) 6deg,
    rgba(230,207,149,0.0) 10deg, rgba(230,207,149,0.30) 13deg, rgba(230,207,149,0.0) 16deg,
    rgba(255,247,230,0.0) 20deg, rgba(255,247,230,0.42) 23deg, rgba(255,247,230,0.0) 26deg,
    rgba(201,168,106,0.0) 30deg, rgba(201,168,106,0.26) 33deg, rgba(201,168,106,0.0) 36deg,
    rgba(255,247,230,0.0) 40deg, rgba(255,247,230,0.42) 43deg, rgba(255,247,230,0.0) 46deg,
    rgba(230,207,149,0.0) 50deg, rgba(230,207,149,0.30) 53deg, rgba(230,207,149,0.0) 56deg,
    rgba(255,247,230,0.0) 60deg, rgba(255,247,230,0.42) 63deg, rgba(255,247,230,0.0) 66deg,
    rgba(201,168,106,0.0) 70deg, rgba(201,168,106,0.26) 73deg, rgba(201,168,106,0.0) 76deg,
    rgba(255,247,230,0.0) 80deg, rgba(255,247,230,0.42) 83deg, rgba(255,247,230,0.0) 86deg,
    rgba(230,207,149,0.0) 90deg, rgba(230,207,149,0.30) 93deg, rgba(230,207,149,0.0) 96deg,
    rgba(255,247,230,0.0) 100deg, rgba(255,247,230,0.42) 103deg, rgba(255,247,230,0.0) 106deg,
    rgba(201,168,106,0.0) 110deg, rgba(201,168,106,0.26) 113deg, rgba(201,168,106,0.0) 116deg,
    rgba(255,247,230,0.0) 120deg, rgba(255,247,230,0.42) 123deg, rgba(255,247,230,0.0) 126deg,
    rgba(230,207,149,0.0) 130deg, rgba(230,207,149,0.30) 133deg, rgba(230,207,149,0.0) 136deg,
    rgba(255,247,230,0.0) 140deg, rgba(255,247,230,0.42) 143deg, rgba(255,247,230,0.0) 146deg,
    rgba(201,168,106,0.0) 150deg, rgba(201,168,106,0.26) 153deg, rgba(201,168,106,0.0) 156deg,
    rgba(255,247,230,0.0) 160deg, rgba(255,247,230,0.42) 163deg, rgba(255,247,230,0.0) 166deg,
    rgba(230,207,149,0.0) 170deg, rgba(230,207,149,0.30) 173deg, rgba(230,207,149,0.0) 176deg,
    rgba(255,247,230,0.0) 180deg, rgba(255,247,230,0.42) 183deg, rgba(255,247,230,0.0) 186deg,
    rgba(201,168,106,0.0) 190deg, rgba(201,168,106,0.26) 193deg, rgba(201,168,106,0.0) 196deg,
    rgba(255,247,230,0.0) 200deg, rgba(255,247,230,0.42) 203deg, rgba(255,247,230,0.0) 206deg,
    rgba(230,207,149,0.0) 210deg, rgba(230,207,149,0.30) 213deg, rgba(230,207,149,0.0) 216deg,
    rgba(255,247,230,0.0) 220deg, rgba(255,247,230,0.42) 223deg, rgba(255,247,230,0.0) 226deg,
    rgba(201,168,106,0.0) 230deg, rgba(201,168,106,0.26) 233deg, rgba(201,168,106,0.0) 236deg,
    rgba(255,247,230,0.0) 240deg, rgba(255,247,230,0.42) 243deg, rgba(255,247,230,0.0) 246deg,
    rgba(230,207,149,0.0) 250deg, rgba(230,207,149,0.30) 253deg, rgba(230,207,149,0.0) 256deg,
    rgba(255,247,230,0.0) 260deg, rgba(255,247,230,0.42) 263deg, rgba(255,247,230,0.0) 266deg,
    rgba(201,168,106,0.0) 270deg, rgba(201,168,106,0.26) 273deg, rgba(201,168,106,0.0) 276deg,
    rgba(255,247,230,0.0) 280deg, rgba(255,247,230,0.42) 283deg, rgba(255,247,230,0.0) 286deg,
    rgba(230,207,149,0.0) 290deg, rgba(230,207,149,0.30) 293deg, rgba(230,207,149,0.0) 296deg,
    rgba(255,247,230,0.0) 300deg, rgba(255,247,230,0.42) 303deg, rgba(255,247,230,0.0) 306deg,
    rgba(201,168,106,0.0) 310deg, rgba(201,168,106,0.26) 313deg, rgba(201,168,106,0.0) 316deg,
    rgba(255,247,230,0.0) 320deg, rgba(255,247,230,0.42) 323deg, rgba(255,247,230,0.0) 326deg,
    rgba(230,207,149,0.0) 330deg, rgba(230,207,149,0.30) 333deg, rgba(230,207,149,0.0) 336deg,
    rgba(255,247,230,0.0) 340deg, rgba(255,247,230,0.42) 343deg, rgba(255,247,230,0.0) 346deg,
    rgba(201,168,106,0.0) 350deg, rgba(201,168,106,0.26) 353deg, rgba(201,168,106,0.0) 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 4%, #000 16%, #000 52%, rgba(0,0,0,0) 74%);
          mask:radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 4%, #000 16%, #000 52%, rgba(0,0,0,0) 74%);
  opacity:0; transform:rotate(0deg) scale(0.4) translateZ(-220px);
  will-change:transform,opacity;
}
.nav-fx .sz-rays2{
  width:300vmax; height:300vmax; margin:-150vmax 0 0 -150vmax;
  transform:rotate(7deg) scale(0.5) translateZ(-360px);
  opacity:0;
}

/* shockwave seam ring — thin bright lit annulus that expands outward */
.nav-fx .sz-ring{
  position:absolute; left:50%; top:50%;
  width:60vmax; height:60vmax; margin:-30vmax 0 0 -30vmax;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,247,230,0) 0%,
    rgba(255,247,230,0) 38%,
    rgba(230,207,149,0.35) 44%,
    rgba(255,247,230,0.95) 50%,
    rgba(230,207,149,0.35) 56%,
    rgba(255,247,230,0) 62%,
    rgba(255,247,230,0) 100%);
  opacity:0; transform:scale(0.2) translateZ(0);
  will-change:transform,opacity;
}

/* sweeping lens-flare streak */
.nav-fx .sz-flare{
  position:absolute; left:50%; top:50%;
  width:300vmax; height:11vmax; margin:-5.5vmax 0 0 -150vmax;
  background:linear-gradient(90deg,
    rgba(255,247,230,0) 0%,
    rgba(255,247,230,0) 30%,
    rgba(230,207,149,0.18) 43%,
    rgba(255,247,230,0.9) 50%,
    rgba(230,207,149,0.18) 57%,
    rgba(255,247,230,0) 70%,
    rgba(255,247,230,0) 100%);
  border-radius:50%;
  opacity:0; transform:rotate(-28deg) scaleX(0.4);
  transform-origin:50% 50%;
  will-change:transform,opacity;
}

/* hot glints riding the gem */
.nav-fx .sz-glint{
  position:absolute; left:50%; top:50%;
  width:7vmin; height:7vmin; margin:-3.5vmin 0 0 -3.5vmin;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,247,230,0.95) 0%, rgba(230,207,149,0.5) 35%, rgba(230,207,149,0) 70%);
  opacity:0;
  transform:translate(var(--gx,0), var(--gy,0)) scale(0.2) translateZ(40px);
  will-change:transform,opacity;
}

/* the gem */
.nav-fx .sz-gemwrap{
  position:absolute; left:50%; top:50%;
  width:30vmin; height:30vmin; margin:-15vmin 0 0 -15vmin;
  transform-style:preserve-3d;
  opacity:0;
  transform:rotateZ(-40deg) scale(0.42) translateZ(-160px);
  will-change:transform,opacity;
}
.nav-fx .sz-gem{ width:100%; height:100%; display:block; }

/* supernova flash — opaque cover, radial lit core not a flat rect */
.nav-fx .sz-flash{
  position:absolute; left:50%; top:50%;
  width:260vmax; height:260vmax; margin:-130vmax 0 0 -130vmax;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #fff7e6 0%,
    #fff7e6 30%,
    #f3e2b4 44%,
    #e6cf95 58%,
    #c9a86a 72%,
    #6f5526 86%,
    #15110c 100%);
  opacity:0; transform:scale(0.2);
  will-change:transform,opacity;
}

/* ===================== COVER (620ms): ignite, spin, zoom, flash ===================== */
.nav-fx.cover .sz-ground{ animation:szGround 620ms linear forwards; }
.nav-fx.cover .sz-burst{ animation:szBurst 620ms cubic-bezier(.55,0,.45,1) forwards; }
.nav-fx.cover .sz-rays{ animation:szRays 620ms cubic-bezier(.45,0,.55,1) forwards; }
.nav-fx.cover .sz-rays2{ animation:szRays2 620ms cubic-bezier(.45,0,.55,1) forwards; }
.nav-fx.cover .sz-ring{ animation:szRing 620ms cubic-bezier(.2,.7,.3,1) forwards; }
.nav-fx.cover .sz-flare{ animation:szFlare 620ms cubic-bezier(.5,0,.2,1) forwards; }
.nav-fx.cover .sz-glint{ animation:szGlint 620ms cubic-bezier(.4,0,.3,1) var(--gd,0ms) forwards; }
.nav-fx.cover .sz-gemwrap{ animation:szGem 620ms cubic-bezier(.7,-0.25,.45,1) forwards; }
.nav-fx.cover .sz-flash{ animation:szFlash 620ms cubic-bezier(.6,0,.4,1) forwards; }

@keyframes szGround{ 0%{opacity:1;} 100%{opacity:1;} }

@keyframes szBurst{
  0%{ opacity:0; transform:scale(0.18) translateZ(-300px); }
  22%{ opacity:0.9; transform:scale(0.55) translateZ(-200px); }
  70%{ opacity:1; transform:scale(1.35) translateZ(-40px); }
  100%{ opacity:1; transform:scale(2.6) translateZ(60px); }
}
@keyframes szRays{
  0%{ opacity:0; transform:rotate(0deg) scale(0.4) translateZ(-220px); }
  20%{ opacity:0.85; transform:rotate(38deg) scale(0.8) translateZ(-160px); }
  100%{ opacity:0.95; transform:rotate(300deg) scale(2.1) translateZ(40px); }
}
@keyframes szRays2{
  0%{ opacity:0; transform:rotate(7deg) scale(0.5) translateZ(-360px); }
  22%{ opacity:0.6; transform:rotate(-30deg) scale(0.9) translateZ(-260px); }
  100%{ opacity:0.8; transform:rotate(-210deg) scale(2.4) translateZ(-60px); }
}
@keyframes szRing{
  0%{ opacity:0; transform:scale(0.2); }
  30%{ opacity:0.95; transform:scale(1.4); }
  100%{ opacity:0; transform:scale(5.5); }
}
@keyframes szFlare{
  0%{ opacity:0; transform:rotate(-28deg) scaleX(0.4); }
  30%{ opacity:0.95; transform:rotate(-12deg) scaleX(1); }
  75%{ opacity:0.8; transform:rotate(18deg) scaleX(1.15); }
  100%{ opacity:0; transform:rotate(34deg) scaleX(1.25); }
}
@keyframes szGlint{
  0%{ opacity:0; transform:translate(var(--gx,0),var(--gy,0)) scale(0.2) translateZ(40px); }
  30%{ opacity:1; transform:translate(calc(var(--gx,0)*1.6),calc(var(--gy,0)*1.6)) scale(1) translateZ(120px); }
  72%{ opacity:0.85; transform:translate(calc(var(--gx,0)*3),calc(var(--gy,0)*3)) scale(1.7) translateZ(260px); }
  100%{ opacity:0; transform:translate(calc(var(--gx,0)*5),calc(var(--gy,0)*5)) scale(2.4) translateZ(420px); }
}
@keyframes szGem{
  0%{ opacity:0; transform:rotateZ(-40deg) scale(0.42) translateZ(-160px); }
  16%{ opacity:1; transform:rotateZ(20deg) scale(0.62) translateZ(-80px); }
  55%{ opacity:1; transform:rotateZ(340deg) scale(2.4) translateZ(120px); }
  100%{ opacity:0.55; transform:rotateZ(760deg) scale(7.5) translateZ(520px); }
}
@keyframes szFlash{
  0%{ opacity:0; transform:scale(0.2); }
  46%{ opacity:0; transform:scale(1.0); }
  74%{ opacity:1; transform:scale(2.3); }
  100%{ opacity:1; transform:scale(3.4); }
}

/* ===================== CLEAR (460ms): flash falls off, gem recedes, rays dim ===================== */
.nav-fx.clear .sz-ground{ animation:szGroundOut 460ms ease-in forwards; }
.nav-fx.clear .sz-burst{ animation:szBurstOut 460ms ease-out forwards; }
.nav-fx.clear .sz-rays{ animation:szRaysOut 460ms cubic-bezier(.4,0,.6,1) forwards; }
.nav-fx.clear .sz-rays2{ animation:szRaysOut2 460ms cubic-bezier(.4,0,.6,1) forwards; }
.nav-fx.clear .sz-ring{ opacity:0; }
.nav-fx.clear .sz-flare{ opacity:0; }
.nav-fx.clear .sz-glint{ opacity:0; }
.nav-fx.clear .sz-gemwrap{ animation:szGemOut 460ms cubic-bezier(.3,0,.2,1) forwards; }
.nav-fx.clear .sz-flash{ animation:szFlashOut 460ms cubic-bezier(.3,0,.3,1) forwards; }

@keyframes szGroundOut{ 0%{opacity:1;} 100%{opacity:0;} }
@keyframes szBurstOut{
  0%{ opacity:1; transform:scale(2.6) translateZ(60px); }
  100%{ opacity:0; transform:scale(3.4) translateZ(160px); }
}
@keyframes szRaysOut{
  0%{ opacity:0.95; transform:rotate(300deg) scale(2.1) translateZ(40px); }
  100%{ opacity:0; transform:rotate(372deg) scale(2.7) translateZ(160px); }
}
@keyframes szRaysOut2{
  0%{ opacity:0.8; transform:rotate(-210deg) scale(2.4) translateZ(-60px); }
  100%{ opacity:0; transform:rotate(-258deg) scale(3) translateZ(60px); }
}
@keyframes szGemOut{
  0%{ opacity:0.55; transform:rotateZ(760deg) scale(7.5) translateZ(520px); }
  45%{ opacity:0.4; transform:rotateZ(880deg) scale(4.2) translateZ(240px); }
  100%{ opacity:0; transform:rotateZ(1000deg) scale(1.4) translateZ(-120px); }
}
@keyframes szFlashOut{
  0%{ opacity:1; transform:scale(3.4); }
  45%{ opacity:0.5; transform:scale(3.7) translateZ(40px); }
  100%{ opacity:0; transform:scale(4.4) translateZ(220px); }
}

/* ===================== warp ===================== */
.nav-fx{ perspective: 720px; perspective-origin: 50% 50%; }

/* opaque espresso void = the primary coverage backstop (never flat gold) */
.nav-fx .warp-base{
  position:absolute; inset:0; opacity:0; transform: translateZ(0);
  background:
    radial-gradient(120% 120% at 50% 50%, #1c1812 0%, #15110c 60%, #100c08 100%);
  will-change: opacity;
}
.nav-fx.cover .warp-base{ animation: warpBaseIn .16s linear forwards; }
.nav-fx.clear .warp-base{ animation: warpBaseOut .48s ease-in forwards; }
@keyframes warpBaseIn{ from{opacity:0} to{opacity:1} }
@keyframes warpBaseOut{ 0%{opacity:1} 100%{opacity:0} }

/* streak field shares the 3D space */
.nav-fx .warp-field{
  position:absolute; inset:0; transform-style: preserve-3d;
}

/* each streak: a thin lit-metal bar pointing radially out from center */
.nav-fx .warp-streak{
  position:absolute; left:50%; top:50%;
  width: 3px; height: 13vmax;
  margin-left:-1.5px; margin-top:0;
  transform-origin: 50% 0%;
  opacity:0;
  background: linear-gradient(to bottom,
      rgba(255,247,230,0) 0%,
      var(--c) 14%,
      #fff7e6 50%,
      var(--c) 82%,
      rgba(255,247,230,0) 100%);
  border-radius: 3px;
  transform: rotate(var(--ang)) translateY(2.2vmax) translateZ(-200px) scaleY(.18);
  will-change: transform, opacity;
}
.nav-fx.cover .warp-streak{
  animation: warpStreakIn .58s cubic-bezier(.62,.02,.86,.2) var(--d) both;
}
.nav-fx.clear .warp-streak{
  animation: warpStreakOut .40s cubic-bezier(.5,0,.9,.35) calc(var(--d) * .25) both;
}
@keyframes warpStreakIn{
  0%   { opacity:0; transform: rotate(var(--ang)) translateY(2.2vmax) translateZ(-220px) scaleY(.18); }
  22%  { opacity:1; }
  100% { opacity:0; transform: rotate(var(--ang)) translateY(var(--dist)) translateZ(var(--z)) scaleY(calc(var(--len) * 4.4)); }
}
@keyframes warpStreakOut{
  0%   { opacity:0; transform: rotate(var(--ang)) translateY(1.4vmax) translateZ(-120px) scaleY(.3); }
  18%  { opacity:1; }
  100% { opacity:0; transform: rotate(var(--ang)) translateY(calc(var(--dist) * 1.15)) translateZ(calc(var(--z) + 260px)) scaleY(calc(var(--len) * 5.2)); }
}

/* bright LIT shockwave ring blasting through Z = lit-metal seam, not paint */
.nav-fx .warp-ring{
  position:absolute; left:50%; top:50%; width:30vmax; height:30vmax;
  margin-left:-15vmax; margin-top:-15vmax;
  opacity:0; transform: translateZ(-80px) scale(.05);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,247,230,0) 0%,
      rgba(255,247,230,0) 56%,
      rgba(230,207,149,.55) 70%,
      #fff7e6 80%,
      rgba(201,168,106,.55) 90%,
      rgba(168,134,63,0) 100%);
  will-change: transform, opacity;
}
.nav-fx.cover .warp-ring{ animation: warpRingIn .5s cubic-bezier(.2,.7,.35,1) .04s forwards; }
.nav-fx.clear .warp-ring{ animation: warpRingOut .4s ease-in forwards; }
@keyframes warpRingIn{
  0%{opacity:0; transform:translateZ(-80px) scale(.05)}
  18%{opacity:1}
  100%{opacity:0; transform:translateZ(180px) scale(2.6)}
}
@keyframes warpRingOut{
  0%{opacity:0; transform:translateZ(-60px) scale(.1)}
  20%{opacity:1}
  100%{opacity:0; transform:translateZ(220px) scale(2.4)}
}

/* conic light-rays raking out of the core for extra lit-metal flare */
.nav-fx .warp-rays{
  position:absolute; left:50%; top:50%; width:140vmax; height:140vmax;
  margin-left:-70vmax; margin-top:-70vmax;
  opacity:0; transform: scale(.3) rotate(0deg);
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,247,230,0) 0deg, rgba(230,207,149,.28) 6deg, rgba(255,247,230,0) 12deg,
      rgba(255,247,230,0) 30deg, rgba(201,168,106,.20) 36deg, rgba(255,247,230,0) 42deg,
      rgba(255,247,230,0) 60deg, rgba(230,207,149,.28) 66deg, rgba(255,247,230,0) 72deg,
      rgba(255,247,230,0) 90deg, rgba(201,168,106,.20) 96deg, rgba(255,247,230,0) 102deg,
      rgba(255,247,230,0) 120deg, rgba(230,207,149,.28) 126deg, rgba(255,247,230,0) 132deg,
      rgba(255,247,230,0) 150deg, rgba(201,168,106,.20) 156deg, rgba(255,247,230,0) 162deg,
      rgba(255,247,230,0) 180deg, rgba(230,207,149,.28) 186deg, rgba(255,247,230,0) 192deg,
      rgba(255,247,230,0) 210deg, rgba(201,168,106,.20) 216deg, rgba(255,247,230,0) 222deg,
      rgba(255,247,230,0) 240deg, rgba(230,207,149,.28) 246deg, rgba(255,247,230,0) 252deg,
      rgba(255,247,230,0) 270deg, rgba(201,168,106,.20) 276deg, rgba(255,247,230,0) 282deg,
      rgba(255,247,230,0) 300deg, rgba(230,207,149,.28) 306deg, rgba(255,247,230,0) 312deg,
      rgba(255,247,230,0) 330deg, rgba(201,168,106,.20) 336deg, rgba(255,247,230,0) 342deg,
      rgba(255,247,230,0) 360deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 6%, #000 22%, #000 60%, transparent 78%);
          mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 6%, #000 22%, #000 60%, transparent 78%);
  will-change: transform, opacity;
}
.nav-fx.cover .warp-rays{ animation: warpRaysIn .6s cubic-bezier(.4,0,.7,.5) .04s forwards; }
.nav-fx.clear .warp-rays{ animation: warpRaysOut .4s ease-in forwards; }
@keyframes warpRaysIn{
  0%{opacity:0; transform:scale(.3) rotate(0deg)}
  40%{opacity:.9}
  100%{opacity:.9; transform:scale(1.1) rotate(26deg)}
}
@keyframes warpRaysOut{
  0%{opacity:.9; transform:scale(1.1) rotate(26deg)}
  100%{opacity:0; transform:scale(1.7) rotate(48deg)}
}

/* central core: layered radial gradients = a glowing hot point with gold halo */
.nav-fx .warp-core{
  position:absolute; left:50%; top:50%; width:46vmax; height:46vmax;
  margin-left:-23vmax; margin-top:-23vmax;
  opacity:0; transform: translateZ(40px) scale(.2);
  background:
    radial-gradient(circle at 50% 50%, #fff7e6 0%, rgba(255,247,230,.95) 7%, rgba(230,207,149,.85) 16%, rgba(201,168,106,.45) 34%, rgba(168,134,63,.18) 55%, rgba(168,134,63,0) 72%);
  border-radius:50%;
  will-change: transform, opacity;
}
.nav-fx.cover .warp-core{ animation: warpCoreIn .64s cubic-bezier(.4,0,.7,.45) forwards; }
.nav-fx.clear .warp-core{ animation: warpCoreOut .44s ease-in forwards; }
@keyframes warpCoreIn{
  0%{opacity:0; transform:translateZ(40px) scale(.16)}
  30%{opacity:1; transform:translateZ(90px) scale(.55)}
  100%{opacity:1; transform:translateZ(180px) scale(1.25)}
}
@keyframes warpCoreOut{
  0%{opacity:1; transform:translateZ(180px) scale(1.25)}
  100%{opacity:0; transform:translateZ(-160px) scale(.12)}
}

/* white-gold supernova flash: the opaque-coverage guarantee at cover peak */
.nav-fx .warp-flash{
  position:absolute; inset:0; opacity:0; transform: scale(.4);
  background:
    radial-gradient(120% 120% at 50% 50%,
      #fff7e6 0%, #fff7e6 30%, #f1e2bc 46%, #e6cf95 60%, #c9a86a 78%, #a8863f 100%);
  will-change: transform, opacity;
}
.nav-fx.cover .warp-flash{ animation: warpFlashIn .66s cubic-bezier(.65,0,.85,.5) forwards; }
.nav-fx.clear .warp-flash{ animation: warpFlashOut .42s ease-in forwards; }
@keyframes warpFlashIn{
  0%{opacity:0; transform:scale(.4)}
  52%{opacity:0; transform:scale(.85)}
  70%{opacity:1; transform:scale(1.35)}   /* full opaque white-gold by ~462ms = page hidden */
  100%{opacity:1; transform:scale(1.6)}
}
@keyframes warpFlashOut{
  0%{opacity:1; transform:scale(1.6)}
  100%{opacity:0; transform:scale(.2)}    /* recedes to a point -> reveal */
}