/* ═══════════════════════════════════════════════════════════════
   SYNERIA — FLOATING CONSTELLATION NAV
   A non-linear, floating glass capsule that morphs contextually.
   Not a traditional full-width bar — it's a centered floating pill
   with dock-like magnification, sliding blob indicator, and
   contextual morphing between public/app states.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ CSS PROPERTIES FOR ANIMATION ═══ */
@property --nav-glow{syntax:'<angle>';initial-value:0deg;inherits:false}
@property --blob-x{syntax:'<percentage>';initial-value:0%;inherits:false}

/* ═══ THE FLOATING CAPSULE ═══ */
.syneria-nav{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:9000;
  display:flex;
  align-items:center;
  gap:0;
  padding:6px 8px;
  border-radius:100px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(212,221,216,0.5);
  box-shadow:
    0 1px 2px rgba(27,59,47,0.04),
    0 4px 16px rgba(27,59,47,0.06),
    0 12px 40px rgba(27,59,47,0.04),
    inset 0 1px 0 rgba(255,255,255,0.8);
  transition:
    padding 0.5s cubic-bezier(0.16,1,0.3,1),
    gap 0.5s cubic-bezier(0.16,1,0.3,1),
    border-radius 0.5s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.4s,
    transform 0.5s cubic-bezier(0.34,1.56,0.64,1),
    top 0.5s cubic-bezier(0.16,1,0.3,1),
    opacity 0.3s;
  will-change:transform;
}

/* Subtle animated gradient border on hover */
.syneria-nav::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--nav-glow), transparent 40%, rgba(58,125,92,0.3) 50%, transparent 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity 0.4s;
  animation:navGlowRotate 4s linear infinite;
  pointer-events:none;
}
.syneria-nav:hover::before{opacity:1}
@keyframes navGlowRotate{to{--nav-glow:360deg}}

