/* =========================================================
   HAPPY PETS — SMOOTH MENU (css/menu.css)
   Load AFTER style-desktop / tablet / mobile css.
   Replaces the instant display:none → flex pop with a
   circular reveal that grows out of the menu button,
   staggered links and a body scroll-lock.
   ========================================================= */

@media (max-width: 1024px) {

  /* Overlay — always rendered, hidden with clip-path instead of display:none */
  html body header nav#navbar {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 5rem 1.5rem 3rem !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.6rem !important;
    background: var(--black, #1a1a1a) !important;
    z-index: 1001 !important;

    --mx: calc(100% - 48px);
    --my: 44px;
    clip-path: circle(0px at var(--mx) var(--my));
    -webkit-clip-path: circle(0px at var(--mx) var(--my));
    visibility: hidden;
    pointer-events: none;
    transition:
      clip-path .55s cubic-bezier(.77, 0, .18, 1),
      -webkit-clip-path .55s cubic-bezier(.77, 0, .18, 1),
      visibility 0s linear .55s;
    will-change: clip-path;
  }

  html body header nav#navbar.show {
    clip-path: circle(150% at var(--mx) var(--my));
    -webkit-clip-path: circle(150% at var(--mx) var(--my));
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path .7s cubic-bezier(.77, 0, .18, 1),
      -webkit-clip-path .7s cubic-bezier(.77, 0, .18, 1),
      visibility 0s;
  }

  /* Links — fade + rise in one after another */
  html body header nav#navbar a {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
    color: var(--gold, #d4af37) !important;
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity .3s ease,
      transform .35s cubic-bezier(.2, .8, .2, 1),
      color .3s ease;
    transition-delay: 0s;
  }
  html body header nav#navbar.show a {
    opacity: 1;
    transform: none;
    transition-delay: calc(.22s + var(--i, 0) * .055s);
  }
  html body header nav#navbar a:active { color: #fff !important; }

  /* Close (X) button — spins in */
  html body header nav#navbar .close-menu {
    position: absolute !important;
    top: 28px !important;
    right: 26px !important;
    width: 48px; height: 48px;
    display: grid !important;
    place-items: center;
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, .45) !important;
    border-radius: 999px !important;
    color: var(--gold, #d4af37) !important;
    font-size: 1.3rem !important;
    cursor: pointer;
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
    transition: opacity .25s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
  }
  html body header nav#navbar.show .close-menu {
    opacity: 1;
    transform: none;
    transition-delay: .25s;
  }

  /* Hamburger lines tuck away while open */
  .menu-toggle svg line {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
    transform-origin: 12px 12px;
  }
  html.menu-open .menu-toggle svg line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  html.menu-open .menu-toggle svg line:nth-child(2) { opacity: 0; }
  html.menu-open .menu-toggle svg line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  /* Stop the page scrolling behind the open menu */
  html.menu-open,
  html.menu-open body { overflow: hidden !important; }
}

/* Reduced-motion: simple fade instead of the circle wipe */
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  html body header nav#navbar,
  html body header nav#navbar.show {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: opacity .2s ease, visibility 0s linear .2s !important;
    opacity: 0;
  }
  html body header nav#navbar.show { opacity: 1; transition: opacity .2s ease !important; }
  html body header nav#navbar a,
  html body header nav#navbar .close-menu { transform: none !important; transition-delay: 0s !important; }
}