/* Auftritt und Übergänge der Produktseiten.
   Alles hier ist Zugabe: Ohne diese Datei, bei reduzierter Bewegung und in
   Browsern ohne scrollgesteuerte Animationen steht jeder Inhalt ruhig da. */

/* Naht zwischen Seitenkopf und Reise: dieselbe Kulisse läuft weiter. */
.detail-page[data-product-journey] .detail-hero { border-bottom: 0; }

/* Kapitelanzeige unter dem Spielbild: Zähler, Strecke mit Kapitelmarken, Scrollhinweis. */
.journey-film-meter { display: flex; align-items: center; justify-content: center; gap: .9rem; width: min(100%, 34rem); margin: .5rem auto 0; color: var(--detail-ink); font: 700 .8rem/1 var(--heading); letter-spacing: .08em; }
.journey-film-count { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--detail-accent); }
.journey-film-progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 6rem;
  height: 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--detail-ink) 20%, transparent);
}
.journey-film-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: var(--detail-accent);
  clip-path: inset(0 calc((1 - var(--clip-progress, 0)) * 100%) 0 0 round 5px);
}
/* Kapitelmarken: kleine Lücken in der Strecke. */
.journey-film-progress i {
  position: absolute;
  top: -2px;
  left: calc(var(--at) * 100% - 2px);
  width: 4px;
  height: 9px;
  background: var(--detail-bg);
}
.journey-film-hint { text-transform: uppercase; opacity: .75; transition: opacity .3s ease; }
.journey-film-hint b { display: inline-block; color: var(--detail-accent); }
.is-last-chapter .journey-film-hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes journey-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
  .journey-film-hint b { animation: journey-nudge 1.6s ease-in-out infinite; }
}
.journey-film:not(.has-scroll-clip) .journey-film-meter { display: none; }
.journey-film:not(.has-scroll-clip) .journey-film-progress { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Auftritt beim Laden: Kulisse kommt näher, Text setzt sich. */
  @keyframes la-art-in { from { opacity: .22; transform: scale(1.07); } to { opacity: .92; transform: none; } }
  @keyframes la-rise { from { opacity: .01; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .detail-art { animation: la-art-in 1.5s cubic-bezier(.2, .7, .2, 1) both; }
  .detail-intro > * { animation: la-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .detail-intro > :nth-child(1) { animation-delay: .05s; }
  .detail-intro > :nth-child(2) { animation-delay: .12s; }
  .detail-intro > :nth-child(3) { animation-delay: .2s; }
  .detail-intro > :nth-child(4) { animation-delay: .27s; }
  .detail-intro > :nth-child(n + 5) { animation-delay: .34s; }
  .detail-preview { animation: la-rise .9s cubic-bezier(.2, .7, .2, 1) .3s both; }

  /* Wechsel der Bildunterschrift im Scrollfilm. */
  @keyframes la-caption { from { opacity: .01; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .journey-film-figure figcaption .is-changing { animation: la-caption .32s ease-out both; }

  @supports (animation-timeline: view()) {
    /* Beim Verlassen des Kopfs zieht die Kulisse langsamer mit und der Text tritt zurück.
       Die Kulisse behält ihren Auftritt beim Laden: Der läuft über transform,
       das Mitziehen über translate. */
    @keyframes la-art-out { to { translate: 0 14%; } }
    @keyframes la-intro-out { to { opacity: .15; transform: translateY(-24px); } }
    .detail-hero { view-timeline: --la-hero block; }
    .detail-art {
      animation: la-art-in 1.5s cubic-bezier(.2, .7, .2, 1) both, la-art-out linear both;
      animation-timeline: auto, --la-hero;
      animation-range: normal, exit 0% exit 100%;
    }
    .detail-hero-layout {
      animation: la-intro-out linear both;
      animation-timeline: --la-hero;
      animation-range: exit 15% exit 90%;
    }

    /* Abschnitte setzen sich, wenn sie ins Bild kommen. Feste Strecke statt
       Anteil, damit auch lange Abschnitte nach wenigen Zeilen voll lesbar sind. */
    @keyframes la-settle { from { opacity: .25; transform: translateY(30px); } to { opacity: 1; transform: none; } }
    .journey-heading > *,
    .detail-sheet,
    .detail-inside > h2,
    .detail-inside > .detail-kicker,
    .inside-moments,
    .inside-feature,
    .detail-purchase > *,
    .detail-finish {
      animation: la-settle linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 220px;
    }
    /* Abschnittsüberschriften steigen hinter einer Kante hervor. */
    @keyframes la-headline { from { clip-path: inset(0 0 100% 0); transform: translateY(.5em); opacity: 1; } to { clip-path: inset(-.2em -.1em -.25em -.1em); transform: none; opacity: 1; } }
    .journey-heading > h2,
    .detail-inside > h2,
    .detail-purchase > h2 { animation-name: la-headline; animation-range: entry 10px entry 260px; }
    /* Das Arbeitsblatt wächst ins Bild. */
    @keyframes la-screen-in { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: none; } }
    .detail-material img {
      animation: la-screen-in linear both;
      animation-timeline: view();
      animation-range: entry 0px entry 320px;
    }
  }
}