/* ===================================================================
   Bewegung. Eine eigene Ebene über dem bestehenden Stylesheet:
   sie ändert kein Layout, keine Farben, keine Größen.
   Ohne JavaScript bleibt alles sichtbar und bedienbar.
   =================================================================== */

:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Beim Laden: der Hero baut sich auf ---------- */

.hero .eyebrow,
.hero h1,
.hero > div > p,
.hero .btn,
.hero .secondary,
.hero .availability {
  animation: m-rise 0.9s var(--m-ease) backwards;
}
.hero h1 {
  animation-delay: 0.08s;
}
.hero > div > p {
  animation-delay: 0.18s;
}
.hero .btn,
.hero .secondary {
  animation-delay: 0.26s;
}
.hero .availability {
  animation-delay: 0.34s;
}

.hero-art .cover {
  /* Nur opacity und die eigene translate-Eigenschaft: so bleibt das
     rotate() aus style.css unangetastet. */
  animation: m-cover 1.2s var(--m-ease) backwards;
}
.hero-art .plan {
  animation-delay: 0.2s;
}
.hero-art .steh {
  animation-delay: 0.34s;
}
.hero-art .seal {
  animation: m-fade 1s var(--m-ease) 0.6s backwards;
}

@keyframes m-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}
@keyframes m-cover {
  from {
    opacity: 0;
    translate: 0 34px;
  }
}
@keyframes m-fade {
  from {
    opacity: 0;
  }
}

/* Die Cover driften beim Scrollen minimal gegeneinander.
   translate ist eine eigene Eigenschaft und laesst transform in Ruhe. */
.hero-art .cover {
  will-change: translate;
}
.hero-art .plan {
  translate: 0 calc(var(--drift, 0) * -18px);
}
.hero-art .steh {
  translate: 0 calc(var(--drift, 0) * 14px);
}

/* ---------- Beim Scrollen: Abschnitte steigen auf ---------- */

[data-m] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--m-ease),
    transform 0.8s var(--m-ease);
}
[data-m].m-in {
  opacity: 1;
  transform: none;
}

/* ---------- Dauerhafte Bewegung ---------- */

/* Das Laufband wandert langsam. */
.strip {
  overflow: hidden;
}
.strip > span {
  display: inline-block;
  animation: m-pulse 3.4s ease-in-out infinite;
}
@keyframes m-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Rückmeldung auf Bedienelemente ---------- */

.btn,
.secondary,
.shop,
.nav-cta,
.book-card,
.feature,
.wald {
  transition:
    transform 0.4s var(--m-ease),
    box-shadow 0.4s var(--m-ease),
    background 0.35s var(--m-ease),
    color 0.35s var(--m-ease);
}
.btn:hover,
.nav-cta:hover {
  transform: translateY(-2px);
}
.btn:active,
.nav-cta:active {
  transform: translateY(0);
}
.shop:hover {
  transform: translateX(3px);
}

/* Die Cover heben sich beim Überfahren leicht. */
.book-card:hover .cover,
.wald:hover .wald-cover {
  translate: 0 -5px;
}
.book-card .cover,
.wald .wald-cover {
  transition: translate 0.55s var(--m-ease);
}

.portrait {
  transition: transform 1.1s var(--m-ease);
}
.author:hover .portrait {
  transform: scale(1.02);
}

/* Die Leseprobe fährt auf. */
dialog[open] {
  animation: m-dialog 0.45s var(--m-ease);
}
@keyframes m-dialog {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

/* ---------- Wer keine Bewegung möchte, bekommt keine ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero h1,
  .hero > div > p,
  .hero .btn,
  .hero .secondary,
  .hero .availability,
  .hero-art .cover,
  .hero-art .seal,
  .strip > span,
  dialog[open] {
    animation: none;
  }
  .hero-art .plan,
  .hero-art .steh {
    translate: none;
  }
  [data-m] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn,
  .secondary,
  .shop,
  .nav-cta,
  .book-card,
  .feature,
  .wald,
  .portrait,
  .book-card .cover,
  .wald .wald-cover {
    transition: none;
  }
}

/* ---------- Coverbild in der Fürstenfeld-Kachel ---------- */

.feature-cover {
  width: clamp(130px, 17vw, 190px);
  float: right;
  margin: 0 0 18px 24px;
  overflow: hidden;
  line-height: 0;
}
.feature-cover img {
  width: 100%;
  height: auto;
  display: block;
  transition: translate 0.55s var(--m-ease);
}
.feature:hover .feature-cover img {
  translate: 0 -5px;
}
@media (max-width: 640px) {
  .feature-cover {
    width: 115px;
    margin: 0 18px 14px 0;
    float: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-cover img {
    transition: none;
  }
}