/*
 * Studio Shonae — Animation Framework
 * Scroll-triggered reveal via IntersectionObserver (animation.js)
 * Fade-up for UI elements, fade-up-blur for images
 */

/* ─── Reduced motion: reveal everything immediately ────────── */
@media (prefers-reduced-motion: reduce) {
  [data-anim]:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ─── Fade-up — text, cards, sections ──────────────────────── */
[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   0.65s ease,
    transform 0.65s ease;
  transition-delay: var(--anim-delay, 0ms);
}

/* ─── Fade-up with blur — images ───────────────────────────── */
[data-anim="image"] {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(8px);
  will-change: opacity, transform, filter;
  transition:
    opacity   0.85s ease,
    transform 0.85s ease,
    filter    0.85s ease;
  transition-delay: var(--anim-delay, 0ms);
}

/* ─── Revealed state ────────────────────────────────────────── */
[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-anim="image"].is-visible {
  will-change: auto;
}