/* ==========================================================
   PULSE — FX LAYER v2
   Advanced business/fintech themed motion system:
   boot sequence, HUD ticker, 3D cube, digital rain, circuit
   panels, corner brackets, scan-line transitions, magnetic +
   bursting buttons, spotlight/tilt panels, parallax glyphs,
   shimmer headline, KPI pulse + count-up, particle network.
   Purely additive — safe to remove without breaking layout.
   ========================================================== */

:root{
  --mx: 50vw; --my: 50vh;   /* raw pointer px position */
  --px: 0.5;   --py: 0.5;   /* normalized 0..1 pointer position */
}

/* =========== 0. BOOT / INTRO SEQUENCE =========== */
#fx-boot{
  position:fixed; inset:0; z-index:10001;
  background:radial-gradient(circle at 50% 40%, #0b0b0e, var(--void) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; transition:opacity .55s ease, visibility .55s ease;
}
#fx-boot.fx-boot-out{ opacity:0; visibility:hidden; pointer-events:none; }
.fx-boot-mark{
  width:56px; height:56px; background:var(--red);
  clip-path:polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:'Archivo Black', sans-serif; font-size:26px; color:#0a0a0a;
  animation:fxBootMarkPulse 1.1s ease-in-out infinite;
  box-shadow:0 0 40px -8px var(--red-glow);
}
@keyframes fxBootMarkPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.fx-boot-title{
  font-family:'Archivo Black', sans-serif; font-size:30px; letter-spacing:0.04em;
  color:var(--white); text-transform:uppercase;
}
.fx-boot-sub{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.24em;
  color:var(--dim); text-transform:uppercase;
}
.fx-boot-bar{
  width:260px; height:3px; background:rgba(255,255,255,0.08); overflow:hidden; margin-top:10px;
  position:relative;
}
.fx-boot-bar-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--red), var(--volt));
  box-shadow:0 0 14px var(--red-glow);
  transition:width .18s linear;
}
.fx-boot-status{
  font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--dim-2);
  letter-spacing:0.1em; min-height:14px; text-transform:uppercase;
}
.fx-boot-skip{
  position:absolute; bottom:26px; font-family:'JetBrains Mono'; font-size:10px; color:var(--dim-2);
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
}
.fx-boot-skip:hover{ color:var(--red); }
@media (prefers-reduced-motion: reduce){
  #fx-boot{ display:none; }
}

/* =========== 1. MACRO PARALLAX BACKGROUND PAN =========== */
.grid-overlay{
  transform:translate(calc((var(--px) - 0.5) * -18px), calc((var(--py) - 0.5) * -18px));
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}

/* =========== 2. PARTICLE NETWORK + DIGITAL RAIN CANVASES =========== */
#fx-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.55; }
#fx-rain{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.16; }

