/*
  Bewegung auf den drei Landing-Seiten (SPEC LANDING-BEWEGUNG, Carolin
  30.09.2026). Uebernommen aus dem Block „Bewegung" des Artefakts
  „Loguna Flotten-Vorschlag", Version 8, mit Carolins Korrekturen vom 30.09.:

  - ALLES steht unter prefers-reduced-motion: no-preference. Die Vorlage hatte
    zwei Regeln davor (`.lg-v { position: relative; z-index: 1 }` und eine
    Transition an `.lg-v-nav`); sie sind hier drinnen. Ohne Bewegung ist die
    Seite pixelgleich zum Stand davor (scripts/landing-bewegung-pruefen.mjs).
  - Der Lichtfleck ist EINE vorgezeichnete Ebene, die per transform wandert —
    keine Custom Properties im Verlauf je Bild, also kein Neuzeichnen einer
    bildschirmgrossen, weichgezeichneten Flaeche bei jedem Scroll-Schritt.
  - Die Klasse `lp-m` setzt landing-bewegung.js nur, wenn Bewegung erlaubt ist.
*/
@media (prefers-reduced-motion: no-preference) {
  /* 1. Lichtfleck: eine Ebene, fixed hinter der Seite, bewegt nur per transform. */
  .lp-glow {
    position: fixed;
    left: -20vw;
    top: -20vh;
    width: 140vw;
    height: 140vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background:
      radial-gradient(
        60vw 60vh at 30% 20%,
        color-mix(in oklab, var(--role-accent) 34%, transparent),
        transparent 70%
      ),
      radial-gradient(
        50vw 50vh at 75% 85%,
        color-mix(in oklab, var(--role-accent-2, var(--role-accent)) 26%, transparent),
        transparent 70%
      );
    filter: blur(40px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }
  .lp-m .lg-v {
    position: relative;
    z-index: 1;
  }
  .lp-m .lg-v-nav {
    transition:
      background 0.3s,
      backdrop-filter 0.3s;
  }

  /* Koepfe der Abschnitte: von unten herein, gestaffelt. */
  .lp-m .lg-v-kopf > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .lp-m .lg-v-kopf > *:nth-child(2) {
    transition-delay: 0.08s;
  }
  .lp-m .lg-v-kopf > *:nth-child(3) {
    transition-delay: 0.16s;
  }
  .lp-m .ist-da .lg-v-kopf > * {
    opacity: 1;
    transform: none;
  }
  .lp-m .lg-v-zahl {
    display: inline-block;
    transform-origin: 50% 100%;
  }

  /*
    4. Telefon in der Buehne (SPEC LANDING-RHYTHMUS v3 §4): Eintritt aus 24 px
    unten mit 6 Grad Kippung in 0,7 s. Kein Lichtreflex, kein Glow auf UI.
  */
  .lp-m .r-geraet {
    perspective: 1400px;
  }
  .lp-m .r-geraet .lg-v-geraet {
    opacity: 0;
    transform: translateY(24px) rotateX(6deg);
    transition:
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.7s;
    will-change: transform;
  }
  .lp-m .ist-da .r-geraet .lg-v-geraet {
    opacity: 1;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }

  /* Tarife und der Abschnitt vor den Preisen. */
  .lp-m .lg-v-tarif,
  .lp-m .lp-tag {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 0.7s,
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .lp-m .ist-da .lg-v-tarif,
  .lp-m .ist-da .lp-tag {
    opacity: 1;
    transform: none;
  }
  .lp-m .ist-da .lg-v-tarif:nth-child(2) {
    transition-delay: 0.12s;
  }
  .lp-m .ist-da .lg-v-tarif:nth-child(3) {
    transition-delay: 0.24s;
  }

  /* 9. Stationswechsel: die neue Tafel blendet in 350 ms ein. Die Tafeln liegen uebereinander, nichts springt. */
  .lp-m .lp-panel[data-aktiv] > * {
    animation: lpTafel 0.35s ease-out both;
  }
  @keyframes lpTafel {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* 2. und 3.: Tiefe ueber Scroll-Zeitleisten, nur wo es sie gibt — sonst bleibt das Bild ruhig. Fotos ±28 px (RHYTHMUS v3 §4). */
  @supports (animation-timeline: view()) {
    .lp-m .r-buehne .lg-v-foto img,
    .lp-m .r-bild .lg-v-foto img,
    .lp-m .lg-v-schluss .lg-v-foto img {
      animation: lpParallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes lpParallax {
      from {
        transform: translateY(-28px) scale(1.08);
      }
      to {
        transform: translateY(28px) scale(1.08);
      }
    }
    .lp-m .lg-v-hero .lg-v-foto img {
      animation: lpHero linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }
    @keyframes lpHero {
      from {
        transform: translateY(0) scale(1);
      }
      to {
        transform: translateY(18%) scale(1.08);
      }
    }
    .lp-m .lg-v-hero .lg-v-h1,
    .lp-m .lg-v-hero .lg-v-lead {
      animation: lpHeroText linear both;
      animation-timeline: scroll();
      animation-range: 0 70vh;
    }
    @keyframes lpHeroText {
      to {
        transform: translateY(-40px);
        opacity: 0;
      }
    }
  }

  /* 8. Die Leiste, sobald gescrollt ist. */
  .lp-m .lp-nav-fest {
    background: color-mix(in oklab, var(--semantic-bg-base) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  /* Waehrend das Telefon dem Zeiger folgt, rechnet die Feder selbst (landing-bewegung.js), ohne Transition. */
  .lp-m .ist-da .r-geraet .lg-v-geraet.lp-lebt {
    transition: opacity 0.7s;
  }
}