/* ==========================================================================
   Nimbus UI · Liquid Navbar — "Waterline"
   Estilos CSS para Cristal Fibras Piscinas (Brasília-DF)
   ========================================================================== */

.nimbus-nav {
  --n-tint: rgba(255, 255, 255, 0.45);
  --n-fg: #0A2240;
  --n-fg-soft: rgba(10, 34, 64, 0.72);
  --n-rim: rgba(255, 255, 255, 0.95);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 999px;
  isolation: isolate;
  font-family: 'Space Grotesk', ui-sans-serif, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border: 1px solid rgba(2, 132, 199, 0.22);
  background: rgba(240, 249, 255, 0.4);
}

.nimbus-nav[data-tone="dark"] {
  --n-tint: rgba(10, 34, 64, 0.65);
  --n-fg: #F1F7FF;
  --n-fg-soft: rgba(241, 247, 255, 0.75);
  --n-rim: rgba(56, 189, 248, 0.4);
  border-color: rgba(56, 189, 248, 0.3);
}

.nimbus-glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  overflow: hidden;
  background: var(--n-tint);
  -webkit-backdrop-filter: blur(14px) saturate(1.3) brightness(1.05);
  backdrop-filter: blur(14px) saturate(1.3) brightness(1.05);
  box-shadow: inset 0 1px 1px var(--n-rim), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.nimbus-nav[data-refract="on"] .nimbus-glass {
  -webkit-backdrop-filter: url(#nimbus-refract) blur(2px) saturate(1.2) brightness(1.08);
  backdrop-filter: url(#nimbus-refract) blur(2px) saturate(1.2) brightness(1.08);
}

.nimbus-water {
  position: absolute;
  left: -14px;
  top: -14px;
  z-index: -1;
  pointer-events: none;
}

.nimbus-nav[data-gl="off"] .nimbus-water {
  display: none;
}

.nimbus-drop {
  display: none;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
  will-change: transform, width;
  background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 55%), rgba(6, 182, 212, 0.35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -2px 6px rgba(2, 132, 199, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.nimbus-nav[data-gl="off"] .nimbus-drop {
  display: block;
}

.nimbus-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--n-fg-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s, transform 0.2s;
  white-space: nowrap;
}

.nimbus-item:hover,
.nimbus-item[aria-current="page"] {
  color: var(--n-fg);
}

.nimbus-item[aria-current="page"] {
  font-weight: 700;
}

.nimbus-item:focus-visible {
  outline: 2px solid #0284C7;
  outline-offset: 2px;
}

.nv-ico {
  position: relative;
  display: inline-flex;
  flex: none;
}

.nv-ico svg {
  transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), color 0.25s;
}

.nimbus-item[aria-current="page"] .nv-ico svg {
  transform: translateY(-1px) scale(1.12);
  color: #0284C7;
}

.nv-door {
  fill: transparent;
}

/* Animations for each scene */
.nv-ico[data-fx="pop"] svg {
  animation: nvPop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes nvPop {
  0% { transform: scale(0.72); }
  60% { transform: scale(1.2); }
  100% { transform: translateY(-1px) scale(1.1); }
}

.nv-ico[data-fx="plane"] svg {
  animation: nvPlane 1.15s cubic-bezier(0.55, 0, 0.3, 1) both;
}
@keyframes nvPlane {
  0% { transform: none; }
  12% { transform: translate(-3px, 2px) rotate(7deg); }
  42% { transform: translate(64px, -26px) rotate(-24deg) scale(0.9); opacity: 0; }
  43% { transform: translate(-60px, 16px) rotate(-12deg) scale(0.9); opacity: 0; }
  58% { opacity: 1; }
  80% { transform: translate(3px, -1px) rotate(2deg); }
  100% { transform: translateY(-1px) scale(1.08); }
}

.nv-ico[data-fx="drop"] svg {
  animation: nvDrop 0.95s cubic-bezier(0.4, 0, 0.3, 1) both;
  transform-origin: 50% 100%;
}
@keyframes nvDrop {
  0% { transform: translateY(-1px); }
  26% { transform: translateY(-13px) scale(0.88, 1.12); }
  46% { transform: translateY(3px) scale(1.3, 0.68); }
  62% { transform: translateY(-3px) scale(0.92, 1.08); }
  80% { transform: translateY(0) scale(1.04, 0.97); }
  100% { transform: translateY(-1px) scale(1.1); }
}

.nv-ico[data-fx="drop"]::before,
.nv-ico[data-fx="drop"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}
.nv-ico[data-fx="drop"]::before {
  animation: nvSplashL 0.95s ease-out both;
}
.nv-ico[data-fx="drop"]::after {
  animation: nvSplashR 0.95s ease-out both;
}
@keyframes nvSplashL {
  0%, 44% { opacity: 0; transform: none; }
  50% { opacity: 0.9; transform: translate(-5px, -6px); }
  75%, 100% { opacity: 0; transform: translate(-11px, 1px) scale(0.4); }
}
@keyframes nvSplashR {
  0%, 44% { opacity: 0; transform: none; }
  50% { opacity: 0.9; transform: translate(5px, -7px); }
  75%, 100% { opacity: 0; transform: translate(12px, 1px) scale(0.4); }
}

.nv-ico[data-fx="spin"] svg {
  animation: nvSpin 1s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
@keyframes nvSpin {
  0% { transform: perspective(80px) rotateY(0); }
  100% { transform: perspective(80px) rotateY(360deg) translateY(-1px) scale(1.1); }
}

.nv-ico[data-fx="glow"] svg {
  animation: nvHop 0.8s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  transform-origin: 50% 100%;
}
@keyframes nvHop {
  0% { transform: none; }
  30% { transform: translateY(-5px) scale(1.04, 0.96); }
  55% { transform: translateY(0) scale(1.12, 0.88); }
  75% { transform: translateY(-2px) scale(0.98, 1.04); }
  100% { transform: translateY(-1px) scale(1.1); }
}
.nv-ico[data-fx="glow"] .nv-door {
  animation: nvDoor 1.3s ease both;
}
@keyframes nvDoor {
  0% { fill: transparent; }
  30% { fill: #FFF3A8; }
  100% { fill: rgba(126, 232, 255, 0.6); }
}

.nv-ico[data-fx="wave"] svg {
  animation: nvWave 0.9s ease-in-out both;
  transform-origin: 50% 92%;
}
@keyframes nvWave {
  0% { transform: none; }
  20% { transform: rotate(-15deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
  100% { transform: translateY(-1px) scale(1.1); }
}

@media (max-width: 1400px) {
  .nimbus-nav .nimbus-item {
    padding: 0 9px;
    font-size: 13px;
    gap: 5px;
  }
}

@media (max-width: 1240px) {
  .nimbus-nav .nimbus-item {
    padding: 0 7px;
    font-size: 13px;
    gap: 4px;
  }
}

@media (max-width: 1023px) {
  .nimbus-nav {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-ico svg,
  .nv-ico::before,
  .nv-ico::after,
  .nv-door {
    animation: none !important;
    transition: none;
  }
}