/* ================= SCROLL REVEAL ================= */
/* Elemente starten verborgen und sliden in, sobald sie sichtbar werden. */

[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-24px); }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="zoom"]  { transform: scale(0.94); }

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

/* Stagger via inline --d Variable (oder data-delay) */
[data-reveal] { transition-delay: var(--d, 0ms); }

/* Hero animiert sofort beim Laden — keine Beobachtung */
.hero [data-reveal] { animation: heroReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); opacity: 1; transform: none; }
.hero [data-reveal].is-revealed { animation: none; }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Sanftes Float für das Hero-Visual */
.hero .visual { animation: float 6s ease-in-out infinite; animation-delay: 1.2s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Hover-Lift für Karten — nicht aufdringlich */
.pillar, .scope-grid .pillar, .package-card, .client-card, .trust .item {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar:hover, .scope-grid .pillar:hover {
  transform: translateY(-4px);
}

/* Underline-Animation für Nav-Links */
.topbar nav a {
  position: relative;
}
.topbar nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.topbar nav a:hover::after,
.topbar nav a.active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Buttons: kleine Hochheb-Geste */
.btn { transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Reduced motion: alles ruhen lassen */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .hero .visual { animation: none; }
  .topbar nav a::after { transition: none; }
}