/*
 * Progressive enhancement, served as a plain file.
 *
 * These rules use CSS that is newer than the build tool's parser, so they
 * live outside the bundle rather than being mangled by it. Everything here is
 * optional: where it is unsupported the site simply behaves as it did before.
 */

/* ------------------------------------------------------------------ */
/* 1. One highlight that slides between the acts                       */
/*                                                                     */
/* The hovered item lends its name and its size to a single pill via    */
/* anchor positioning, so instead of four separate hover states there   */
/* is one object following where you point.                            */
/* ------------------------------------------------------------------ */

@supports (anchor-name: --a) {
  .act-nav-list {
    position: relative;
  }

  .act-nav-list li:has(.act-nav-item:is(:hover, :focus-visible)) {
    anchor-name: --act-hovered;
  }

  .act-nav-list::before {
    content: "";
    position: absolute;
    position-anchor: --act-hovered;
    top: anchor(top);
    left: anchor(left);
    width: anchor-size(width);
    height: anchor-size(height);
    border-radius: 999px;
    background: color-mix(in oklch, var(--foreground) 7%, transparent);
    opacity: 0;
    pointer-events: none;
    transition:
      top 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      left 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .act-nav-list:has(.act-nav-item:is(:hover, :focus-visible))::before {
    opacity: 1;
  }

  /* the pill is the highlight now, so the items stop drawing their own */
  .act-nav-item:hover {
    background: transparent;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Sizing to content instead of to a number I guessed               */
/*                                                                     */
/* The panel otherwise animates max-width to a figure picked by eye     */
/* that would be wrong the moment an act title got longer.              */
/* interpolate-size lets width: auto actually interpolate, so the panel */
/* opens to exactly the size of its contents at any breakpoint.        */
/* ------------------------------------------------------------------ */

/* Desktop only. On a phone the panel is positioned beneath the pill and
   animates opacity and a few pixels of travel, never its size, so there is
   nothing here for it to do. */
@supports (interpolate-size: allow-keywords) {
  @media (min-width: 641px) {
    :root {
      interpolate-size: allow-keywords;
    }

    .act-nav-shell .act-nav {
      max-width: none;
      width: 0;
      transition:
        width 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.16s,
        opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.16s;
    }

    .act-nav-wrap .act-nav-shell.is-first .act-nav {
      animation-name: nav-peek-auto;
    }

    .act-nav-shell:hover .act-nav,
    .act-nav-shell:focus-within .act-nav,
    .act-nav-toggle:checked ~ .act-nav-shell .act-nav {
      max-width: none;
      width: auto;
      transition-delay: 0s;
    }

    /* matches the peek rule's specificity and comes after it: hover wins */
    .act-nav-wrap .act-nav-shell:hover .act-nav,
    .act-nav-wrap .act-nav-shell:focus-within .act-nav,
    .act-nav-toggle:checked ~ .act-nav-shell.act-nav-shell .act-nav {
      animation: none;
    }

    @keyframes nav-peek-auto {
      0%,
      12% {
        width: 0;
        opacity: 0;
      }
      22%,
      72% {
        width: auto;
        opacity: 1;
      }
      100% {
        width: 0;
        opacity: 0;
      }
    }
  }
}