/* Shared motion rules. Keep entrance classes used by the Razor views local. */
:root {
  --motion-fast: 180ms;
  --motion-normal: 240ms;
  --motion-enter: 600ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.animate__animated {
  animation-duration: var(--motion-enter);
  animation-timing-function: var(--motion-ease);
  /* Release transforms after entry so menus and hover effects work normally. */
  animation-fill-mode: backwards;
}

.animate__fadeInDown { animation-name: portal-enter-down; }
.animate__fadeInUp { animation-name: portal-enter-up; }
.cards-container.animate__animated,
.admin-toolbar.animate__animated,
.footer.animate__animated { animation-name: portal-fade; }

.hero-label.animate__animated { animation-delay: 30ms; }
.hero-heading.animate__animated { animation-delay: 90ms; }
.search-bar.animate__animated { animation-delay: 150ms; }
.filters-row .filter-btn-wrap:nth-child(1) .animate__animated { animation-delay: 190ms; }
.filters-row .filter-btn-wrap:nth-child(2) .animate__animated { animation-delay: 230ms; }
.filters-row .filter-btn-wrap:nth-child(3) .animate__animated { animation-delay: 270ms; }
.hero-img-cell.animate__animated { animation-delay: 130ms; }

/* Animate each result, including cards inserted by live search. The translate property
   leaves transform free for hover; backwards fill releases both after the entrance. */
.cards-grid > .member-card {
  animation: portal-card-enter 560ms var(--motion-ease) backwards;
  animation-delay: 40ms;
}
.cards-grid > .member-card:nth-child(2) { animation-delay: 90ms; }
.cards-grid > .member-card:nth-child(3) { animation-delay: 140ms; }
.cards-grid > .member-card:nth-child(4) { animation-delay: 190ms; }
.cards-grid > .member-card:nth-child(n + 5) { animation-delay: 240ms; }

@keyframes portal-card-enter {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

:is(.btn-login, .search-btn, .filter-btn, .sort-btn, .footer-social-btn, .btn-save, .btn-cancel) {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-normal) ease,
    transform var(--motion-normal) var(--motion-ease);
}

.search-bar {
  transition: box-shadow var(--motion-normal) ease, background-color var(--motion-normal) ease;
}
.search-bar:focus-within {
  box-shadow: 0 0 0 3px rgba(242, 200, 100, 0.4), 0 6px 20px rgba(0, 0, 0, 0.12);
}

@media (hover: hover) and (pointer: fine) {
  .btn-login:hover, .search-btn:hover, .footer-social-btn:hover { transform: translateY(-2px); }
}
.btn-login:active, .search-btn:active, .footer-social-btn:active { transform: translateY(0) scale(0.97); }

@keyframes portal-enter-down {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: none; }
}

@keyframes portal-enter-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

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

.cards-container {
  scroll-margin-top: 110px;
  transition: opacity var(--motion-fast) ease;
}

.cards-container.is-loading { opacity: 0.6; }

.filter-dropdown {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease),
    visibility 0s linear var(--motion-fast);
}

.filter-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.modal-overlay {
  pointer-events: none;
  transition: opacity var(--motion-fast) ease, visibility 0s linear var(--motion-normal);
}

.modal-overlay.active {
  pointer-events: auto;
  transition-delay: 0s;
}

.modal-overlay .modal-card {
  transform: translateY(8px) scale(0.98);
  transition: transform var(--motion-normal) var(--motion-ease);
}

.modal-overlay.active .modal-card { transform: none; }

/* Also covers Bootstrap transitions and page-specific styles. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .member-card:hover, .hero-carousel:hover, .info-box:hover, .btn-back:hover {
    transform: none !important;
  }
  .hero-carousel, .hero-carousel .hero-img, .hero-carousel:hover .hero-img,
  .mc-cta-arrow, .btn-login, .search-btn, .footer-social-btn {
    transform: none !important;
  }
}

@media (hover: none) {
  .info-box:hover, .btn-back:hover { transform: none; }
}