/* Animations — Keyframes & Reveal States */

/* ============================================================
   Reveal-on-Scroll
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out),
              transform 600ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1023px) {
  [data-reveal] {
    transform: translateY(12px);
    transition-duration: 400ms;
  }
}

/* Per-word reveal (split-text) */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out);
  transition-delay: calc(var(--word-i, 0) * 40ms);
}

.is-visible .split-word,
.split-text.is-visible .split-word {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1023px) {
  .split-word {
    transition-delay: calc(var(--word-i, 0) * 20ms);
  }
}

/* ============================================================
   Hero Intro Stagger
   ============================================================ */
.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__ctas,
.hero__trust {
  opacity: 0;
  transform: translateY(16px);
  animation: hero-in 700ms var(--ease-out) forwards;
}

.hero__eyebrow { animation-delay: 100ms; }
.hero__title   { animation-delay: 200ms; }
.hero__sub     { animation-delay: 380ms; }
.hero__ctas    { animation-delay: 460ms; }
.hero__trust   { animation-delay: 540ms; }

@keyframes hero-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero image reveal via clip-path */
.hero__media {
  clip-path: inset(0 0 100% 0);
  animation: media-reveal 900ms var(--ease-out) 200ms forwards;
}

@keyframes media-reveal {
  to { clip-path: inset(0 0 0% 0); }
}

/* ============================================================
   Schnörkel SVG draw + idle wiggle
   ============================================================ */
.accent-script svg.underline path {
  animation: draw-line 1000ms var(--ease-out) 900ms forwards;
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* Idle wiggle entfernt — bei kursiver Serif wirkt Bewegung unruhig.
   Die SVG-Unterstreichung wird weiterhin animiert (draw-line oben). */

/* ============================================================
   Initial wipe (once per session)
   ============================================================ */
.page-wipe {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  z-index: 9999;
  pointer-events: none;
  transform-origin: right center;
  animation: wipe-out 400ms var(--ease-out) forwards;
}

@keyframes wipe-out {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* ============================================================
   Touch tap highlight (replaces grey default)
   ============================================================ */
a, button, [role="button"], .btn, summary {
  -webkit-tap-highlight-color: rgba(29, 78, 216, 0.12);
}

/* ============================================================
   Reduced motion — collapse animations to crossfades
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .split-word,
  .hero__eyebrow,
  .hero__title,
  .hero__sub,
  .hero__ctas,
  .hero__trust {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 150ms linear !important;
    animation: none !important;
  }

  .hero__media {
    clip-path: none !important;
    animation: none !important;
  }

  .accent-script svg.underline path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .page-wipe { display: none !important; }
}