/* fx.css — shared visual effects for the secondary pages (/login, /backtest).
   The homepage (index.html) has its own inline copies of these; this file
   brings the SAME logo-bolt glow + lightning canvas styling to the other
   pages so they match. Pair with fx.js (starfield + lightning engine).

   NOTE: this file intentionally does NOT style #stars-canvas — each page sets
   that itself (so its z-index sits correctly relative to that page's content).
*/

/* Animated glow/flicker on the logo lightning bolt (matches the homepage). */
.logo-mark{
  overflow:visible;
  transform-origin:center;
  animation:boltAura 9s ease-in-out infinite;
}
.logo-mark polygon{
  animation:boltFill 9s ease-in-out infinite;
  transition:fill .3s ease;
}
@keyframes boltAura{
  0%, 100%{ filter:drop-shadow(0 0 4px rgba(240,192,64,.4)); }
  46%     { filter:drop-shadow(0 0 18px rgba(240,192,64,.85)); }
  92%     { filter:drop-shadow(0 0 2px rgba(240,192,64,.15)); }
  94%     { filter:drop-shadow(0 0 30px rgba(255,205,70,1)); }
  96%     { filter:drop-shadow(0 0 2px rgba(240,192,64,.15)); }
  98%     { filter:drop-shadow(0 0 20px rgba(240,192,64,.9)); }
}
@keyframes boltFill{
  0%, 100%{ fill:rgba(240,192,64,.20); }
  46%     { fill:rgba(255,210,90,.7); }
  92%     { fill:rgba(240,192,64,.08); }
  94%     { fill:rgba(255,225,120,1); }
  96%     { fill:rgba(240,192,64,.08); }
  98%     { fill:rgba(255,210,90,.85); }
}

/* Canvas the lightning discharge is drawn onto. Sits above page content so the
   bolts read as shooting across the foreground. Inert until fx.js fires. */
.lightning-canvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:550;
  display:block;
}

/* Respect reduced motion: freeze the bolt glow, hide the lightning layer.
   (fx.js independently no-ops its animations under the same media query.) */
@media (prefers-reduced-motion: reduce){
  .logo-mark,
  .logo-mark polygon{ animation:none !important; }
  .lightning-canvas{ display:none; }
}

/* Ambient star-spawned equations (rendered by KaTeX in fx.js). Positioned
   absolutely; wiped in left-to-right via clip-path, held, then wiped out. */
.star-equation{
  position:absolute;
  white-space:nowrap;
  font-size:18px;
  color:rgba(220,228,255,.78);
  pointer-events:none;
  z-index:1;
  filter:
    drop-shadow(0 0 10px rgba(180,156,236,.55))
    drop-shadow(0 0 2px  rgba(255,255,255,.45));
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transition:
    opacity   .8s ease-out,
    clip-path 4s cubic-bezier(0.5, 0.05, 0.5, 0.95);
}
.star-equation.in{ opacity:1; clip-path:inset(0 0% 0 0); }
.star-equation.out{ clip-path:inset(0 0 0 100%); }
.star-equation .katex{ color:inherit; line-height:1.2; white-space:nowrap; }
@media (prefers-reduced-motion: reduce){
  .star-equation{ display:none; }
}

/* Comet border trail — the light ribbon that laps around a card's perimeter.
   The canvas overlays the card; it's transparent except for the moving line. */
.bt-card{ position:relative; }
.bt-trail{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:2;
  display:block;
}
@media (prefers-reduced-motion: reduce){
  .bt-trail{ opacity:.25; }
}