/*
  Atheri Nav Styles – wspólny wrapper / preview
*/
.atheri-nav-block-preview {
  border-radius: 999px;
  padding: 10px 24px;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #e5e7eb;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
  font-size: 14px;
}

.atheri-nav-block-preview span {
  opacity: .7;
}

/*
  Wspólne style nawigacji
*/

.atheri-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 14px 32px;
  z-index: 40;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial,sans-serif;
}

.atheri-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.atheri-nav li {
  position: relative;
}

.atheri-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #f9fafb;
  padding: 4px 2px;
  transition: color .18s ease, opacity .18s ease, transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.atheri-nav a:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .atheri-nav {
    justify-content: flex-end;
    padding: 10px 18px;
  }
  .atheri-nav ul {
    gap: 18px;
  }
  .atheri-nav a {
    font-size: 14px;
  }
}

/* --------------------------------------------- */
/* 1 – Floating Laser                            */
/* --------------------------------------------- */
.atheri-nav-style-1 {
  backdrop-filter: blur(18px);
  background: linear-gradient(120deg, rgba(15,23,42,.88), rgba(15,23,42,.7));
  border-radius: 999px;
  box-shadow: 0 24px 80px rgba(0,0,0,.72);
  border: 1px solid rgba(148,163,184,.35);
}
.atheri-nav-style-1::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(56,189,248,.35);
  opacity: .35;
  pointer-events: none;
}
.atheri-nav-style-1 a { opacity: .75; }
.atheri-nav-style-1 a:hover { opacity: 1; }
.atheri-nav-style-1 li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,#38bdf8,#a855f7);
  transform-origin: center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.atheri-nav-style-1 li:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --------------------------------------------- */
/* 2 – Magnetic Motion                           */
/* --------------------------------------------- */
.atheri-nav-style-2 {
  border-radius: 999px;
  background: radial-gradient(circle at top, rgba(56,189,248,.25), transparent 60%);
  box-shadow: 0 20px 60px rgba(15,23,42,.9);
}
.atheri-nav-style-2 a {
  position: relative;
  opacity: .7;
}
.atheri-nav-style-2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(56,189,248,.3), transparent 60%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
  z-index: -1;
}
.atheri-nav-style-2 a:hover { opacity: 1; }
.atheri-nav-style-2 a:hover::after { opacity: 1; transform: scale(1); }

/* --------------------------------------------- */
/* 3 – Capsule Nav                               */
/* --------------------------------------------- */
.atheri-nav-style-3 {
  background: transparent;
  gap: 16px;
  padding: 0;
}
.atheri-nav-style-3 ul { gap: 12px; }
.atheri-nav-style-3 a {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15,23,42,.75);
  box-shadow: 0 12px 40px rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.4);
  opacity: .9;
}
.atheri-nav-style-3 a:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 48px rgba(15,23,42,.95);
  opacity: 1;
}

/* --------------------------------------------- */
/* 4 – Glassmorphic                              */
/* --------------------------------------------- */
.atheri-nav-style-4 {
  border-radius: 18px;
  padding-inline: 28px;
  padding-block: 10px;
  background: linear-gradient(120deg, rgba(15,23,42,.65), rgba(15,23,42,.4));
  backdrop-filter: blur(22px);
  box-shadow:
    0 24px 80px rgba(15,23,42,.9),
    0 0 0 1px rgba(148,163,184,.35);
  position: relative;
}
.atheri-nav-style-4::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(56,189,248,.5);
  opacity: .28;
  pointer-events: none;
}
.atheri-nav-style-4 a { opacity: .8; }
.atheri-nav-style-4 a:hover { opacity: 1; }

/* --------------------------------------------- */
/* 5 – Split-Fade underline                      */
/* --------------------------------------------- */
.atheri-nav-style-5 {
  background: transparent;
}
.atheri-nav-style-5 li { padding-inline: 6px; }
.atheri-nav-style-5 a { opacity: .75; }
.atheri-nav-style-5 a:hover { opacity: 1; }
.atheri-nav-style-5 li::before,
.atheri-nav-style-5 li::after {
  content: "";
  position: absolute;
  bottom: -6px;
  height: 2px;
  width: 50%;
  background: linear-gradient(90deg,#38bdf8,#a855f7);
  opacity: 0;
  transform: scaleX(0);
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.atheri-nav-style-5 li::before { left: 50%; transform-origin: right; }
.atheri-nav-style-5 li::after  { right: 50%; transform-origin: left; }
.atheri-nav-style-5 li:hover::before,
.atheri-nav-style-5 li:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* --------------------------------------------- */
/* 6 – Glowing Wave                              */
/* --------------------------------------------- */
.atheri-nav-style-6 {
  border-radius: 999px;
  padding-block: 10px;
  padding-inline: 28px;
  background: rgba(15,23,42,.7);
  box-shadow:
    0 22px 70px rgba(15,23,42,.95),
    0 0 0 1px rgba(15,23,42,.9);
  overflow: hidden;
}
.atheri-nav-style-6::before {
  content: "";
  position: absolute;
  inset: -120%;
  background: conic-gradient(from 120deg, #38bdf8, #a855f7, #f97316, #38bdf8);
  opacity: .3;
  mix-blend-mode: screen;
  animation: atheriWaveBg 18s linear infinite;
  pointer-events: none;
}
@keyframes atheriWaveBg {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(0,0,0) rotate(360deg); }
}
.atheri-nav-style-6 ul { position: relative; z-index: 1; }
.atheri-nav-style-6 a { opacity: .8; }
.atheri-nav-style-6 a:hover { opacity: 1; }
.atheri-nav-style-6 li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 90%;
  max-width: 110px;
  height: 3px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(248,250,252,.95), transparent 60%);
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
  transition: transform .2s ease-out, opacity .2s ease-out;
}
.atheri-nav-style-6 li:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}

