/* ==========================================================
   Logo Animation — Mikra Webtec (4 Dreiecke + Stroke-Draw Text)
   V2: Ueberlappend — Logo prominent, Text startet bei 0.65s

   Verwendung:
   1. Diese CSS-Datei einbinden
   2. Inline-SVGs im Header platzieren (siehe ANLEITUNG.md)
   3. .logo-anim Container bekommt automatisch .is-playing via JS
   ========================================================== */

/* --- Triangle Stroke-Pfade (zeichnen sich ein) --- */
.logo-anim .s1,
.logo-anim .s2,
.logo-anim .s3,
.logo-anim .s4 {
  fill: none;
  stroke-width: 0.7;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}

.logo-anim .s1 { stroke: #93C5FD; }
.logo-anim .s2 { stroke: #60A5FA; }
.logo-anim .s3 { stroke: #3B82F6; }
.logo-anim .s4 { stroke: #1D4ED8; }

/* --- Triangle Fill-Pfade (anfangs unsichtbar) --- */
.logo-anim .f1,
.logo-anim .f2,
.logo-anim .f3,
.logo-anim .f4 {
  opacity: 0;
}

/* --- Text Stroke-Layer (Buchstaben-Outlines) --- */
.logo-anim .stroke-text tspan {
  fill: none;
  stroke-width: 0.5;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}
.logo-anim .stroke-text tspan:nth-child(-n+5) { stroke: rgba(255,255,255,0.7); }
.logo-anim .stroke-text tspan:nth-child(n+6)  { stroke: rgba(59,130,246,0.7); }

/* --- Text Fill-Layer (anfangs unsichtbar) --- */
.logo-anim .fill-text tspan { opacity: 0; }
.logo-anim .fill-text tspan:nth-child(-n+5) { fill: #ffffff; }
.logo-anim .fill-text tspan:nth-child(n+6)  { fill: #3B82F6; }

/* ==========================================================
   PLAY STATE — Animation startet wenn .is-playing gesetzt wird
   ========================================================== */

/* Step 1: Dreieck-Strokes zeichnen sich ein (0.15s Stagger, 0.60s Draw) */
.logo-anim.is-playing .s1 { animation: mw-drawStroke 0.60s ease-out 0.10s forwards, mw-fadeOutStroke 0.30s ease-out 0.90s forwards; }
.logo-anim.is-playing .s2 { animation: mw-drawStroke 0.60s ease-out 0.25s forwards, mw-fadeOutStroke 0.30s ease-out 1.02s forwards; }
.logo-anim.is-playing .s3 { animation: mw-drawStroke 0.60s ease-out 0.40s forwards, mw-fadeOutStroke 0.30s ease-out 1.14s forwards; }
.logo-anim.is-playing .s4 { animation: mw-drawStroke 0.60s ease-out 0.55s forwards, mw-fadeOutStroke 0.30s ease-out 1.26s forwards; }

/* Step 2: Dreieck-Fills faden ein */
.logo-anim.is-playing .f1 { animation: mw-fadeIn 0.45s ease-out 0.60s forwards; }
.logo-anim.is-playing .f2 { animation: mw-fadeIn 0.45s ease-out 0.75s forwards; }
.logo-anim.is-playing .f3 { animation: mw-fadeIn 0.45s ease-out 0.90s forwards; }
.logo-anim.is-playing .f4 { animation: mw-fadeIn 0.45s ease-out 1.05s forwards; }

/* Step 3: Buchstaben-Strokes zeichnen sich ein (0.05s Stagger, 0.25s Draw) */
.logo-anim.is-playing .stroke-text tspan:nth-child(1)  { animation: mw-drawText 0.25s ease-out 0.65s forwards, mw-fadeOutText 0.15s ease-out 0.85s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(2)  { animation: mw-drawText 0.25s ease-out 0.70s forwards, mw-fadeOutText 0.15s ease-out 0.90s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(3)  { animation: mw-drawText 0.25s ease-out 0.75s forwards, mw-fadeOutText 0.15s ease-out 0.95s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(4)  { animation: mw-drawText 0.25s ease-out 0.80s forwards, mw-fadeOutText 0.15s ease-out 1.00s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(5)  { animation: mw-drawText 0.25s ease-out 0.85s forwards, mw-fadeOutText 0.15s ease-out 1.05s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(6)  { animation: mw-drawText 0.25s ease-out 0.90s forwards, mw-fadeOutText 0.15s ease-out 1.10s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(7)  { animation: mw-drawText 0.25s ease-out 0.95s forwards, mw-fadeOutText 0.15s ease-out 1.15s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(8)  { animation: mw-drawText 0.25s ease-out 1.00s forwards, mw-fadeOutText 0.15s ease-out 1.20s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(9)  { animation: mw-drawText 0.25s ease-out 1.05s forwards, mw-fadeOutText 0.15s ease-out 1.25s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(10) { animation: mw-drawText 0.25s ease-out 1.10s forwards, mw-fadeOutText 0.15s ease-out 1.30s forwards; }
.logo-anim.is-playing .stroke-text tspan:nth-child(11) { animation: mw-drawText 0.25s ease-out 1.15s forwards, mw-fadeOutText 0.15s ease-out 1.35s forwards; }

/* Step 4: Buchstaben-Fills faden ein (stroke+0.12s = fliessend) */
.logo-anim.is-playing .fill-text tspan:nth-child(1)  { animation: mw-fadeInText 0.15s ease-out 0.77s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(2)  { animation: mw-fadeInText 0.15s ease-out 0.82s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(3)  { animation: mw-fadeInText 0.15s ease-out 0.87s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(4)  { animation: mw-fadeInText 0.15s ease-out 0.92s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(5)  { animation: mw-fadeInText 0.15s ease-out 0.97s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(6)  { animation: mw-fadeInText 0.15s ease-out 1.02s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(7)  { animation: mw-fadeInText 0.15s ease-out 1.07s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(8)  { animation: mw-fadeInText 0.15s ease-out 1.12s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(9)  { animation: mw-fadeInText 0.15s ease-out 1.17s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(10) { animation: mw-fadeInText 0.15s ease-out 1.22s forwards; }
.logo-anim.is-playing .fill-text tspan:nth-child(11) { animation: mw-fadeInText 0.15s ease-out 1.27s forwards; }

/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes mw-drawStroke {
  from { stroke-dashoffset: 80; }
  to   { stroke-dashoffset: 0; }
}

@keyframes mw-fadeOutStroke {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes mw-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes mw-drawText {
  from { stroke-dashoffset: 150; }
  to   { stroke-dashoffset: 0; }
}

@keyframes mw-fadeOutText {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes mw-fadeInText {
  from { opacity: 0; }
  to   { opacity: 1; }
}