/* Jaxon's Dealz signature motion: "Gavel-Drop Parallax".
   - Hero-only layered parallax (never applied heavily elsewhere on the page).
   - Section reveals "snap and settle" like a gavel striking the block, instead of a
     generic fade/rise.
   - A scrolling deal ticker, trading-floor style.
   - A flip-clock detail on the countdown and Buy-It-Now price reveals.

   Baseline (no JS, no animation-timeline support): every layer sits at rest and the
   page is complete and readable. `.jd-js` is added by motion.js as early as possible;
   until it is, none of the "hidden until revealed" rules below apply, so a no-JS
   visitor never sees anything invisible. `prefers-reduced-motion: reduce` disables
   every rule in this file. Only `transform`/`opacity` animate. No
   `background-attachment: fixed`. */

/* ---------- Hero parallax ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jd-hero__art-backdrop {
      animation: jd-parallax-slow linear;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    .jd-hero__starburst {
      animation: jd-parallax-medium linear;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
  }
}

@keyframes jd-parallax-slow {
  from { transform: translateY(-6%); }
  to { transform: translateY(6%); }
}

/* transform is a single property — a bare translateY() here would silently
   replace .jd-hero__starburst's own `transform: rotate(15deg)` (landing.css)
   whenever this animation is active, snapping the badge upright mid-scroll.
   Baking the rotation into every keyframe/fallback step below keeps it
   constant while only the translateY component animates. */
@keyframes jd-parallax-medium {
  from { transform: translateY(-3%) rotate(15deg); }
  to { transform: translateY(3%) rotate(15deg); }
}

/* JS fallback tier — motion.js writes --jd-parallax-progress (-1..1) on .jd-hero
   when animation-timeline isn't supported. Mobile gets half amplitude. */
.jd-no-scroll-timeline .jd-hero__art-backdrop {
  transform: translateY(calc(var(--jd-parallax-progress, 0) * 24px));
}

.jd-no-scroll-timeline .jd-hero__starburst {
  transform: translateY(calc(var(--jd-parallax-progress, 0) * 12px)) rotate(15deg);
}

@media (max-width: 767px) {
  .jd-no-scroll-timeline .jd-hero__art-backdrop {
    transform: translateY(calc(var(--jd-parallax-progress, 0) * 12px));
  }
  .jd-no-scroll-timeline .jd-hero__starburst {
    transform: translateY(calc(var(--jd-parallax-progress, 0) * 6px)) rotate(15deg);
  }
}

/* ---------- Gavel-strike section reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jd-js [data-jd-reveal] {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }

  .jd-js [data-jd-reveal].jd-reveal--in {
    animation: jd-gavel-strike var(--jd-duration-gavel) var(--jd-ease-gavel) forwards;
  }
}

@keyframes jd-gavel-strike {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(16px);
  }
  60% {
    opacity: 1;
    transform: scale(1.03) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---------- Deal ticker ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jd-ticker__track {
    animation: jd-ticker-scroll 28s linear infinite;
  }

  .jd-ticker:hover .jd-ticker__track,
  .jd-ticker:focus-within .jd-ticker__track {
    animation-play-state: paused;
  }
}

@keyframes jd-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Flip-clock detail: countdown digits ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jd-countdown__value {
    display: inline-block;
    backface-visibility: hidden;
  }

  .jd-countdown__value.jd-flip {
    animation: jd-digit-flip var(--jd-duration-standard) var(--jd-ease-standard);
  }
}

@keyframes jd-digit-flip {
  0% { transform: rotateX(0deg); opacity: 1; }
  45% { transform: rotateX(90deg); opacity: 0.3; }
  55% { transform: rotateX(-90deg); opacity: 0.3; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

/* ---------- Flip-clock detail: Buy-It-Now price reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jd-js [data-jd-price-flip-value] {
    display: inline-block;
    backface-visibility: hidden;
  }

  .jd-js [data-jd-price-flip-value].jd-flip {
    animation: jd-digit-flip var(--jd-duration-gavel) var(--jd-ease-standard);
  }
}

/* ---------- prefers-reduced-motion: reduce — the safety net ---------- */
@media (prefers-reduced-motion: reduce) {
  .jd-js [data-jd-reveal] {
    opacity: 1;
    transform: none;
  }

  .jd-ticker__track {
    animation: none;
  }

  .jd-hero__art-backdrop,
  .jd-hero__starburst {
    animation: none;
    transform: none;
  }
}