/* ::: FADE-IN EFFEKT BEIM LADEN ::::::::::::::::::::::::::::::::::::::::: */

@keyframes fadeInSmooth {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* sanfter Start für die drei Hauptbereiche */
#info_container,
#flyer_dl,
#about_container {
  opacity: 0;
  animation: fadeInSmooth 1s ease-out forwards;
}

/* leichte Staffelung, damit’s eleganter wirkt */
#flyer_dl { animation-delay: 0.3s; }
#about_container { animation-delay: 0.6s; }



/* ::: SCROLL-FADE-IN ::::::::::::::::::::::::::::::::::::::::::::::::::: */

/* 1) Keyframes */
@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 2) View-Timeline + Animation auf die drei Bereiche */
#info_container,
#flyer_dl,
#about_container {
  opacity: 0;                         /* Startzustand */
  view-timeline-name: --reveal;       /* erzeugt View-Timeline */
  view-timeline-axis: block;          /* vertikale Scroll-Achse */
  animation-name: reveal;
  animation-duration: 0.9s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-timeline: --reveal;       /* an View-Timeline koppeln */
  animation-range: entry 0% cover 60%;/* animiere: beim Eintritt bis 60% bedeckt */
}

/* 3) Respect a11y: Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce) {
  #info_container,
  #flyer_dl,
  #about_container {
    animation: none;
    opacity: 1;
    transform: none;
  }
}