/* Reuse the active theme palette for both navigation layers. */
header.wp-block-template-part {
  --amf-nav-tail: 40px;
  --amf-nav-background:
    radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--amf-accent) 18%, transparent), transparent 28%),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--amf-accent-3) 18%, transparent), transparent 32%),
    linear-gradient(135deg, var(--amf-bg-1), var(--amf-bg-2) 52%, var(--amf-bg-3));
}
header.wp-block-template-part::before,
header.wp-block-template-part::after {
  content: "";
  position: absolute;
  inset-inline: calc((100% - 100vw) / 2);
  z-index: -1;
  pointer-events: none;
  background-image: var(--amf-nav-background);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 450ms ease;
}
header.wp-block-template-part::before {
  inset-block: 0;
}
header.wp-block-template-part::after {
  inset-block: 0 calc(-1 * var(--amf-nav-tail));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--amf-nav-tail)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--amf-nav-tail)), transparent);
}
header.wp-block-template-part.scrolled::before,
header.wp-block-template-part.scrolled::after {
  opacity: 1;
}
header.wp-block-template-part.scrolled::before {
  transition-duration: 0s;
}
@media (max-width: 781px) {
  header.wp-block-template-part { --amf-nav-tail: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  header.wp-block-template-part::before,
  header.wp-block-template-part::after { transition: none; }
}