/* Light motion — skipped when the user prefers reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .confetti-piece {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html[data-theme="light"],
  html[data-theme="light"] body,
  html[data-theme="dark"],
  html[data-theme="dark"] body {
    background-size: 118% 118%, 118% 118%, 112% 112%, 100% 100%;
    animation: aurora-shift 28s ease-in-out infinite alternate;
  }

  .flash {
    animation: rise-in 0.35s ease;
  }

  .page-title,
  .page-lead {
    animation: rise-in 0.45s ease both;
  }

  .page-lead {
    animation-delay: 0.05s;
  }

  .home-hero,
  .page-hero,
  .get-app-card,
  .admin-login-card {
    animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .form-card {
    animation: card-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
  }

  .feed-post:not(.feed-skeleton),
  .composer,
  .onboard-card,
  .whats-new-item,
  .collection-card {
    animation: rise-in 0.4s ease;
  }

  .nav-menu.is-open {
    animation: drop-in 0.2s ease;
  }

  .onboard-item.is-done .onboard-check {
    animation: pop-in 0.25s ease;
  }

  .presence-dot,
  .online-dot {
    animation: pulse-dot 2.4s ease-in-out infinite;
  }

  .page-auth .page-title {
    animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .page-auth .page-lead {
    animation: rise-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
  }

  .page-auth .form-card {
    animation: card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
  }

  .page-auth .stack-form > label:not(.hp-field) {
    animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .page-auth .stack-form > label:nth-of-type(2) { animation-delay: 0.16s; }
  .page-auth .stack-form > label:nth-of-type(3) { animation-delay: 0.22s; }
  .page-auth .stack-form > label:nth-of-type(4) { animation-delay: 0.28s; }
  .page-auth .stack-form > label:nth-of-type(5) { animation-delay: 0.34s; }
  .page-auth .stack-form > label:nth-of-type(6) { animation-delay: 0.4s; }

  .page-auth .stack-form > .bevel-btn {
    animation: rise-in 0.45s ease 0.3s both;
  }

  .page-auth .form-actions {
    animation: rise-in 0.45s ease 0.44s both;
  }

  .page-auth .form-legal {
    animation: rise-in 0.45s ease 0.48s both;
  }

  .page-auth .form-foot {
    animation: rise-in 0.45s ease 0.52s both;
  }

  .bevel-btn,
  .ms-btn,
  .header-cta,
  .nav-toggle,
  .theme-btn,
  .alert-bell,
  .collection-like,
  .get-app-download {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
  }

  .bevel-btn:hover,
  .ms-btn:hover,
  .header-cta:hover,
  .get-app-download:hover {
    transform: translateY(-2px);
  }

  .bevel-btn:active,
  .ms-btn:active,
  .header-cta:active,
  .get-app-download:active {
    transform: translateY(0) scale(0.98);
  }

  .theme-btn:hover,
  .alert-bell:hover,
  .nav-toggle:hover {
    transform: scale(1.06);
  }

  .user-avatar img,
  .user-avatar {
    transition: transform 0.2s ease;
  }

  a:hover .user-avatar,
  .header-user:hover .user-avatar {
    transform: scale(1.04);
  }

  .feed-comment-form .nav-btn:hover {
    transform: translateY(-1px);
  }

  .bevel-in {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }

  .bevel-in:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-link) 26%, transparent);
  }

  .person-card,
  .collection-card,
  .inbox-item,
  .forum-post {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .person-card:hover,
  .collection-card:hover,
  .inbox-item:hover,
  .forum-post:hover {
    transform: translateY(-3px);
  }

  .nav-item a {
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .nav-item a:hover {
    transform: translateX(3px);
  }

  .panel,
  .ms-box {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes drop-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes pop-in {
  from {
    transform: scale(0.7);
  }
  to {
    transform: scale(1);
  }
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@keyframes aurora-shift {
  from {
    background-position: 0% 0%, 100% 100%, 50% 42%, 0 0;
  }
  to {
    background-position: 10% 8%, 88% 92%, 46% 56%, 0 0;
  }
}