/* ============================================================================
   MeinMarkt365 – Bewegung  v2.0
   Setzt mm365-tokens.css voraus.

   Grundsatz: Inhalte werden GEZEIGT, nicht nachgeladen. Alles steht im HTML.
   Ohne JavaScript ist alles sichtbar; die Startwerte greifen erst, wenn das
   Skript die Wurzel mit .mm-js markiert hat.
   ========================================================================= */

/* ---------------------------------------------------- Eintritt beim Scrollen */
.mm-js [data-mm-auf] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity var(--mm-dauer-lang) var(--mm-kurve),
              transform var(--mm-dauer-lang) var(--mm-kurve);
  transition-delay: var(--mm-verzug, 0ms);
  will-change: opacity, transform;
}
.mm-js [data-mm-auf="links"]  { transform: translate3d(-22px, 0, 0); }
.mm-js [data-mm-auf="rechts"] { transform: translate3d(22px, 0, 0); }
.mm-js [data-mm-auf="gross"]  { transform: translate3d(0, 12px, 0) scale(.97); }
.mm-js [data-mm-auf="blende"] { transform: none; }

.mm-js [data-mm-drin="ja"] {
  opacity: 1; transform: none; will-change: auto;
}

/* Gestaffelt: bis zu sechs Geschwister laufen nacheinander an */
.mm-staffel > *:nth-child(1) { --mm-verzug: 0ms; }
.mm-staffel > *:nth-child(2) { --mm-verzug: calc(var(--mm-versatz) * 1); }
.mm-staffel > *:nth-child(3) { --mm-verzug: calc(var(--mm-versatz) * 2); }
.mm-staffel > *:nth-child(4) { --mm-verzug: calc(var(--mm-versatz) * 3); }
.mm-staffel > *:nth-child(5) { --mm-verzug: calc(var(--mm-versatz) * 4); }
.mm-staffel > *:nth-child(6) { --mm-verzug: calc(var(--mm-versatz) * 5); }
.mm-staffel > *:nth-child(n+7) { --mm-verzug: calc(var(--mm-versatz) * 6); }

/* ------------------------------------------------------- Fortschrittsbalken */
.mm-fortschritt {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--mm-gruen); transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .mm-fortschritt { animation: mm-waechst linear both; animation-timeline: scroll(root block); }
}
@keyframes mm-waechst { to { transform: scaleX(1); } }

/* --------------------------------------------------- scroll-getriebener Ausbau */
@supports (animation-timeline: view()) {
  .mm-js [data-mm-auf][data-mm-gekoppelt] {
    opacity: 1; transform: none; transition: none;
    animation: mm-eintritt linear both;
    animation-timeline: view(block);
    animation-range: entry 5% cover 34%;
  }
  @keyframes mm-eintritt {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .mm-parallaxe {
    animation: mm-parallaxe linear both; animation-timeline: view(block);
    animation-range: cover 0% cover 100%;
  }
  @keyframes mm-parallaxe {
    from { transform: translate3d(0, 7%, 0); }
    to   { transform: translate3d(0, -7%, 0); }
  }
}

/* ------------------------------------------------------------ Seitenwechsel */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: mm-blende var(--mm-dauer) var(--mm-kurve) reverse; }
  ::view-transition-new(root) { animation: mm-blende var(--mm-dauer-auf) var(--mm-kurve); }
}

/* ------------------------------------------------------------- Gerätebühne */
/* Der Auftritt: die drei Geräte kommen nacheinander und wachen auf. Das Skript
   setzt die Klassen, hier steht nur, wie es aussieht. */
.mm-buehne[data-mm-auftritt] .mm-geraet { animation-delay: var(--mm-verzug, 0ms); }
.mm-buehne[data-mm-auftritt] .mm-geraet:nth-child(1) { --mm-verzug: 0ms; }
.mm-buehne[data-mm-auftritt] .mm-geraet:nth-child(2) { --mm-verzug: 180ms; }
.mm-buehne[data-mm-auftritt] .mm-geraet:nth-child(3) { --mm-verzug: 360ms; }

/* ============================================================================
   BEWEGUNGEN AN BAUTEILEN
   Jede hat eine Aufgabe: zeigen, dass etwas passiert ist, wohin etwas
   verschwindet, oder wo etwas herkommt. Bewegung ohne Aufgabe fliegt raus.
   ========================================================================= */

