/* ==========================================================================
   CraftsBo — Animation
   Scroll-reveal driven by IntersectionObserver (see js/main.js) toggling
   .is-revealed. Transform/opacity only — never layout properties.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: none; }

.reveal-fade {
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.reveal-fade.is-revealed { opacity: 1; }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-scale.is-revealed { opacity: 1; transform: none; }

/* Stagger children — JS assigns --stagger-index; delay = index * 60ms, capped */
.reveal-stagger {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}
.reveal-stagger.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade, .reveal-scale, .reveal-stagger {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Marquee ---- */

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

@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; }
}

/* ---- Hero scroll cue ---- */

@keyframes scroll-cue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---- Hero entrance (page load, not scroll-triggered) ---- */

.hero__content > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-in 900ms var(--ease-out) forwards;
}
.hero__content > *:nth-child(1) { animation-delay: 150ms; }
.hero__content > *:nth-child(2) { animation-delay: 280ms; }
.hero__content > *:nth-child(3) { animation-delay: 410ms; }
.hero__content > *:nth-child(4) { animation-delay: 540ms; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__content > * { animation: none; opacity: 1; transform: none; }
}

/* ---- Add-to-cart pulse feedback ---- */

@keyframes bag-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.icon-btn.is-pulsing svg { animation: bag-pulse 420ms var(--ease-out); }

/* ---- Fade/scale for overlays handled inline via component transitions ---- */

.spin {
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Ken-Burns for hero/collection media (subtle, expensive feel) ---- */

.kenburns {
  animation: kenburns 14s var(--ease-in-out) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .kenburns { animation: none; }
}