/*
 * Sales LAB — Animation- & Page-Load-Layer (UI-Welle 15/16)
 *
 * Design-Prinzipien:
 *  - Bewegung als Belohnung, nicht als Dauerzustand
 *  - Premium-Eindruck durch ruhige Easing + kurze Dauern
 *  - Konsequent: prefers-reduced-motion respektieren
 *
 * Wird global in _base.twig geladen.
 */

/* ==========================================================================
   1. Reveal-System für Pages und Karten (Stage 1 + 3)
   ========================================================================== */

/* Body startet im Loading-State, wird via JS in page-anim.js entfernt sobald DOM
   ready ist. Verhindert harten Flash-Of-Unstyled-Content. */
body.page-loading .page-fade { opacity: 0; }
body.page-fade-in .page-fade {
  animation: sl-fade-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Headline + Sub-Text faden mit y-Offset rein. */
body.page-fade-in .page-fade-up {
  animation: sl-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
body.page-fade-in .page-fade-up:nth-child(2) { animation-delay: 60ms; }
body.page-fade-in .page-fade-up:nth-child(3) { animation-delay: 110ms; }

/* Card-Reveal: einzelne Cards staffeln sich rein, sobald sie in den Viewport
   kommen. JS setzt --reveal-i als Index, das addiert 60ms pro Card. */
.sl-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
.sl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   2. Skeleton-Loader (Stage 2)
   ========================================================================== */

.sl-skeleton {
  position: relative;
  overflow: hidden;
  background: #f5f5f4;
  border-radius: 8px;
}
.sl-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: sl-skeleton-shimmer 1600ms ease-in-out infinite;
}
.sl-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: #f5f5f4;
}
.sl-skeleton-line + .sl-skeleton-line { margin-top: 10px; }
.sl-skeleton-circle { border-radius: 9999px; }

/* ==========================================================================
   3. Hover- + Click-Mikrointeraktionen
   ========================================================================== */

.sl-card {
  transition: box-shadow 180ms ease-out, border-color 180ms ease-out,
              --tw-ring-color 180ms ease-out;
}
.sl-card:hover {
  box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.14),
              0 6px 12px  -6px rgba(0, 0, 0, 0.08);
  border-color: rgb(214 211 209);   /* stone-300, falls Karte border nutzt */
}
/* Tailwind ring (= box-shadow) beim Hover etwas dunkler ziehen,
   ohne den eigentlichen Schatten zu überschreiben. */
.sl-card:hover.ring-1 {
  --tw-ring-color: rgb(214 211 209 / 0.9);
}

.sl-press {
  transition: transform 100ms ease-out;
}
.sl-press:active { transform: scale(0.97); }

/* ==========================================================================
   4. Skill-Bar Fill-Animation
   ========================================================================== */

.sl-bar-track {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: #e7e5e4;
  overflow: hidden;
}
.sl-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 9999px;
  background: var(--brand-primary, #dc2626);
  width: 0;
  transition: width 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   5. Tachometer-/Donut-Stroke-Animation
   ========================================================================== */

.sl-stroke-anim {
  transition: stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1),
              stroke 400ms ease-in-out;
}

/* ==========================================================================
   6. Mic-Pulse für Live-Voice-Page
   ========================================================================== */

.sl-mic-pulse {
  position: relative;
}
.sl-mic-pulse::before,
.sl-mic-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgb(var(--brand-primary-rgb) / 0.18);
  animation: sl-pulse 2200ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
  z-index: -1;
}
.sl-mic-pulse::after { animation-delay: 1100ms; }

/* ==========================================================================
   7. Toast-Slide-In (mit dezentem Spring)
   ========================================================================== */

