/*========================================================
  navbar
=========================================================*/
.oNav {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 9999;
  /* Theme tuning */
  --nav-fg: #fff;
  --nav-bg: #070707;
  /* Overlay darkness (更黑) */
  --overlay-black: 0.78; /* 0.65 ~ 0.85 */
  --overlay-blur: 10px;
  --overlay-sat: 120%;
  /* Panel haze / glow / particles */
  --fx-glow-opacity: 0.26; /* 微光 */
  --fx-haze-opacity: 0.72; /* 霧化(更黑靠這個) */
  --fx-vignette-opacity: 0.68; /* 暗角 */
  --fx-particles-opacity: 0.18; /* 粒子 */
  --fx-noise-opacity: 0.07; /* 噪點 */
  /* Layout */
  --bar-h: 88px;
  --pad-x: 24px;
}
/* ===== Top Bar ===== */
.oNav__bar {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pad-x);
  pointer-events: none;
}
.oNav__overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  background: radial-gradient(
      1200px 700px at 20% 0%,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      900px 600px at 85% 15%,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0) 55%
    ),
    rgba(0, 0, 0, var(--overlay-black));

  -webkit-backdrop-filter: blur(var(--overlay-blur))
    saturate(var(--overlay-sat));
  backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-sat));
}
.oNav__overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--fx-noise-opacity);
  background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0px,
      rgba(255, 255, 255, 0.05) 1px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0) 4px
    );
  mix-blend-mode: overlay;
  transform: translateZ(0);
}
.oNav.is-open .oNav__overlay {
  opacity: 1;
  pointer-events: auto;
}
.oNav__panel {
  pointer-events: none;
  isolation: isolate;
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--nav-fg);
  font-family: "SweiSpringCJKtc", "Noto Serif TC", serif;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--bar-h) 8vw 4vh;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.oNav.is-open .oNav__panel {
  opacity: 1;
  transform: translateY(0);
}
.oNav__panel::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: var(--fx-glow-opacity);
  background: radial-gradient(
      520px 360px at 22% 22%,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      520px 360px at 80% 18%,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      760px 560px at 55% 85%,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0) 72%
    );
  filter: blur(7px);
  transform: translate3d(0, 0, 0);
  animation: oNavGlowMove 12s ease-in-out infinite;
}
.oNav__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      2px 2px at 12% 18%,
      rgba(255, 255, 255, 0.45),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      1.5px 1.5px at 22% 62%,
      rgba(255, 255, 255, 0.28),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      1px 1px at 38% 34%,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      2px 2px at 58% 22%,
      rgba(255, 255, 255, 0.32),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      1px 1px at 64% 70%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      1.5px 1.5px at 78% 48%,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      2px 2px at 86% 78%,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0) 62%
    ),
    radial-gradient(
      1200px 800px at 50% 0%,
      rgba(0, 0, 0, var(--fx-haze-opacity)),
      rgba(0, 0, 0, 0) 58%
    ),
    radial-gradient(
      1200px 900px at 50% 100%,
      rgba(0, 0, 0, 0.55),
      rgba(0, 0, 0, 0) 62%
    ),
    radial-gradient(
      1200px 900px at 50% 50%,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, var(--fx-vignette-opacity)) 100%
    );

  opacity: 1;
  mix-blend-mode: screen;
  filter: blur(0.25px);
  animation: oNavParticles 7s ease-in-out infinite;
}
.oNav__top {
  margin-bottom: 5vh;
  position: relative;
  z-index: 2;
}
.oNav__brand {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
}
.oNav__brand--overlay img {
  height: 100px;
  margin: 0 0 5vh 0;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.12));
}
.oNav__bottom {
  position: relative;
  z-index: 2;
}
.oNav__bottom::before {
  content: "";
  display: block;
  height: 1px;
  width: 50%;
  margin: 5vh 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0)
  );
  opacity: 0.85;
}
.oNav.is-open .oNav__toggle,
.oNav.is-open .oNav__btn,
.oNav.is-open .oNav__brand {
  pointer-events: auto;
}
.oNav__title {
  color: var(--nav-fg);
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.06);
}
.oNav__title small {
  display: block;
  font-size: 16px;
  opacity: 0.65;
  margin: 15px 0;
  letter-spacing: 0.02em;
}
.oNav__cta {
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;
}
.oNav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 18px;

  color: var(--nav-fg);
  text-decoration: none;

  border: 1px solid rgba(255, 255, 255, 0.5);

  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition: background 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.oNav__btn:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  color: #231815;
  font-weight: 700;
}

