/* ============================================================================
   polish.css — Bewegungs- und Interaktions-Politur für ALLE Seiten
   ----------------------------------------------------------------------------
   Rein ADDITIV: setzt nur Übergänge, Druck-Feedback und Einblendungen obendrauf.
   Löscht man diese Datei (bzw. die <link>-Zeile), ist der Ursprungszustand zurück.

   Regeln stammen aus dem Design-Rezept des Webseiten-Baukastens:
     · jedes klickbare Element quittiert den Druck sichtbar (:active)
     · prefers-reduced-motion respektieren (Barrierefreiheit)
     · konkrete Eigenschaften animieren statt `transition: all` (GPU-schonend)
     · Karten/Listen gestaffelt einblenden statt hart erscheinen
     · kräftige Kurven statt der faden Standard-Easing
   Zeiten bewusst kurz: 140 ms Druck, 260 ms Karten — die Oberflächen werden
   häufig benutzt, lange Animationen nerven dort.
   ========================================================================== */

:root {
  --ne-press: 140ms;
  --ne-card: 260ms;
  --ne-ease-out: cubic-bezier(.22, 1, .36, 1);      /* weich auslaufend */
  --ne-ease-back: cubic-bezier(.34, 1.56, .64, 1);  /* leichter Überschwinger */
  --ne-ease-io: cubic-bezier(.65, 0, .35, 1);       /* rein/raus */
}

/* ---------- Druck-Feedback: klickbare Dinge reagieren spürbar ---------- */
button, .cfg-btn, .tab, [data-act], [data-tab], [role="button"], .badge-btn {
  transition: transform var(--ne-press) var(--ne-ease-out),
              filter var(--ne-press) linear,
              background-color 180ms linear,
              border-color 180ms linear,
              box-shadow 200ms var(--ne-ease-out);
}
button:not(:disabled):hover,
.cfg-btn:hover, [data-act]:hover, [data-tab]:hover { filter: brightness(1.12); }

button:not(:disabled):active,
.cfg-btn:active, [data-act]:active, [data-tab]:active, [role="button"]:active {
  transform: translateY(1px) scale(.985);
  filter: brightness(.94);
}
button:disabled { cursor: not-allowed; opacity: .55; }

/* Tastatur-Bedienung sichtbar machen (war bisher unsichtbar) */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
[data-act]:focus-visible, [data-tab]:focus-visible {
  outline: 2px solid #5b9dff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Karten heben leicht an — nur mit echter Maus ---------- */
@media (hover: hover) and (pointer: fine) {
  .card, .ship-card, .panel, .eq-invitem {
    transition: transform var(--ne-card) var(--ne-ease-out),
                border-color var(--ne-card) linear,
                box-shadow var(--ne-card) var(--ne-ease-out);
  }
  .card:hover, .ship-card:hover, .panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .85);
  }
  .eq-invitem:hover { transform: translateX(-2px); }
}
.ship-card:active, .eq-invitem:active { transform: scale(.995); }

/* ---------- Gestaffeltes Einblenden von Listen/Karten ---------- */
@keyframes ne-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.cards > .card, .ship-grid > .ship-card, .eq-slots > .eq-slot {
  animation: ne-in var(--ne-card) var(--ne-ease-out) both;
}
/* Staffelung: die ersten Elemente zuerst, danach gleichmäßig */
.cards > .card:nth-child(1), .ship-grid > .ship-card:nth-child(1) { animation-delay: 0ms; }
.cards > .card:nth-child(2), .ship-grid > .ship-card:nth-child(2) { animation-delay: 40ms; }
.cards > .card:nth-child(3), .ship-grid > .ship-card:nth-child(3) { animation-delay: 80ms; }
.cards > .card:nth-child(4), .ship-grid > .ship-card:nth-child(4) { animation-delay: 120ms; }
.cards > .card:nth-child(n+5), .ship-grid > .ship-card:nth-child(n+5) { animation-delay: 160ms; }

/* Tabellenzeilen: dezente Hervorhebung beim Überfahren */
tbody tr { transition: background-color 160ms linear; }

/* ---------- Eingabefelder ---------- */
input, select, textarea {
  transition: border-color 180ms linear, box-shadow 180ms var(--ne-ease-out), background-color 180ms linear;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(91, 157, 255, .18); }

/* ---------- Barrierefreiheit: Bewegung abschaltbar ----------
   Wer im Betriebssystem „Bewegung reduzieren" aktiviert hat, bekommt die
   Oberfläche ohne Animation — Inhalte bleiben vollständig sichtbar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cards > .card, .ship-grid > .ship-card, .eq-slots > .eq-slot { animation: none !important; opacity: 1 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover, .ship-card:hover, .panel:hover { transform: none; }
}