/* CreatorHouse — shared motion layer.
   Calm and professional: fade + slight upward slide, 150–250ms, gentle
   staggering, soft hover lifts. No parallax, no bouncing, no autoplay.

   How it works with zero JS: the app pages (portal, dashboard,
   administration) switch views by toggling [hidden] (display:none), and
   render lists with innerHTML. Elements that leave display:none or are
   newly inserted restart their CSS animation — so view switches and
   freshly loaded content animate on their own.

   Everything lives behind prefers-reduced-motion: users who ask for less
   motion get an unanimated site. */

@media (prefers-reduced-motion: no-preference) {

  @keyframes mo-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes mo-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- containers: whole views / page shells — fade only, no slide ---- */
  main section,
  .view,
  .page {
    animation: mo-fade 0.2s ease-out backwards;
  }

  /* ---- items: cards, list entries, states — fade + slide, staggered ---- */
  main .card,
  .view .card,
  main .camp,
  main .camp-card,
  main .apply-card,
  main .draft-item,
  main .sub-item,
  main .state,
  main .empty,
  .login-card {
    animation: mo-fade-up 0.24s ease-out backwards;
  }

  /* gentle stagger for the first few siblings in any group */
  main .card:nth-child(2), .view .card:nth-child(2), main .camp:nth-child(2),
  main .camp-card:nth-child(2), main .draft-item:nth-child(2), main .sub-item:nth-child(2) { animation-delay: 0.05s; }
  main .card:nth-child(3), .view .card:nth-child(3), main .camp:nth-child(3),
  main .camp-card:nth-child(3), main .draft-item:nth-child(3), main .sub-item:nth-child(3) { animation-delay: 0.1s; }
  main .card:nth-child(4), .view .card:nth-child(4), main .camp:nth-child(4),
  main .camp-card:nth-child(4), main .draft-item:nth-child(4), main .sub-item:nth-child(4) { animation-delay: 0.15s; }
  main .card:nth-child(5), .view .card:nth-child(5), main .camp:nth-child(5),
  main .camp-card:nth-child(5), main .draft-item:nth-child(5), main .sub-item:nth-child(5) { animation-delay: 0.2s; }
  main .card:nth-child(6), .view .card:nth-child(6), main .camp:nth-child(6),
  main .camp-card:nth-child(6), main .draft-item:nth-child(6), main .sub-item:nth-child(6) { animation-delay: 0.25s; }

  /* admin stat tiles — the first thing seen after login */
  .stats .card.stat { animation: mo-fade-up 0.24s ease-out backwards; }
  .stats .card.stat:nth-child(2) { animation-delay: 0.05s; }
  .stats .card.stat:nth-child(3) { animation-delay: 0.1s; }
  .stats .card.stat:nth-child(4) { animation-delay: 0.15s; }

  /* ---- hovers: soft lift on interactive cards and chips ---- */
  button.camp {
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }
  button.camp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(16, 10, 34, 0.35);
  }
  .chips .chip {
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  }
  .chips .chip:hover { transform: translateY(-1px); }

  /* campaigns grid cards already lift on hover — make the lift smooth */
  .camp-card {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }

  /* buttons: soft press feedback */
  .btn, .rbtn, .btn-primary, .btn-ghost, .btn-quiet {
    transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .btn:active, .rbtn:active, .btn-primary:active { transform: translateY(1px); }
}