/* ==========================================================================
   BETPARK — MOTION SYSTEM
   Scroll reveals, split-text, hover transitions. All gated by
   prefers-reduced-motion via base.css's global override.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Long legal copy must stay readable even if JS is slow/blocked */
.prose.legal[data-reveal] {
  opacity: 1;
  transform: none;
}

/* Short pages: CTA often sits in the lower fold — never leave it invisible */
.cta-band[data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="scale"].is-visible {
  transform: scale(1);
}

[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

[data-reveal-group].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 70ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 140ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 210ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 280ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 350ms; }

/* ---------- Split-text headline reveal ---------- */

.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: var(--lh-tight);
}

.split-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
}

.split-line.is-visible > span {
  transform: translateY(0);
}

/* ---------- Hero background shapes ---------- */

.hero-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-field .grid-line {
  position: absolute;
  background: var(--surface-border-soft);
}

.hero-field .glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 235, 42, 0.13), transparent 68%);
  filter: blur(14px);
  animation: drift 18s ease-in-out infinite alternate;
}

.hero-field .glow--forest {
  top: auto;
  right: auto;
  bottom: -22%;
  left: -12%;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(16, 129, 95, 0.16), transparent 70%);
  animation-duration: 24s;
}

@keyframes drift {
  from { transform: translate(-4%, -2%) scale(1); }
  to { transform: translate(3%, 4%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-field .glow {
    animation: none;
  }
}

/* ---------- Cursor-follow orb (desktop only) ---------- */

.cursor-orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent-400);
  pointer-events: none;
  z-index: var(--z-overlay);
  transform: translate(-50%, -50%);
  transition: width var(--dur-fast) var(--ease-out),
    height var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  opacity: 0;
  mix-blend-mode: difference;
}

.cursor-orb.is-active {
  opacity: 1;
}

.cursor-orb.is-hover {
  width: 52px;
  height: 52px;
  background: var(--accent-400);
}

@media (hover: none), (max-width: 62rem) {
  .cursor-orb {
    display: none;
  }
}

/* ---------- Number counter ---------- */

[data-counter] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Image scale on scroll ---------- */

.scale-in {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.scale-in > * {
  transform: scale(1.15);
  transition: transform 1.2s var(--ease-out);
}

.scale-in.is-visible > * {
  transform: scale(1);
}

/* ---------- Ticker fade edges ---------- */

.marquee {
  position: relative;
}

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  z-index: 1;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--surface-base), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--surface-base), transparent);
}

/* ---------- Film grain overlay (injected via JS) ---------- */

.grain-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  pointer-events: none;
  z-index: calc(var(--z-overlay) + 1);
  opacity: 0.04;
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 62rem) {
  .grain-overlay {
    inset: -50%;
    width: 200%;
    height: 200%;
    max-width: none;
    opacity: 0.05;
    animation: grain-shift 900ms steps(4) infinite;
  }
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.4%); }
  50% { transform: translate(1.6%, -1%); }
  75% { transform: translate(-1%, -1.8%); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .grain-overlay { animation: none; }
}

@media (max-width: 61.99rem) {
  .grain-overlay { display: none; }
}

/* ---------- Scroll progress bar (injected via JS) ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--forest-400), var(--accent-450));
  z-index: calc(var(--z-overlay) + 2);
  pointer-events: none;
}

/* ---------- Button shine sweep ---------- */

.btn-primary {
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 650ms var(--ease-out);
  pointer-events: none;
}

.btn-primary:hover::after {
  left: 130%;
}

/* ---------- Card spotlight + 3D tilt (driven by main.js) ---------- */

.card,
.promo-card,
.hero-aside-card {
  --spot-x: 50%;
  --spot-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

@media (hover: hover) and (min-width: 62rem) {
  .card,
  .promo-card,
  .hero-aside-card {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform var(--dur-base) var(--ease-out),
      border-color var(--dur-base) var(--ease-out);
  }

  .card::before,
  .promo-card::before,
  .hero-aside-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      480px circle at var(--spot-x) var(--spot-y),
      rgba(241, 235, 42, 0.09),
      transparent 42%
    );
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
    z-index: 0;
  }

  .card:hover::before,
  .promo-card:hover::before,
  .hero-aside-card:hover::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .promo-card,
  .hero-aside-card {
    transform: none !important;
  }
}

/* ---------- Giant ghost typography ---------- */

.hero-watermark {
  position: absolute;
  right: -0.06em;
  bottom: -0.22em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(9rem, 24vw, 24rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 235, 42, 0.09);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.section-ghost {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(7rem, 15vw, 14rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(246, 243, 236, 0.08);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 62rem) {
  .section-ghost { display: none; }
}

.footer-wordmark {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 14rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(241, 235, 42, 0.12);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  transition: -webkit-text-stroke-color var(--dur-slow) var(--ease-out);
}

/* ---------- Scroll journey path (drawn on scroll, dot flies along) ---------- */

main {
  position: relative;
}

.scroll-path {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.scroll-path svg {
  width: 100%;
  height: 100%;
  display: block;
}

.scroll-path-line {
  fill: none;
  stroke: rgba(241, 235, 42, 0.16);
  stroke-width: 1.5;
  stroke-linecap: round;
  /* stroke-dash values are set from JS after measuring the real path length */
}

.scroll-path-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent-450);
  box-shadow:
    0 0 12px 2px rgba(241, 235, 42, 0.55),
    0 0 42px 10px rgba(241, 235, 42, 0.18);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

.scroll-path-dot.is-active {
  opacity: 1;
}

@media (max-width: 62rem), (prefers-reduced-motion: reduce) {
  .scroll-path {
    display: none;
  }
}

/* ---------- Live odds tape pulse ---------- */

.odds-row {
  position: relative;
  overflow: hidden;
}

.odds-row span:last-child {
  transition: color 300ms var(--ease-out), transform 300ms var(--ease-out);
}

.odds-row.is-updating span:last-child {
  color: var(--paper-100);
  transform: translateY(-2px);
}