/* --- Dialog kommt aus dem Knopf, den man gedrückt hat --------------------- */
/* Das Skript setzt --mm-quelle-x und --mm-quelle-y auf die Mitte des Auslösers. */
.mm-dialog[data-mm-quelle][open] .mm-dialog__inhalt {
  animation: mm-aus-quelle var(--mm-dauer-auf) var(--mm-kurve);
  transform-origin: var(--mm-quelle-x, 50%) var(--mm-quelle-y, 50%);
}
@keyframes mm-aus-quelle {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Menüeinträge laufen nacheinander ein -------------------------------- */
.mm-menue:not([hidden]) button { animation: mm-menue-eintrag 220ms var(--mm-kurve) both; }
.mm-menue:not([hidden]) button:nth-child(1) { animation-delay: 20ms; }
.mm-menue:not([hidden]) button:nth-child(2) { animation-delay: 55ms; }
.mm-menue:not([hidden]) button:nth-child(3) { animation-delay: 90ms; }
.mm-menue:not([hidden]) button:nth-child(n+4) { animation-delay: 125ms; }
@keyframes mm-menue-eintrag { from { opacity: 0; transform: translateX(-6px); } }

/* --- Chip: federt beim Auswählen ----------------------------------------- */
.mm-chip { transition: background-color var(--mm-dauer-mikro) var(--mm-kurve),
                       border-color var(--mm-dauer-mikro) var(--mm-kurve),
                       transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.mm-chip[aria-pressed="true"] { animation: mm-feder 300ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mm-feder { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* --- Etwas verschwindet: erst wegkippen, dann Platz einziehen ------------- */
.mm-geht {
  animation: mm-weg 320ms var(--mm-kurve) forwards;
  overflow: hidden;
}
@keyframes mm-weg {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  45%  { opacity: 0; transform: translateX(28px) scale(.96); }
  100% { opacity: 0; transform: translateX(28px) scale(.96);
         max-height: 0; margin-block: 0; padding-block: 0; border-width: 0; }
}
.mm-geht-hoch { animation: mm-weg-hoch 300ms var(--mm-kurve) forwards; overflow: hidden; }
@keyframes mm-weg-hoch {
  0%   { opacity: 1; }
  100% { opacity: 0; max-height: 0; margin-block: 0; padding-block: 0; border-width: 0; }
}

/* --- Etwas kommt dazu ---------------------------------------------------- */
.mm-kommt { animation: mm-dazu 320ms var(--mm-kurve); }
@keyframes mm-dazu { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* --- Knopf meldet Erfolg: Häkchen statt Beschriftung --------------------- */
.mm-knopf[data-mm-erfolg] { color: transparent; pointer-events: none; }
.mm-knopf[data-mm-erfolg]::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 20px; height: 11px; border: 0 solid currentColor;
  border-left-width: 2.5px; border-bottom-width: 2.5px;
  color: var(--mm-auf-gruen);
  transform: rotate(-45deg) scale(0); transform-origin: center;
  animation: mm-haken 420ms var(--mm-kurve) forwards;
}
.mm-knopf--umriss[data-mm-erfolg]::before,
.mm-knopf--still[data-mm-erfolg]::before { color: var(--mm-text); }
@keyframes mm-haken {
  0%   { transform: rotate(-45deg) scale(.2); opacity: 0; }
  60%  { transform: rotate(-45deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(-45deg) scale(1); opacity: 1; }
}

/* --- Merken: das Herz füllt sich ----------------------------------------- */
.mm-merkt .mm-ikon { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.mm-merkt[aria-pressed="true"] .mm-ikon {
  fill: var(--mm-gruen-strich); stroke: var(--mm-gruen-strich);
  animation: mm-feder 340ms cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Aufmerksamkeit, sparsam --------------------------------------------- */
.mm-wippt { animation: mm-wippe 420ms var(--mm-kurve); }
@keyframes mm-wippe {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
.mm-pulst { animation: mm-puls 1.6s var(--mm-kurve) infinite; }
@keyframes mm-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* --- Zahlen zählen hoch: nur die Ziffern, kein Springen ------------------ */
.mm-zaehler { font-variant-numeric: tabular-nums; }

/* --- Karte hebt sich beim Überfahren ------------------------------------- */
.mm-hebt { transition: transform var(--mm-dauer) var(--mm-kurve), box-shadow var(--mm-dauer) var(--mm-kurve); }
.mm-hebt:hover { transform: translateY(-3px); box-shadow: var(--mm-schatten-3); }

/* --- Bild zoomt sanft, wenn man über die Karte fährt --------------------- */
.mm-medien img { transition: transform 480ms var(--mm-kurve); }
a:hover > .mm-medien img, .mm-karte:hover .mm-medien img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .mm-js [data-mm-auf],
  .mm-js [data-mm-auf][data-mm-gekoppelt] {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .mm-fortschritt, .mm-parallaxe { animation: none !important; transform: none !important; }
  .mm-chip, .mm-chip[aria-pressed="true"], .mm-menue:not([hidden]) button,
  .mm-kommt, .mm-wippt, .mm-pulst, .mm-merkt[aria-pressed="true"] .mm-ikon,
  .mm-dialog[data-mm-quelle][open] .mm-dialog__inhalt {
    animation: none !important; transition: none !important;
  }
  .mm-geht, .mm-geht-hoch { animation: mm-weg-sofort 1ms forwards; }
  @keyframes mm-weg-sofort { to { opacity: 0; max-height: 0; margin-block: 0; padding-block: 0; border-width: 0; } }
  .mm-medien img, .mm-hebt { transition: none !important; }
}

@media print {
  [data-mm-auf] { opacity: 1 !important; transform: none !important; }
  .mm-fortschritt { display: none; }
}