/* The three bars a `details` opens its menu from — the app's navigation on a
   phone, and the marketing header's. The bars fold into a cross while the
   menu is open, off the `details` that holds them, so nothing has to be
   toggled in script. Zero specificity, so a block's own colour and padding
   win. */

@layer components {
  :where(.burger) {
    block-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    inline-size: 22px;
    justify-content: center;
  }

  :where(.burger__bar) {
    background: currentcolor;
    block-size: 2px;
    border-radius: 2px;
    display: block;
    inline-size: 100%;
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease;
  }

  /* Open → the cross that closes it. */
  :where(details[open] .burger__bar:nth-child(1)) {
    transform: translateY(8px) rotate(45deg);
  }

  :where(details[open] .burger__bar:nth-child(2)) {
    opacity: 0;
    transform: scaleX(0);
  }

  :where(details[open] .burger__bar:nth-child(3)) {
    transform: translateY(-8px) rotate(-45deg);
  }
}