/* Bewegung: Aufdecken beim Scrollen, Logopunkt, Intro, Ring-Bogen, Hover und Ladeanimation.
   Bei prefers-reduced-motion entfällt alles. Ausgangszustände stehen in inc/motion.php. */
/* ---------- Motion (Designsystem § 10, Brandbook 09) ----------
   Ausgangszustand steht in inc/motion.php (im Kopf, gegen Aufblitzen). Endzustand = Layout.
   Setzen 800 ms, Schnitt 800 ms auf einer Achse, Bogen 900 ms; kein Federn, keine Schleifen. */
html.motion .is-in {
  transition:
    opacity 0.8s var(--ease-settle),
    transform 0.8s var(--ease-settle),
    clip-path 0.8s var(--ease-settle);
}
html.motion :is(.hero-plane, .split-plane, .lead-plane, .ref-plane, .career-plane).is-in {
  clip-path: inset(0 0 0 0);
}
/* Kontaktleiste am Handy: gleitet von unten herein, beim Ausblenden erst nach der Bewegung unsichtbar */
html.motion .cbar {
  transition:
    transform 0.4s var(--ease-settle),
    visibility 0s linear 0.4s;
}
html.motion .cbar.is-shown {
  transition:
    transform 0.4s var(--ease-settle),
    visibility 0s;
}
html.motion .m-off {
  transition: none;
}
/* Etwas plakativer: Headlines steigen 24 px, Bilder zoomen beim Aufdecken von 1,08 auf 1 zurück */
html.motion :is(h1, h2, .display-xl, .display-l, .statement, .thesis) {
  --m-travel: 24px;
}
html.motion :is(h1, h2, .display-xl, .display-l, .statement, .thesis).is-in {
  transition-duration: 0.9s;
}
html.motion :is(.hero-plane, .split-plane, .lead-plane, .ref-plane, .career-plane).is-in img {
  transition: transform 1.4s var(--ease-settle);
}

/* Der Punkt: Logopunkt als wandernder Fortschrittspunkt am rechten Rand */
.m-dot {
  position: fixed;
  top: 0;
  right: max(8px, calc(var(--page-margin) / 2 - 8px));
  z-index: 15;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--clary-sage);
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  translate: 0 -12px;
  transition:
    opacity 0.6s var(--ease-settle),
    scale 0.6s var(--ease-settle),
    translate 0.6s var(--ease-settle),
    background-color 0.4s var(--ease-settle);
  will-change: transform;
}
.m-dot.is-in {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}
.m-dot[data-ground="sage"] {
  background: var(--clary-white);
}
.m-dot:is([data-ground="paper"], [data-ground="sage-light"], [data-ground="lime"]) {
  background: var(--clary-forest);
}
@media (max-width: 560px) {
  .m-dot {
    width: 12px;
    height: 12px;
  }
}
.m-dot.m-dot--now {
  transition: none;
}
@media print {
  .m-dot {
    display: none;
  }
}

/* Intro (erster Aufruf einer Sitzung, ca. 3 s): Punkt erscheint, Monogramm setzt sich zusammen,
   Blende nach oben deckt die Seite auf, der Punkt fliegt an seinen Platz am Rand */
