/* assets/css/animations.css
   Sanfte Scroll- und Lade-Animationen.
   Respektiert prefers-reduced-motion. */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.3, 0.64, 1);
  --anim-duration: 0.7s;
  --anim-stagger: 80ms;
}

/* ========================================================================
   Reduzierte Bewegung — wer das einstellt, bekommt keine Animationen
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================================================
   Scroll-Reveal — einzelne Elemente
   ======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--anim-duration) var(--ease-out-soft),
    transform var(--anim-duration) var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal von rechts (für Über-uns-Bild) */
.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition:
    opacity var(--anim-duration) var(--ease-out-soft),
    transform var(--anim-duration) var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ========================================================================
   Reveal-Stagger — Container animiert seine Kinder gestaffelt
   ======================================================================== */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease-out-soft),
    transform 0.6s var(--ease-out-soft);
  will-change: opacity, transform;
}
.reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-revealed > *:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger.is-revealed > *:nth-child(2)  { transition-delay: calc(var(--anim-stagger) * 1); }
.reveal-stagger.is-revealed > *:nth-child(3)  { transition-delay: calc(var(--anim-stagger) * 2); }
.reveal-stagger.is-revealed > *:nth-child(4)  { transition-delay: calc(var(--anim-stagger) * 3); }
.reveal-stagger.is-revealed > *:nth-child(5)  { transition-delay: calc(var(--anim-stagger) * 4); }
.reveal-stagger.is-revealed > *:nth-child(6)  { transition-delay: calc(var(--anim-stagger) * 5); }
.reveal-stagger.is-revealed > *:nth-child(7)  { transition-delay: calc(var(--anim-stagger) * 6); }
.reveal-stagger.is-revealed > *:nth-child(8)  { transition-delay: calc(var(--anim-stagger) * 7); }

/* ========================================================================
   Hero — kommt nacheinander beim Page-Load
   ======================================================================== */
.hero-text > * {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeUp 0.7s var(--ease-out-soft) forwards;
}
.hero-text > .eyebrow      { animation-delay: 0.10s; }
.hero-text > h1            { animation-delay: 0.20s; }
.hero-text > .hero-lead    { animation-delay: 0.32s; }
.hero-text > .hero-actions { animation-delay: 0.44s; }
.hero-text > .hero-trust   { animation-delay: 0.56s; }

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

.hero-image {
  opacity: 0;
  transform: scale(0.96);
  animation: heroImageIn 1.1s var(--ease-out-soft) 0.18s forwards;
}
@keyframes heroImageIn {
  to { opacity: 1; transform: scale(1); }
}

/* ========================================================================
   Slideshow Ken-Burns — jeder Slide bekommt seinen eigenen sanften
   Zoom-/Pan-Move, sodass die Bilder lebendig wirken statt statisch.
   Wird nur ausgeführt, wenn prefers-reduced-motion: no-preference.
   ======================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active {
    animation: kenBurnsZoomIn 7.5s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  }
  /* Variation pro Slide — gibt Rhythmus und vermeidet Eintönigkeit */
  .hero-slide:nth-child(1).is-active {
    animation-name: kenBurnsZoomInRight;
  }
  .hero-slide:nth-child(2).is-active {
    animation-name: kenBurnsZoomOut;
  }
  .hero-slide:nth-child(3).is-active {
    animation-name: kenBurnsZoomInLeft;
  }
  .hero-slide:nth-child(4).is-active {
    animation-name: kenBurnsZoomInUp;
  }

  /* Slide 1: leichter Zoom rein nach rechts oben (Maximilian sägt) */
  @keyframes kenBurnsZoomInRight {
    from { transform: scale(1.0) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1.5%, -1%); }
  }
  /* Slide 2: aus dem Holzunterstand etwas rauszoomen — gibt Ruhe */
  @keyframes kenBurnsZoomOut {
    from { transform: scale(1.09) translate(0.5%, 0); }
    to   { transform: scale(1.0) translate(0, 0); }
  }
  /* Slide 3: leichter Zoom rein nach links unten (Stefanie + LKW) */
  @keyframes kenBurnsZoomInLeft {
    from { transform: scale(1.0) translate(0, 0); }
    to   { transform: scale(1.07) translate(1.5%, 1%); }
  }
  /* Slide 4: Zoom rein, leicht hoch (Kaminfeuer wird größer) */
  @keyframes kenBurnsZoomInUp {
    from { transform: scale(1.0) translate(0, 1%); }
    to   { transform: scale(1.09) translate(0, -1%); }
  }
}

/* ========================================================================
   Header — verdichtet sich beim Scrollen
   ======================================================================== */
.site-header {
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.site-header .header-inner,
.site-header .brand img {
  transition:
    height 0.3s var(--ease-out-soft);
}
.site-header.is-scrolled {
  background: rgba(250, 246, 240, 0.98);
  box-shadow: 0 4px 24px rgba(45, 40, 23, 0.08);
  border-bottom-color: transparent;
}
.site-header.is-scrolled .header-inner {
  height: 88px;
}
.site-header.is-scrolled .brand img {
  height: 76px;
}

/* ========================================================================
   Karten — Hover-Polish
   ======================================================================== */
.sortiment-card .card-img img,
.ueber-image img {
  transition: transform 0.6s var(--ease-out-soft);
  will-change: transform;
}
.sortiment-card:hover .card-img img {
  transform: scale(1.04);
}

/* ========================================================================
   Buttons — Pulse-Akzent beim Hover des Haupt-CTAs
   ======================================================================== */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 20%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn-primary:hover::before {
  left: 120%;
}

/* ========================================================================
   FAQ — sanftes Aufklappen der Antwort
   ======================================================================== */
.faq-item summary::after {
  transition: transform 0.25s var(--ease-out-soft);
}
.faq-item[open] summary::after {
  /* + → − Drehung als Ergänzung */
  transform: rotate(180deg);
}