/**
 * Reset: alles in :where(), Spezifität 0. Jede Komponentenregel gewinnt.
 * Kein :is(): es übernimmt die HÖCHSTE Spezifität seiner Liste.
 *
 * Bewegung (AP-38, Schicht motion am Ende): Kurven und Dauern nur aus den Tokens
 * (--motion-*), nichts über 300 ms, nur transform/opacity/Farben. Bei
 * prefers-reduced-motion entfällt jede Verschiebung und Skalierung (Transformationen
 * stehen nur in no-preference-Blöcken), sanfte Opacity-Übergänge bleiben.
 * Bewusst ohne Animation: Fortschrittsbalken, Zeitachsen-Balken, Seitenwechsel, Tabs,
 * Listenzeilen. Tastatur-Aktionen werden nie animiert.
 */
@layer base {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  :where(ul[class], ol[class]) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
  }

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  :where(button) {
    cursor: pointer;
  }

  :where(a) {
    color: inherit;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
      scroll-behavior: auto !important;
    }
  }
}

@layer motion {
  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes pop-in {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
  }

  @keyframes drop-in {
    from {
      opacity: 0.6;
    }
  }

  .account-menu[open] > .account-menu__panel,
  .status-menu[open] > .status-menu__panel,
  .menu[open] > .menu__panel,
  .row-menu[open] > .row-menu__panel,
  .card-prefs[open] > .card-prefs__panel {
    animation: fade-in var(--motion-duration-menu) var(--motion-ease);
  }

  @media (prefers-reduced-motion: no-preference) {
    .account-menu[open] > .account-menu__panel,
    .menu[open] > .menu__panel,
    .row-menu[open] > .row-menu__panel {
      transform-origin: top right;
      animation-name: pop-in;
    }

    .status-menu[open] > .status-menu__panel,
    .card-prefs[open] > .card-prefs__panel {
      transform-origin: top left;
      animation-name: pop-in;
    }
  }

  .task-status,
  #project-cards {
    transition: opacity var(--motion-duration-ui) var(--motion-ease);
  }

  .task-status.htmx-added,
  #project-cards.htmx-added {
    opacity: 0;
  }

  .board__card.is-dropped {
    animation: drop-in var(--motion-duration-ui) var(--motion-ease);
  }
}