/* M3 Expressive: kleine Ziele schnell, große Flächen mit Slow Spatial.
   Feder k=200, ζ=.8, m=1, über 540 ms abgetastet; kein Bézier-Bounce. */
:root {
  --kf-navigation-spring: linear(0, .0716, .2275, .406, .573, .7127, .8205, .8983, .9509, .9838, 1.0027, 1.0119, 1.015, 1.0147, 1.0126, 1.0099, 1.0073, 1.005, 1);
  --kf-page-enter-x: 24px;
}
:root[data-kf-navigation-direction="collection"] { --kf-page-enter-x: -16px; }
.kf-nav-sections { position: relative; isolation: isolate; }
.kf-nav-section { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; white-space: nowrap; border-radius: 22px; color: var(--kf-ink); }
.kf-nav-section::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; }
@media (hover: hover) { .kf-nav-section:hover::after { opacity: var(--kf-state-hover); } }
.kf-nav-section:active::after { opacity: var(--kf-state-pressed); }
.kf-nav-indicator { position: absolute; left: 0; top: 0; height: 44px; border: 1px solid var(--kf-line); border-radius: 22px; background: var(--kf-surface-soft); pointer-events: none; }

@keyframes kf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kf-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kf-page-in { from { transform: translateX(var(--kf-page-enter-x)); } to { transform: translateX(0); } }
@keyframes kf-detail-visual-in { from { transform: translateY(18px) scale(.985); } to { transform: none; } }
@keyframes kf-detail-copy-in { from { transform: translateY(16px); } to { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kf-top-navigation { view-transition-name: kf-navigation; }
  ::view-transition-group(kf-product-visual) {
    animation-duration: 540ms;
    animation-timing-function: var(--kf-navigation-spring);
    overflow: clip;
    border-radius: 22px;
  }
  ::view-transition-old(kf-product-visual), ::view-transition-new(kf-product-visual) {
    width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;
    animation-duration: 160ms;
  }
  ::view-transition-group(kf-navigation), ::view-transition-old(kf-navigation), ::view-transition-new(kf-navigation) {
    animation: none;
  }
  ::view-transition-old(root) { animation: kf-fade-out 140ms ease-out both; }
  ::view-transition-new(root) { animation: kf-fade-in 160ms ease-out both, kf-page-in 540ms var(--kf-navigation-spring) both; }
  /* Direkte Einstiege und Browser ohne native Seitenübergänge. */
  .kf-detail-visual { animation: kf-detail-visual-in 540ms var(--kf-navigation-spring) both; }
  .kf-detail-copy { animation: kf-fade-in 160ms ease-out both, kf-detail-copy-in 540ms var(--kf-navigation-spring) both; }
  :root[data-kf-transition="shared"] :is(.kf-detail-visual, .kf-detail-copy) { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}