/* ==========================================================================
   AXIS motion layer. Everything here is off when the visitor asks the OS
   for reduced motion, and every element is fully visible at rest.
   html.motion is set by js/main.js only when motion is allowed.
   ========================================================================== */

/* 1. Hero entrance: headline lines rise out of a mask, then the copy follows */
html.motion .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
html.motion .hero__title .line > span { display: inline-block; transform: translateY(105%); animation: axis-line-up 1.1s cubic-bezier(.2, .7, .2, 1) forwards; }
html.motion .hero__title .line:nth-child(2) > span { animation-delay: .14s; }
html.motion .hero__title .line:nth-child(3) > span { animation-delay: .28s; }
html.motion .hero__kicker,
html.motion .hero__lede,
html.motion .hero__cta { opacity: 0; transform: translateY(14px); animation: axis-soft-in .9s cubic-bezier(.2, .7, .2, 1) forwards; }
html.motion .hero__kicker { animation-delay: .05s; }
html.motion .hero__lede { animation-delay: .4s; }
html.motion .hero__cta { animation-delay: .55s; }
@keyframes axis-line-up { to { transform: none; } }
@keyframes axis-soft-in { to { opacity: 1; transform: none; } }

/* 6. Hero depth: JS moves these with the independent `translate` property,
   so it never fights the image's own transform animation */
html.motion .hero__img,
html.motion .hero__word { will-change: translate; }

/* 2. Photos "develop out of smoke" as they scroll into view */
html.motion .reveal-img { transition: filter 1.1s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
html.motion .reveal-img:not(.is-in) { filter: grayscale(1) blur(5px) brightness(1.1); transform: scale(1.04); }
@media (max-width: 860px) {
  /* lighter on phones: no blur, just the smoky tone clearing */
  html.motion .reveal-img:not(.is-in) { filter: grayscale(1) brightness(1.12); }
}

/* 5. Second photo on hover (desktop pointers only) */
.card__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
@media (hover: hover) {
  .card:hover .card__alt { opacity: 1; }
}

/* 4. Photo flying into the bag */
.fly-photo {
  position: fixed; z-index: 95; pointer-events: none; object-fit: cover;
  border-radius: 12px; box-shadow: 0 18px 40px rgba(35, 37, 40, .25);
}

/* 3. Card photo morphing into the product page photo (View Transitions) */
::view-transition-group(pdp-photo) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .card__alt { transition: none; }
}