/* Motion v2 - sparsam, on-scroll reveal, reduced-motion respected */

/* Gate: nur wenn JS gemounted hat — sonst bleibt alles sichtbar (fail-safe) */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 900ms var(--ease-out),
              transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
html.js-reveal [data-reveal][data-in="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
html.js-reveal [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
html.js-reveal [data-reveal-stagger][data-in="true"] > * { opacity: 1; transform: translateY(0); }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(1) { transition-delay: 0ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(2) { transition-delay: 100ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(3) { transition-delay: 200ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(4) { transition-delay: 300ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(5) { transition-delay: 400ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(6) { transition-delay: 500ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(7) { transition-delay: 600ms; }
html.js-reveal [data-reveal-stagger][data-in="true"] > *:nth-child(8) { transition-delay: 700ms; }

/* Inner-Stagger: Headings + direkte Block-Kinder innerhalb von Section */
html.js-reveal main > section[data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
}
html.js-reveal main > section[data-reveal][data-in="true"] > * { opacity: 1; transform: translateY(0); }
html.js-reveal main > section[data-reveal][data-in="true"] > *:nth-child(1) { transition-delay: 120ms; }
html.js-reveal main > section[data-reveal][data-in="true"] > *:nth-child(2) { transition-delay: 220ms; }
html.js-reveal main > section[data-reveal][data-in="true"] > *:nth-child(3) { transition-delay: 320ms; }
html.js-reveal main > section[data-reveal][data-in="true"] > *:nth-child(4) { transition-delay: 420ms; }
html.js-reveal main > section[data-reveal][data-in="true"] > *:nth-child(5) { transition-delay: 520ms; }

/* Hero Entry */
.hero__say, .hero__title, .hero__role, .hero__lede, .hero__cta, .hero__chips {
  opacity: 0;
  animation: hero-in var(--dur-slow) var(--ease-out) forwards;
}
.hero__say   { animation-delay: 50ms; }
.hero__title { animation-delay: 200ms; }
.hero__role  { animation-delay: 380ms; }
.hero__lede  { animation-delay: 520ms; }
.hero__cta   { animation-delay: 680ms; }
.hero__chips { animation-delay: 820ms; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__portrait {
  opacity: 0;
  animation: portrait-in var(--dur-slow) var(--ease-out) 400ms forwards;
}
@keyframes portrait-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reduced Motion Override - glitch + marquee bleiben aktiv (kuenstlerische Effekte) */
@media (prefers-reduced-motion: reduce) {
  :not(.is-glitching):not(.marquee__track):not(img):not(picture),
  :not(.is-glitching):not(.marquee__track):not(img):not(picture)::before,
  :not(.is-glitching):not(.marquee__track):not(img):not(picture)::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal: kürzer aber sichtbar (statt komplett snap) */
  html.js-reveal [data-reveal] {
    transition: opacity 400ms ease-out, transform 400ms ease-out !important;
    transform: translateY(20px) scale(1) !important;
  }
  html.js-reveal [data-reveal][data-in="true"] { transform: translateY(0) scale(1) !important; }
  html.js-reveal [data-reveal-stagger] > * { transition: opacity 300ms ease-out !important; transform: none !important; }
  .hero__say, .hero__title, .hero__role, .hero__lede, .hero__cta, .hero__chips, .hero__portrait { opacity: 1; transform: none; }
  .hero__sticker { animation: none; }
  .mono__caret { animation: none; }
  .marquee__track { animation: marquee 38s linear infinite !important; }
}