/* Logo-Animation für Webseite und Tool (Logo.tsx importiert diese Datei).
   Ohne Animation bleibt das fertige Logo stehen: im Druck, im Bericht und bei «reduzierte Bewegung». */
.ssl-glint, .ssl-flash { opacity: 0; pointer-events: none; }

@media screen and (prefers-reduced-motion: no-preference) {
  /* Einstieg: Sonne geht auf, Kurve steigt, Pfeil springt ein, Schrift erscheint */
  .ssl-arc, .ssl-line { stroke-dasharray: 1.01 1.01; }
  .ssl-arc { animation: ssl-draw 0.95s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
  .ssl-line { animation: ssl-draw 0.7s cubic-bezier(0.45, 0, 0.2, 1) 0.28s both; }
  .ssl-head { transform-box: fill-box; transform-origin: 30% 70%; animation: ssl-pop 0.48s cubic-bezier(0.3, 1.7, 0.5, 1) 0.9s both; }
  .ssl-word { animation: ssl-fade 0.6s ease-out 0.4s both; }

  /* Danach alle 9 Sekunden ein feiner Lichtreflex die Kurve hoch bis in die Spitze */
  .ssl-glint { stroke-dasharray: 16 100; animation: ssl-glint 9s linear 3.5s infinite; }
  .ssl-flash { animation: ssl-flash 9s ease-out 3.5s infinite; }
}

@keyframes ssl-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }
@keyframes ssl-pop { from { transform: scale(0); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes ssl-fade { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ssl-glint {
  0% { stroke-dashoffset: 16; opacity: 0; }
  1% { opacity: 0.6; }
  10% { stroke-dashoffset: -100; opacity: 0.6; }
  11%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes ssl-flash {
  0%, 8% { opacity: 0; }
  11% { opacity: 0.5; }
  17%, 100% { opacity: 0; }
}