/*
 * Juliboo Motion — leichtes Animations-System (CSS-only States).
 * Steuerung per Klassen aus motion.js: .is-hero-ready, .is-inview, .is-scrolled.
 * Ohne diese Klassen bleibt alles sichtbar (progressive enhancement).
 */

/* --- Scroll-Reveal --------------------------------------------------------
 * Elemente starten leicht abgesenkt und transparent, sobald motion.js sie
 * als Ziel markiert (.motion-target). Der Observer setzt .is-inview.
 */
.motion-target {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.motion-target.is-inview {
  opacity: 1;
  transform: none;
}

/* Stagger innerhalb von Grids/Listen: gestaffelte Delays pro Position. */
.card-grid .motion-target:nth-child(2) { transition-delay: 0.06s; }
.card-grid .motion-target:nth-child(3) { transition-delay: 0.12s; }
.card-grid .motion-target:nth-child(4) { transition-delay: 0.18s; }
.card-grid .motion-target:nth-child(5) { transition-delay: 0.24s; }
.card-grid .motion-target:nth-child(6) { transition-delay: 0.30s; }

.steps .motion-target:nth-child(2) { transition-delay: 0.08s; }
.steps .motion-target:nth-child(3) { transition-delay: 0.16s; }

.trust-bar__grid .motion-target:nth-child(2) { transition-delay: 0.06s; }
.trust-bar__grid .motion-target:nth-child(3) { transition-delay: 0.12s; }
.trust-bar__grid .motion-target:nth-child(4) { transition-delay: 0.18s; }

.faq-list .motion-target:nth-child(2) { transition-delay: 0.05s; }
.faq-list .motion-target:nth-child(3) { transition-delay: 0.10s; }
.faq-list .motion-target:nth-child(4) { transition-delay: 0.15s; }
.faq-list .motion-target:nth-child(5) { transition-delay: 0.20s; }

/* --- Hero-Einstieg --------------------------------------------------------
 * Beim Laden staffeln sich Logo, Titel, Subline, CTA und Newsletter ein.
 * motion.js setzt .is-hero-ready auf dem <body> nach dem ersten Paint.
 */
.hero__inner > * {
  opacity: 0;
  transform: translateY(16px);
}
.is-hero-ready .hero__inner > * {
  animation: juliboo-hero-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.is-hero-ready .hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.is-hero-ready .hero__inner > *:nth-child(2) { animation-delay: 0.13s; }
.is-hero-ready .hero__inner > *:nth-child(3) { animation-delay: 0.21s; }
.is-hero-ready .hero__inner > *:nth-child(4) { animation-delay: 0.29s; }
.is-hero-ready .hero__inner > *:nth-child(5) { animation-delay: 0.37s; }
.is-hero-ready .hero__inner > *:nth-child(6) { animation-delay: 0.45s; }

@keyframes juliboo-hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Ohne JavaScript bleibt der Hero-Inhalt sichtbar (kein dauerhaftes Ausblenden). */
@media (scripting: none) {
  .hero__inner > * { opacity: 1; transform: none; }
}

/* --- Hover-Microinteractions ---------------------------------------------
 * Ergaenzt die bestehenden 0.15s-Transitions aus juliboo.css.
 */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--juliboo-shadow);
  border-color: color-mix(in srgb, var(--juliboo-accent) 40%, var(--juliboo-border));
}

.btn { transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--juliboo-shadow-sm); }
.btn--ghost:hover { transform: translateY(-1px); }

.step__num { transition: transform 0.2s ease; }
.step:hover .step__num { transform: scale(1.08); }

.pro-teaser__card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pro-teaser__card:hover { transform: translateY(-4px); box-shadow: var(--juliboo-shadow); }

/* --- Header-Scroll-State --------------------------------------------------- */
.site-header {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(31, 42, 46, 0.10);
  background: color-mix(in srgb, var(--juliboo-header-bg) 100%, transparent);
}
[data-theme="dark"] .site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* --- Barrierefreiheit: reduzierte Bewegung ---------------------------------
 * Keine Transforms/Delays; alles sofort sichtbar.
 */
@media (prefers-reduced-motion: reduce) {
  .motion-target,
  .motion-target.is-inview,
  .hero__inner > *,
  .is-hero-ready .hero__inner > * {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .card:hover,
  .btn--primary:hover,
  .btn--ghost:hover,
  .step:hover .step__num,
  .pro-teaser__card:hover {
    transform: none;
  }
}