/* Shared motion: entrances + light ambient. Only when user allows motion. */

@media (prefers-reduced-motion: no-preference) {
  @keyframes site-enter-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes site-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes site-header-in {
    from {
      opacity: 0.82;
      transform: translateY(-12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes site-soft-breathe {
    0%,
    100% {
      opacity: 0.88;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
  }

  html.motion-header-on .site-header-inner {
    animation: site-header-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* --- Home (index) --- */
  .home > .hero-grid > .hero-copy-wrap,
  .home > .hero-grid > .hero-side {
    animation: site-enter-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .home > .hero-grid > .hero-side {
    animation-delay: 0.09s;
  }

  .home .hero-side li:nth-child(1) {
    animation: site-enter-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.16s;
  }

  .home .hero-side li:nth-child(2) {
    animation: site-enter-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.22s;
  }

  .home .hero-side li:nth-child(3) {
    animation: site-enter-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.28s;
  }

  .home > .lyrics-quote {
    animation: site-enter-up 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.12s;
  }

  .home .lyrics-quote-inner {
    animation: site-fade-in 0.55s ease both;
    animation-delay: 0.16s;
  }

  .home > .cards-shell {
    animation: site-enter-up 0.64s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.18s;
  }

  .home .preview-card {
    animation: site-fade-in 0.55s ease both;
  }

  .home .preview-card:nth-child(1) {
    animation-delay: 0.2s;
  }

  .home .preview-card:nth-child(2) {
    animation-delay: 0.26s;
  }

  .home .preview-card:nth-child(3) {
    animation-delay: 0.32s;
  }

  .home .eyebrow::before {
    animation: site-soft-breathe 5s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  /* --- Generate --- */
  .generate-page .card-wrapper {
    animation: site-enter-up 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .generate-page .content-wrapper {
    animation: site-fade-in 0.55s ease both;
    animation-delay: 0.08s;
  }

  /* --- Profile --- */
  .profile-layout > .playlists-section {
    animation: site-enter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.12s;
  }

  /* --- Login --- */
  .page-login .login-shell {
    animation: site-enter-up 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* --- Playlist preview --- */
  .preview-container {
    animation: site-enter-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .main-content {
    transition:
      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .main-content.visible .left-panel {
    animation: site-enter-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.04s;
  }

  .main-content.visible .right-panel {
    animation: site-enter-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.1s;
  }

  /* --- Landing (static header in page) --- */
  .page-landing > header {
    animation: site-header-in 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .page-landing main > section.hero {
    animation: site-enter-up 0.68s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.06s;
  }

  .page-landing main > section.features {
    animation: site-enter-up 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.12s;
  }

  .page-landing footer {
    animation: site-fade-in 0.5s ease both;
    animation-delay: 0.2s;
  }

  /* --- Admin --- */
  .page-admin .admin-wrap {
    animation: site-enter-up 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}