/* Scroll entrance and page photos for the fork pages without the home reveal
 * (kontakt, orientierungshilfe, freebie, events, berater-werden, shop index,
 * product pages). Fork-owned, no JS, no dependency.
 *
 * Same mechanism as sections.css "Level reveal" (.mv-section[data-motion=reveal]):
 * a CSS animation on a view timeline. The state is a function of scroll
 * position, so nothing can stay hidden after a jump (anchor, page end, resize).
 * A browser without animation-timeline matches no rule here and simply shows
 * the content; so does reduced motion and print. The keyframes have only a
 * `from` step with fill-mode `backwards` and move the `translate` property, so
 * hover transforms and a block's own opacity/transform keep working and the
 * animation stops applying once the entrance is over.
 *
 * Opt in per element with [data-enter]; [data-enter-group] staggers its direct
 * children through offset ranges (no delays, no timers). Generated pages (shop
 * index, product pages) are targeted by selector below, so the generator
 * markup stays unchanged.
 *
 * Caveat (see sections.css): if an ancestor has an overflow other than visible,
 * the view timeline binds to that non-scrolling ancestor, nothing animates and
 * the content stays visible. */
@keyframes oele-enter {
  from { opacity: 0; translate: 0 var(--oele-enter-dist, 18px); }
}

@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-enter],
    [data-enter-group] > *,
    .shop-pdp-details,
    .shop-reviews,
    .shop-crosssell,
    .shop-pdp .shop-head,
    .shop-wrap > .shop-head,
    .shop-wrap > .shop-grid:not([data-shop-loadmore]) {
      animation: oele-enter linear backwards;
      animation-timing-function: cubic-bezier(.22, 1, .36, 1);
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    [data-enter-group] > :nth-child(2) { animation-range: entry 6% entry 51%; }
    [data-enter-group] > :nth-child(3) { animation-range: entry 12% entry 57%; }
    [data-enter-group] > :nth-child(n+4) { animation-range: entry 16% entry 61%; }
  }
}

/* Page photo (kontakt, orientierungshilfe, freebie): rounded figure with the
 * small AI badge at the bottom left (Olli 05.11.2026, same look as
 * .berater-ai-subtle in berater.css). */
.oele-photo { position: relative; margin: 1.5rem 0 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2, 0 6px 20px rgba(10, 37, 64, .12)); background: var(--panel-a, #eef3f2); line-height: 0; }
.oele-photo picture, .oele-photo img { display: block; width: 100%; height: auto; }
.oele-photo .ai-badge { top: auto; right: auto; bottom: 8px; left: 8px; font-size: .8125rem; padding: 2px 7px; opacity: .7; line-height: 1.3; }
.freebie-form .oele-photo { margin: 0 0 1.5rem; }
.freebie-form .oele-photo img { aspect-ratio: 16 / 9; object-fit: cover; }