/* Mobile navigation glass surface, adapted from the React Bits GlassSurface idea. */
@media (max-width: 720px) {
  .glass-surface.mobile-section-nav {
    border-color: rgba(255, 255, 255, 0.18);
    background:
      linear-gradient(112deg, rgba(38, 43, 48, 0.7), rgba(10, 13, 16, 0.64) 52%, rgba(48, 39, 25, 0.68));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(255, 255, 255, 0.055),
      inset 0 8px 22px rgba(255, 255, 255, 0.025),
      0 20px 52px rgba(0, 0, 0, 0.48),
      0 4px 14px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(22px) saturate(155%) brightness(0.94);
    -webkit-backdrop-filter: blur(22px) saturate(155%) brightness(0.94);
  }

  .glass-surface.mobile-section-nav::before,
  .glass-surface.mobile-section-nav::after {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    content: "";
  }

  .glass-surface.mobile-section-nav::before {
    z-index: 0;
    inset: 1px;
    background:
      radial-gradient(90% 72% at 14% -8%, rgba(255, 255, 255, 0.18), transparent 62%),
      radial-gradient(72% 110% at 96% 118%, rgba(226, 192, 122, 0.12), transparent 68%);
    mix-blend-mode: screen;
  }

  .glass-surface.mobile-section-nav::after {
    z-index: 3;
    inset: 0;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.025),
      inset 10px 0 20px rgba(255, 255, 255, 0.018),
      inset -10px 0 22px rgba(226, 192, 122, 0.025);
  }

  .glass-surface.mobile-section-nav .mobile-section-nav-indicator {
    z-index: 1;
    border-color: rgba(226, 192, 122, 0.44);
    background:
      radial-gradient(circle at 34% 0, rgba(255, 255, 255, 0.22), transparent 44%),
      linear-gradient(145deg, rgba(226, 192, 122, 0.22), rgba(226, 192, 122, 0.075));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.11),
      0 7px 19px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px) saturate(135%);
    -webkit-backdrop-filter: blur(8px) saturate(135%);
  }

  .glass-surface.mobile-section-nav button {
    z-index: 2;
  }

  html[data-theme="light"] .glass-surface.mobile-section-nav {
    border-color: rgba(74, 66, 51, 0.18);
    background:
      linear-gradient(112deg, rgba(255, 255, 255, 0.76), rgba(242, 239, 233, 0.68) 52%, rgba(235, 224, 201, 0.7));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.86),
      inset 0 -1px 0 rgba(67, 57, 39, 0.06),
      0 16px 42px rgba(35, 31, 24, 0.2),
      0 3px 10px rgba(35, 31, 24, 0.09);
    backdrop-filter: blur(22px) saturate(135%) brightness(1.04);
    -webkit-backdrop-filter: blur(22px) saturate(135%) brightness(1.04);
  }

  html[data-theme="light"] .glass-surface.mobile-section-nav::before {
    background:
      radial-gradient(90% 72% at 14% -8%, rgba(255, 255, 255, 0.88), transparent 62%),
      radial-gradient(72% 110% at 96% 118%, rgba(178, 126, 31, 0.1), transparent 68%);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 720px) {
    .glass-surface.mobile-section-nav {
      background: rgba(17, 21, 25, 0.98);
    }

    html[data-theme="light"] .glass-surface.mobile-section-nav {
      background: rgba(250, 249, 246, 0.98);
    }
  }
}

@media (prefers-reduced-transparency: reduce) and (max-width: 720px) {
  .glass-surface.mobile-section-nav {
    background: rgba(17, 21, 25, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  html[data-theme="light"] .glass-surface.mobile-section-nav {
    background: rgba(250, 249, 246, 0.98);
  }
}