.m-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--clary-forest);
  clip-path: inset(0 0 0 0);
}
.m-intro svg {
  overflow: visible;
}
.m-intro path {
  transform-box: fill-box;
  transform-origin: center;
}
.m-intro-c,
.m-intro-n {
  fill: var(--clary-white);
}
.m-intro-c {
  clip-path: inset(0 100% 0 0);
}
.m-intro-o {
  fill: var(--clary-lime);
  opacity: 0;
  transform: scale(0.88);
}
.m-intro-n {
  clip-path: inset(100% 0 0 0);
}
.m-intro.is-on .m-intro-c {
  animation: m-cut-x 0.6s var(--ease-settle) 0.55s forwards;
}
.m-intro.is-on .m-intro-o {
  animation: m-settle-o 0.6s var(--ease-settle) 0.8s forwards;
}
.m-intro.is-on .m-intro-n {
  animation: m-cut-y 0.6s var(--ease-settle) 1.05s forwards;
}
.m-intro.is-leaving {
  transition: clip-path 0.9s var(--ease-settle) 0.1s;
  clip-path: inset(0 0 100% 0);
}
.m-intro.is-leaving svg {
  transition:
    opacity 0.3s var(--ease-settle),
    transform 0.5s var(--ease-settle);
  opacity: 0;
  transform: translateY(-12px);
}
.m-intro.is-skipped,
.m-intro-dot.is-skipped {
  transition: opacity 0.25s var(--ease-settle);
  opacity: 0;
}
.m-intro-dot {
  position: fixed;
  z-index: 1001;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.m-intro-dot span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--clary-sage);
  transform-origin: center;
  animation: m-cover-dot 0.7s var(--ease-settle) 0.1s both;
}
@keyframes m-cut-x {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes m-cut-y {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes m-settle-o {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes m-cover-dot {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

/* Bogen: Ring-Marker zeichnen ihren Strich einmal im Uhrzeigersinn und wachsen von 0,94 auf 1 */
@property --m-arc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}
/* Maske: Schwarz/transparent ist hier Technik, keine Gestaltungsfarbe */
/* stylelint-disable color-no-hex */
html.motion .m-arc li::before {
  -webkit-mask: conic-gradient(#000 var(--m-arc), #0000 0);
  mask: conic-gradient(#000 var(--m-arc), #0000 0);
  transition:
    --m-arc 0.9s var(--ease-settle),
    transform 0.9s var(--ease-settle);
  transition-delay: var(--m-delay, 0ms);
}
/* stylelint-enable color-no-hex */
html.motion .m-arc:not(.is-drawn) li::before {
  --m-arc: 0deg;
  transform: scale(0.94);
}
html.motion .m-arc li:nth-child(2)::before {
  transition-delay: calc(var(--m-delay, 0ms) + 70ms);
}
html.motion .m-arc li:nth-child(3)::before {
  transition-delay: calc(var(--m-delay, 0ms) + 140ms);
}
html.motion .m-arc li:nth-child(4)::before {
  transition-delay: calc(var(--m-delay, 0ms) + 210ms);
}
html.motion .m-arc li:nth-child(n + 5)::before {
  transition-delay: calc(var(--m-delay, 0ms) + 280ms);
}
html.motion .m-arc.m-off li::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html.motion *,
  html.motion ::before {
    /* stylelint-disable-next-line declaration-no-important -- reduzierte Bewegung hat Vorrang vor allen Übergängen */
    transition: none !important;
  }
  .m-dot {
    display: none;
  }
}
@media print {
  html.motion * {
    /* stylelint-disable-next-line declaration-no-important -- Druck: alles sichtbar, unabhängig vom Animationszustand */
    opacity: 1 !important;
    /* stylelint-disable-next-line declaration-no-important -- Druck: alles sichtbar, unabhängig vom Animationszustand */
    transform: none !important;
    /* stylelint-disable-next-line declaration-no-important -- Druck: alles sichtbar, unabhängig vom Animationszustand */
    clip-path: none !important;
  }
}

/* Feine Übergänge an Links und Buttons (Hover 180 ms, nur Geräte mit echtem Hover) */
.nav a,
.lang a,
.btn--text,
.social,
.clist a,
.faq summary,
.legal-text a {
  transition: color var(--dur-quick) var(--ease-settle);
}
.btn .icon,
.btn--text .icon {
  transition: transform var(--dur-quick) var(--ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .icon,
  .btn--text:hover .icon {
    transform: translateX(3px);
  }
  .faq summary:hover {
    color: var(--on-label);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn .icon,
  .btn--text .icon {
    transition: none;
  }
}

/* Ladeanimation, Ring-Variante: beim Absenden nach 400 ms im Button, zeichnet sich ohne zu rotieren */
.m-busy {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
}
.m-busy circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
}
.m-busy .m-busy-track {
  opacity: 0.18;
}
.btn--dark .m-busy circle {
  stroke: var(--clary-lime);
}
.btn.is-busy .icon {
  display: none;
}
.m-busy .m-busy-arc {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: m-busy 1.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes m-busy {
  0% {
    stroke-dashoffset: 100;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-busy .m-busy-arc {
    animation: none;
    stroke-dashoffset: 75;
  }
}