/* ══════════════════════════════════════════════════════════════════════════
   v3/motion.css — der EINZIGE Ort fuer Zeit in der v3-Shell (25.09.2026)

   Apple-ruhig: gespuert statt gesehen. Dauern und Kurven kommen ausschliesslich
   aus v3/tokens.css (--dur-*, --ease-*, --spring-*); die Stufen full/calm/off
   auf <html data-motion> schalten dort die Werte um - hier steht keine Stufe
   ausser dem harten Aus-Schalter und den Dauerschleifen.

   Keyframes heissen alle claw-*. Kein anderes v3-Sheet definiert @keyframes
   (Ausnahme: zwei Legacy-Aliase in v3/adopt.css). motion-probe prueft, dass
   nur claw-* laeuft.

   Eintritt von PANEL-INHALT gibt es hier nicht: Panels bauen per innerHTML
   neu, eine CSS-Animation dort liefe bei jedem Refresh erneut. Das macht
   v3/motion.js einmalig per WAAPI auf 'tab-changed'.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Aus-Schalter ────────────────────────────────────────────────────────────
   Im FRUEHEN Layer reset, weil bei !important die Layer-Reihenfolge kippt:
   so schlaegt er auch Legacy-!important. 1 ms statt 0 s - transitionend und
   animationend feuern dann noch, und nichts wartet ewig darauf. */
@layer reset {
  :root[data-motion="off"] *,
  :root[data-motion="off"] *::before,
  :root[data-motion="off"] *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  :root[data-motion="off"] ::view-transition-group(*),
  :root[data-motion="off"] ::view-transition-old(*),
  :root[data-motion="off"] ::view-transition-new(*) { animation: none !important; }
}

@layer components {

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes claw-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes claw-pop-in     { from { opacity: 0; scale: var(--scale-pop); } to { opacity: 1; scale: 1; } }
@keyframes claw-palette-in { from { opacity: 0; translate: 0 -6px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes claw-sheet-up   { from { opacity: 0; translate: 0 var(--lift-sheet); } to { opacity: 1; translate: 0 0; } }
@keyframes claw-rise       { from { opacity: 0; translate: 0 var(--cc-rise-y, 6px); scale: var(--cc-rise-scale, 1); } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes claw-spin       { to { rotate: 360deg; } }
@keyframes claw-breathe    { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes claw-shimmer    { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes claw-underline  { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes claw-wave       { 0%, 100% { scale: 1 .35; } 50% { scale: 1 1; } }
@keyframes claw-token-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes claw-caret      { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes claw-ripple     { from { scale: 1; opacity: .35; } to { scale: 2.6; opacity: 0; } }
@keyframes claw-text-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Ruhig und aus: statt Heben/Skalieren nur die Blende. */
:root[data-motion="calm"] { --cc-rise-y: 0px; --cc-rise-scale: 1; }

/* ── Bedienelemente: Farbe, Druck, Fokus ─────────────────────────────────────
   Farbe/Kante in --dur-1. Druck skaliert ueber die EIGENE scale-Property,
   damit Legacy-transform (Positionierungen) nie ueberschrieben wird.
   Hineindruecken schnell, Loslassen federt. Rail, Zeilen und Karten
   bekommen keinen Scale - Apple-Seitenleisten wippen nicht. */
.btn, .btn-primary, .btn-danger, .theme-toggle, .btn-logout, .btn-ghost,
#header .header-right > button, .v3-chip, .v3-ask-send, .u-seg > button,
#dashboard-mobile-nav button, .v3-rail-pin, .v3-answer-act {
  transition:
    background-color var(--dur-1) var(--ease-standard),
    border-color var(--dur-1) var(--ease-standard),
    color var(--dur-1) var(--ease-standard),
    box-shadow var(--dur-2) var(--ease-standard),
    opacity var(--dur-2) var(--ease-standard),
    scale var(--dur-3) var(--spring-snappy);
}
.btn-ghost:active, #header .header-right > button:active, .v3-chip:active,
.v3-ask-send:active, .u-seg > button:active, #dashboard-mobile-nav button:active,
.v3-answer-act:active {
  scale: var(--press-scale);
  transition-duration: var(--dur-0);
}
.btn:active, .btn-primary:active, .btn-danger:active,
.theme-toggle:active, .btn-logout:active {
  scale: var(--press-scale-lg);
  transition-duration: var(--dur-0);
}
.v3-rail-pin { transition-property: background-color, color, width; transition-duration: var(--dur-1), var(--dur-1), var(--dur-3); }

/* Fokus-Ring "landet": erscheint etwas weiter und zieht sich an. */
:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 2px;
  transition: outline-offset var(--dur-2) var(--spring-snappy);
}
@starting-style { :focus-visible { outline-offset: 6px; } }

/* Felder */
.crud-field input, .crud-field select, .crud-field textarea, .crud-input,
input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="date"], select, textarea {
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-2) var(--ease-standard),
              background-color var(--dur-2) var(--ease-standard);
}

/* Karten und Zeilen: nur Toenung, kein Heben. */
.card, .card-sm, .stat-card, .v-card, .row-item {
  transition: background-color var(--dur-2) var(--ease-standard),
              border-color var(--dur-2) var(--ease-standard);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#header { transition: padding-left var(--dur-4) var(--ease-sheet); }

/* Live-Punkt: ein leiser Ring, der sich ausbreitet - nur bei voller Stufe. */
.live-dot { position: relative; }
:root[data-motion="full"] .live-dot.ok::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--success);
  animation: claw-ripple 3.2s var(--ease-out) infinite;
}

/* ── Rail ───────────────────────────────────────────────────────────────── */
/* Aufklappen federt; Verlassen wartet 250 ms, Betreten 150 ms (Absicht statt
   Flackern beim diagonalen Durchqueren). */
#tab-nav {
  transition: width var(--dur-3) var(--spring-snappy) 250ms,
              background-color var(--dur-2) var(--ease-standard) 250ms,
              box-shadow var(--dur-3) var(--ease-standard) 250ms;
}
#tab-nav:hover, #tab-nav:focus-within { transition-delay: 150ms; }
.rail-group-label { transition: font-size var(--dur-2) var(--ease-standard); }
#tab-nav .nav-tab {
  transition: background-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}
#tab-nav .nav-tab .tab-icon { transition: margin var(--dur-3) var(--spring-snappy); }
#tab-nav .nav-tab .v3-rail-label {
  translate: -4px 0;
  transition: opacity var(--dur-2) var(--ease-standard), translate var(--dur-3) var(--spring-gentle);
}
#tab-nav:hover .nav-tab .v3-rail-label,
#tab-nav:focus-within .nav-tab .v3-rail-label,
:root[data-rail="pinned"] #tab-nav .nav-tab .v3-rail-label { translate: 0 0; }
#main-content { transition: margin-left var(--dur-4) var(--ease-sheet); }

