/* ============================================================
   ezpztrader.com — interaction & surface effects
   Loads after motion.css. Cursor-tracking spotlights, shine
   sweeps, animated gradient borders, film grain, parallax.
   All of it degrades gracefully (see reduced-motion block).
   ============================================================ */

/* Enables animating the conic-gradient border angle. Unsupported
   browsers simply get a static gradient border, which is fine. */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---------- film grain: keeps large flat/gradient areas from
             looking plastic ---------- */

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .grain { opacity: .022; mix-blend-mode: multiply; }

/* ---------- scroll progress ---------- */

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 90;
  background: var(--ramp);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* ---------- cursor spotlight on cards ---------- */

.card-hover { isolation: isolate; }
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;   /* clips itself — no overflow:hidden needed */
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    var(--spotlight),
    transparent 42%
  );
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
  z-index: 0;   /* sits above the card's own background, below content */
}
.card-hover:hover::before { opacity: 1; }
/* Keep real content above the spotlight wash. */
.card-hover > * { position: relative; z-index: 1; }

/* ---------- shine sweep on solid buttons ---------- */

.btn-primary, .btn-gold { overflow: hidden; }
.btn-primary::after, .btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 22%, rgba(255,255,255,.34) 48%, transparent 74%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after, .btn-gold:hover::after { transform: translateX(130%); }

/* ---------- animated gradient border ---------- */

.glow-border { position: relative; }
.glow-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    var(--accent), var(--magenta), var(--gold), var(--accent)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin-angle 7s linear infinite;
  pointer-events: none;
  opacity: .85;
}
@keyframes spin-angle { to { --angle: 360deg; } }

/* ---------- hero parallax ----------
   Parallax lives on the .aurora container, never on the spans —
   the drift keyframes in motion.css already own the spans'
   transform, and two rules fighting over it would cancel out. */

.aurora {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

/* ---------- link sweep underline ---------- */

.link-sweep {
  position: relative;
  display: inline-block;
}
.link-sweep::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--ramp);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- footer link sweep ---------- */

.site-footer .stack a {
  position: relative;
  display: inline-block;
  width: fit-content;
}
.site-footer .stack a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--ramp);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.site-footer .stack a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- ticker item hover ---------- */

.tape-item { transition: opacity .3s var(--ease-out); }
.tape:hover .tape-item { opacity: .4; }
.tape .tape-item:hover { opacity: 1; }

/* ---------- pill shimmer on the "live" chip ---------- */

.pipe-head .live-dot { position: relative; }

/* ---------- section entrance scale for cards ---------- */

[data-reveal].reveal-pop {
  transform: translateY(26px) scale(.97);
}
[data-reveal].reveal-pop.is-visible {
  transform: none;
}

/* ---------- focus polish ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ---------- smooth anchor scrolling ---------- */

html { scroll-behavior: smooth; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-progress { display: none; }
  .glow-border::after { animation: none; }
  .btn-primary::after, .btn-gold::after { display: none; }
  .card-hover::before { transition: none; }
  .aurora { transition: none; transform: none; }
  [data-reveal].reveal-pop { transform: none; }
}