/* =========== 3. AMBIENT POINTER GLOW =========== */
#fx-glow{
  position:fixed; z-index:0; pointer-events:none;
  width:520px; height:520px; border-radius:50%;
  left:0; top:0;
  transform:translate(calc(var(--mx) - 260px), calc(var(--my) - 260px));
  background:radial-gradient(circle, rgba(255,46,77,0.10), rgba(198,255,58,0.05) 45%, transparent 70%);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){ #fx-glow{ transition:none; } }

/* =========== 4. FLOATING BUSINESS GLYPHS (parallax) =========== */
.fx-float-layer{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fx-glyph{
  position:absolute; font-family:'JetBrains Mono', monospace; color:var(--dim-2); opacity:0.5;
  filter:drop-shadow(0 0 10px rgba(255,46,77,0.15));
  animation:fxDrift 9s ease-in-out infinite; will-change:transform;
}
.fx-glyph svg{ width:100%; height:100%; display:block; }
@keyframes fxDrift{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-18px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce){ .fx-glyph{ animation:none; } }

/* =========== 5. HUD STATUS TICKER (top-right console) =========== */
#fx-hud{
  position:fixed; top:52px; right:20px; z-index:6; pointer-events:none;
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; background:rgba(10,10,12,0.6); backdrop-filter:blur(6px);
  border:1px solid var(--line); border-left:2px solid var(--volt);
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:0.06em; color:var(--dim);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
#fx-hud .fx-hud-dot{ width:6px; height:6px; border-radius:50%; background:var(--volt); box-shadow:0 0 8px var(--volt); flex-shrink:0; animation:pulseDot 1.4s infinite; }
#fx-hud-text::after{ content:''; display:inline-block; width:6px; height:11px; margin-left:2px; background:var(--volt); vertical-align:-2px; animation:fxCaretBlink 0.9s steps(1) infinite; }
@keyframes fxCaretBlink{ 50%{ opacity:0; } }
@media (max-width:1000px){ #fx-hud{ display:none; } }

/* =========== 6. 3D ROTATING BUSINESS CUBE =========== */
.fx-cube-wrap{
  position:fixed; right:30px; bottom:30px; width:60px; height:60px; z-index:2;
  perspective:420px; pointer-events:none; opacity:0.9;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.fx-cube{ width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:fxCubeSpin 14s linear infinite; }
.fx-cube .face{
  position:absolute; width:60px; height:60px; display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,17,0.82); border:1px solid var(--line-red);
  font-family:'JetBrains Mono', monospace; font-size:8.5px; letter-spacing:0.08em; color:var(--volt);
  text-transform:uppercase; text-align:center; box-shadow:inset 0 0 18px rgba(255,46,77,0.12);
}
.fx-cube .f-front{ transform:translateZ(30px); }
.fx-cube .f-back{ transform:rotateY(180deg) translateZ(30px); }
.fx-cube .f-right{ transform:rotateY(90deg) translateZ(30px); }
.fx-cube .f-left{ transform:rotateY(-90deg) translateZ(30px); }
.fx-cube .f-top{ transform:rotateX(90deg) translateZ(30px); }
.fx-cube .f-bottom{ transform:rotateX(-90deg) translateZ(30px); }
@keyframes fxCubeSpin{ from{ transform:rotateX(0) rotateY(0); } to{ transform:rotateX(360deg) rotateY(360deg); } }
@media (max-width:1000px), (prefers-reduced-motion: reduce){ .fx-cube-wrap{ display:none; } }

/* =========== 7. CUSTOM CURSOR =========== */
html.fx-cursor-on, html.fx-cursor-on *{ cursor:none !important; }
.fx-cursor-dot, .fx-cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); will-change:transform; }
.fx-cursor-dot{ width:6px; height:6px; background:var(--red); box-shadow:0 0 10px 2px var(--red-glow); transition:background-color .15s ease, width .15s ease, height .15s ease; }
.fx-cursor-ring{
  width:34px; height:34px; border:1.5px dashed rgba(255,46,77,0.55);
  animation:fxRingRotate 5s linear infinite;
  transition:width .18s cubic-bezier(.2,.8,.2,1), height .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, background-color .18s ease, opacity .18s ease;
}
@keyframes fxRingRotate{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
.fx-cursor-ring.fx-hover{ width:56px; height:56px; background:rgba(198,255,58,0.06); border-color:var(--volt); border-style:solid; }
.fx-cursor-ring.fx-down{ width:26px; height:26px; }
.fx-cursor-dot.fx-down{ background:var(--volt); box-shadow:0 0 10px 2px var(--volt-glow); }

/* =========== 8. HEADLINE SHIMMER =========== */
.h1{
  background:linear-gradient(100deg, var(--white) 25%, var(--red) 45%, var(--white) 60%, var(--white) 100%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fxHeadlineSheen 7s linear infinite;
}
@keyframes fxHeadlineSheen{ 0%{ background-position:200% 0; } 100%{ background-position:-40% 0; } }
@media (prefers-reduced-motion: reduce){ .h1{ animation:none; background-position:0 0; } }

/* =========== 9. NAV ITEM POLISH =========== */
.nav-item{ position:relative; overflow:hidden; }
.nav-item svg{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s ease; }
.nav-item:hover svg{ transform:scale(1.12) rotate(-4deg); }
.nav-item.active svg{ animation:fxIconPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes fxIconPop{ 0%{ transform:scale(0.6); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.nav-item.active{ position:relative; }
.nav-item.active::after{
  content:''; position:absolute; right:10px; top:50%; width:5px; height:5px; border-radius:50%;
  background:var(--red); box-shadow:0 0 8px var(--red-glow); transform:translateY(-50%);
  animation:pulseDot 1.3s infinite;
}

/* =========== 10. FUTURISTIC BUTTON SHEEN + MAGNET =========== */
.btn{ position:relative; overflow:visible; isolation:isolate; will-change:transform; }
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, rgba(255,255,255,0.35) 46%, transparent 60%);
  transform:translateX(-140%); transition:transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none; mix-blend-mode:overlay; z-index:0;
}
.btn:hover::before{ transform:translateX(140%); }
.btn > *{ position:relative; z-index:1; }
.btn.fx-magnet{ transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .15s ease, background .15s ease; }
.btn:active{ transform:scale(0.94) !important; }
.btn-red{ animation:fxCtaPulse 2.6s ease-in-out infinite; }
@keyframes fxCtaPulse{ 0%,100%{ box-shadow:0 0 0 rgba(255,46,77,0); } 50%{ box-shadow:0 0 22px -6px var(--red-glow); } }
@media (prefers-reduced-motion: reduce){ .btn-red{ animation:none; } }

/* ripple */
.fx-ripple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%) scale(0); animation:fxRipple .6s ease-out forwards;
}
@keyframes fxRipple{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

/* click burst — richer business confetti (coins, ticks, arrows) with rotation */
.fx-burst{
  position:fixed; z-index:9998; pointer-events:none;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:13px; color:var(--volt);
  animation:fxBurst .75s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fxBurst{
  0%{ transform:translate(-50%,-50%) scale(0.5) rotate(0deg); opacity:1; }
  100%{ transform:translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1) rotate(var(--br,180deg)); opacity:0; }
}

/* =========== 11. VIEW SWITCH SCAN TRANSITION =========== */
.view{ position:relative; }
.fx-scan-line{
  position:absolute; left:0; right:0; top:0; height:3px; z-index:5; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--red), var(--volt), transparent);
  box-shadow:0 0 16px 2px var(--red-glow);
  animation:fxScanDown .7s ease-out forwards;
}
@keyframes fxScanDown{ from{ top:0; opacity:1; } to{ top:100%; opacity:0; } }

/* =========== 12. PANEL — SPOTLIGHT, TILT, RING GLOW, CORNERS =========== */
.panel{
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
  transform-style:preserve-3d; will-change:transform;
}
.panel::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.07), transparent 60%);
  transition:opacity .3s ease;
}
.panel:hover::after{ opacity:1; }
.panel:hover{ border-color:var(--line-red); box-shadow:0 34px 80px -25px rgba(0,0,0,0.9), 0 0 30px -14px var(--red-glow); }
.panel > *{ position:relative; z-index:1; }

