/* ============================================================
   STRAIN — geteilte Stile (Desktop + Mobil-App, EINE Datei seit 25.09.2026;
   web-mobile/editorial/geteilt.css ist ein Symlink hierher)

   Seit Welle 4 lebt kein Screen mehr doppelt — die beiden styles.css
   blieben es. Klassen, die geteilte Screens benutzen, standen oft nur in
   EINER davon (Glocke, Lade-Anzeige, Streak-Flamme: mobil ohne Animation;
   die schmale Stimmungs-Achse der Sortenseite fehlte am Handy ganz).

   Regel: Stile für Klassen aus geteilten .jsx-Dateien gehören HIERHER,
   nicht in eine der beiden styles.css. Die Datei lädt in beiden Apps NACH
   styles.css (gewinnt bei gleicher Spezifität). Prüfung:
   `node tools/check-css-geteilt.js` (dev-check) meldet Klassen aus
   geteilten Dateien, die nur eine App stylt.
   ============================================================ */

/* ── Gemeinsame Variablen ──
   --ease-hermes stand nur in der Desktop-CSS: mobil war jede Animation und
   Transition mit var(--ease-hermes) ungültig und fiel still weg (Atlas-Fokus-
   Puls, Globus-Knoten, CTA-Glühen …). Variablen, die geteilte Stile oder
   geteilte Screens brauchen, gehören hierher. */
:root {
  --ease-hermes: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Lade-Anzeige ── */
/* Editorial loading-state: subtle pulsing italic — vereinheitlicht alle
   Lade…-anzeigen ueber die app. Nutzen: <p class="ed-loading">Lade …</p>
   oder <p className="ed-loading">Eine Sekunde …</p> */
.ed-loading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink-3);
  letter-spacing: -0.01em;
  animation: ed-loading-pulse 1800ms ease-in-out infinite;
}
@keyframes ed-loading-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── Stimmung schmal ── */
/* Community-Stimmung in schmalen Fenstern. Die Sortenseite behaelt auch bei
   412 px ihr zweispaltiges Desktop-Raster; die Karte ist dort nur 252 px
   breit, und von 90px 1fr 32px bleiben dem Balken 9 px — er sieht dann aus
   wie ein Gedankenstrich. Also Label und Wert in eine Zeile, der Balken
   darunter ueber die volle Breite. Platzierung explizit, weil die
   Auto-Platzierung den Wert sonst hinter den Balken in eine dritte Zeile
   schiebt. */
@media (max-width: 720px) {
  .ed-stimmung .ed-axis-row { grid-template-columns: 1fr 34px; gap: 5px 10px; }
  .ed-stimmung .ed-axis-label { grid-area: 1 / 1 / 2 / 2; }
  .ed-stimmung .ed-axis-val { grid-area: 1 / 2 / 2 / 3; }
  .ed-stimmung .ed-axis-track { grid-area: 2 / 1 / 3 / 3; }
}

/* ── Streak-Flamme + Benachrichtigungs-Blatt ── */
/* Streak-Flamme — lebendiges Flackern statt statisches Emoji. */
.ed-streak-flame {
  display: inline-block;
  transform-origin: 50% 90%;
  animation: ed-flame-flicker 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(224, 133, 80, 0.55));
}
@keyframes ed-flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  25% { transform: scale(1.12) rotate(2deg); }
  50% { transform: scale(0.96) rotate(-1deg); }
  75% { transform: scale(1.08) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-streak-flame { animation: none !important; }
}

/* ── Notifications-Sheet (Mobile Full-Screen) ─────────────────
   slide-fade enter, paper-0 background.
─────────────────────────────────────────────────────────────── */
.ed-noti-sheet {
  animation: ed-noti-sheet-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ed-noti-sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ed-noti-sheet { animation: none !important; }
}

