/* =====================================================================
   MILEPOST TOY CO. — MOTION
   Calm, purposeful motion. Everything here is disabled for users who
   prefer reduced motion (see bottom of file).
   ===================================================================== */

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--ivory);
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
  /* failsafe: never block the page, even if JS fails */
  animation: loaderFailsafe .01s linear 3.5s forwards;
}
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 18px; }
.loader__road { position: relative; width: 160px; height: 2px; background: var(--line); overflow: visible; }
.loader__road::after { /* dashed centre line */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 20px);
  opacity: .35; animation: roadDash .5s linear infinite;
}
.loader__car {
  position: absolute; left: 0; bottom: 4px; width: 26px; height: 10px;
  background: var(--accent); border-radius: 4px 7px 2px 2px;
  animation: carDrive 1.4s var(--ease-io) infinite alternate;
}
.loader__car::before, .loader__car::after {
  content: ''; position: absolute; bottom: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.loader__car::before { left: 3px; }
.loader__car::after { right: 3px; }
.loader__word { font: 700 1.4rem/1 var(--font-display); letter-spacing: -.06em; }

@keyframes carDrive { from { transform: translateX(0); } to { transform: translateX(134px); } }
@keyframes roadDash { to { background-position: -20px 0; } }
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }

/* ---------- Hero entrance ---------- */
.js .hero__title .line > span { transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero__title .line:nth-child(2) > span { transition-delay: .09s; }
.js .hero__content .eyebrow,
.js .hero__aside,
.js .hero__facts { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .hero__aside { transition-delay: .25s; }
.js .hero__facts { transition-delay: .4s; }
.js .price-tag { opacity: 0; transform: rotate(-20deg) translateY(-30px); transition: opacity .6s var(--ease) .7s, transform .9s cubic-bezier(.3,1.5,.5,1) .7s; }

.js body:not(.is-loading) .hero__title .line > span { transform: none; }
.js body:not(.is-loading) .hero__content .eyebrow,
.js body:not(.is-loading) .hero__aside,
.js body:not(.is-loading) .hero__facts { opacity: 1; transform: none; }
.js body:not(.is-loading) .price-tag { opacity: 1; transform: rotate(-7deg); }

/* Hero image clip reveal is driven by the loader state too */
.js .hero__media[data-reveal="clip"] { clip-path: inset(0 0 0 100%); transition: clip-path 1.3s var(--ease-io) .05s; }
.js .hero__media[data-reveal="clip"] img { transform: scale(1.12); transition: transform 2s var(--ease); }
.js body:not(.is-loading) .hero__media[data-reveal="clip"] { clip-path: inset(0 0 0 0); }
.js body:not(.is-loading) .hero__media[data-reveal="clip"] img { transform: none; }

/* ---------- Scroll reveals (IntersectionObserver adds .is-visible) ---------- */
.js [data-reveal="up"] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .9s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms);
}
.js [data-reveal="fade"] { opacity: 0; transition: opacity 1s var(--ease) var(--d, 0ms); }
/* clip the image, not the observed element: a fully clipped target never intersects */
.js [data-reveal="clip"]:not(.hero__media) img {
  clip-path: inset(100% 0 0 0); transform: scale(1.15);
  transition: clip-path 1.2s var(--ease-io) var(--d, 0ms), transform 1.8s var(--ease) var(--d, 0ms);
}
.js [data-reveal="clip"].is-visible:not(.hero__media) img { clip-path: inset(0 0 0 0); }

.js [data-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.js [data-reveal].is-visible img { transform: none; }
/* the hero inset keeps its offset */
.js .hero__inset[data-reveal="up"].is-visible { transform: translateY(28px); }
.js .story__inset[data-reveal="up"].is-visible { transform: translateY(18%); }
.js .hero__inset[data-reveal="up"] { transition-delay: .6s; }

/* ---------- Product cards: staggered entrance ---------- */
.js .card { opacity: 0; transform: translateY(24px); }
.js .card.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--i, 0) * 60ms), transform .8s var(--ease) calc(var(--i, 0) * 60ms);
}

/* ---------- Marquees ---------- */
.announce__track { animation: marquee 38s linear infinite; }
.announce:hover .announce__track { animation-play-state: paused; }
.ribbon__track { animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Micro-interactions ---------- */
.nav__bag.bump svg { animation: bump .6s var(--ease); }
.nav__bag.bump .count-badge { animation: badgePop .6s var(--ease); }
@keyframes bump { 0% { transform: none; } 30% { transform: translateY(-4px) rotate(-8deg); } 60% { transform: translateY(1px) rotate(4deg); } 100% { transform: none; } }
@keyframes badgePop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.card__wish.pop svg { animation: heartPop .45s var(--ease); }
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.checkout__done:not([hidden]) .checkout__tick { animation: tickIn .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes tickIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .announce__track, .ribbon__track { animation: none !important; }
  .announce__group[aria-hidden="true"] { display: none; }
  .announce__track { width: 100%; justify-content: center; }
  .announce__group span:not(:first-child), .announce__group .announce__dot { display: none; }
  .js [data-reveal], .js .card, .js .hero__title .line > span,
  .js .hero__content .eyebrow, .js .hero__aside, .js .hero__facts, .js .price-tag {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .js .price-tag { transform: rotate(-7deg) !important; }
  .js .hero__inset { transform: translateY(28px) !important; }
  .js .story__inset { transform: translateY(18%) !important; }
  .js [data-reveal] img { transform: none !important; }
  .loader { display: none; }
}