/* Motion and graphics layer for the Closing Line site. Loaded after style.css on every page; fx.js drives it.
   Delete this file and fx.js to get the plain site back. Everything is off under prefers-reduced-motion. */

/* ---- hero: live odds canvas behind the copy ---- */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.22) 38%, #000 60%, #000 88%, rgba(0,0,0,.5));
          mask-image: linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.22) 38%, #000 60%, #000 88%, rgba(0,0,0,.5)); }
@media (max-width: 900px) { .hero-fx { opacity: .45; } }
.hero .wrap { position: relative; }

/* headline scramble: characters swap through odds glyphs before settling */
h1 em .fx-glyph { color: #fff; opacity: .55; }

/* ---- sample alert tape ---- */
.fx-tape { position: relative; overflow: hidden; border-block: 1px solid rgba(57,255,20,.28); background: #000;
  box-shadow: 0 0 30px rgba(57,255,20,.08) inset; }
.fx-tape-label { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 0 16px 0 20px; background: linear-gradient(90deg, #000 75%, transparent); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green); white-space: nowrap; }
.fx-tape-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green);
  animation: fx-blink 1.6s ease-in-out infinite; }
.fx-tape-track { display: flex; width: max-content; animation: fx-marquee 60s linear infinite; }
.fx-tape:hover .fx-tape-track { animation-play-state: paused; }
.fx-tape-item { display: flex; align-items: center; gap: 10px; padding: 13px 28px; white-space: nowrap; font-size: 14px;
  font-variant-numeric: tabular-nums; border-right: 1px solid rgba(57,255,20,.14); color: var(--muted); }
.fx-tape-item b { color: #fff; font-weight: 700; }
.fx-tape-item .ev { color: var(--green-ink); background: var(--green); font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.fx-tape-item .lg { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--green); }
@keyframes fx-marquee { to { transform: translateX(-50%); } }
@keyframes fx-blink { 50% { opacity: .25; } }

/* ---- cursor spotlight on cards ---- */
.step, .alert, details { position: relative; }
.plan::after, .step::after, .alert::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(57,255,20,.13), transparent 45%); }
.plan:hover::after, .step:hover::after, .alert:hover::after { opacity: 1; }

/* example alert: 3D tilt (fx.js sets --rx/--ry) */
.alert-wrap { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out;
  transform-style: preserve-3d; will-change: transform; }

/* featured plans: light running around the border */
@property --fx-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.plan.featured { border-color: transparent;
  background: linear-gradient(180deg, #0a140d, #060d08) padding-box,
              conic-gradient(from var(--fx-ang), rgba(57,255,20,.15) 0deg, var(--green) 40deg, #fff 60deg, rgba(57,255,20,.15) 110deg, rgba(57,255,20,.15) 360deg) border-box;
  animation: fx-spin 5s linear infinite; }
@keyframes fx-spin { to { --fx-ang: 360deg; } }

/* step numbers: pulse ring */
.step .n { position: relative; }
.step .n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green);
  animation: fx-ring 2.4s ease-out infinite; }
.steps .step:nth-child(2) .n::after { animation-delay: .8s; }
.steps .step:nth-child(3) .n::after { animation-delay: 1.6s; }
@keyframes fx-ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* primary buttons: shine sweep */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg);
  animation: fx-shine 4.5s ease-in-out infinite; }
@keyframes fx-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* scroll reveal: fx.js adds .fx-pre only to things below the fold, so the page is complete without JS */
.fx-pre { opacity: 0; transform: translateY(26px); }
.fx-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--fx-d, 0s); }

/* h2 underline that draws in */
section h2 { position: relative; display: inline-block; }
section h2::after { content: ""; display: block; height: 3px; margin-top: 10px; width: 64px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green), transparent); box-shadow: 0 0 14px rgba(57,255,20,.6); }
.doc h2::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-tape-track, .fx-tape-label i, .plan.featured, .step .n::after, .btn.primary::after { animation: none !important; }
  .fx-tape-track { flex-wrap: wrap; width: auto; }
  .fx-pre { opacity: 1; transform: none; }
  .alert-wrap { transform: none; }
}