/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Motion ────────────────────────────────────────────────────────────
   House rule: interactive state changes ease instead of snapping.
   Micro-transitions on everything clickable, Turbo view transitions
   (meta tag in the admin layout) cross-fade page swaps and morph the
   active nav pill between sections. All of it bows out under
   prefers-reduced-motion. */

a, button, input[type="submit"] {
  transition: color 150ms ease, background-color 150ms ease,
              border-color 150ms ease, opacity 150ms ease;
}

/* Turbo view transitions: keep the cross-fade quick; give the nav pill's
   morph a touch longer so the slide reads. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
::view-transition-group(active-nav) { animation-duration: 250ms; }

/* Dropdown menus (account avatar, mobile hamburger) fade in when the
   hidden attribute clears. Fade-out on close stays instant — display
   can't animate away without holding the element open. */
[data-dropdown-target="menu"] {
  transition: opacity 150ms ease, display 150ms allow-discrete;
}
@starting-style {
  [data-dropdown-target="menu"]:not([hidden]) { opacity: 0; }
}

/* Native <dialog> modals fade + settle in on open. */
dialog {
  transition: opacity 150ms ease, transform 150ms ease,
              display 150ms allow-discrete, overlay 150ms allow-discrete;
}
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
  a, button, input[type="submit"], [data-dropdown-target="menu"], dialog { transition: none; }
  ::view-transition-group(*), ::view-transition-image-pair(*),
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}