/* Harvest shared motion layer
 * Additive animation polish for pages using shared/h-components.css.
 * Keep motion on transform + opacity to avoid layout thrashing.
 */

:root {
  --h-motion-fast: 100ms;
  --h-motion-base: 200ms;
  --h-motion-page: 300ms;
  --h-motion-ease: ease-out;
  --h-motion-shadow: 0 8px 18px rgba(0,0,0,.32);
  --h-motion-shadow-lg: 0 14px 28px rgba(0,0,0,.36);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: h-page-fade-in var(--h-motion-page) var(--h-motion-ease) both;
  }

  .h-btn,
  .h-fab,
  #packages-grid a,
  #page-schedule button,
  button.h-btn,
  a.h-btn {
    will-change: transform;
    transition:
      background-color 150ms var(--h-motion-ease),
      border-color 150ms var(--h-motion-ease),
      box-shadow var(--h-motion-base) var(--h-motion-ease),
      opacity 150ms var(--h-motion-ease),
      transform var(--h-motion-fast) var(--h-motion-ease);
  }

  .h-btn:hover,
  .h-fab:hover,
  #packages-grid a:hover,
  #page-schedule button:hover {
    box-shadow: var(--h-motion-shadow);
    transform: translateY(-1px);
  }

  .h-btn:active,
  .h-fab:active,
  #packages-grid a:active,
  #page-schedule button:active {
    transform: scale(.97);
    transition-duration: var(--h-motion-fast);
  }

  .h-card,
  .h-kpi,
  #packages-grid > div,
  #g-main .h-card,
  #page-sessions .h-card,
  #page-overview .h-card,
  #page-messages .h-card,
  #tabs .h-card,
  .ns-section .h-card {
    transition:
      border-color var(--h-motion-base) var(--h-motion-ease),
      box-shadow var(--h-motion-base) var(--h-motion-ease),
      opacity var(--h-motion-base) var(--h-motion-ease),
      transform var(--h-motion-base) var(--h-motion-ease);
    will-change: transform;
  }

  .h-card:hover,
  .h-kpi:hover,
  #packages-grid > div:hover,
  #g-main .h-card:hover,
  #page-sessions .h-card:hover,
  #page-overview .h-card:hover,
  #page-messages .h-card:hover,
  #tabs .h-card:hover,
  .ns-section .h-card:hover {
    box-shadow: var(--h-motion-shadow-lg);
    transform: translateY(-1px);
  }

  .h-modal-backdrop {
    animation: h-modal-backdrop-in var(--h-motion-base) var(--h-motion-ease) both;
  }

  .h-modal {
    animation: h-modal-in var(--h-motion-base) var(--h-motion-ease) both;
    transform-origin: center;
    will-change: opacity, transform;
  }

  .h-modal-backdrop.is-closing {
    animation: h-modal-backdrop-out var(--h-motion-base) var(--h-motion-ease) both;
  }

  .h-modal.is-closing {
    animation: h-modal-out var(--h-motion-base) var(--h-motion-ease) both;
  }

  .h-toast-wrap {
    left: auto;
    right: var(--space-4);
    top: 88px; /* below the 72px sticky nav (spec v2 §10) */
    bottom: auto;
    align-items: flex-end;
    transform: none;
  }

  .h-toast {
    animation: h-toast-slide-in var(--h-motion-base) var(--h-motion-ease) both;
    will-change: opacity, transform;
  }

  #harvest-profile-dropdown,
  .h-dropdown,
  .h-menu,
  [data-dropdown],
  [role="menu"] {
    transition:
      opacity var(--h-motion-base) var(--h-motion-ease),
      transform var(--h-motion-base) var(--h-motion-ease);
    transform-origin: top right;
  }

  #harvest-profile-dropdown.open,
  .h-dropdown.open,
  .h-dropdown.is-open,
  .h-menu.open,
  .h-menu.is-open,
  [data-dropdown].open,
  [data-dropdown].is-open,
  [role="menu"].open,
  [role="menu"].is-open {
    animation: h-dropdown-in var(--h-motion-base) var(--h-motion-ease) both;
  }
}

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

@keyframes h-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes h-modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes h-modal-in {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes h-modal-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.95); }
}

@keyframes h-toast-slide-in {
  from { opacity: 0; transform: translate3d(16px, -8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes h-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

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