.fx-ring{
  position:absolute; inset:-1px; z-index:0; pointer-events:none; padding:1px; opacity:0.28;
  background:conic-gradient(from 0deg, transparent 0%, rgba(255,46,77,0.95) 6%, transparent 16%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fxRingSpin 5s linear infinite;
  transition:opacity .3s ease;
}
.panel:hover .fx-ring{ opacity:0.85; }
@keyframes fxRingSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .fx-ring{ animation:none; } }

.fx-corners{ position:absolute; inset:6px; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s ease; }
.panel:hover .fx-corners{ opacity:1; }
.fx-corners i{ position:absolute; width:11px; height:11px; font-style:normal; }
.fx-corners i:nth-child(1){ top:0; left:0; border-top:2px solid var(--volt); border-left:2px solid var(--volt); }
.fx-corners i:nth-child(2){ top:0; right:0; border-top:2px solid var(--volt); border-right:2px solid var(--volt); }
.fx-corners i:nth-child(3){ bottom:0; left:0; border-bottom:2px solid var(--volt); border-left:2px solid var(--volt); }
.fx-corners i:nth-child(4){ bottom:0; right:0; border-bottom:2px solid var(--volt); border-right:2px solid var(--volt); }

/* =========== 13. SCROLL REVEAL =========== */
.fx-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.fx-reveal.fx-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .fx-reveal{ opacity:1; transform:none; transition:none; } }