/* ── Ask-Bar ────────────────────────────────────────────────────────────── */
.v3-ask {
  transition: border-color var(--dur-2) var(--ease-standard),
              box-shadow var(--dur-3) var(--ease-standard),
              translate var(--dur-3) var(--spring-gentle);
}
.v3-ask:focus-within { translate: 0 -1px; }
/* Der Senden-Knopf erwacht, sobald eine Frage da ist. */
.v3-ask:has(.v3-ask-input:placeholder-shown) .v3-ask-send { opacity: .4; scale: .9; }
.v3-ask-send { transform-origin: center; }

/* ── Overlays: federnd hinein ────────────────────────────────────────────────
   Hinaus laeuft per ClawMotion.dismiss() in den Schliess-Funktionen (JS, weil
   display:none keine Ausblendung kennt). backwards statt both: nach dem
   Eintritt bleibt keine Transformation am Element haengen. */
#cmdk-overlay { animation: claw-fade-in var(--dur-2) var(--ease-out) backwards; }
#cmdk-overlay .cmdk-modal {
  transform-origin: 50% 0;
  animation: claw-palette-in var(--dur-3) var(--spring-snappy) backwards;
}
.notif-popover, .v3-appearance-pop:not([hidden]) {
  transform-origin: 100% 0;
  animation: claw-pop-in var(--dur-3) var(--spring-snappy) backwards;
}
.crud-modal { animation: claw-fade-in var(--dur-2) var(--ease-out) backwards; }
.crud-modal .crud-modal-box { animation: claw-sheet-up var(--dur-4) var(--spring-gentle) backwards; }
.w1-wizard-overlay { animation: claw-fade-in var(--dur-2) var(--ease-out) backwards; }
.w1-wizard-modal { animation: claw-sheet-up var(--dur-4) var(--spring-gentle) backwards; }

