/* Motion for both public pages. Everything here is decoration; reduced-motion turns it all off. */
:root { --ease-out: cubic-bezier(.22, .8, .24, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); interpolate-size: allow-keywords; }

/* map ⇄ details page transition */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease-out); }
html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: vt-out-left; }
html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: vt-in-right; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left  { to   { transform: translateX(-18%); opacity: 0; } }
@keyframes vt-in-right  { from { transform: translateX(22%);  opacity: 0; } }
@keyframes vt-out-right { to   { transform: translateX(22%);  opacity: 0; } }
@keyframes vt-in-left   { from { transform: translateX(-18%); opacity: 0; } }
.dtop, .top { view-transition-name: topbar; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes up   { from { transform: translateY(100%); } }
@keyframes pop  { from { opacity: 0; transform: scale(.6); } }
@keyframes fade { from { opacity: 0; } }

/* map page */
.marker .mk { animation: pop .45s var(--ease-spring) both; animation-delay: var(--d, 0ms); transition: transform .18s var(--ease-out); transform-origin: 50% 50%; }
.marker:hover .mk, .marker:focus-visible .mk { transform: scale(1.2); }
.pillicon .pill { animation: fade .4s ease both .3s; transition: background-color .15s; }
.pillicon:hover .pill { background: var(--panel); }
.sheet:not([hidden]) { animation: up .28s var(--ease-out) both; }
@media (min-width: 760px) { .sheet:not([hidden]) { animation: rise .22s var(--ease-out) both; } }
.listbtn { transition: background-color .15s, color .15s; }

/* details page */
.hero > * { animation: rise .4s var(--ease-out) both; }
.hero > :nth-child(2) { animation-delay: 40ms; } .hero > :nth-child(3) { animation-delay: 80ms; } .hero > :nth-child(4) { animation-delay: 120ms; }
.tile { animation: rise .45s var(--ease-out) both; }
.tile:nth-child(1) { animation-delay: 120ms; } .tile:nth-child(2) { animation-delay: 170ms; } .tile:nth-child(3) { animation-delay: 220ms; }
.row > summary { transition: background-color .15s; }

/* smooth expand */
details::details-content { block-size: 0; overflow: clip; transition: block-size .26s var(--ease-out), content-visibility .26s allow-discrete; }
details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; transition: none !important;
  }
  @view-transition { navigation: none; }
}