/* Shared mobile menu surfaces; use the opaque site colour without blur support. */
@media (max-width: 767px) {
  :root {
    --mobile-menu-surface: var(--background, var(--case-bg, #f5f2f2));
    --mobile-menu-blur: 30px;
    --mobile-menu-outset: 8px;
    --mobile-menu-rgb: 245, 242, 242; /* Site background #f5f2f2. */
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root {
      --mobile-menu-surface: rgba(var(--mobile-menu-rgb), .2);
    }
  }

  .hero__nav,
  .portfolio-header {
    isolation: isolate;
  }

  /* One surface spans all twelve columns, behind both the burger and action links. */
  body.case-active .hero__nav::before,
  .hero__nav.is-open::before,
  .portfolio-header::before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -12px;
    left: 0;
    width: calc(100vw - 2 * var(--page-padding, var(--page-x, 20px)));
    z-index: -1;
    pointer-events: none;
    background: var(--mobile-menu-surface);
    -webkit-backdrop-filter: blur(var(--mobile-menu-blur));
    backdrop-filter: blur(var(--mobile-menu-blur));
  }

  body.case-active .hero__nav::before,
  .hero__nav.is-open::before,
  .portfolio-header::before {
    left: calc(-1 * var(--mobile-menu-outset));
    width: calc(100vw - 2 * var(--page-padding, var(--page-x, 20px)) + 2 * var(--mobile-menu-outset));
  }

  .case-nav {
    background: var(--mobile-menu-surface);
    -webkit-backdrop-filter: blur(var(--mobile-menu-blur));
    backdrop-filter: blur(var(--mobile-menu-blur));
  }
}

@media (max-width: 479px) {
  .hero__nav-toggle span,
  .portfolio-header__toggle span {
    transform-origin: center;
    transition: transform 300ms ease, opacity 300ms ease;
  }

  .hero__nav.is-open .hero__nav-toggle span:first-child,
  .portfolio-header.is-open .portfolio-header__toggle span:first-child {
    transform: translateY(8.25px) rotate(45deg);
  }

  .hero__nav.is-open .hero__nav-toggle span:nth-child(2),
  .portfolio-header.is-open .portfolio-header__toggle span:nth-child(2) {
    opacity: 0;
  }

  .hero__nav.is-open .hero__nav-toggle span:last-child,
  .portfolio-header.is-open .portfolio-header__toggle span:last-child {
    transform: translateY(-8.25px) rotate(-45deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__nav-toggle span,
    .portfolio-header__toggle span { transition-duration: 0ms; }
  }
}