/* ============================================================
   ReadyToClub · Dev Motion – Polished Micro-Interactions
   Compositor-only properties: transform, opacity.
   No layout-affecting animations. Respects reduced-motion.
   ============================================================ */

.dev-portal .main { overflow-x: clip; }

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes dev-motion-enter {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dev-motion-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dev-motion-scale {
  from { opacity: 0; transform: translateY(-4px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

  /* ── Popovers & Dialogs ─────────────────────────────────── */
  .dev-portal .topbar-popover,
  .dev-portal #toast.show {
    animation: dev-motion-scale 160ms cubic-bezier(.2, .7, .2, 1);
  }
  .dev-portal dialog[open],
  .dev-public  dialog[open] {
    animation: dev-motion-enter 200ms cubic-bezier(.2, .7, .2, 1);
  }
  .dev-portal dialog[open]::backdrop,
  .dev-public  dialog[open]::backdrop {
    animation: dev-motion-fade 200ms ease-out;
  }

  /* ── FAQ accordion ──────────────────────────────────────── */
  .dev-portal .faq-entry[open] .faq-answer {
    animation: dev-motion-enter 160ms cubic-bezier(.2, .7, .2, 1);
  }

  /* ── Chat expand ────────────────────────────────────────── */
  .dev-portal .dev-chat-open #chat-body:not([hidden]) {
    animation: dev-motion-enter 180ms cubic-bezier(.2, .7, .2, 1);
  }

  /* ── Interactive element transitions ────────────────────── */
  :is(.dev-portal, .dev-public) :is(
    .button, .vote-button,
    .nav-button, .sidebar-utility,
    .dev-tabs button, .dev-faq-topics button,
    .icon-button, .dev-bottom-nav button,
    .dev-task, .panel, .metric,
    .player-card, .roster-card, .application-card,
    .competition, .card,
    .faq-entry
  ) {
    transition:
      transform          140ms ease-out,
      background-color   140ms ease-out,
      color              140ms ease-out,
      border-color       140ms ease-out,
      box-shadow         140ms ease-out,
      opacity            140ms ease-out;
  }

  /* ── Button press feedback ──────────────────────────────── */
  :is(.dev-portal, .dev-public) :is(.button, .vote-button):enabled:active,
  .dev-public a.button:active {
    transform: translateY(1px) scale(0.99);
  }
}

/* ── Desktop hover lifts ────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.dev-portal, .dev-public) .button:enabled:hover,
  .dev-public a.button:hover {
    transform: translateY(-1px);
  }
  .dev-portal .nav-button:hover {
    transform: translateX(2px);
  }
  .dev-portal .dev-task:hover > svg:last-child {
    transform: translateX(3px);
  }
}

/* ── Reduced motion: kill everything ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :is(.dev-portal, .dev-public) *,
  :is(.dev-portal, .dev-public) *::before,
  :is(.dev-portal, .dev-public) *::after,
  :is(.dev-portal, .dev-public) dialog::backdrop {
    animation:        none !important;
    transition:       none !important;
    scroll-behavior:  auto !important;
  }
  html:has(> .dev-portal),
  html:has(> .dev-public) {
    scroll-behavior: auto;
  }
}