@import url("festival-motion.css?v=5");

.festival-experience {
  /* Das Papier der Inszenierung ist dasselbe Elfenbein wie die Sektion darunter.
     Damit gibt es an der Unterkante keine Farbstufe mehr, an der man den
     Schnitt sieht — die Buehne endet und die naechste Sektion laeuft weiter. */
  --cfe-paper: #F4EEE4;
  position: relative;
  width: 100%;
  overflow: clip;
  background: var(--cfe-paper);
  color: #000;
  /* Die Schrift der Seite, nicht die des Moduls: main.css meldet sie fuer
     das ganze Dokument an. */
  font-family: var(--f-display, 'Archivo', system-ui, sans-serif);
  isolation: isolate;
}

.festival-experience *,
.festival-experience *::before,
.festival-experience *::after {
  box-sizing: border-box;
}

.festival-experience p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.festival-experience button {
  color: inherit;
  font-family: inherit;
}

.festival-experience button.festival-motion__arrow-text {
  border: 0;
  background: transparent;
}

.festival-experience button.festival-motion__arrow,
.festival-experience button.festival-motion__arrow-up {
  padding: 0;
  border: 0;
  background: transparent;
}

.festival-experience button:focus-visible {
  outline: 3px solid rgba(59, 40, 30, 0.35);
  outline-offset: 4px;
}

.festival-experience .festival-motion__text-8-wrapper {
  z-index: 900;
}

.festival-experience .festival-motion__final-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 70vh;
  height: 70vh;
  overflow: hidden;
  border-radius: 50%;
  background: var(--cfe-paper);
  transform: translate(-50%, -50%);
}

.festival-experience .festival-motion__final-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 102.5%;
  height: 102.5%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

@media only screen and (orientation: portrait) {
  .festival-experience .festival-motion__final-video {
    width: 70vw;
    height: 70vw;
  }
}

.festival-experience .cfe-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .festival-experience .festival-motion__arrow,
  .festival-experience .festival-motion__arrow-up {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Weiche Kanten fuer die rechteckigen Fotoebenen
   ---------------------------------------------------------------------------
   Die Parallax-Ebenen sind sehr hohe Kaesten, in denen das Foto oben sitzt und
   nach unten einfach aufhoert. Wandert so eine Ebene durch den Kreis, sieht man
   ihre schnurgerade Ober- und Unterkante. Die PNG-Ebenen (Wolken, Zweige) haben
   ihren eigenen Freisteller — betroffen sind nur die vier JPGs.

   Die Hoehen unten sind nicht geraten: die Ebenen sind 78vh breit und zeigen
   ihr Bild mit background-size: contain, die Bildhoehe ist also 78vh mal
   Seitenverhaeltnis. cafetal_rama_0 ist quadratisch (78vh), cielo_0 und
   cafeteria_0 sind 97.5vh hoch, fire_0 138.6vh.                             */

/* Landschaft und Himmel loesen sich an beiden Kanten auf — darunter liegt die
   vorige Szene, in die sie hineinblenden sollen. */
.festival-experience .festival-motion__background-mountain {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 13vh, rgba(0,0,0,1) 65vh, rgba(0,0,0,0) 78vh);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 13vh, rgba(0,0,0,1) 65vh, rgba(0,0,0,0) 78vh);
}

.festival-experience .festival-motion__yellow-sky {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 14vh, rgba(0,0,0,1) 83vh, rgba(0,0,0,0) 97.5vh);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 14vh, rgba(0,0,0,1) 83vh, rgba(0,0,0,0) 97.5vh);
}

/* Feuer und Bar duerfen unten nicht durchsichtig werden — dahinter laege sonst
   wieder die Landschaft. Statt einer Maske legt sich hier ein Verlauf in der
   Farbe ueber die Unterkante, in der das Foto ausklingt, und fuellt den Rest. */
.festival-experience .festival-motion__fire-background,
.festival-experience .festival-motion__bar-background {
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 18vh);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 18vh);
}

.festival-experience .festival-motion__fire-background::after {
  content: "";
  position: absolute;
  top: 118vh;
  left: 0;
  right: 0;
  height: 900vh;
  background: linear-gradient(180deg, rgba(99, 13, 1, 0) 0, #630D01 20vh, #630D01 100%);
}

.festival-experience .festival-motion__bar-background::after {
  content: "";
  position: absolute;
  top: 78vh;
  left: 0;
  right: 0;
  height: 900vh;
  background: linear-gradient(180deg, rgba(131, 77, 35, 0) 0, #834D23 19vh, #834D23 100%);
}

/* Der Abspann laeuft als Einzelbildfolge, nicht als Video: ein Bildersprung per
   currentTime haengt daran, dass der Browser in der MP4 sauber sucht — genau
   das ist der Grund, warum das Logo bisher stehen blieb. */
.festival-experience .cfe-frames {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 102.5%;
  height: 102.5%;
  max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}