/* ==========================================================================
   MUTTS & NUTTS — Motion
   Subtle, physical, never decorative for its own sake.
   ========================================================================== */

/* ------ Keyframes ------ */
@keyframes heroFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes heroSlowZoom {
  0%   { transform: scale(1.08); }
  50%  { transform: scale(1); }
  100% { transform: scale(1.08); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(183, 149, 90, 0.55); }
  60%      { box-shadow: 0 0 0 8px rgba(183, 149, 90, 0); }
}

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

@keyframes scrollLine {
  0%   { top: -100%; }
  55%  { top: 100%; }
  100% { top: 100%; }
}

@keyframes ripple {
  to { transform: scale(3.2); opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pawBeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0.75; }
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ------ Scroll-reveal system (driven by IntersectionObserver) ------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }

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

/* Stagger children: parent carries data-reveal-stagger */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-revealed > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger].is-revealed > *:nth-child(2)  { transition-delay: 90ms; }
[data-reveal-stagger].is-revealed > *:nth-child(3)  { transition-delay: 180ms; }
[data-reveal-stagger].is-revealed > *:nth-child(4)  { transition-delay: 270ms; }
[data-reveal-stagger].is-revealed > *:nth-child(5)  { transition-delay: 360ms; }
[data-reveal-stagger].is-revealed > *:nth-child(6)  { transition-delay: 450ms; }
[data-reveal-stagger].is-revealed > *:nth-child(7)  { transition-delay: 540ms; }
[data-reveal-stagger].is-revealed > *:nth-child(8)  { transition-delay: 630ms; }
[data-reveal-stagger].is-revealed > *:nth-child(9)  { transition-delay: 720ms; }
[data-reveal-stagger].is-revealed > *:nth-child(10) { transition-delay: 810ms; }

/* Image curtain reveal */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cream-deep);
  transform-origin: right;
  transition: transform 1100ms var(--ease-out) 150ms;
  z-index: 3;
}
.img-reveal.is-revealed::after {
  transform: scaleX(0);
}

/* Lazy image fade-in */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 700ms ease;
}
img[loading="lazy"].is-loaded,
img[loading="lazy"].no-observer {
  opacity: 1;
}

/* Card tilt shine (mouse-tracked via JS custom props) */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 250ms var(--ease-out);
}
.tilt-card.is-tilting {
  transform:
    perspective(900px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateY(-6px);
}

/* Reduced motion: everything settles instantly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .img-reveal::after { display: none; }
  img[loading="lazy"] { opacity: 1; }
}

/* No-JS safety net.
   The reveal system parks content at opacity:0 behind an opaque curtain and
   relies on IntersectionObserver to lift it. If the script never runs, every
   revealed section stays invisible and the page reads as blank. `.js-on` is
   set on <html> by animations.js, so these defaults apply until JS confirms
   it is alive. */
html:not(.js-on) [data-reveal],
html:not(.js-on) [data-reveal-stagger] > * {
  opacity: 1;
  transform: none;
}
html:not(.js-on) .img-reveal::after { display: none; }
html:not(.js-on) img[loading="lazy"] { opacity: 1; }