/* ==========================================================================
   Custom Door & Mirror — animations.css
   Keyframes, scroll reveals, hover motion and reduced-motion overrides.
   Scroll reveals only apply once animations.js adds html.reveal-ready, so content is never hidden
   without JavaScript. Timing tokens: --dur-* / --ease-* in main.css.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes unveil {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ---------- Hero entrance (runs once on load) ---------- */
.js [data-hero-item] {
  animation: rise 1s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}

.js [data-hero-media] .media__frame {
  animation: unveil 1.3s var(--ease-out) both;
  animation-delay: 120ms;
}

/* ---------- Scroll reveal (toggled by scripts/animations.js) ---------- */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal="fade"] {
  transform: none;
}

.reveal-ready [data-reveal="clip"] {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal="clip"] .media__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal="clip"].is-revealed .media__frame {
  clip-path: inset(0 0 0 0);
}

/* ---------- Hover motion ---------- */
.zoom-hover .media__frame img,
.category .media__frame img,
.product-card__link .media__frame img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.zoom-hover:hover .media__frame img,
.category:hover .media__frame img,
.product-card__link:hover .media__frame img {
  transform: scale(1.035);
}

.category .h2,
.product-card__title {
  transition: color var(--dur-base) var(--ease);
}

.category:hover .h2,
.product-card__link:hover .product-card__title {
  color: var(--accent);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal="clip"] .media__frame {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .zoom-hover:hover .media__frame img,
  .category:hover .media__frame img,
  .product-card__link:hover .media__frame img {
    transform: none;
  }
}

/* ---------- Slider: Ken Burns + autoplay progress (timer = the dot animation) ---------- */
@keyframes kenburns {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@keyframes slider-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

[data-slider].is-autoplay .slider__slide.is-active img {
  animation: kenburns calc(var(--slider-duration, 6s) + 1.5s) var(--ease) both;
}

[data-slider].is-autoplay .slider__dot[aria-current="true"]::after {
  animation: slider-progress var(--slider-duration, 6s) linear both;
}

[data-slider].is-paused .slider__slide.is-active img,
[data-slider].is-paused .slider__dot[aria-current="true"]::after {
  animation-play-state: paused;
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.marquee__track {
  animation: marquee var(--marquee-duration, 48s) linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- Parallax (enabled by animations.js) ---------- */
.parallax-ready [data-parallax] .media__frame > img {
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.14);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .story__seal-ring,
  .marquee__track,
  .slider .slider__slide.is-active img,
  .slider .slider__dot[aria-current="true"]::after {
    animation: none !important;
  }

  .slider .slider__dot[aria-current="true"]::after {
    transform: scaleX(1);
  }
}

/* ---------- Split headline (words wrapped by scroll-story.js) ---------- */
.split-word {
  display: inline-block;
  overflow: hidden;
  /* room for descenders and italic overhang inside the clip */
  padding: 0 0.06em 0.12em;
  margin: 0 -0.06em -0.12em;
  vertical-align: top;
}

.split-word__inner {
  display: inline-block;
}

/* ---------- Micro-interactions ---------- */
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes choice-pop {
  40% {
    transform: scale(1.06);
  }
}

@keyframes spec-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

/* Gentle page entrance */
main {
  animation: page-in 600ms var(--ease-out) both;
}

/* Picking an option gives a small press */
.choice__input:checked + .choice__body {
  animation: choice-pop 280ms var(--ease-out);
}

/* Summary rows slide in whenever the selection re-renders */
.pdp__specs > div {
  animation: spec-in 320ms var(--ease-out) both;
}

.pdp__specs > div:nth-child(2) { animation-delay: 40ms; }
.pdp__specs > div:nth-child(3) { animation-delay: 80ms; }
.pdp__specs > div:nth-child(4) { animation-delay: 120ms; }
.pdp__specs > div:nth-child(n + 5) { animation-delay: 160ms; }

/* Section headings: the eyebrow dot pulses once as the section reveals */
.reveal-ready .section-head.is-revealed .eyebrow--rule::before {
  animation: choice-pop 600ms var(--ease-out) 300ms;
}