/*
 * Kummerkasten – Bewegte Identität und Mikrointeraktionen: kinetische
 * Wortmarke, Glanz-Sweep, Karten-Einflug, Puls-Glow (Fristen-Ampel), Icon-
 * "Draw-in", Toast-Feedback. Ausschließlich transform/opacity/background-
 * position (60fps). Jeder Grundzustand ist ohne Animationsunterstützung
 * vollständig sichtbar - siehe konsolidierte prefers-reduced-motion-Regel am
 * Ende dieser Datei, die auch die Effekte aus motion.css abschaltet.
 */

/* Kinetische Wortmarke: Buchstaben-Stagger beim Laden. Grundzustand jedes
   Buchstabens ist voll sichtbar (opacity:1) - die Animation läuft additiv
   "von einem sichtbaren Ausgangspunkt aus" nur, wenn @keyframes greifen;
   ohne Animationsunterstützung bleibt der Text unverändert lesbar. */
.kk-kinetic__word {
  display: inline-block;
  /* Explizit zusätzlich zu inline-block: verhindert auf sehr engen Viewports
     zuverlässig einen Umbruch mitten im Wort (manche Browser lassen das bei
     inline-block allein als letzten Ausweg gegen Overflow sonst zu). */
  white-space: nowrap;
}

.kk-kinetic__letter {
  display: inline-block;
  opacity: 1;
  transform: none;
  animation: kk-letter-in var(--duration-slow) var(--ease-standard) both;
  animation-delay: calc(var(--i) * 35ms);
}

@keyframes kk-letter-in {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero-Kinetik: etwas größere Bewegung, einmalig beim Laden der Startseite. */
.hero-kinetic .kk-kinetic__letter {
  animation-duration: 900ms;
  animation-delay: calc(var(--i) * 45ms);
}

/* Glanz-Sweep: rein dekorativer Lichtstreifen, der einmalig über die
   Wortmarke läuft. Liegt als eigenes Pseudo-Element ÜBER dem Text (kein
   background-clip:text auf den Buchstaben selbst nötig), berührt daher nie
   die Lesbarkeit oder Sichtbarkeit des eigentlichen Textes. */
.site-header__brand,
.hero-title.hero-kinetic {
  position: relative;
}

.site-header__brand::after,
.hero-title.hero-kinetic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 45, 60, 0.4) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 45, 60, 0.4) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: 160% 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: kk-shine-sweep 1500ms ease-out 550ms both;
}

@keyframes kk-shine-sweep {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@keyframes kk-fade-up {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kk-fade-in {
  animation: kk-fade-up var(--duration-base) var(--ease-standard) both;
}

@keyframes kk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Puls-Glow für "überfällig"-Ampel (Admin), zusätzlich zu Farbe + Text. */
@keyframes kk-glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 92, 0.55);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 138, 92, 0);
  }
}

/* Häkchen-"Draw-in" für die Erfolgsmeldung: ungefähre Annäherung an die
   tatsächliche Pfadlänge des check-circle-Icons - muss nicht pixelgenau
   sein, der Zeicheneffekt wirkt bereits bei grober Näherung überzeugend. */
@keyframes kk-draw-icon {
  from {
    stroke-dashoffset: 70;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Toast-Feedback (Absenden-Rückmeldung außerhalb des Formularflusses, z. B.
   auf Erfolgsseiten). Grundzustand außerhalb des Viewports positioniert statt
   über opacity - das Element ist damit nie unsichtbares Textcontent, nur
   dekorativ verschoben, und bleibt für Screenreader (kein aria-hidden) über
   den regulären Textfluss ohnehin zusätzlich erreichbar. */
.kk-toast {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 500;
  max-width: min(24rem, calc(100vw - 2 * var(--space-md)));
  animation: kk-toast-in var(--duration-slow) var(--ease-standard) both;
}

@keyframes kk-toast-in {
  from {
    transform: translateX(120%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kk-bg-mesh::before,
  .kk-bg-mesh::after,
  .kk-bg-mesh__layer,
  .kk-kinetic__letter,
  .form-submitting-notice,
  .form-submitting-notice .kk-icon,
  .kk-fade-in,
  .action-card,
  .alert--success,
  .alert--success .kk-icon,
  .badge--rot.badge--urgent,
  .kk-toast,
  .admin-login .card,
  .admin-case__sidebar > .card {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }

  .site-header__brand::after,
  .hero-title.hero-kinetic::after {
    animation: none !important;
    /* Rein dekorativer Glanz-Overlay ohne Textbedeutung - Ausblenden hier ist
       zulässig (anders als bei echtem Inhalt), analog zur bereits
       bestehenden Abschaltung der Hintergrund-Blobs. */
    opacity: 0;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}