/* ============================================================
   MIKROANIMATIONEN — Lebenszeit
   Prinzip: dezent, ruhig, "high class". Nur transform/opacity.
   Respektiert prefers-reduced-motion.
   ============================================================ */

/* --- Scroll-Reveal: Grundzustand (vor Sichtbarkeit) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--anim-distance));
  transition:
    opacity var(--anim-duration) var(--anim-ease),
    transform var(--anim-duration) var(--anim-ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Gestaffeltes Erscheinen (z. B. Hero-Zeilen, Kartenreihen) */
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

/* --- Hover-Lift: Karten --- */
.ll-card {
  transition:
    transform var(--anim-duration) var(--anim-ease),
    box-shadow var(--anim-duration) var(--anim-ease);
}
.ll-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(92, 18, 54, 0.14);
}

/* --- Hover: Buttons --- */
.ll-btn {
  transition:
    transform var(--anim-duration) var(--anim-ease),
    background-color var(--anim-duration) var(--anim-ease),
    box-shadow var(--anim-duration) var(--anim-ease);
}
.ll-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 8px 22px rgba(139, 34, 82, 0.28);
}

/* --- Header-Blur beim Scrollen (Klasse via reveal.js gesetzt) --- */
.ll-header {
  transition: background-color 0.4s var(--anim-ease),
              backdrop-filter 0.4s var(--anim-ease),
              padding 0.4s var(--anim-ease);
}
.ll-header.is-scrolled {
  background-color: rgba(250, 246, 240, 0.82);
  backdrop-filter: blur(10px);
}

/* --- Hero-Parallax (Transform via reveal.js, hier nur Smoothing) --- */
.ll-hero__media {
  will-change: transform;
}

/* --- Botanische Linie: Line-Draw --- */
.ll-divider path {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.4s var(--anim-ease);
}
.ll-divider.is-visible path {
  stroke-dashoffset: 0;
}

/* ============================================================
   REDUCED MOTION — alles ruhigstellen
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ll-card,
  .ll-btn,
  .ll-header,
  .ll-hero__media {
    transition: none !important;
  }
  .ll-card:hover,
  .ll-btn:hover {
    transform: none !important;
  }
  .ll-divider path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}