/* ============================================================
   MOTION.CSS — Warm Studio gentle motion layer
   All animation behind prefers-reduced-motion: no-preference.
   Soft, calm, premium — not bouncy.
   ============================================================ */

/* ============================================================
   Global transitions — always active (cheap, perception layer)
   ============================================================ */
*,
*::before,
*::after {
  transition-timing-function: var(--pc-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Scope motion-sensitive rules to users who haven't opted out */
@media (prefers-reduced-motion: no-preference) {

  /* --- Buttons ------------------------------------------------ */
  .btn {
    transition:
      background-color var(--pc-dur, 240ms) var(--pc-ease),
      border-color     var(--pc-dur, 240ms) var(--pc-ease),
      color            var(--pc-dur, 240ms) var(--pc-ease),
      box-shadow       var(--pc-dur, 240ms) var(--pc-ease),
      transform        var(--pc-dur, 240ms) var(--pc-ease);
  }
  .btn:hover  { transform: translateY(-2px); }
  .btn:active { transform: translateY(1px); }

  /* --- Links -------------------------------------------------- */
  a {
    transition: color var(--pc-dur, 240ms) var(--pc-ease),
                opacity var(--pc-dur, 240ms) var(--pc-ease);
  }

  /* --- Cards -------------------------------------------------- */
  .card,
  .fm-card {
    transition:
      box-shadow var(--pc-dur, 240ms) var(--pc-ease),
      transform  var(--pc-dur, 240ms) var(--pc-ease),
      border-color var(--pc-dur, 240ms) var(--pc-ease);
  }
  .card:hover,
  .fm-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--pc-shadow-2);
  }
  .card:active,
  .fm-card:active {
    transform: translateY(0);
    box-shadow: var(--pc-shadow-1);
  }

  /* --- List group rows ---------------------------------------- */
  .list-group-item {
    transition:
      background-color var(--pc-dur, 240ms) var(--pc-ease),
      color            var(--pc-dur, 240ms) var(--pc-ease),
      border-left-color var(--pc-dur, 240ms) var(--pc-ease);
    border-left: 3px solid transparent;
  }
  .list-group-item:hover {
    border-left-color: var(--pc-accent, #0B8A4D);
  }

  /* --- Inputs + selects --------------------------------------- */
  .form-control,
  .form-select,
  .input-group-text {
    transition:
      border-color var(--pc-dur, 240ms) var(--pc-ease),
      box-shadow   var(--pc-dur, 240ms) var(--pc-ease),
      background   var(--pc-dur, 240ms) var(--pc-ease);
  }

  /* --- Badges ------------------------------------------------- */
  .badge {
    transition:
      background-color var(--pc-dur, 240ms) var(--pc-ease),
      color            var(--pc-dur, 240ms) var(--pc-ease);
  }

  /* --- Nav links ---------------------------------------------- */
  .nav-link,
  .navbar-brand {
    transition:
      color   var(--pc-dur, 240ms) var(--pc-ease),
      opacity var(--pc-dur, 240ms) var(--pc-ease);
  }

  /* --- Dropdown items ----------------------------------------- */
  .dropdown-item {
    transition:
      background-color var(--pc-dur, 240ms) var(--pc-ease),
      color            var(--pc-dur, 240ms) var(--pc-ease);
  }

  /* ============================================================
     Page-load reveal — [data-reveal] + .reveal-group > *
     Triggered by body.is-loaded added via DOMContentLoaded JS.
     ============================================================ */
  [data-reveal],
  .reveal-group > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity  var(--pc-dur, 240ms) var(--pc-ease),
      transform var(--pc-dur, 240ms) var(--pc-ease);
  }
  body.is-loaded [data-reveal],
  body.is-loaded .reveal-group > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children of .reveal-group */
  body.is-loaded .reveal-group > *:nth-child(1)  { transition-delay: 40ms;  }
  body.is-loaded .reveal-group > *:nth-child(2)  { transition-delay: 80ms;  }
  body.is-loaded .reveal-group > *:nth-child(3)  { transition-delay: 120ms; }
  body.is-loaded .reveal-group > *:nth-child(4)  { transition-delay: 160ms; }
  body.is-loaded .reveal-group > *:nth-child(5)  { transition-delay: 200ms; }
  body.is-loaded .reveal-group > *:nth-child(6)  { transition-delay: 240ms; }
  body.is-loaded .reveal-group > *:nth-child(7)  { transition-delay: 280ms; }
  body.is-loaded .reveal-group > *:nth-child(8)  { transition-delay: 320ms; }
  body.is-loaded .reveal-group > *:nth-child(n+9) { transition-delay: 360ms; }

  /* ============================================================
     Focus ring — soft green, no harsh default outline
     ============================================================ */
  :focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px var(--pc-accent-soft, rgba(11,138,77,0.12)) !important;
    border-radius: var(--pc-radius-sm, 10px);
    transition: box-shadow 120ms var(--pc-ease);
  }

  /* ============================================================
     Trailing icon nudge on hover
     ============================================================ */
  .btn .bi,
  .btn i,
  a:hover .bi-arrow-right,
  a:hover .bi-chevron-right {
    transition: transform var(--pc-dur, 240ms) var(--pc-ease);
  }
  .btn:hover .bi-arrow-right,
  .btn:hover .bi-chevron-right,
  a:hover .bi-arrow-right,
  a:hover .bi-chevron-right {
    transform: translateX(3px);
  }

  /* ============================================================
     Flash / toast — slide + fade in
     ============================================================ */
  .fm-flash {
    animation: fm-flash-in 320ms var(--pc-ease) both;
  }
  @keyframes fm-flash-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ============================================================
     Accordion / collapse — eased
     ============================================================ */
  .accordion-collapse {
    transition: height 280ms var(--pc-ease);
  }
  .collapsing {
    transition: height 280ms var(--pc-ease) !important;
  }

  /* ============================================================
     Skeleton shimmer — cool mint
     ============================================================ */
  .fm-skeleton {
    background: linear-gradient(
      90deg,
      var(--pc-surface-2, #EDF0ED) 25%,
      rgba(11,138,77,0.06) 50%,
      var(--pc-surface-2, #EDF0ED) 75%
    );
    background-size: 400% 100%;
    animation: fm-shimmer 1.6s ease-in-out infinite;
    border-radius: var(--pc-radius-sm, 10px);
  }
  @keyframes fm-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
  }

  /* ============================================================
     Green spinner
     ============================================================ */
  .fm-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2.5px solid var(--pc-accent-soft, rgba(11,138,77,0.20));
    border-top-color: var(--pc-accent, #0B8A4D);
    border-radius: 50%;
    animation: fm-spin 700ms linear infinite;
    display: inline-block;
  }
  @keyframes fm-spin {
    to { transform: rotate(360deg); }
  }

  /* ============================================================
     htmx request indicator
     ============================================================ */
  .htmx-request .fm-spinner,
  .htmx-request.fm-spinner {
    display: inline-block;
    animation-play-state: running;
  }
  /* Dim the containing element while htmx request is in flight */
  .htmx-request {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 200ms var(--pc-ease);
  }
  .htmx-request .htmx-indicator,
  .htmx-indicator {
    opacity: 0;
    transition: opacity 200ms var(--pc-ease);
  }
  .htmx-request .htmx-indicator {
    opacity: 1;
  }

} /* end @media (prefers-reduced-motion: no-preference) */

/* Always: if user prefers reduced motion, respect it cleanly */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  .reveal-group > * {
    opacity: 1;
    transform: none;
  }
}