/* --------------------------------------------- */
/* 7 – Underline Sweep (lewo->prawo)             */
/* --------------------------------------------- */
.atheri-nav-style-7 {
  background: transparent;
}
.atheri-nav-style-7 a {
  padding-inline: 6px;
  opacity: .78;
}
.atheri-nav-style-7 a:hover {
  opacity: 1;
}
.atheri-nav-style-7 a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg,#38bdf8,#a855f7);
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .22s ease-out, opacity .22s ease-out;
}
.atheri-nav-style-7 a:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

/* --------------------------------------------- */
/* 8 – Active Pill (premium tabs)                */
/* --------------------------------------------- */
.atheri-nav-style-8 {
  background: rgba(15,23,42,.7);
  border-radius: 999px;
  padding-inline: 16px;
  box-shadow: 0 22px 60px rgba(15,23,42,.95);
}
.atheri-nav-style-8 a {
  padding: 6px 14px;
  border-radius: 999px;
  opacity: .8;
}
.atheri-nav-style-8 a:hover {
  background: rgba(15,23,42,1);
  box-shadow: 0 14px 40px rgba(15,23,42,.9);
  opacity: 1;
}
.atheri-nav-style-8 li.current-menu-item > a,
.atheri-nav-style-8 li.current_page_item > a {
  background: linear-gradient(120deg,#38bdf8,#0ea5e9);
  color: #0b1120;
  box-shadow: 0 16px 40px rgba(8,47,73,.9);
}

/* --------------------------------------------- */
/* 9 – Center Dot Indicator                      */
/* --------------------------------------------- */
.atheri-nav-style-9 {
  background: transparent;
}
.atheri-nav-style-9 a {
  opacity: .78;
}
.atheri-nav-style-9 a:hover {
  opacity: 1;
}
.atheri-nav-style-9 li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, #e5f2ff, transparent 65%);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform .18s ease-out, opacity .18s ease-out;
}
.atheri-nav-style-9 li:hover::after,
.atheri-nav-style-9 li.current-menu-item::after,
.atheri-nav-style-9 li.current_page_item::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

/* --------------------------------------------- */
/* 10 – Segmented Tabs Bar                       */
/* --------------------------------------------- */
.atheri-nav-style-10 {
  background: rgba(15,23,42,.9);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 18px 50px rgba(15,23,42,.95),
    0 0 0 1px rgba(15,23,42,1);
}
.atheri-nav-style-10 ul {
  gap: 0;
}
.atheri-nav-style-10 li {
  margin: 0;
}
.atheri-nav-style-10 a {
  padding: 8px 18px;
  border-radius: 10px;
  opacity: .78;
}
.atheri-nav-style-10 li + li a {
  border-left: 1px solid rgba(30,64,175,.65);
}
.atheri-nav-style-10 a:hover {
  background: radial-gradient(circle at top, rgba(56,189,248,.16), transparent 60%);
  opacity: 1;
}

/* --------------------------------------------- */
/* 11 – Bottom Glow Bar                          */
/* --------------------------------------------- */
.atheri-nav-style-11 {
  background: rgba(15,23,42,.85);
  border-radius: 999px;
  padding-inline: 22px;
  box-shadow: 0 26px 80px rgba(15,23,42,1);
  position: relative;
}
.atheri-nav-style-11::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -10px;
  height: 14px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 0, rgba(56,189,248,.7), transparent 65%);
  opacity: .45;
  pointer-events: none;
}
.atheri-nav-style-11 a {
  opacity: .8;
}
.atheri-nav-style-11 a:hover {
  opacity: 1;
}

/* --------------------------------------------- */
/* 12 – Neon Outline                             */
/* --------------------------------------------- */
.atheri-nav-style-12 {
  background: transparent;
  border-radius: 999px;
  padding-inline: 26px;
  padding-block: 10px;
  position: relative;
  box-shadow: 0 20px 60px rgba(15,23,42,.95);
}
.atheri-nav-style-12::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(148,163,184,.5);
  opacity: .7;
  pointer-events: none;
}
.atheri-nav-style-12::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: conic-gradient(from 120deg,#38bdf8,#a855f7,#f97316,#38bdf8);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease-out;
  pointer-events: none;
}
.atheri-nav-style-12:hover::after {
  opacity: .7;
}
.atheri-nav-style-12 a {
  opacity: .8;
}
.atheri-nav-style-12 a:hover {
  opacity: 1;
}