/* ==========================================================================
   Gut Rechetsberg v334 — Bewegung der drei Coverbilder

   Befund je Seite, im Quelltext nachgesehen:

   - Preiseseite: die Schleife pricesHeroVerticalLoopV162 haengt am
     <picture>-Element. Auf dem <img> darin liegt gleichzeitig
     transform:...!important (aus `.prx-hero-visual img` bzw.
     `.prx-image-shell img`). Und !important-Deklarationen schlagen
     CSS-Animationen. Meine v333-Korrektur, die die Animation auf das <img>
     verlegt hat, konnte deshalb gar nicht greifen — das war mein Fehler.

   - Startseite: unterhalb von 700px ist .hero-bg per visibility:hidden
     abgeschaltet; das Sommerbild kommt als statischer CSS-Hintergrund auf
     .hero. Ein Hintergrundbild bewegt sich nicht. Das Bild steht dort also
     auf jedem Geraet still, nicht nur auf dem iPhone.

   - Parkseite: der Parallaxe-Treiber im Seitenskript beginnt mit
     `if(mobile())return;`, dazu setzen mehrere Regeln transform:none
     !important auf das Herobild. Auch hier steht es auf allen Geraeten.

   Auf Startseite und Parkseite bewegt sich also unter Android genauso wenig
   wie auf dem iPhone. Die Bewegung kommt deshalb geraeteunabhaengig dazu —
   wuerde ich sie auf Apple beschraenken, entstuende genau die Abweichung
   zwischen iPhone und Android, die wir die ganze Zeit beseitigen. Bei der
   Preiseseite bleibt es dagegen bei einer reinen Apple-Korrektur, weil dort
   unter Android bereits alles stimmt.

   Technischer Kern: die Bewegung laeuft ueber die Einzeleigenschaften
   `translate` und `scale`, nicht ueber `transform`. Die bestehenden
   transform:...!important-Regeln blockieren damit nichts mehr, und sie
   bleiben unangetastet — die Einzeleigenschaften verrechnen sich
   anschliessend mit transform. Unterstuetzt seit Safari 14.1 und Chrome 104.

   Bei aktivierter Bewegungsreduktion laeuft nichts davon.
   ========================================================================== */

/* Der Massstab 1.08 schafft oben und unten je 4 % Reserve; die Bewegung
   nutzt davon 1,6 % in jede Richtung. Es kann also keine Kante frei werden. */
@keyframes grCoverPanV334{
  0%   { translate:0 1.6%;  scale:1.08; }
  100% { translate:0 -1.6%; scale:1.08; }
}

/* Amplitude der Preiseseite: das <picture> ist 112 % hoch und wurde bisher um
   10,7142857 % seiner eigenen Hoehe verschoben. Das <img> fuellt das <picture>
   vollstaendig, hat also dieselbe Hoehe — derselbe Prozentwert ergibt exakt
   denselben Weg wie unter Android. */
@keyframes grPricesPanV334{
  0%   { translate:0 0; }
  100% { translate:0 -10.7142857%; }
}

@media (prefers-reduced-motion: no-preference){

  /* ---------- Startseite, Mobil ----------
     Das Sommerbild liegt als CSS-Hintergrund auf .hero und ist so nicht
     animierbar. Es bekommt hier eine eigene Ebene mit demselben Bild.
     .hero fuehrt bereits position:relative, overflow:hidden und
     isolation:isolate; z-index:-4 entspricht der Ebene von .hero-bg und
     liegt damit hinter dem Winterbild (-3) und hinter allen Inhalten.
     Ein eigenes ::before hat .hero bisher nicht. */
  @media (max-width:700px){
    html .hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-4;
      background-image:url("media/home-mobile-cover-1080.webp");
      background-size:cover;
      background-position:center center;
      background-repeat:no-repeat;
      pointer-events:none;
      will-change:translate,scale;
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
      animation:grCoverPanV334 9s ease-in-out infinite alternate;
    }

    /* Das Winterbild bewegt sich im selben Takt mit, sonst wuerden die
       beiden Ebenen waehrend der Ueberblendung auseinanderlaufen. Die Blende
       selbst bleibt bei 7,6 Sekunden, also beim Android-Wert aus v330.
       Die is-ios-Varianten stehen mit in der Liste, weil die Regel in
       render-parity-v330.css dieselbe Spezifitaet hat und nur die spaetere
       Datei gewinnt. */
    html body .hero-winter-bg,
    html.is-ios .hero-winter-bg,
    html.is-ios-v324 .hero-winter-bg{
      animation:heroWinterFade 7.6s ease-in-out infinite,
                grCoverPanV334 9s ease-in-out infinite alternate!important;
      will-change:opacity,translate,scale!important;
    }
  }

  /* ---------- Parkseite, Mobil ----------
     Auf Desktop uebernimmt der Parallaxe-Treiber der Seite; der steigt bei
     Mobilbreiten aus. Hier ersetzt die Schleife diese Bewegung. */
  @media (max-width:700px){
    html body #parkPanTrackV108 > img#parkxHeroImg,
    html body .parkx-hero-visual img#parkxHeroImg{
      animation:grCoverPanV334 9s ease-in-out infinite alternate!important;
      will-change:translate,scale!important;
      -webkit-backface-visibility:hidden;
      backface-visibility:hidden;
    }
  }

  /* ---------- Preiseseite ----------
     Nur fuer Apple: unter Android laeuft die Schleife auf dem <picture>
     bereits richtig und bleibt unberuehrt. Auf Apple wird sie dort
     abgeschaltet und stattdessen ueber translate auf dem <img> gefahren,
     wo kein transform:!important sie blockiert. */
  html.is-apple-v324 .prx-hero-cover-image>picture{
    animation:none!important;
    -webkit-transform:none!important;
    transform:none!important;
  }
  html.is-apple-v324 .prx-hero-cover-image>picture>img{
    animation:grPricesPanV334 4s cubic-bezier(.45,.02,.55,.98) infinite alternate!important;
    will-change:translate!important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}