/* Motion layer. Everything here is progressive enhancement and respects prefers-reduced-motion. */

.progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform-origin: 0 50%; transform: scaleX(0);
}

.nav { transition: background .3s ease, box-shadow .3s ease; }
.nav.scrolled { background: rgba(11, 18, 32, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }

/* Scroll reveal (class removed by JS once finished so hover transitions keep working) */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* Hero glow orbs */
.hero .wrap { position: relative; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; will-change: transform; z-index: 0; }
.orb.o1 { width: 340px; height: 340px; background: var(--blue); top: -80px; right: 8%; opacity: .45; animation: drift 14s ease-in-out infinite alternate; }
.orb.o2 { width: 280px; height: 280px; background: var(--green); bottom: -100px; left: 4%; opacity: .28; animation: drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }

/* The hero photo stays completely still; only the small chips next to it float. */
.hero-shot { animation: none; transform: rotate(3deg); }
.floating { z-index: 2; }
.floating.a { top: 70px; left: 0; animation: bob2 5s ease-in-out infinite; }
.floating.b { top: 140px; bottom: auto; right: 30px; animation: bob2 6s ease-in-out -2s infinite; }
@keyframes bob2 { 50% { transform: translateY(-10px); } }
.tick { display: inline-block; min-width: 200px; }
.tick.swap { animation: tickIn .5s ease; }
@keyframes tickIn { from { opacity: 0; transform: translateY(10px); } }
.dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } }

/* Sports marquee */
.sports .wrap.marquee {
  display: block; overflow: hidden; max-width: none; padding: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.track:hover { animation-play-state: paused; }
.track .set { display: flex; gap: 12px; padding-right: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Card spotlight that follows the cursor */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, .22), transparent 60%);
}
.card:hover::after { opacity: 1; }
.icon { transition: transform .3s ease; }
.card:hover .icon { transform: scale(1.12) rotate(-6deg); }

/* Screenshot tilt (step screenshots only) */
.step .shot img { transition: transform .25s ease, box-shadow .35s ease; will-change: transform; }
.step .shot img:hover { box-shadow: 0 34px 80px rgba(37, 99, 235, 0.35); }

/* Button shine */
.btn { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transition: transform .6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }

.faq summary::after { transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .orb, .floating, .track, .dot, .tick { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .progress { display: none; }
}