/* fx.css · nav/takeover, a full-screen menu with a photograph for each link · owner: Lizzy East · all rights reserved */

/* Without script the menu is the plain list in the header, and the Menu button stays
   hidden. fx.js hides that list (the hidden attribute), shows the button, and opens
   the full-screen <dialog>: a real modal, so Escape closes it and focus comes back to
   the button. Pointing at or focusing a link brings its photograph forward. */
/* The brand never wraps, so swapping the list for the button moves nothing else. */
[data-fx~="nav/takeover"] nav > a { flex-shrink: 0; white-space: nowrap; }
[data-fx~="nav/takeover"] [data-fx-fallback] { flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 1.25rem; }
[data-fx~="nav/takeover"] [data-fx-fallback][hidden] { display: none; }
[data-fx~="nav/takeover"] [data-fx-menu-open]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
[data-fx~="nav/takeover"] [data-fx-menu-open]::before {
  content: "";
  width: 1rem;
  height: 0.5rem;
  border-block: 1.5px solid currentColor;
}

[data-fx~="nav/takeover"] dialog[data-fx-menu] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--fx-menu-bg, #111117);
  color: var(--fx-menu-ink, #f4f5f7);
}
[data-fx~="nav/takeover"] dialog[data-fx-menu][open] {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
}
[data-fx~="nav/takeover"] dialog[data-fx-menu]::backdrop { background: transparent; }
[data-fx~="nav/takeover"] [data-fx-menu] ul {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: clamp(5rem, 10vw, 7rem) clamp(1rem, 5vw, 4.5rem);
  list-style: none;
}
[data-fx~="nav/takeover"] [data-fx-menu] a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
[data-fx~="nav/takeover"] [data-fx-menu] a[href]:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
[data-fx~="nav/takeover"] [data-fx-menu-photos] { position: relative; grid-area: 1 / 2; overflow: clip; }
[data-fx~="nav/takeover"] [data-fx-menu-photos] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
[data-fx~="nav/takeover"] [data-fx-menu-photos] img.is-on { opacity: 1; }
[data-fx~="nav/takeover"] [data-fx-menu-close] {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid #ffffff;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.55);
  color: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
[data-fx~="nav/takeover"] [data-fx-menu-close]:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
html:has([data-fx~="nav/takeover"] dialog[data-fx-menu][open]) { overflow: hidden; }
@media (max-width: 760px) {
  [data-fx~="nav/takeover"] dialog[data-fx-menu][open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 38vh auto; }
  [data-fx~="nav/takeover"] [data-fx-menu-photos] { grid-area: 1 / 1; }
  [data-fx~="nav/takeover"] [data-fx-menu] ul { grid-area: 2 / 1; align-self: start; padding-block: 1.5rem 2.5rem; }
}

/* Motion: the menu wipes down, the links rise one after another, photographs cross-fade. */
html.fx-armed [data-fx~="nav/takeover"] dialog[data-fx-menu][open] { animation: fx-takeover-open 560ms var(--fx-ease) both; }
html.fx-armed [data-fx~="nav/takeover"] dialog[data-fx-menu][open] li {
  animation: fx-takeover-link 620ms var(--fx-ease) both;
  animation-delay: calc(160ms + var(--fx-n, 0) * 70ms);
}
html.fx-armed [data-fx~="nav/takeover"] [data-fx-menu-photos] img { transition: opacity 420ms var(--fx-ease), scale 900ms var(--fx-ease); scale: 1.06; }
html.fx-armed [data-fx~="nav/takeover"] [data-fx-menu-photos] img.is-on { scale: 1; }
[data-fx~="nav/takeover"] [data-fx-menu] li:nth-child(2) { --fx-n: 1; }
[data-fx~="nav/takeover"] [data-fx-menu] li:nth-child(3) { --fx-n: 2; }
[data-fx~="nav/takeover"] [data-fx-menu] li:nth-child(4) { --fx-n: 3; }
[data-fx~="nav/takeover"] [data-fx-menu] li:nth-child(5) { --fx-n: 4; }
[data-fx~="nav/takeover"] [data-fx-menu] li:nth-child(6) { --fx-n: 5; }
@keyframes fx-takeover-open {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes fx-takeover-link {
  from { opacity: 0; translate: 0 0.5em; }
  to { opacity: 1; translate: 0 0; }
}