/* Mein Dossenheim motion system — additive, compositor-friendly motion only. */
:root {
  --motion-in: cubic-bezier(.22, .61, .36, 1);
  --motion-out: cubic-bezier(.4, 0, 1, 1);
  --motion-micro: 140ms;
  --motion-control: 180ms;
  --motion-enter: 460ms;
  --motion-hero: 620ms;
}

@keyframes motion-reveal {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-hero-reveal {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.motion-ready [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: transform, opacity;
}

html.motion-ready [data-reveal].is-revealed {
  animation: motion-reveal var(--motion-enter) var(--motion-in) both;
  animation-delay: var(--motion-delay, 0ms);
  will-change: auto;
}

html.motion-ready [data-reveal="hero"] { transform: translate3d(0, 16px, 0); }
html.motion-ready [data-reveal="hero"].is-revealed {
  animation-name: motion-hero-reveal;
  animation-duration: var(--motion-hero);
}

.hero-link,
.filter-button,
.contact-button,
.detail-link,
.orientation-markers a,
.rhythm-tile,
.subpage-card,
#site-nav a,
#mobile-nav-toggle {
  transition-timing-function: var(--motion-in);
}

.hero-link:hover,
.hero-link:focus-visible,
.filter-button:hover,
.filter-button:focus-visible,
.contact-button:hover,
.contact-button:focus-visible,
.detail-link:hover,
.detail-link:focus-visible,
.orientation-markers a:hover,
.orientation-markers a:focus-visible {
  transform: translateY(-2px);
}

.rhythm-tile,
.subpage-card,
.restaurant,
.bakery,
.cafe,
.venue,
.hairdresser {
  transition-duration: var(--motion-control);
  transition-timing-function: var(--motion-in);
}

.is-current-venue {
  animation: motion-venue-arrival 900ms var(--motion-in) both;
}
@keyframes motion-venue-arrival {
  0% { outline-color: transparent; outline-offset: 0; }
  35% { outline: 2px solid var(--fg-clay, #e26938); outline-offset: 7px; }
  100% { outline-color: transparent; outline-offset: 0; }
}

@media (max-width: 900px) {
  html.motion-ready #site-nav {
    display: flex;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -8px, 0);
    transition: opacity 220ms var(--motion-in), transform 220ms var(--motion-in), visibility 0s linear 220ms;
  }
  html.motion-ready #fixed-card.menu-open #site-nav {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }
  html.motion-ready #site-nav a { opacity: 0; transform: translate3d(0, -5px, 0); }
  html.motion-ready #fixed-card.menu-open #site-nav a {
    animation: motion-menu-link 220ms var(--motion-in) both;
    animation-delay: calc(var(--motion-link-index, 0) * 35ms + 45ms);
  }
  @keyframes motion-menu-link {
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 150ms var(--motion-out) both motion-page-out; }
  ::view-transition-new(root) { animation: 260ms var(--motion-in) both motion-page-in; }
  @keyframes motion-page-out { to { opacity: 0; } }
  @keyframes motion-page-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal],
  html.motion-ready [data-reveal].is-revealed {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .is-current-venue { animation: none !important; }
  @view-transition { navigation: none; }
}