/* Runde 5. R4-Glas und Textfarben bleiben bestehen. Grundzustand immer lesbar. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero-stage { --p: 0; }
.home .book-band { overflow: clip; padding: 32px 30px 16px; }
.home .book-band-track { width: auto; padding: 22px 12px 28px; }
.home .book-band a { min-width: 0; }
.scroll-arrival { --p: 1; }
.home .category-card .scene-picture { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-stage { height: 180svh; padding-top: 22px; }
  .motion-ready .home .hero-stage .scene-hero {
    position: sticky;
    top: var(--sticky-top, 112px);
    min-height: calc(100svh - var(--sticky-top, 112px) - 16px);
    margin-block: 0;
    padding: clamp(40px, 6vh, 72px) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .motion-ready .hero-stage.scene-tall { height: auto; padding-bottom: 30px; }
  .motion-ready .home .scene-tall .scene-hero { position: relative; top: auto; }
  .motion-ready .home .hero-picture, .motion-ready .home .hero-video {
    height: 100%;
    transform: scale(calc(1 + var(--p) * .12));
    transform-origin: 58% 48%;
  }
  .motion-ready .hero-stage .scene-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at 58% 46%, rgb(255 227 169 / 80%), transparent 65%);
    opacity: calc(.08 + var(--p) * .42);
  }
  .motion-ready .hero-stage .scene-hero::before {
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 28%, var(--scene-surface));
    opacity: clamp(0, calc((var(--p) - .58) * 2.38), 1);
  }
  .motion-ready .home .scene-hero > .container {
    z-index: 1;
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-inner), var(--schatten);
    transform: translateY(calc(var(--p) * -32px));
    filter: blur(calc((1 - var(--p)) * .35px));
  }
  .motion-ready .scene-hero .video-toggle { z-index: 2; margin: 16px auto 0; }
  .motion-ready .book-band-track { transform: translateX(calc((var(--p) - .5) * -40px)); }
  .motion-ready .book-band a {
    --q: clamp(0, calc(var(--p) * 1.4 - var(--i) * .08), 1);
    transform: perspective(850px) translateY(calc((1 - var(--q)) * 18px)) rotateY(calc((var(--q) * 12deg - 6deg) * var(--direction)));
    transition: none;
  }
  .motion-ready .category-card {
    opacity: .86;
    transform: translateY(22px);
    transition: transform 650ms var(--ease-glass) var(--delay), opacity 650ms ease var(--delay);
  }
  .motion-ready .category-card.is-revealed { transform: none; opacity: 1; }
  .motion-ready .category-card .scene-picture img {
    transform: translateY(calc((var(--p) - .5) * -24px)) scale(1.08);
  }
  .motion-ready .scroll-arrival {
    transform: translateY(calc((1 - var(--p)) * 18px)) scale(calc(.97 + var(--p) * .03));
    filter: blur(calc((1 - var(--p)) * 6px));
    opacity: calc(.85 + var(--p) * .15);
  }
  .motion-ready .arrival-readable { --p: 1 !important; }
  .motion-ready .book-hero .detail-cover {
    transform: perspective(1000px) translateY(calc((var(--p) - .5) * -36px)) rotateY(calc(6deg - var(--p) * 12deg));
  }
  .motion-ready .book-hero-copy h1 { animation: title-arrival 850ms var(--ease-glass) both; }
  @keyframes title-arrival {
    from { transform: translateY(14px); opacity: .85; }
    to { transform: none; opacity: 1; }
  }
  /* Native Zeitleiste für Abschnittsübergänge; --p kommt sonst aus demselben rAF. */
  @supports (animation-timeline: view()) {
    .motion-native .scroll-arrival:not(.arrival-readable) {
      animation: section-progress linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 22%;
    }
    @keyframes section-progress { from { --p: 0; } to { --p: 1; } }
  }
  @media (max-width: 640px) {
    .motion-ready .hero-stage { height: 160svh; }
    .motion-ready .home .hero-stage .scene-hero { padding: 28px 0; }
    .motion-ready .home .scene-hero > .container { transform: translateY(calc(var(--p) * -12px)); filter: none; }
    .motion-ready .home .hero-picture, .motion-ready .home .hero-video { transform: scale(calc(1 + var(--p) * .06)); }
    .motion-ready .book-band-track { transform: translateX(calc((var(--p) - .5) * -12px)); }
    .motion-ready .book-band a { transform: perspective(850px) translateY(calc((1 - var(--q)) * 8px)) rotateY(calc((var(--q) * 4deg - 2deg) * var(--direction))); }
    .motion-ready .category-card .scene-picture img { transform: translateY(calc((var(--p) - .5) * -12px)) scale(1.05); }
    .motion-ready .scroll-arrival { filter: none; }
    .motion-ready .book-hero .detail-cover { transform: perspective(1000px) translateY(calc((var(--p) - .5) * -16px)) rotateY(calc(2deg - var(--p) * 4deg)); }
  }
}
/* Alle fünf Bücher auch auf dem Handy erreichbar, ohne horizontale Scrollfläche. */
@media (max-width: 640px) {
  .home .book-band { padding-inline: 18px; }
  .home .book-band-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .home .book-band a { width: auto; margin: 0; }
  .home .book-band .cover-art { min-height: 0; height: 100%; }
  .home .book-band .cover-title { font-size: .72rem; }
}
@media (max-width: 380px) {
  .home .book-band-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto !important; }
  .hero-stage .scene-hero { position: relative !important; top: auto !important; }
  .scroll-arrival, .category-card, .category-card .scene-picture img,
  .hero-picture, .hero-video, .scene-hero > .container, .book-band-track,
  .book-band a, .book-hero .detail-cover, .book-hero-copy h1 {
    transform: none !important; filter: none !important; opacity: 1 !important;
  }
}