/* ===== Animations ===== */
@keyframes oNavGlowMove {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
    opacity: calc(var(--fx-glow-opacity) - 0.06);
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.05);
    opacity: var(--fx-glow-opacity);
  }
  100% {
    transform: translate3d(-2%, -1%, 0) scale(1.02);
    opacity: calc(var(--fx-glow-opacity) - 0.06);
  }
}

@keyframes oNavParticles {
  0% {
    opacity: 0.85;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
  100% {
    opacity: 0.85;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .oNav {
    --bar-h: 72px;
    --pad-x: 16px;
  }
  .oNav__panel {
    padding: 5vh 6vw 4vh;
  }
  .oNav__cta {
    flex-wrap: wrap;
  }
  .oNav__brand--overlay img {
    margin: 5vh 0 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .oNav__panel,
  .oNav__overlay {
    transition: none !important;
  }
  .oNav__panel::before,
  .oNav__panel::after {
    animation: none !important;
  }
}
@supports (-webkit-touch-callout: none) {
  .oNav__btn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.06); /* 保留玻璃感 */
  }
}

/* =========================================================
   Toggle (Hamburger)
   ========================================================= */

.oNav__toggle {
  pointer-events: auto;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(
      14px 14px at 30% 25%,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0) 70%
    ),
    rgba(255, 255, 255, 0.03);

  position: relative;
  z-index: 10001;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
    background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
@media (hover: hover) {
  .oNav__toggle:hover {
    background: radial-gradient(
        16px 16px at 30% 25%,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0) 70%
      ),
      rgba(255, 255, 255, 0.05);

    border-color: rgba(255, 255, 255, 0.2);

    transform: translateY(-1px);
  }
}
.oNav__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 0 3px rgba(255, 255, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.48);
}

.oNav__toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 50%;

  height: 1.25px;
  border-radius: 2px;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.95) 22%,
    rgba(255, 255, 255, 0.95) 78%,
    rgba(255, 255, 255, 0)
  );

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12),
    0 0 18px rgba(255, 255, 255, 0.06);

  opacity: 0.92;

  transform-origin: center;
  will-change: transform, opacity, filter;

  transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease,
    filter 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 三條線的垂直間距（以中心為基準） */
.oNav__toggle span:nth-child(1) {
  transform: translateY(-8px);
}
.oNav__toggle span:nth-child(2) {
  transform: translateY(0);
  opacity: 0.78;
}
.oNav__toggle span:nth-child(3) {
  transform: translateY(8px);
}
.oNav:not(.is-open) .oNav__toggle span:nth-child(2) {
  animation: oNavBreath 3.6s ease-in-out infinite;
}

@keyframes oNavBreath {
  0%,
  100% {
    opacity: 0.65;
    filter: brightness(1);
  }
  50% {
    opacity: 0.95;
    filter: brightness(1.15);
  }
}

.oNav.is-open .oNav__toggle {
  background: radial-gradient(
      16px 16px at 30% 25%,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0) 70%
    ),
    rgba(255, 255, 255, 0.04);

  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}

.oNav.is-open .oNav__toggle span:nth-child(1) {
  transform: translateY(0) rotate(45deg);
  opacity: 0.98;
  filter: brightness(1.2);
  transition-delay: 40ms;
}

.oNav.is-open .oNav__toggle span:nth-child(2) {
  opacity: 0;
  transition-delay: 0ms;
}

.oNav.is-open .oNav__toggle span:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
  opacity: 0.98;
  filter: brightness(1.2);
  transition-delay: 80ms;
}

@media (max-width: 768px) {
  .oNav__toggle span {
    left: 8px;
    right: 8px;
  }
  .oNav__toggle span:nth-child(1) {
    transform: translateY(-7px);
  }
  .oNav__toggle span:nth-child(3) {
    transform: translateY(7px);
  }
}