/* ===== Keyframes ===== */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ===== Entrance Animation Utility ===== */
@media (prefers-reduced-motion: no-preference) {
  .anim-enter {
    animation-name: fadeUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
  }
}

/* ===== Scroll-Reveal Utilities ===== */

/* Initial hidden state — applied at render time by JS */
.anim-scroll {
  /* Visible by default; motion version overrides below */
}

@media (prefers-reduced-motion: no-preference) {
  .anim-scroll {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* Applied by IntersectionObserver when element enters the viewport */
  .anim-scroll.anim-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced-motion: always show content without animation */
@media (prefers-reduced-motion: reduce) {
  .anim-enter,
  .anim-scroll,
  .anim-scroll.anim-visible {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Route Transition ===== */
@media (prefers-reduced-motion: no-preference) {
  #root {
    transition: opacity 0.15s ease;
  }

  #root[data-fading] {
    opacity: 0;
  }
}