/* ===== Motion — exact animation specs from SPEC.md section 7 ===== */

/* Spring reveal (main preset) — bounce 0.2, duration 0.4s */
/* cubic-bezier(.34,1.3,.64,1) ≈ Framer spring with 0.2 bounce */
.reveal-spring {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s var(--spring-ease),
              transform 0.4s var(--spring-ease);
}
.reveal-spring.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slow spring — duration 0.6, bounce 0 */
.reveal-spring--slow {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out,
              transform 0.6s ease-out;
}
.reveal-spring--slow.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slowest — duration 0.8, bounce 0 */
.reveal-spring--slower {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out,
              transform 0.8s ease-out;
}
.reveal-spring--slower.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Frame/image reveal — tween, duration 0.8s, cubic-bezier(.61,.02,.36,.98) */
/* scale 0.9 → 1, opacity 0 → 1 */
.reveal-frame {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--frame-ease),
              transform 0.8s var(--frame-ease);
}
.reveal-frame.visible {
  opacity: 1;
  transform: scale(1);
}

/* First in group gets 0.2s delay */
.reveal-frame--first {
  transition-delay: 0.2s;
}

/* Text reveal from mask — overflow:hidden wrapper, translateY(80px) → 0 */
.mask-reveal {
  overflow: hidden;
}
.mask-reveal__inner {
  transform: translateY(80px);
  transition: transform 0.8s var(--frame-ease);
}
.mask-reveal.visible .mask-reveal__inner {
  transform: translateY(0);
}

/* Hover transitions — duration 0.2s, cubic-bezier(.27,0,.51,1) */
.hover-tween {
  transition: all 0.2s var(--hover-ease);
}

/* Stagger — inherit transition, delay injected by JS via --stagger-idx */
.reveal-stagger {
  transition-delay: 0s; /* overridden by JS inline style */
}

/* Hero-init animation — light scale-in on load (no scroll needed) */
@keyframes hero-init {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
.hero__bg.hero-init {
  animation: hero-init 1.2s cubic-bezier(0.61, 0.02, 0.36, 0.98) forwards;
}

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-out,
              visibility 0.5s ease-out;
}
.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--c-black);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal-spring,
  .reveal-spring--slow,
  .reveal-spring--slower,
  .reveal-frame,
  .reveal-frame--first {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mask-reveal__inner {
    transform: none;
    transition: none;
  }
  .parallax-bg {
    transform: none !important;
  }
}