/* ═══ LOGO ═══ */
.syneria-nav__logo{
  font-family:'Syne',sans-serif;
  font-size:1.15rem;
  font-weight:800;
  color:#1B3B2F;
  padding:8px 16px 8px 12px;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:0;
  text-decoration:none;
  letter-spacing:-0.01em;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  cursor:pointer;
}
.syneria-nav__logo:hover{transform:scale(1.04)}
.syneria-nav__logo span{color:#3A7D5C;transition:text-shadow 0.3s}
.syneria-nav__logo:hover span{text-shadow:0 0 12px rgba(58,125,92,0.4)}

/* ═══ DIVIDER ═══ */
.syneria-nav__divider{
  width:1px;
  height:20px;
  background:rgba(27,59,47,0.1);
  flex-shrink:0;
  margin:0 4px;
}

/* ═══ NAV ITEMS CONTAINER (the dock) ═══ */
.syneria-nav__items{
  display:flex;
  align-items:center;
  gap:2px;
  position:relative;
  padding:0 4px;
}

/* ═══ SLIDING BLOB INDICATOR ═══ */
.syneria-nav__blob{
  position:absolute;
  height:calc(100% - 4px);
  top:2px;
  border-radius:100px;
  background:rgba(58,125,92,0.12);
  border:1px solid rgba(58,125,92,0.2);
  transition:
    left 0.45s cubic-bezier(0.34,1.56,0.64,1),
    width 0.45s cubic-bezier(0.34,1.56,0.64,1),
    opacity 0.3s;
  z-index:0;
  pointer-events:none;
}

/* ═══ NAV ITEM (each link) ═══ */
.syneria-nav__item{
  position:relative;
  z-index:1;
  padding:8px 16px;
  font-family:'Syne',sans-serif;
  font-size:0.8rem;
  font-weight:600;
  color:#6B7B73;
  text-decoration:none;
  border-radius:100px;
  white-space:nowrap;
  transition:
    color 0.3s,
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    font-size 0.3s cubic-bezier(0.16,1,0.3,1);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  user-select:none;
}
.syneria-nav__item:hover{
  color:#1B3B2F;
}
/* Dock magnification: nearby items scale up */
.syneria-nav__item.dock-near{
  transform:scale(1.08);
  font-size:0.83rem;
}
.syneria-nav__item.dock-active{
  transform:scale(1.14);
  font-size:0.85rem;
}
.syneria-nav__item.active{
  color:#1B3B2F;
  font-weight:700;
}
.syneria-nav__item:focus-visible{
  outline:2px solid #3A7D5C;
  outline-offset:2px;
}
/* Icon inside item (optional) */
.syneria-nav__item svg{
  width:15px;
  height:15px;
  flex-shrink:0;
  opacity:0.6;
  transition:opacity 0.3s;
}
.syneria-nav__item:hover svg,
.syneria-nav__item.active svg{opacity:1}

/* ═══ RIGHT SECTION (CTA / Avatar) ═══ */
.syneria-nav__right{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}

/* CTA Button */
.syneria-nav__cta{
  padding:8px 20px;
  font-family:'Syne',sans-serif;
  font-size:0.8rem;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg,#1B3B2F,#2E5A42);
  border:none;
  border-radius:100px;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:
    transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.3s;
  display:flex;
  align-items:center;
  gap:6px;
}
.syneria-nav__cta:hover{
  transform:scale(1.06);
  box-shadow:0 4px 20px rgba(27,59,47,0.25);
}
.syneria-nav__cta:focus-visible{
  outline:2px solid #3A7D5C;
  outline-offset:2px;
}
/* Sweep effect on CTA */
.syneria-nav__cta::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.15) 45%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.15) 55%,transparent 60%);
  background-size:250% 100%;
  animation:ctaSweep 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ctaSweep{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Notification dot */
.syneria-nav__notif{
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(27,59,47,0.04);
  border:1px solid rgba(212,221,216,0.6);
  cursor:pointer;
  transition:border-color 0.3s,background 0.3s,transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.syneria-nav__notif:hover{
  border-color:#3A7D5C;
  background:rgba(58,125,92,0.06);
  transform:scale(1.08);
}
.syneria-nav__notif svg{width:16px;height:16px;color:#6B7B73}
.syneria-nav__notif .dot{
  position:absolute;
  top:5px;right:5px;
  width:7px;height:7px;
  background:#ef4444;
  border-radius:50%;
  border:2px solid #fff;
  animation:dotPulse 2s ease infinite;
}
@keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* Avatar */
.syneria-nav__avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg,#3A7D5C,#4A8C6A);
  display:grid;
  place-items:center;
  color:#fff;
  font-family:'Syne',sans-serif;
  font-size:0.7rem;
  font-weight:700;
  cursor:pointer;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.3s;
  border:2px solid rgba(255,255,255,0.9);
}
.syneria-nav__avatar:hover{
  transform:scale(1.1);
  box-shadow:0 0 0 3px rgba(58,125,92,0.2);
}

/* ═══ MOBILE BURGER ═══ */
.syneria-nav__burger{
  display:none;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(27,59,47,0.04);
  border:1px solid rgba(212,221,216,0.6);
  place-items:center;
  cursor:pointer;
  flex-direction:column;
  gap:4px;
  padding:10px 8px;
  transition:background 0.3s;
}
.syneria-nav__burger span{
  display:block;
  width:16px;
  height:1.5px;
  background:#1B3B2F;
  border-radius:1px;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),opacity 0.2s;
}
.syneria-nav__burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.syneria-nav__burger.open span:nth-child(2){opacity:0}
.syneria-nav__burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ═══ MOBILE DROPDOWN ═══ */
.syneria-nav__mobile{
  position:fixed;
  top:72px;
  left:50%;
  transform:translateX(-50%) scale(0.95);
  width:min(92vw,400px);
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-radius:24px;
  border:1px solid rgba(212,221,216,0.6);
  box-shadow:0 16px 48px rgba(27,59,47,0.12);
  padding:12px;
  display:none;
  flex-direction:column;
  gap:4px;
  z-index:8999;
  opacity:0;
  transition:opacity 0.3s,transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.syneria-nav__mobile.open{
  display:flex;
  opacity:1;
  transform:translateX(-50%) scale(1);
}
.syneria-nav__mobile .syneria-nav__item{
  padding:14px 20px;
  font-size:0.95rem;
  border-radius:14px;
}
.syneria-nav__mobile .syneria-nav__item:hover{
  background:rgba(58,125,92,0.06);
}
.syneria-nav__mobile .syneria-nav__item.active{
  background:rgba(58,125,92,0.1);
}
.syneria-nav__mobile .syneria-nav__cta{
  margin-top:8px;
  padding:14px 24px;
  font-size:0.95rem;
  justify-content:center;
}

/* ═══ LANGUAGE SWITCHER ═══ */
.syneria-nav__lang-switcher{
  position:relative;
}
.syneria-nav__lang-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(58,125,92,0.08);
  border:1px solid rgba(58,125,92,0.15);
  color:#1B3B2F;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.04em;
  padding:5px 8px;
  border-radius:10px;
  cursor:pointer;
  transition:all 0.25s;
  min-width:34px;
}
.syneria-nav__lang-btn:hover{
  background:rgba(58,125,92,0.15);
}
.syneria-nav__lang-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(212,221,216,0.6);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(27,59,47,0.12);
  padding:6px;
  display:none;
  flex-direction:column;
  gap:2px;
  min-width:140px;
  z-index:9999;
}
.syneria-nav__lang-dropdown.open{
  display:flex;
}
.syneria-nav__lang-option{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 12px;
  font-size:0.82rem;
  color:#1B3B2F;
  background:none;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:background 0.2s;
}
.syneria-nav__lang-option:hover{
  background:rgba(58,125,92,0.08);
}
.syneria-nav__lang-option.active{
  background:rgba(58,125,92,0.12);
  font-weight:600;
}

