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

/* Spinner für Export-Ladeindikator */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 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; }

/* ── Checkmark-Eingang (genDone) ──────────────────────────────────────────── */
@keyframes check-circle-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes check-draw {
  0%   { stroke-dashoffset: 22; }
  100% { stroke-dashoffset: 0; }
}
.check-circle-in {
  animation: check-circle-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.check-draw {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: check-draw 0.35s 0.25s ease-out forwards;
}

/* ── 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;   }
}