/* Motion follows the existing green brand and the four service colours. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }

/* Native page transitions keep the surrounding navigation and background still. */
@view-transition { navigation: auto; }
body > main { view-transition-name: page-content; animation: none; }
::view-transition-group(page-content) { animation-duration: 460ms; animation-timing-function: var(--motion-ease); }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(site-navigation), ::view-transition-new(site-navigation) { animation: none; }
::view-transition-old(page-content) { animation: content-leave 180ms ease-in both; }
::view-transition-new(page-content) { animation: content-enter 460ms var(--motion-ease) both; }
@keyframes content-leave {
  to { opacity: 0; transform: translateY(-10px) scale(.99); filter: blur(2px); }
}
@keyframes content-enter {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.page-entry-fallback body > main { animation: none; }

/* A soot-textured curtain with our existing top-hat icon sweeps the page clean.
   It never captures clicks, obscures the navigation or changes document layout. */
.page-sweep {
  position: fixed; inset: 0 0 0 var(--sidebar, 264px); z-index: 1000;
  pointer-events: none; contain: layout paint; box-sizing: border-box;
  background: url("cursor-schornsteinfeger.svg") center / 72px 72px no-repeat,
    linear-gradient(#080c08aa, #080c08dd), url("soot-surface.webp") center / cover;
  border-bottom: 2px solid #ffbb79;
  box-shadow: 0 6px 26px #ffbb7926;
}
.page-sweep-native { view-transition-name: chimney-sweep; }
.page-sweep-entry { animation: sweep-clean 700ms cubic-bezier(.65, 0, .2, 1) both; }
::view-transition-group(root) { z-index: 0; }
::view-transition-group(page-content) { z-index: 1; }
::view-transition-group(chimney-sweep) { z-index: 2; animation: none; }
::view-transition-group(site-navigation) { z-index: 3; }
::view-transition-old(chimney-sweep) { display: none; }
::view-transition-new(chimney-sweep) { animation: sweep-clean 700ms cubic-bezier(.65, 0, .2, 1) both; mix-blend-mode: normal; }
.chimney-sweeping::view-transition-old(page-content) { animation: content-leave 120ms ease-in both; }
.chimney-sweeping::view-transition-new(page-content) { animation: sweep-content 700ms ease-out both; }
@keyframes sweep-clean {
  0%, 12% { transform: translateY(0); }
  100% { transform: translateY(-105%); }
}
@keyframes sweep-content {
  from { opacity: .72; }
  to { opacity: 1; }
}
@media (max-width: 1000px) {
  .page-sweep { left: 0; top: var(--mobile-header-height, 148px); background-size: 56px 56px, auto, cover; }
}

/* The menu symbol changes into a close symbol without replacing its label. */
.nav-icon { position: relative; display: inline-block; width: 18px; height: 14px; margin-right: 8px; vertical-align: -1px; }
.nav-icon::before, .nav-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 260ms var(--motion-ease); }
.nav-icon::before { top: 3px; }
.nav-icon::after { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-icon::before { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-icon::after { transform: translateY(-3px) rotate(-45deg); }

/* Transform only discrete controls, never the map, forms or entire text areas. */
:is(.button, .overview-card, .header-check-link, .instagram-profile, .nav-toggle, .nav-close, .district-card-map-button, .finder-map-controls button, .news-topics a),
.site-header nav a, .sidebar-contact > a, .text-link {
  transition: transform 220ms var(--motion-ease), box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease, color 180ms ease;
}
a, summary { text-underline-offset: .22em; transition: color 180ms ease, text-decoration-color 180ms ease, text-underline-offset 180ms ease; }
.text-link { display: inline-flex; align-items: center; gap: 8px; }
main :is(input, select, textarea) { transition: border-color 180ms ease, box-shadow 180ms ease; }
main :is(input, select, textarea):focus-visible { border-color: var(--green); box-shadow: 0 0 0 3px #b0d95722; }
:is(a, button, summary):focus-visible { outline: 3px solid #d2ec97; outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .site-header nav a:hover { transform: translateX(3px) scale(1.01); box-shadow: inset 3px 0 0 var(--nav-accent, var(--green)), 0 4px 14px #0003; }
  .site-header nav a[aria-current="page"]:hover { background: var(--nav-active, #2a391f); }
  :is(.button, .header-check-link, .instagram-profile, .news-topics a):not(:disabled):not([aria-disabled="true"]):hover {
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 8px 24px #0005, 0 0 0 1px #b0d95770;
  }
  .overview-card:hover { transform: translateY(-5px) scale(1.018); box-shadow: 0 14px 30px #0006, 0 0 0 1px var(--service-accent); }
  .overview-card:hover h3 { color: var(--service-accent); }
  :is(.nav-toggle, .nav-close, .district-card-map-button, .finder-map-controls button):not(:disabled):not([aria-disabled="true"]):hover { transform: scale(1.04); }
  .sidebar-contact > a:hover, .text-link:hover { transform: translateX(3px); color: #d2ec97; }
  main a:not(.button):not(.overview-card):hover, footer a:hover, summary:hover { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.button, .overview-card, .nav-toggle, .nav-close, .header-check-link, .district-card-map-button, .finder-map-controls button):not(:disabled):not([aria-disabled="true"]):active { transform: scale(.98); transition-duration: 90ms; }
}

@media (max-width: 1000px) {
  .js .nav-panel {
    transform: translateX(-102%);
    opacity: 0;
    visibility: hidden;
    transition: transform 360ms var(--motion-ease), opacity 220ms ease, visibility 0s 360ms;
    box-shadow: 16px 0 48px #0005;
  }
  .js .nav-panel.open { transform: translateX(0); opacity: 1; visibility: visible; transition-delay: 0s; }
  .js .nav-panel .nav-group, .js .nav-panel .sidebar-contact {
    opacity: 0;
    transform: translateX(-12px);
    transition: transform 260ms var(--motion-ease), opacity 180ms ease;
  }
  .js .nav-panel.open .nav-group, .js .nav-panel.open .sidebar-contact { opacity: 1; transform: none; transition-delay: var(--menu-delay, 50ms); }
  .nav-group:nth-child(2) { --menu-delay: 85ms; }
  .nav-group:nth-child(3) { --menu-delay: 120ms; }
  .sidebar-contact { --menu-delay: 150ms; }
  .js .nav-scrim:not([hidden]) { animation: scrim-arrive 240ms ease both; backdrop-filter: blur(4px); }
  .page-swapping .nav-panel, .page-swapping .nav-panel * { transition: none; }
  @keyframes scrim-arrive { from { opacity: 0; } to { opacity: 1; } }
}

/* Accessibility: no zooming, sliding, blur or cursor particles when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js .nav-scrim:not([hidden]) { backdrop-filter: none; }
  .soot-trail, .page-sweep { display: none; }
}
@media (forced-colors: active) {
  .page-sweep { display: none; }
  :is(a, button, summary):focus-visible { outline-color: Highlight; }
  .site-header nav a:hover { outline: 1px solid Highlight; outline-offset: -1px; }
}