/* Scroll-, Menü- und Tab-Animationen der Seite.
   Werte entsprechen 1:1 den Animationen der vorherigen React-Fassung. */

/* --- Reveal beim Scrollen ------------------------------------------------ */

/* Sektionen: opacity 0 -> 1, 800 ms */
[data-reveal="section"] {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

/* Einzelne Karten/Zeilen: zusätzlich 30 px Versatz, 600 ms, gestaffelt */
[data-reveal="item"] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s cubic-bezier(0, 0, 0.2, 1) var(--rv-delay, 0ms),
    transform 0.6s cubic-bezier(0, 0, 0.2, 1) var(--rv-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Parallax ------------------------------------------------------------ */

[data-parallax] {
  will-change: transform;
}

/* --- Mobiles Menü -------------------------------------------------------- */

[data-mobile-menu] {
  height: 0;
  opacity: 0;
  transition:
    height 0.3s cubic-bezier(0.25, 0.1, 0.35, 1),
    opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1);
}

[data-mobile-menu][hidden] {
  display: none;
}

[data-mobile-menu].is-open {
  opacity: 1;
}

/* --- Erlebnis-Tabs ------------------------------------------------------- */

[data-exp-panel][hidden] {
  display: none;
}

@keyframes exp-panel-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

[data-exp-panel].is-entering {
  animation: exp-panel-in 0.5s cubic-bezier(0, 0, 0.2, 1);
}