/* ============================================================================
   MeinMarkt365 – Scroll-Choreografie  v1.0
   Setzt tokens.css voraus.

   Zwei Ebenen:
   1. Basis  — IntersectionObserver setzt [data-mm-in="true"]. Läuft überall.
   2. Ausbau — scroll-getriebene CSS-Animation, wo der Browser sie kann
               (Chrome/Edge 115+, Safari 26+). Firefox fällt auf Ebene 1 zurück.

   Grundsatz: Der Inhalt steht immer im DOM. Bewegung ist Darstellung,
   nie Voraussetzung für Sichtbarkeit. Ohne JavaScript ist alles sichtbar.
   ========================================================================= */

:root {
  --mm-reveal-dur:   .62s;   /* Eintritt: länger als Bedien-Feedback */
  --mm-reveal-shift: 24px;   /* maximale Bewegungsstrecke */
  --mm-reveal-ease:  cubic-bezier(.16, .84, .34, 1);
  --mm-stagger:      70ms;   /* Abstand zwischen Geschwistern */
}

/* ---------- 1. Eintritts-Muster --------------------------------------- */
/* Ohne JS bleibt alles sichtbar: die Startwerte greifen erst,
   wenn das Skript die Wurzel markiert hat. */
.mm-js [data-mm-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--mm-reveal-shift), 0);
  transition: opacity var(--mm-reveal-dur) var(--mm-reveal-ease),
              transform var(--mm-reveal-dur) var(--mm-reveal-ease);
  transition-delay: var(--mm-delay, 0ms);
  will-change: opacity, transform;
}
.mm-js [data-mm-reveal="scale"]  { transform: translate3d(0, 12px, 0) scale(.965); }
.mm-js [data-mm-reveal="left"]   { transform: translate3d(-20px, 0, 0); }
.mm-js [data-mm-reveal="right"]  { transform: translate3d(20px, 0, 0); }
.mm-js [data-mm-reveal="fade"]   { transform: none; }
.mm-js [data-mm-reveal="blur"]   { filter: blur(6px); transition: opacity var(--mm-reveal-dur) var(--mm-reveal-ease),
                                     transform var(--mm-reveal-dur) var(--mm-reveal-ease),
                                     filter var(--mm-reveal-dur) var(--mm-reveal-ease); }

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

/* Staffelung über Geschwister — ohne Inline-Styles */
.mm-stagger > *:nth-child(1) { --mm-delay: 0ms; }
.mm-stagger > *:nth-child(2) { --mm-delay: calc(var(--mm-stagger) * 1); }
.mm-stagger > *:nth-child(3) { --mm-delay: calc(var(--mm-stagger) * 2); }
.mm-stagger > *:nth-child(4) { --mm-delay: calc(var(--mm-stagger) * 3); }
.mm-stagger > *:nth-child(5) { --mm-delay: calc(var(--mm-stagger) * 4); }
.mm-stagger > *:nth-child(6) { --mm-delay: calc(var(--mm-stagger) * 5); }
.mm-stagger > *:nth-child(n+7) { --mm-delay: calc(var(--mm-stagger) * 6); }

/* Zeilenweiser Text */
.mm-lines span { display: inline-block; }
.mm-js .mm-lines span {
  opacity: 0; transform: translate3d(0, .5em, 0);
  transition: opacity .5s var(--mm-reveal-ease), transform .5s var(--mm-reveal-ease);
  transition-delay: calc(var(--mm-i, 0) * 60ms);
}
.mm-js .mm-lines[data-mm-in="true"] span { opacity: 1; transform: none; }

/* ---------- 2. Sticky-Bühne ------------------------------------------- */
.mm-stage        { position: relative; }
.mm-stage__pin   { position: sticky; top: 0; height: 100svh;
                   display: grid; place-items: center; overflow: hidden; }
.mm-stage__step  { min-height: 100svh; }

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

/* ---------- 4. Scroll-getriebener Ausbau ------------------------------ */
@supports (animation-timeline: view()) {
  /* Eintritt an die Scrollposition koppeln statt an eine feste Dauer:
     Das ergibt die weiche, „mitlaufende" Anmutung. */
  .mm-js [data-mm-reveal][data-mm-linked] {
    opacity: 1; transform: none; transition: none;
    animation: mm-enter linear both;
    animation-timeline: view(block);
    animation-range: entry 5% cover 34%;
  }
  @keyframes mm-enter {
    from { opacity: 0; transform: translate3d(0, var(--mm-reveal-shift), 0); }
    to   { opacity: 1; transform: none; }
  }
  /* Parallax: Ebenen laufen unterschiedlich schnell */
  .mm-parallax { animation: mm-par linear both; animation-timeline: view(block);
                 animation-range: cover 0% cover 100%; }
  @keyframes mm-par { from { transform: translate3d(0, var(--mm-par-from, 8%), 0); }
                      to   { transform: translate3d(0, var(--mm-par-to, -8%), 0); } }
  /* Sanfter Zoom beim Durchlauf */
  .mm-zoom { animation: mm-zoom linear both; animation-timeline: view(block);
             animation-range: entry 0% cover 60%; }
  @keyframes mm-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
}

/* ---------- 5. Bedienbarkeit ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mm-js [data-mm-reveal],
  .mm-js [data-mm-reveal][data-mm-linked],
  .mm-js .mm-lines span {
    opacity: 1 !important; transform: none !important; filter: none !important;
    transition: none !important; animation: none !important;
  }
  .mm-progress, .mm-parallax, .mm-zoom { animation: none !important; transform: none !important; }
  .mm-stage__pin { position: static; height: auto; }
  .mm-stage__step { min-height: 0; }
}

/* Beim Drucken ist alles sichtbar */
@media print {
  [data-mm-reveal] { opacity: 1 !important; transform: none !important; }
  .mm-progress { display: none; }
}