/* ═══════════════════════════════════════════════════════════════════════
   DUDENE DIGITAL — Bewegung

   Die Webseite blendet ihre Abschnitte mit `enter-up` ein: von 18 px
   unterhalb, in 0,7 s, auf einer Kurve mit Masse. Dieselbe Bewegung hier,
   statt des Aufploppens aus scale3d(0.3), das das Ausgangstheme mitbrachte
   — ein Knopf, der auf ein Drittel schrumpft und wieder aufspringt, wirkt
   wie eine Benachrichtigung, nicht wie eine Seite, die sich aufbaut.

   Die Knöpfe kommen nacheinander. Das Markup setzt dafür `--delay` pro
   Knopf (1s, 2s, 3s …) und das Ausgangstheme teilte es durch 10. Bei zehn
   Links wartet der letzte damit eine ganze Sekunde — zu lang, man sieht
   die Liste wachsen statt ankommen. Hier wird durch 25 geteilt: bei zehn
   Links ist nach 0,4 s alles da.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─── Eingang ──────────────────────────────────────────────────────────── */

@keyframes dd-enter-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dd-enter-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.button-entrance {
  animation-name: dd-enter-up;
  animation-duration: 0.7s;
  animation-timing-function: var(--dd-ease-out);
  animation-fill-mode: both;
  animation-delay: calc(var(--delay, 0s) / 25 + 0.25s);
}

.fadein {
  animation-name: dd-enter-fade;
  animation-duration: 0.8s;
  animation-timing-function: var(--dd-ease-out);
  animation-fill-mode: both;
}

/* Avatar, Name und Beschreibung kommen von unten und nacheinander — so
   liest sich der Kopf als eine Bewegung und nicht als drei. */
#avatar.fadein {
  animation-name: dd-enter-up;
  animation-duration: 0.7s;
  animation-delay: 0.05s;
}

h1.fadein {
  animation-name: dd-enter-up;
  animation-duration: 0.7s;
  animation-delay: 0.12s;
}

.description-parent.fadein {
  animation-name: dd-enter-up;
  animation-duration: 0.7s;
  animation-delay: 0.19s;
}

.social-icon-div.fadein {
  animation-name: dd-enter-up;
  animation-duration: 0.7s;
  animation-delay: 0.26s;
}

.footer.fadein {
  animation-name: dd-enter-fade;
  animation-duration: 0.8s;
  animation-delay: 0.5s;
}


/* ─── Griff beim Überfahren ────────────────────────────────────────────
   Das Ausgangstheme skalierte Knöpfe beim Überfahren auf 1,02. Eine
   Karte, die größer wird, wirkt wie ein Zoom; eine Karte, die sich hebt,
   wirkt wie ein Blatt, das man anhebt. Die Hebung selbst steht bei den
   Knöpfen in brands.css — hier bleibt nur, was das Ausgangstheme sonst
   noch angefasst hätte, damit es sich nicht überlagert.
   ──────────────────────────────────────────────────────────────────── */

.button-hover,
.credit-hover,
.icon-hover {
  display: inline-block;
  transition-property: transform, box-shadow, border-color, background-color, color;
  transition-duration: var(--dd-base);
  transition-timing-function: var(--dd-ease-out);
}

/* .button-hover sitzt im Markup auf denselben Elementen wie .button. Ohne
   diese Rücknahme würde die Regel oben `display: flex` aus brands.css
   wieder auf `inline-block` ziehen und Symbol und Text auseinanderfallen
   lassen. */
.button.button-hover {
  display: flex;
}

.footer-hover {
  display: inline-block;
  transition: transform var(--dd-base) var(--dd-ease-out);
}

@media (hover: hover) {
  .footer-hover:hover,
  .credit-hover:hover {
    transform: translateY(-2px);
  }
}


/* ─── Wer Bewegung abbestellt hat, bekommt keine ───────────────────────
   Das ist hier kein Zusatz, sondern die wichtigste Regel der Datei.

   Der Körper der Seite startet auf `opacity: 0` und wird erst durch eine
   Animation sichtbar. Schaltet man die Animationen ersatzlos ab, bleibt
   die Seite für genau die Leute leer, die Bewegung abbestellt haben —
   die Einstellung würde die Seite unbenutzbar machen. Deshalb wird der
   Endzustand hier ausdrücklich hergestellt statt nur die Animation
   entfernt.
   ──────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body,
  .fadein,
  .button-entrance,
  #avatar.fadein,
  h1.fadein,
  .description-parent.fadein,
  .social-icon-div.fadein,
  .footer.fadein {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .button,
  .social-icon,
  .sharebutton,
  .copy-icon,
  .icon,
  .button-hover,
  .credit-hover,
  .footer-hover,
  .icon-hover {
    transition: none !important;
  }

  .button:hover,
  .button:active,
  .social-link:hover .social-icon,
  .sharebutton:hover,
  .footer-hover:hover,
  .credit-hover:hover {
    transform: none !important;
  }
}