:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@view-transition { navigation: auto; }
::view-transition { pointer-events: none; overflow: clip; }

.header { view-transition-name: site-header; }
::view-transition-group(root),
::view-transition-group(site-header) { animation: none; }
::view-transition-image-pair(root),
::view-transition-image-pair(site-header) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) {
  animation: page-out 160ms var(--ease-in-out) both;
}
::view-transition-new(root) {
  animation: page-in 340ms var(--ease-out) both;
}
::view-transition-old(site-header) { animation: header-out 160ms linear both; }
::view-transition-new(site-header) { animation: header-in 200ms linear both; }

@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes header-out { to { opacity: 0; } }
@keyframes header-in { from { opacity: 0; } to { opacity: 1; } }

html[data-arrival] .hero-copy h1,
html[data-arrival] .hero-bottom,
html[data-arrival] .hero-art { animation: none; }
html[data-arrival="fallback"] main { animation: page-in 340ms var(--ease-out) both; }

.menu-toggle span {
  transition: transform 220ms var(--ease-drawer);
  transform-origin: center;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.lightbox::backdrop { transition: opacity 170ms var(--ease-out); }
.lightbox[open]::backdrop { opacity: 1; }
.lightbox[data-closing]::backdrop { opacity: 0; }
@starting-style { .lightbox[open]::backdrop { opacity: 0; } }

@media(max-width:760px) {
  ::view-transition-new(root),
  html[data-arrival="fallback"] main { animation-duration: 280ms; }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  html[data-arrival="fallback"] main { animation: none; }
  .menu-toggle span, .lightbox::backdrop { transition: none; }
}