/* Widget-Modal (.open) - auch hinaus ohne JS, wo die Engine display animiert. */
#widget-modal {
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out), display var(--dur-2) allow-discrete, overlay var(--dur-2) allow-discrete;
}
#widget-modal.open { opacity: 1; }
@starting-style { #widget-modal.open { opacity: 0; } }
#widget-modal .modal-box { transition: translate var(--dur-4) var(--spring-gentle), scale var(--dur-4) var(--spring-gentle); }
#widget-modal:not(.open) .modal-box { translate: 0 var(--lift-sheet); }
@starting-style { #widget-modal.open .modal-box { translate: 0 var(--lift-sheet); } }

/* Mobil-Menue (<dialog>): Bottom-Sheet federt hoch. */
#dashboard-mobile-menu[open] { animation: claw-sheet-up var(--dur-4) var(--ease-sheet) backwards; }
#dashboard-mobile-menu[open]::backdrop { animation: claw-fade-in var(--dur-2) var(--ease-out) backwards; }

/* Events-Ticker und Inbox am Desktop: Transformation statt `right`
   (layoutfrei). Mobil bleibt die bottom-Transition aus panel-mobile-perfect,
   weil das Wisch-Schliessen dort inline mit transform arbeitet. */
@media (min-width: 721px) {
  .events-ticker-panel, .crud-inbox-panel {
    transition: translate var(--dur-4) var(--spring-gentle), opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-4);
  }
  .events-ticker-panel.open, .crud-inbox-panel.open {
    transition: translate var(--dur-4) var(--spring-gentle), opacity var(--dur-2) var(--ease-standard), visibility 0s linear 0s;
  }
}
/* Neue Ticker-Eintraege (nur die neuen, siehe events-ticker.js) */
.events-ticker-item { animation: none; }
.events-ticker-item.is-new { --cc-rise-y: 4px; animation: claw-rise var(--dur-3) var(--spring-gentle) backwards; }

/* Chat-Drawer (mobil) */
@media (max-width: 760px) {
  #tab-chats #chat-sidebar { transition-timing-function: var(--ease-sheet), linear; }
}

/* Theme-Wechsel: ruhige Ueberblendung der ganzen Seite. */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-3);
  animation-timing-function: var(--ease-standard);
}

/* Morph-Gestalt (Header): zwei Perioden je Durchlauf, die zweite 7,5 % kuerzer (1 + 0,925 =
   1,925 T). Die Periode T setzt morph.js als --morph-T. Ohne Bewegungsstufe
   folgt der Puls der OS-Einstellung; mit Stufe laeuft er nur bei "voll". */
@keyframes claw-morph-pulse {
  0%     { transform: scale(1); }
  12.99% { transform: scale(1.035); }
  38.96% { transform: scale(.965); }
  51.95% { transform: scale(1); }
  63.96% { transform: scale(1.035); }
  87.99% { transform: scale(.965); }
  100%   { transform: scale(1); }
}
:root[data-motion="full"] .v3-morph svg {
  transform-origin: 50% 50%;
  animation: claw-morph-pulse calc(var(--morph-T, 6s) * 1.925) ease-in-out infinite;
}

.v3-morph-path { transition: stroke var(--dur-3) var(--ease-standard); }
.akh-pet { transition: opacity var(--dur-3) var(--ease-standard); }

/* Header-Signet: nur voll atmet es bei Aktivitaet (GSAP, sparkle-bridge). */

/* ── Antwort-Karte (Ask-Bar / Streaming) ──────────────────────────────────── */
.v3-answer { interpolate-size: allow-keywords; }
.v3-answer.is-entering { animation: claw-sheet-up var(--dur-4) var(--spring-gentle) backwards; }
/* "Denkt nach": Text-Schimmer (Perplexity). Ruhig/aus: statische Farbe. */
:root[data-motion="full"] .v3-thinking {
  color: transparent;
  background: linear-gradient(90deg, var(--text-3) 0 40%, var(--text-1) 50%, var(--text-3) 60% 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: claw-text-shimmer 1.8s linear infinite;
}
:root:not([data-motion="full"]) .v3-thinking { color: var(--text-2); }
.v3-stream-chunk { animation: claw-token-in var(--dur-2) var(--ease-out) backwards; }
.v3-answer-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  border-radius: 1px;
  background: var(--accent-1);
}
:root[data-motion="full"] .v3-answer-caret { animation: claw-caret 1.05s steps(1, end) infinite; }
.v3-step.is-new { --cc-rise-y: 4px; animation: claw-rise var(--dur-3) var(--spring-gentle) backwards; }

} /* @layer components */