/* ═══ SCROLL STATE: Compact mode ═══ */
.syneria-nav.compact{
  padding:4px 6px;
  box-shadow:
    0 2px 8px rgba(27,59,47,0.06),
    0 8px 32px rgba(27,59,47,0.06);
}
.syneria-nav.compact .syneria-nav__item{
  padding:6px 12px;
  font-size:0.75rem;
}
.syneria-nav.compact .syneria-nav__logo{
  font-size:1rem;
  padding:6px 12px 6px 8px;
}
.syneria-nav.compact .syneria-nav__cta{
  padding:6px 16px;
  font-size:0.75rem;
}

/* ═══ HIDE STATE (scroll down → hide, scroll up → show) ═══ */
.syneria-nav.hidden{
  transform:translateX(-50%) translateY(-120%);
  opacity:0;
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
  .syneria-nav__items{display:none}
  .syneria-nav__divider{display:none}
  .syneria-nav__burger{display:flex}
  .syneria-nav{
    padding:6px 8px 6px 12px;
    width:auto;
  }
}
@media(max-width:480px){
  .syneria-nav__cta span{display:none}
}

/* ═══ APP MODE (for dashboard, wallet, etc.) ═══ */
.syneria-nav.app-mode{
  top:12px;
  right:16px;
  left:auto;
  transform:none;
  padding:4px 6px;
}
.syneria-nav.app-mode.hidden{
  transform:translateY(-120%);
}
@media(max-width:768px){
  .syneria-nav.app-mode{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .syneria-nav.app-mode.hidden{
    transform:translateX(-50%) translateY(-120%);
  }
}

/* ═══ PREFERS REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  .syneria-nav,
  .syneria-nav__item,
  .syneria-nav__blob,
  .syneria-nav__cta,
  .syneria-nav__logo,
  .syneria-nav__avatar,
  .syneria-nav__notif,
  .syneria-nav__mobile,
  .syneria-nav::before{
    animation:none!important;
    transition-duration:0.01ms!important;
  }
}