/* RIVET — animations.css
   Keyframes and reveal states. Scroll-scrubbed motion lives in js/scroll.js (GSAP);
   everything here is CSS-only and switched off under prefers-reduced-motion. */

@keyframes cue-drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.hero__cue i::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%;
  background: var(--ivory);
  animation: cue-drip 2.2s var(--ease-io) infinite;
}

/* hero intro: lines rise out of their masks (JS adds .is-in after fonts load) */
.js .hero__title .line > span { transform: translateY(105%); }
.js .hero.is-in .hero__title .line > span { transform: none; transition: transform 1.3s var(--ease); }
.js .hero.is-in .hero__title .l2 > span { transition-delay: 0.12s; }
.js .hero.is-in .hero__title .l3 > span { transition-delay: 0.24s; }
.js .hero__meta, .js .hero__cue { opacity: 0; transform: translateY(14px); }
.js .hero.is-in .hero__meta, .js .hero.is-in .hero__cue { opacity: 1; transform: none; transition: opacity 1s 0.7s, transform 1.2s 0.7s var(--ease); }
.js .hero__fallback { opacity: 0; }
.js .hero.is-in .hero__fallback { opacity: 1; transition: opacity 1.6s var(--ease); }

/* generic reveal (IntersectionObserver adds .is-in) */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 1.1s var(--ease); }

/* clip reveal for editorial images */
.js .reveal-clip { clip-path: inset(18% 8% 18% 8%); }
.js .reveal-clip img { transform: scale(1.18); }
.js .reveal-clip.is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease); }
.js .reveal-clip.is-in img { transform: scale(1); transition: transform 1.8s var(--ease); }

/* word split reveal */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.split-words .w > span { display: inline-block; }
.js .split-words .w > span { transform: translateY(105%); }
.js .split-words.is-in .w > span { transform: none; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms); }

/* hotspot pulse */
@keyframes ring {
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}
.hotspot::after { animation: ring 2.4s var(--ease) infinite; }

/* turntable transitions (viewer) */
.vview { transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.vview.from-right { transform: rotateY(-32deg) translateX(14%) scale(0.92); }
.vview.from-left { transform: rotateY(32deg) translateX(-14%) scale(0.92); }
.vview.is-active { transform: none; }
.vview.out-left { opacity: 0; transform: rotateY(32deg) translateX(-14%) scale(0.92); }
.vview.out-right { opacity: 0; transform: rotateY(-32deg) translateX(14%) scale(0.92); }

/* add-to-bag button feedback */
@keyframes added { 0% { transform: scale(1); } 40% { transform: scale(0.96); } 100% { transform: scale(1); } }
.btn.is-added { animation: added 0.5s var(--ease); background: var(--cognac-hi); }

@keyframes badge-pop { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
.pop { display: inline-block; animation: badge-pop 0.5s var(--ease); }

/* page entrance for inner pages */
.js .page > * { animation: page-in 0.9s var(--ease) both; }
.js .page > *:nth-child(2) { animation-delay: 0.06s; }
.js .page > *:nth-child(3) { animation-delay: 0.12s; }
@keyframes page-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .hero__title .line > span,
  .js .split-words .w > span,
  .js .reveal, .js .reveal-clip, .js .reveal-clip img,
  .js .hero__meta, .js .hero__cue, .js .hero__fallback { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .hotspot::after { animation: none; }
}