/*
 * 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.00) 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.00) 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;
  transform: translateY(110%);
  opacity: 0;
  animation: hf-word-rise 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.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: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation:
    hf-word-rise 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) forwards,
    hf-shine     2.4s ease-out 1.1s forwards;
}
@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.10),
    rgba(212, 175, 55, 0.00)
  );
}
.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.30),
    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.20), 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.30), transparent 62%),
    linear-gradient(118deg, rgba(34, 110, 84, 0.40) 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.80; }
  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; }
}

/* ══════════════════════════════════════════════════════════════
   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; }
}