/* ============================================
   animations.css — LogoMagic Studio
   Alle @keyframes und Animations-Klassen
   ============================================ */

/* Shimmer-Puls für den Ladezustand des Icons */
@keyframes pulse-flat {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.8; }
}

/* Einblend-Animation für das generierte Logo */
@keyframes logo-reveal {
  0%   { opacity: 0; transform: scale(0.92) translateY(16px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);    filter: blur(0px); }
}

.animate-logo-reveal {
  animation: logo-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ── Tailwind animate-in Utilities ─────────────────────────────────────────
   Diese Klassen werden vom Tailwind CDN nicht standardmäßig mitgeliefert.
   Wir definieren sie hier manuell, damit Tab-Übergänge wie im Original laufen.
   ────────────────────────────────────────────────────────────────────────── */

@keyframes tw-enter {
  from {
    opacity:   var(--tw-enter-opacity,    1);
    transform: translate3d(
                 var(--tw-enter-translate-x, 0),
                 var(--tw-enter-translate-y, 0),
                 0
               )
               scale3d(
                 var(--tw-enter-scale, 1),
                 var(--tw-enter-scale, 1),
                 1
               );
  }
  to {
    opacity:   1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

/* Basis-Klasse — kombiniert mit den Modifier-Klassen unten */
.animate-in {
  animation-name:      tw-enter;
  animation-duration:  150ms;
  animation-fill-mode: both;
  --tw-enter-opacity:      1;
  --tw-enter-scale:        1;
  --tw-enter-translate-x:  0;
  --tw-enter-translate-y:  0;
}

/* Modifier: Einblenden (Opacity startet bei 0) */
.fade-in { --tw-enter-opacity: 0; }

/* Modifier: Von rechts einschieben (1rem = Tailwind spacing-4) */
.slide-in-from-right-4 { --tw-enter-translate-x: 1rem; }

/* Modifier: Leicht heranzoomen */
.zoom-in-95 { --tw-enter-scale: 0.95; }

/* Dauer-Overrides (überschreiben den Standard 150ms) */
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }

/* ── Logo-Konstruktions-Animation (Loading State) ─────────────────────────── */
@keyframes build-stroke-outer {
  0%   { stroke-dashoffset: 280; opacity: 0;   }
  8%   {                         opacity: 1;   }
  65%  { stroke-dashoffset: 0;   opacity: 1;   }
  80%  { stroke-dashoffset: 0;   opacity: 0.3; }
  100% { stroke-dashoffset: 280; opacity: 0;   }
}

@keyframes build-stroke-inner {
  0%   { stroke-dashoffset: 130; opacity: 0;   }
  8%   {                         opacity: 1;   }
  65%  { stroke-dashoffset: 0;   opacity: 1;   }
  80%  { stroke-dashoffset: 0;   opacity: 0.3; }
  100% { stroke-dashoffset: 130; opacity: 0;   }
}