/* Titelgrafik "Aus dem PDF-Antrag wird ein Online-Formular" (PdfToFormGraphic.razor).
   Ein Durchlauf dauert 9 s: Der Lesestrahl fährt über das PDF, die Felder werden markiert, die KI pulsiert, dann füllt sich
   das Formular auf dem Smartphone Schritt für Schritt, der Haken springt auf, und alles beginnt von vorn.
   Ohne Klasse "pf-play" oder bei "weniger Bewegung" steht das fertige Bild still. */

.pf {
  display: block;
  width: 100%;
  height: 100%;
}

.pf text { font-family: inherit; }

/* Zustände im Stillstand */
.pf-beam { opacity: 0; }
.pf-halo { opacity: 0; }
.pf-spark,
.pf-g,
.pf-tw,
.pf-halo {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .pf-play .pf-beam  { animation: pf-scan 9s ease-in-out infinite; }
  .pf-play .pf-hit-1 { animation: pf-hit-1 9s ease infinite; }
  .pf-play .pf-hit-2 { animation: pf-hit-2 9s ease infinite; }
  .pf-play .pf-flow  { animation: pf-flow .9s linear infinite; }
  .pf-play .pf-spark { animation: pf-pulse 2.4s ease-in-out infinite; }
  .pf-play .pf-halo  { animation: pf-halo 2.4s ease-out infinite; }
  .pf-play .pf-g     { animation: pf-pop 9s cubic-bezier(.3, 1.4, .5, 1) infinite; }
  .pf-play .pf-tw    { animation: pf-twinkle 3s ease-in-out infinite alternate; }
  .pf-play .pf-tw-2  { animation-delay: -1s; }
  .pf-play .pf-tw-3  { animation-delay: -2s; }
  .pf-play .pf-drift-a { animation: pf-drift-a 14s ease-in-out infinite alternate; }
  .pf-play .pf-drift-b { animation: pf-drift-b 16s ease-in-out infinite alternate; }
  .pf-play .pf-a { animation: pf-in-a 9s ease infinite; }
  .pf-play .pf-b { animation: pf-in-b 9s ease infinite; }
  .pf-play .pf-c { animation: pf-in-c 9s ease infinite; }
  .pf-play .pf-d { animation: pf-in-d 9s ease infinite; }
  .pf-play .pf-e { animation: pf-in-e 9s ease infinite; }
  .pf-play .pf-f { animation: pf-in-f 9s ease infinite; }
}

@keyframes pf-scan {
  0%        { opacity: 0; transform: translateY(0); }
  3%        { opacity: 1; }
  24%       { opacity: 1; transform: translateY(330px); }
  27%, 100% { opacity: 0; transform: translateY(330px); }
}

@keyframes pf-hit-1 {
  0%, 9%    { opacity: 0; }
  13%, 92%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes pf-hit-2 {
  0%, 13%   { opacity: 0; }
  17%, 92%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes pf-flow {
  to { stroke-dashoffset: -16; }
}

@keyframes pf-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

@keyframes pf-halo {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@keyframes pf-twinkle {
  from { opacity: .35; transform: scale(.85); }
  to   { opacity: 1;   transform: scale(1.1); }
}

@keyframes pf-drift-a { to { transform: translate(40px, 24px); } }
@keyframes pf-drift-b { to { transform: translate(-36px, -20px); } }

/* Der Haken springt auf, wenn das Formular fertig ist */
@keyframes pf-pop {
  0%, 66%   { opacity: 0; transform: scale(.3); }
  70%       { opacity: 1; transform: scale(1.18); }
  73%, 92%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.3); }
}

/* Formular, Schritt a: erscheint bei 30 % des Durchlaufs */
@keyframes pf-in-a {
  0%, 30%  { opacity: 0; transform: translateY(10px); }
  34%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Formular, Schritt b: erscheint bei 36 % des Durchlaufs */
@keyframes pf-in-b {
  0%, 36%  { opacity: 0; transform: translateY(10px); }
  40%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Formular, Schritt c: erscheint bei 42 % des Durchlaufs */
@keyframes pf-in-c {
  0%, 42%  { opacity: 0; transform: translateY(10px); }
  46%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Formular, Schritt d: erscheint bei 48 % des Durchlaufs */
@keyframes pf-in-d {
  0%, 48%  { opacity: 0; transform: translateY(10px); }
  52%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Formular, Schritt e: erscheint bei 54 % des Durchlaufs */
@keyframes pf-in-e {
  0%, 54%  { opacity: 0; transform: translateY(10px); }
  58%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Formular, Schritt f: erscheint bei 60 % des Durchlaufs */
@keyframes pf-in-f {
  0%, 60%  { opacity: 0; transform: translateY(10px); }
  64%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(10px); }
}