/* ===========================================================================
   DER KOPF DER DREI ANGEBOTSSEITEN

   Franky, 26.08.: "Hier muss die 3D-Animation sein, nicht dort wo du sie
   hingesetzt hast. Nutze bitte das Video dafuer, die 3D-Animation muss
   auch scrollbar sein so wie im Hero der ersten Seite."

   Also derselbe Mechanismus wie `.kamui-hero` auf der Startseite: die
   Buehne bleibt stehen, waehrend drumherum gescrollt wird, und jede
   Scrollposition zeigt genau ein Bild der Folge.

   Warum Einzelbilder und kein <video>: steht ausfuehrlich in hero.css.
   Kurz, `currentTime` zu setzen loest ein Suchen im Datenstrom aus, das
   je nach Kodierung ruckelt oder haengenbleibt.

   Die Falle mit `position: sticky` ist hier dieselbe wie dort: Artisons
   body traegt `overflow: hidden auto` und wird damit selbst zum
   Scrollbehaelter. `sticky` richtet sich dann nach ihm statt nach dem
   Fenster und wandert einfach mit nach oben weg. Deshalb `fixed`, und
   das Ein- und Ausschalten macht kopf.js ueber `.haftet`.
   =========================================================================== */

/* ZWEI KLASSEN UND !important, nicht aus Bequemlichkeit.

   Gemessen beim ersten Anlauf: der Kopf blieb auf 813px stehen, also auf
   Fensterhoehe, und nichts fuhr. Die Vorlage setzt die Hoehe von
   `.fr-hero-india` selbst, und ihre Stylesheets liegen im spaeten Block
   unter `_assets/`. Eine Regel mit einer Klasse verliert dagegen, egal
   wie weit vorne sie steht. Deshalb die Sektion mit ihrem eigenen
   Element und beiden Klassen, plus !important auf der Hoehe. */
section.fr-hero-india.kamui-kopf {
  height: 200vh !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Standbild statt Fahrt: die 200vh oben sind reiner Scrollweg fuer die
   Bildfolge. Steht das Bild still, waere die zweite Bildschirmhoehe
   leer - man scrollt durch nichts. Also zurueck auf 100vh.

   Der Selektor traegt bewusst dieselben drei Teile wie die Regel
   darueber plus die eigene Klasse: sonst gewinnt die 200vh-Zeile, beide
   haben !important. */
section.fr-hero-india.kamui-kopf.kamui-kopf--fest {
  height: 100vh !important;
}

/* Die Buehne haengt bei der Fahrt fest im Bild (position:fixed ueber die
   Klasse .haftet). Ohne Fahrt soll sie normal mitscrollen. */
.kamui-kopf--fest .kamui-kopf__buehne {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

.kamui-kopf {
  position: relative;
  /* Die Hoehe steht oben, mit der noetigen Spezifitaet. 200vh heisst:
     eine Bildschirmhoehe steht der Kopf, eine wird durchgefahren. Bei
     121 Bildern auf rund 810px Scrollweg sind das knapp 7px je Bild -
     fein genug, dass keine Stufen zu sehen sind. Die Startseite braucht
     320vh, weil sie 502 Bilder hat. */
  background: #161b19;

  /* Die Vorlage setzt hier display:flex mit zentrierten Kindern. Dadurch
     schrumpft die Buehne auf ihre Inhaltsbreite statt auf die volle. */
  display: block !important;
}

.kamui-kopf__buehne {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* GEMESSEN 26.08. auf /p=4445 (Unser Team): der Hero-Text sprang beim
     Laden um 90px nach unten - Franky: "die schrift bei Unser Team
     haengt wenn sie geladen wird".

     Ursache: die Buehne ist ein Flex-Kasten mit align-items:center und
     war 100vh hoch, sitzt aber nicht am Fensterrand, sondern 90px
     tiefer (unter der Kopfzeile). Sie zentrierte also in einem Feld,
     das 90px ueber den sichtbaren Bereich hinausragt - der Text landet
     entsprechend zu tief. Vor dem Umbau durch kopf.js stand er noch
     richtig, deshalb der sichtbare Sprung.

     100% statt 100vh: die Buehne fuellt damit genau ihren Elternteil,
     und das ist die Sektion, die bereits die richtige Hoehe hat. Beim
     gehefteten Zustand weiter unten gilt bewusst 100vh, denn dort
     haengt sie tatsaechlich am Fenster. */
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Solange der Kopf durchlaufen wird: an das Fenster geheftet. */
.kamui-kopf.haftet .kamui-kopf__buehne {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1;
}

/* Danach unten im Kopf abgelegt, damit der Uebergang zur naechsten
   Sektion sauber ist. */
.kamui-kopf.fertig .kamui-kopf__buehne {
  position: absolute;
  top: auto;
  bottom: 0;
}

/* Der Kasten der Vorlage traegt `position:absolute; z-index:-1` und
   liegt damit hinter dem Text. Die Leinwand fuellt ihn ganz aus. */
.kamui-kopf__bild {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Das Standbild aus der Vorlage bleibt liegen, bis das erste Bild der
   Folge gezeichnet ist. Faellt kopf.js aus, ist es das, was man sieht. */
.kamui-kopf__bild + img,
.kamui-kopf .fr-background-alpha__image img.kamui-kopf__weg {
  opacity: 0;
}