.sl-toast {
  animation: sl-toast-in 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sl-toast.is-leaving {
  animation: sl-toast-out 200ms ease-in both;
}

/* ==========================================================================
   8. Blur-Up für Avatare / Persona-Bilder
   ========================================================================== */

.sl-blur-up {
  filter: blur(16px);
  transform: scale(1.02);
  transition: filter 480ms ease-out, transform 480ms ease-out;
}
.sl-blur-up.is-loaded {
  filter: blur(0);
  transform: scale(1);
}

/* ==========================================================================
   9. Sidebar-Minimieren-Layout
   ========================================================================== */

aside[data-sl-sidebar] {
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
aside[data-sl-sidebar][data-collapsed="true"] {
  width: 76px;
}
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-label],
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-section-title],
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-badge],
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-profile-text] {
  display: none;
}
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-nav-item] {
  justify-content: center;
}
/* Accordion-Unternavigation (Produkt-Kinder): Einrückung + Führungslinie
   nur im expanded Modus — collapsed werden die Kinder zur zentrierten
   Icon-Liste wie alle anderen Einträge. */
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-subnav] {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-collapse-icon] {
  transform: rotate(180deg);
}
[data-sl-collapse-icon] { transition: transform 220ms ease-out; }

/* Logo-Switching im Collapse-Modus.
   - Plattform-Logo (data-sl-logo-full) verschwindet, Favicon (data-sl-logo-collapsed-icon)
     erscheint.
   - Tenant-Logo bleibt dasselbe Bild, nur kleiner; Seitenverhältnis bleibt durch
     object-contain + width:auto erhalten. */
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-logo-full] {
  display: none;
}
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-logo-collapsed-icon] {
  display: block;
  margin: 0 auto;
}
aside[data-sl-sidebar][data-collapsed="true"] [data-sl-logo-tenant] {
  max-height: 32px;
  width: auto;
  max-width: 100%;
}

/* ==========================================================================
   9b. Magical Loader (wiederverwendbar — Szenario-Compose, Feedback-Auswertung)
   ========================================================================== */

@keyframes sl-loader-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--brand-primary-rgb) / 0.45),
                         0 0 60px 10px rgb(var(--brand-primary-rgb) / 0.18); }
  50%      { box-shadow: 0 0 0 18px rgb(var(--brand-primary-rgb) / 0),
                         0 0 90px 18px rgb(var(--brand-primary-rgb) / 0.32); }
}
@keyframes sl-loader-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes sl-loader-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes sl-loader-float {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--sl-tx, 0), var(--sl-ty, -120px)) scale(1.2); opacity: 0; }
}
@keyframes sl-loader-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sl-loader-progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.sl-loader-overlay {
  background: radial-gradient(ellipse at center, rgba(255,251,235,0.92) 0%, rgba(28,25,23,0.55) 80%);
  backdrop-filter: blur(8px);
}
.sl-loader-card {
  background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
}
.sl-loader-icon {
  animation: sl-loader-glow 2.6s ease-in-out infinite;
}
.sl-loader-ring-1 { animation: sl-loader-spin-slow    14s linear infinite; }
.sl-loader-ring-2 { animation: sl-loader-spin-reverse 22s linear infinite; }
.sl-loader-spark {
  position: absolute;
  pointer-events: none;
  animation: sl-loader-float 3.4s ease-out infinite;
  color: rgb(var(--brand-primary-rgb));
}
.sl-loader-text {
  animation: sl-loader-text-in 0.6s ease-out;
}
.sl-loader-bar-track {
  height: 4px;
  background: rgb(var(--brand-primary-rgb) / 0.12);
  overflow: hidden;
  border-radius: 999px;
}
.sl-loader-bar-fill {
  height: 100%;
  width: 25%;
  background: linear-gradient(90deg, transparent 0%, rgb(var(--brand-primary-rgb)) 50%, transparent 100%);
  animation: sl-loader-progress 1.6s ease-in-out infinite;
}

/* ==========================================================================
   10. Focus-Ring (A11y, Premium-Polish)
   ========================================================================== */

.sl-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--brand-primary-rgb) / 0.30);
  border-radius: 8px;
}

/* ==========================================================================
   11. Keyframes
   ========================================================================== */

@keyframes sl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sl-skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
@keyframes sl-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.6); opacity: 0;    }
  100% { transform: scale(1.6); opacity: 0;    }
}
@keyframes sl-toast-in {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
@keyframes sl-toast-out {
  to { opacity: 0; transform: translateX(20px); }
}
@keyframes sl-pop-in {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { transform: scale(1); }
}
.sl-pop-in { animation: sl-pop-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ==========================================================================
   12. Reduced-Motion: alle Animationen quasi off
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sl-reveal { opacity: 1; transform: none; }
  body.page-loading .page-fade { opacity: 1; }
  .sl-blur-up { filter: none; transform: none; }
}