/* Animationen und Einblend-Effekte */
.page-fade {
  position: fixed;
  inset: 0;
  background: #ffffff;
  pointer-events: none;
  animation: fadeIn 0.35s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 1; }
  to { opacity: 0; }
}

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

[data-animate].in-view {
  opacity: 1;
  transform: translateY(0);
}

.hero-visual,
.info-card,
.timeline-item,
.skill-group,
.project-card,
.contact-panel {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.hero-visual.in-view,
.info-card.in-view,
.timeline-item.in-view,
.skill-group.in-view,
.project-card.in-view,
.contact-panel.in-view,
.contact-info.in-view .contact-panel {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}