/*!
 * Machreich Architektur – Bildmarke-Animation v1.0
 * Gehört zu bildmarke-animation.js. Keine Abhängigkeiten.
 * Animiert werden ausschließlich transform, opacity, stroke-dashoffset, clip-path.
 */

:root {
  --mm-taupe: #BBAFA9;
  --mm-offwhite: #F2F1ED;
  --mm-black: #0E0E0D;
  --mm-blue: #0080BC;
  --mm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --mm-ease-arch: cubic-bezier(0.32, 0.72, 0, 1);
  /* Markengröße in Preloader und Vorhang */
  --mm-overlay-size: clamp(72px, 6.5vw, 96px);
}

/* ---------- Die Marke ---------- */

.mm-mark {
  position: relative;
  width: var(--mm-size, 100%);
  aspect-ratio: 1 / 1;
  color: var(--mm-color, var(--mm-blue));
  line-height: 0;
}
.mm-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mm-mark .mm-static,
.mm-mark .mm-anim,
.mm-mark .mm-lines,
.mm-mark .mm-w,
.mm-mark .mm-i,
.mm-mark .mm-c {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.mm-mark .mm-static path,
.mm-mark .mm-anim path { fill: currentColor; }
.mm-mark .mm-lines { pointer-events: none; }
.mm-mark .mm-lines path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  opacity: 0;
}
.mm-mark[data-state="anim"] .mm-i { will-change: transform; }

/* Zustände: built = exakte statische Bildmarke, anim = Animationsebenen, empty = nichts */
.mm-mark[data-state="built"] .mm-anim,
.mm-mark[data-state="built"] .mm-lines,
.mm-mark[data-state="anim"] .mm-static,
.mm-mark[data-state="empty"] .mm-static,
.mm-mark[data-state="empty"] .mm-anim,
.mm-mark[data-state="empty"] .mm-lines { visibility: hidden; }

/* ---------- Preloader ---------- */

.mm-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--mm-taupe);
}
.mm-preloader .mm-mark,
.mm-curtain .mm-mark { width: var(--mm-size, var(--mm-overlay-size)); }

/* Ohne JS, bei internem Seitenwechsel oder beim Ankommen per Übergang: kein Preloader */
html:not(.mm-js) .mm-preloader,
html.mm-internal .mm-preloader:not([data-always]),
html.mm-arriving .mm-preloader:not([data-always]) { display: none; }

html.mm-loading { overflow: hidden; }

/* ---------- Seitenübergang: Vorhang ---------- */

.mm-curtain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  place-items: center;
  background: var(--mm-taupe);
  view-transition-name: mm-curtain;
}
html.mm-arriving .mm-curtain,
.mm-curtain.is-active { display: grid; }
/* verhindert einen hellen Blitz, bevor der Vorhang gemalt ist */
html.mm-arriving { background-color: var(--mm-taupe); }

/* ---------- Cross-Document View Transitions ---------- */

/* Website: Seitenübergang mit Vorhang noch nicht eingebaut, daher aus. Zum Einschalten wieder aktivieren:
@view-transition { navigation: auto; } */

/* Alte Seite bleibt stehen, neue bleibt verborgen, bis der Vorhang (neuer Zustand) von unten hochgefahren ist.
   Nur aktiv, wenn der Vorhang eingebaut ist ([data-mm-curtain]) – sonst gilt der globale Seitenwechsel
   aus seitenwechsel.css (keine Kollision mit dessen root-Regeln). */
html:has([data-mm-curtain])::view-transition-group(root) { animation: none; }
html:has([data-mm-curtain])::view-transition-old(root) { animation: mm-vt-hold 760ms linear both; }
html:has([data-mm-curtain])::view-transition-new(root) { animation: mm-vt-hide 760ms linear both; }
::view-transition-group(mm-curtain) { animation: none; }
::view-transition-new(mm-curtain) { animation: mm-vt-curtain-in 760ms var(--mm-ease-arch) both; }
::view-transition-old(mm-curtain) { animation: none; display: none; }

@keyframes mm-vt-hold { from, to { opacity: 1; } }
@keyframes mm-vt-hide { from, to { opacity: 0; } }
@keyframes mm-vt-curtain-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes mm-vt-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Reduzierte Bewegung: nur kurzes Ein-/Ausblenden ---------- */

@media (prefers-reduced-motion: reduce) {
  html:has([data-mm-curtain])::view-transition-old(root) { animation-duration: 240ms; }
  html:has([data-mm-curtain])::view-transition-new(root) { animation-duration: 240ms; }
  ::view-transition-new(mm-curtain) { animation: mm-vt-fade-in 240ms ease both; }
}