/*
 * landing-anim.css — Cinematic enrichments.
 *
 * Visual layer for landing-anim.js + hero split-text + aurora +
 * scroll progress bar. Designed to be loaded AFTER landing.css so
 * it can override/layer onto existing rules.
 */

/* ══════════════════════════════════════════════════════════════
   1) HERO AURORA — slowly drifting conic gradient behind hero
   ══════════════════════════════════════════════════════════════
   Sits below .hero-fold__bg but above the body. Opacity kept low
   so the existing hero background art (if any) stays readable. */
.hero-fold__aurora {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 45%,
    rgba(212, 175, 55, 0) 0deg,
    rgba(212, 175, 55, 0.28) 40deg,
    rgba(192, 57, 43, 0.18) 140deg,
    rgba(14, 165, 233, 0.12) 220deg,
    rgba(212, 175, 55, 0.22) 300deg,
    rgba(212, 175, 55, 0) 360deg
  );
  filter: blur(80px) saturate(1.1);
  opacity: 0.55;
  animation: aurora-drift 24s linear infinite;
  will-change: transform;
}
@keyframes aurora-drift {
  0% {
    transform: rotate(0deg) scale(1.05);
  }
  50% {
    transform: rotate(180deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fold__aurora {
    animation: none;
    opacity: 0.35;
  }
}

/* Ensure hero stacking makes sense: aurora below content. The
   overflow:hidden + max-width:100% combo here is what stops the
   aurora's `inset: -15%` from creating horizontal scroll on
   mobile (the aurora is 130% wide; without clipping it would
   bleed past the viewport). */
.hero-fold {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.hero-fold__section {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   2) SPLIT-TEXT HERO HEADLINE
   ══════════════════════════════════════════════════════════════
   Each word gets a span; stagger driven by CSS animation-delay
   set inline in the template. Uses overflow clip on a wrapper so
   words slide up from below.
   One word (.hf-title__main) gets a gold shimmer sweep on reveal. */
.hf-title__line {
  display: block;
  overflow: hidden;
  padding: 0.05em 0 0.12em;
}
.hf-title__word {
  display: inline-block;
  /* PR2 restraint pass — was: transform: translateY(110%); opacity: 0;
     animation: hf-word-rise … forwards. The word-by-word reveal felt
     game-show; editorial register wants the headline to be there
     immediately, no animated entrance. */
  transform: none;
  opacity: 1;
  animation: none;
}
.hf-title__word + .hf-title__word {
  margin-left: 0.28em;
}

@keyframes hf-word-rise {
  0% {
    transform: translateY(110%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* "the Fox?" — solid gold with a one-off shine pass.
   Gradient is gold → light-gold → gold so the text is ALWAYS gold; the
   shine is only a brief brightness lift, not a colour swap. */
.hf-title__main .hf-title__word {
  background-image: linear-gradient(
    100deg,
    var(--c-gold) 0%,
    var(--c-gold) 40%,
    var(--c-gold-lt) 50%,
    var(--c-gold) 60%,
    var(--c-gold) 100%
  );
  background-size: 250% 100%;
  background-position: 30% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* PR2 restraint pass — was: hf-word-rise + hf-shine animations.
     Gold gradient kept (anchored at 30% so the highlight sits across
     the word) but the shine sweep is gone. The gold says 'feature
     headline'; the shine said 'look at me'. */
  animation: none;
}
@keyframes hf-shine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hf-title__word {
    transform: none;
    opacity: 1;
    animation: none;
    background: none;
    color: var(--c-text-100);
    -webkit-text-fill-color: currentColor;
  }
  .hf-title__main .hf-title__word {
    color: var(--c-gold);
    -webkit-text-fill-color: var(--c-gold);
  }
}

/* ══════════════════════════════════════════════════════════════
   3) SCROLL PROGRESS BAR (shared — declared in base.css as well
   but scoped rules go here to keep the landing look opinionated) */
/* ══════════════════════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 9998;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0.1),
    rgba(212, 175, 55, 0)
  );
}
.scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-lt));
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Prefer CSS scroll-driven animations when available — removes
   the JS scroll listener altogether for supporting browsers. */
@supports (animation-timeline: scroll()) {
  .scroll-progress__bar {
    transform: scaleX(0);
    animation: scroll-progress-fill linear;
    animation-timeline: scroll(root);
    transition: none;
  }
  @keyframes scroll-progress-fill {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   4) BATTLE CARD 3D TILT — inner transform smoothness
   ══════════════════════════════════════════════════════════════
   JS sets transform on .battle-card__inner; this rule governs
   how it decays back to rest. */
.battle-card__inner {
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.battle-card:hover .battle-card__inner {
  transition: transform 0.08s linear;
}

/* ══════════════════════════════════════════════════════════════
   5) MAGNETIC BUTTONS — transform smoothness
   ══════════════════════════════════════════════════════════════ */
.btn-primary,
.draw-machine__btn,
[data-magnetic] {
  transition:
    transform 0.25s cubic-bezier(0.2, 0.9, 0.25, 1),
    background 0.2s ease,
    box-shadow 0.25s ease;
  will-change: transform;
}
.btn-primary:hover,
.draw-machine__btn:hover {
  transition:
    transform 0.08s linear,
    background 0.2s ease,
    box-shadow 0.25s ease;
}

/* ══════════════════════════════════════════════════════════════
   6) HERO PARALLAX — ensure translated bg doesn't leave gap
   ══════════════════════════════════════════════════════════════ */
.hero-fold__bg {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* ══════════════════════════════════════════════════════════════
   7) STAT COUNTERS — reserve space via tabular figures so the
   digit-roll doesn't shift surrounding layout.
   ══════════════════════════════════════════════════════════════ */
[data-count-up] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ══════════════════════════════════════════════════════════════
   PICKS DUEL — depth treatment + Cubs-side vote encouragement
   ══════════════════════════════════════════════════════════════
   Keeps the existing structure untouched. Layers on:
     • 3D tilt on pointer move (JS toggles .is-tilting)
     • Rim light + deeper drop shadow
     • VS badge translateZ so it separates when tilted
     • Inner bevel (recessed well)
     • Embossed horse names
     • Intensified Fox/Cubs side glows
     • Pulsing "Vote here" CTA with arrow advance on hover
     • Styled vote count (number in gold Playfair italic)                 */

.picks-duel {
  transform: perspective(1400px) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1),
    box-shadow 0.45s ease;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    inset 0 1px 0 rgba(255, 235, 180, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(212, 175, 55, 0.12);
  will-change: transform;
}
.picks-duel.is-tilting {
  transition:
    transform 0.08s linear,
    box-shadow 0.3s ease;
}

/* Inner bevel — recessed well for the content */
.picks-duel__inner {
  transform-style: preserve-3d;
  box-shadow:
    inset 0 2px 14px rgba(0, 0, 0, 0.35),
    inset 0 -1px 3px rgba(0, 0, 0, 0.25);
}

/* VS badge — lifts off the page when the card tilts */
.picks-duel__vs-badge {
  transform: translateZ(28px) scale(1);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.22),
    0 0 26px rgba(212, 175, 55, 0.6),
    0 0 56px rgba(212, 175, 55, 0.28),
    0 14px 28px rgba(0, 0, 0, 0.55),
    /* new: cast shadow under */ inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 10px rgba(0, 0, 0, 0.55);
}
.picks-duel--visible .picks-duel__vs-badge {
  animation:
    picksDuelVsPop 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both,
    picksDuelVsGlowZ 2.8s ease-in-out 0.7s infinite;
}
@keyframes picksDuelVsGlowZ {
  0%,
  100% {
    transform: translateZ(28px) scale(1);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.22),
      0 0 26px rgba(212, 175, 55, 0.6),
      0 0 56px rgba(212, 175, 55, 0.28),
      0 14px 28px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -3px 10px rgba(0, 0, 0, 0.55);
  }
  50% {
    transform: translateZ(32px) scale(1.02);
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.32),
      0 0 36px rgba(212, 175, 55, 0.85),
      0 0 80px rgba(212, 175, 55, 0.4),
      0 18px 36px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -3px 10px rgba(0, 0, 0, 0.55);
  }
}

/* Embossed horse names — subtle letter depth */
.picks-duel__horse {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.35);
}
.picks-duel__half--cubs .picks-duel__horse {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.55),
    0 0 18px rgba(212, 175, 55, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Deeper side gradients — Fox cool / Cubs warm ember.
   Stronger versions layer a radial wash on top of the existing
   linear gradient, so the card reads as lit from two sides. */
.picks-duel__half--fox {
  background:
    radial-gradient(
      circle at 18% 60%,
      rgba(45, 189, 122, 0.2),
      transparent 58%
    ),
    linear-gradient(118deg, rgba(26, 88, 68, 0.28) 0%, transparent 52%);
}
.picks-duel__half--cubs {
  background:
    radial-gradient(
      circle at 82% 60%,
      rgba(255, 120, 72, 0.26),
      transparent 58%
    ),
    linear-gradient(242deg, rgba(110, 36, 18, 0.26) 0%, transparent 52%);
}

/* Turn on the spotlight when the half is hovered */
.picks-duel__half--fox:hover {
  background:
    radial-gradient(
      circle at 18% 60%,
      rgba(55, 210, 140, 0.3),
      transparent 62%
    ),
    linear-gradient(118deg, rgba(34, 110, 84, 0.4) 0%, transparent 52%);
}
.picks-duel__half--cubs:hover {
  background:
    radial-gradient(
      circle at 82% 60%,
      rgba(255, 150, 90, 0.42),
      transparent 62%
    ),
    linear-gradient(242deg, rgba(130, 45, 22, 0.42) 0%, transparent 52%);
}

/* Vote-here CTA — Cubs side pulse + arrow advance on hover.
   The pulse pauses when the user hovers the Cubs half; the
   arrow then slides right continuously as a "come this way"
   cue. Respects reduced motion. */
.picks-duel__half--cubs .picks-duel__sub--cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: cubsVoteBreathe 2.4s ease-in-out infinite;
  transition:
    color 0.25s ease,
    letter-spacing 0.25s ease;
}
.picks-duel__half--cubs .picks-duel__arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes cubsVoteBreathe {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

.picks-duel__half--cubs:hover .picks-duel__sub--cta {
  animation: none;
  opacity: 1;
  color: #fff8dc;
  letter-spacing: 0.07em;
}
.picks-duel__half--cubs:hover .picks-duel__arrow {
  animation: cubsArrowNudge 1s ease-in-out infinite;
}
@keyframes cubsArrowNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

/* Styled vote count — number in gold italic Playfair,
   label smaller. Chip keeps its border/background. */
.picks-duel__chip-count {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: 14px;
  color: var(--c-gold-lt);
  margin-right: 3px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .picks-duel {
    transform: none !important;
    transition: none;
  }
  .picks-duel__vs-badge {
    animation: none !important;
    transform: translateZ(0);
  }
  .picks-duel__half--cubs .picks-duel__sub--cta,
  .picks-duel__half--cubs .picks-duel__arrow {
    animation: none !important;
  }
  .picks-duel__readwhy {
    transition: none;
  }
}

/* "Read why" pill — secondary editorial CTA on the Fox half.
   Routes to /races/big-race/featured-tip/. Sits below the
   odds + "View Fox →" meta line as a discrete editorial nudge
   ("yes, the AI picked this, but here's the human reasoning").

   Palette borrowed from the editorial gold tier the rest of the
   Saturday hero uses — subtle on the dark hero, brightens on
   hover, never competes visually with the primary FOX PICKS
   row above it. Wrapped in an <a> so clicks bubble OUT of the
   parent's half-link handler (landing.js short-circuits on any
   a[href] hit). */
.picks-duel__readwhy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  /* Right-align inside the Fox half — the rest of the column
     (FOX PICKS eyebrow, horse name, odds row) is left-aligned,
     so anchoring the secondary CTA at the opposite end gives the
     half a balanced two-pole layout instead of a top-heavy stack.
     Both `align-self` (works when parent is flex-column) and
     `margin-left: auto` (works when parent is block + inline-flex
     child rendered as block) are set so the right-shift holds no
     matter how the parent computes. */
  align-self: flex-end;
  margin-left: auto;
  padding: 4px 12px 4px 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-gold-lt);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  white-space: nowrap;
  --liquid: var(--c-gold);
  --ink: #06070d;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.4s,
    border-color 0.4s,
    transform 0.18s ease;
}
.picks-duel__readwhy::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -25%;
  width: 150%;
  height: 200%;
  background: var(--liquid);
  border-radius: 45% 55% 0 0 / 25% 25% 0 0;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.picks-duel__readwhy:hover::before,
.picks-duel__readwhy:focus-visible::before {
  transform: translateY(5%);
  animation: sat-btn-liquid-wave 2.5s ease-in-out infinite 0.65s;
}
.picks-duel__readwhy:hover,
.picks-duel__readwhy:focus-visible {
  background: transparent;
  border-color: var(--c-gold);
  color: var(--ink);
  transform: translateY(-1px);
  filter: none;
  outline: none;
}
.picks-duel__readwhy-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
.picks-duel__readwhy-lbl {
  letter-spacing: 0.12em;
}
.picks-duel__readwhy-arrow {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.18s ease;
}
.picks-duel__readwhy:hover .picks-duel__readwhy-arrow {
  transform: translateX(3px);
}

/* On narrow screens the duel halves stack; keep the pill aligned
   with the rest of the Fox half rather than centred (matches the
   existing left-aligned meta row above it). */
@media (max-width: 540px) {
  .picks-duel__readwhy {
    margin-top: 8px;
    font-size: 10.5px;
    padding: 3px 10px 3px 9px;
  }
}

/* Racecard pill — Cubs-side secondary action. Mirrors the
   positioning of the Fox-side Read why pill so the two sit on
   the same baseline (one on each half of the picks duel). Uses
   copper tint to match the Cubs colour palette (Read why is
   gold to match Fox). */
.picks-duel__racecard {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  align-self: flex-start;
  margin-left: 0;
  padding: 4px 12px 4px 10px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #f0b07a;
  background: transparent;
  border: 1px solid rgba(224, 124, 75, 0.55);
  border-radius: 999px;
  white-space: nowrap;
  --liquid: #e07c4b;
  --ink: #1a0c08;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.4s,
    border-color 0.4s,
    transform 0.18s ease;
}
.picks-duel__racecard::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -25%;
  width: 150%;
  height: 200%;
  background: var(--liquid);
  border-radius: 45% 55% 0 0 / 25% 25% 0 0;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.picks-duel__racecard:hover::before,
.picks-duel__racecard:focus-visible::before {
  transform: translateY(5%);
  animation: sat-btn-liquid-wave 2.5s ease-in-out infinite 0.65s;
}
.picks-duel__racecard:hover,
.picks-duel__racecard:focus-visible {
  background: transparent;
  border-color: #e07c4b;
  color: var(--ink);
  transform: translateY(-1px);
  filter: none;
  outline: none;
}
.picks-duel__racecard-icon {
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}
.picks-duel__racecard-lbl {
  letter-spacing: 0.12em;
}
.picks-duel__racecard-arrow {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin-left: 2px;
  transition: transform 0.18s ease;
}
.picks-duel__racecard:hover .picks-duel__racecard-arrow {
  transform: translateX(3px);
}

@media (max-width: 540px) {
  .picks-duel__racecard {
    margin-top: 8px;
    font-size: 10.5px;
    padding: 3px 10px 3px 9px;
  }
}

/* Kill combined gold frame around Fox+Cubs (landing.css loads after hero-fold) */
.picks-duel.picks-duel--split {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  isolation: auto;
}
.picks-duel.picks-duel--split .picks-duel__inner {
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* Keep full article borders — do NOT half-radius / kill middle edges */
.picks-duel.picks-duel--split .picks-duel__card--fox {
  border: 1px solid rgba(240, 206, 107, 0.33) !important;
  border-radius: 18px !important;
}
.picks-duel.picks-duel--split .picks-duel__card--cubs {
  border: 1px solid rgba(216, 177, 74, 0.35) !important;
  border-radius: 20px !important;
}

/* ══════════════════════════════════════════════════════════════
   8) VIEW TRANSITIONS (MPA — Chrome 126+, Safari 18)
   ══════════════════════════════════════════════════════════════
   Opt-in same-origin cross-fade between pages. Progressive
   enhancement — unsupported browsers navigate normally. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0.9, 0.25, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0ms;
  }
}