/* =========== 14. KPI CARD PULSE + COUNT-UP =========== */
.kpi-card{ overflow:hidden; animation:fxKpiGlow 3.6s ease-in-out infinite; }
@keyframes fxKpiGlow{ 0%,100%{ box-shadow:var(--shadow); } 50%{ box-shadow:var(--shadow), 0 0 26px -12px var(--volt-glow); } }
@media (prefers-reduced-motion: reduce){ .kpi-card{ animation:none; } }
.kpi-value.fx-counting{ color:var(--volt); text-shadow:0 0 14px var(--volt-glow); }

/* =========== 15. DROPZONE POINTER GLOW =========== */
.dropzone{ position:relative; overflow:hidden; }
.dropzone::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,50%), rgba(255,46,77,0.18), transparent 65%);
  transition:opacity .3s ease;
}
.dropzone:hover::after{ opacity:1; }
.dropzone svg{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.dropzone:hover svg{ transform:translateY(-4px) scale(1.08); }

/* =========== 16. TOUCH / COARSE POINTER FALLBACK =========== */
@media (pointer: coarse){
  .fx-cursor-dot, .fx-cursor-ring{ display:none; }
}

/* =========== 17. AUTH MODAL — entrance, corners, scan, spinner =========== */
.auth-modal-panel{
  transform:scale(0.92) translateY(18px); opacity:0;
  transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.auth-modal.open .auth-modal-panel{ transform:scale(1) translateY(0); opacity:1; }

.auth-modal-corners{ position:absolute; inset:10px; z-index:2; pointer-events:none; }
.auth-modal-corners i{ position:absolute; width:13px; height:13px; font-style:normal; }
.auth-modal-corners i:nth-child(1){ top:0; left:0; border-top:2px solid var(--violet); border-left:2px solid var(--violet); }
.auth-modal-corners i:nth-child(2){ top:0; right:0; border-top:2px solid var(--cyan); border-right:2px solid var(--cyan); }
.auth-modal-corners i:nth-child(3){ bottom:0; left:0; border-bottom:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.auth-modal-corners i:nth-child(4){ bottom:0; right:0; border-bottom:2px solid var(--red); border-right:2px solid var(--red); }

.auth-modal-panel::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
  box-shadow:0 0 16px 2px var(--violet-glow);
  animation:fxAuthScan 2.6s ease-in-out infinite;
}
@keyframes fxAuthScan{ 0%{ top:0; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ top:100%; opacity:0; } }

.auth-submit-spinner{
  display:none; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(10,10,10,0.35); border-top-color:#0a0a0a;
  animation:fxSpin .6s linear infinite;
}
@keyframes fxSpin{ to{ transform:rotate(360deg); } }
.auth-submit.loading .auth-submit-label{ opacity:0.5; }
.auth-submit.loading .auth-submit-spinner{ display:inline-block; }
.auth-submit.success{ background:var(--volt) !important; }
.auth-submit.success .auth-submit-label::after{ content:' ✓'; }

.auth-field input.fx-shake{ animation:fxShake .35s ease; border-color:var(--red) !important; }
@keyframes fxShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

.auth-modal-title.glitch{ position:relative; display:inline-block; }
.auth-modal-title.glitch:hover::before, .auth-modal-title.glitch:hover::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden;
}
.auth-modal-title.glitch:hover::before{ color:var(--violet); clip-path:polygon(0 0,100% 0,100% 45%,0 45%); transform:translate(-2px,-1px); }
.auth-modal-title.glitch:hover::after{ color:var(--cyan); clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%); transform:translate(2px,1px); }

.user-chip{ animation:fxChipIn .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fxChipIn{ from{ opacity:0; transform:translateY(-6px) scale(0.9); } to{ opacity:1; transform:translateY(0) scale(1); } }

/* =========== 18. CURSOR — comet trail + action label =========== */
.fx-cursor-trail{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%;
  width:5px; height:5px; background:var(--cyan); transform:translate(-50%,-50%);
  will-change:transform, opacity;
}
.fx-cursor-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  transform:translate(-50%, 16px); opacity:0; transition:opacity .15s ease, transform .18s cubic-bezier(.2,.8,.2,1);
  font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:700; letter-spacing:0.1em;
  color:#0a0a0a; background:var(--volt); padding:3px 8px 3px 16px; white-space:nowrap;
  clip-path:polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.fx-cursor-label.fx-show{ opacity:1; transform:translate(-50%, 22px); }
@media (pointer: coarse){ .fx-cursor-trail, .fx-cursor-label{ display:none; } }