/* ── Glocke + Kommentar-Karte ── */
/* ── Notifications-Bell Polish ────────────────────────────────
   shake bei neuer noti, badge pulse, dropdown smooth enter.
─────────────────────────────────────────────────────────────── */
.ed-bell-shake {
  animation: ed-bell-shake 700ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1;
  transform-origin: top center;
}
@keyframes ed-bell-shake {
  10%, 90% { transform: rotate(-3deg); }
  20%, 80% { transform: rotate(6deg); }
  30%, 50%, 70% { transform: rotate(-10deg); }
  40%, 60% { transform: rotate(10deg); }
}

/* Badge: ping-pulse beim mount + sanftes glow */
.ed-bell-badge {
  animation: ed-bell-badge-in 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ed-bell-badge-in {
  0%   { transform: scale(0.3); opacity: 0; box-shadow: 0 0 0 0 var(--plum-soft); }
  60%  { transform: scale(1.18); opacity: 1; box-shadow: 0 0 0 10px var(--plum-soft); }
  100% { transform: scale(1);    opacity: 1; box-shadow: 0 0 0 0 transparent; }
}

/* Dropdown: slide+fade enter, schnell aber wahrnehmbar */
.ed-noti-dropdown {
  animation: ed-noti-drop-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transform-origin: top right;
}
@keyframes ed-noti-drop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Item-Hover: subtler background-shift */
.ed-noti-item:hover {
  background: var(--paper-1) !important;
}
.ed-noti-item:hover[style*="plum-soft"] {
  background: var(--plum-soft) !important;
  border-color: var(--plum) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ed-bell-shake, .ed-bell-badge, .ed-noti-dropdown {
    animation: none !important;
  }
}

/* ── Comment-Card-Hover ───────────────────────────────────────
   nur die Rahmenfarbe (De-Slop: kein wachsender Schatten auf Karten).
─────────────────────────────────────────────────────────────── */
.ed-comment-card {
  transition: border-color 200ms var(--ease-hermes, ease) !important;
}
.ed-comment-card:hover {
  border-color: var(--plum-line) !important;
}

/* ── CTA-Glühen ── */
/* Eingangs-glow auf primary-CTA: kommen mit kleinem pulse rein, einmalig */
.ed-cta-enter {
  animation: ed-cta-glow 1.2s var(--ease-hermes) 200ms both;
}
@keyframes ed-cta-glow {
  0%   { box-shadow: 0 0 0 0 rgba(var(--plum-rgb), 0); }
  40%  { box-shadow: 0 0 0 6px rgba(var(--plum-rgb), 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(var(--plum-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ed-cta-enter { animation: none !important; }
}

/* ── Kartenkacheln (05.10.) ──
   OSM-Standardkacheln sind hell; die Karten der App (CSC-Karte, Smoke with
   me) sind bewusst Nacht, damit die Pins leuchten. Der Filter macht aus der
   hellen OSM-Kachel eine dunkle — kein zweiter Kachel-Anbieter, kein
   Schlüssel. Nur auf dem Kachel-Container, nie auf Pins/Popups. */
.leaflet-layer.strain-kacheln-dunkel {
  filter: invert(1) hue-rotate(180deg) brightness(0.72) contrast(0.92) saturate(0.35);
}

/* ── Figur-Editor (05.10.) ──
   Die Vorschau im Ankleiden hüpft bei jeder Wahl (Mii Maker: die Figur
   reagiert) und blinzelt alle paar Sekunden (Animal Crossing: die Figur
   lebt). Beides nur dort, wo .figur-lebt / .figur-reagiert gesetzt sind
   (Editor-Vorschau, eigene Figur im Zimmer) — nie in der Straße (viele
   Figuren, 27 px). Die Gruppen-Pillen scrollen schmal seitlich. */
@keyframes figur-hops {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.figur-reagiert { animation: figur-hops 340ms var(--ease-hermes, ease-out); }
@keyframes figur-blinzeln {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 97%      { transform: scaleY(0.12); }
}
.figur-lebt [data-figur-augen] {
  transform-box: fill-box;
  transform-origin: center;
  animation: figur-blinzeln 4.6s infinite;
}
.figur-gruppen {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.figur-gruppen::-webkit-scrollbar { display: none; }
.figur-gruppen > .ed-pill { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .figur-reagiert, .figur-lebt [data-figur-augen] { animation: none !important; }
}