/* =========================================================
   Nordlys glass navigation. Panel styles ported from
   "Nimbus UI · Liquid Navbar — Waterline" (21st.dev) by
   guglielmogiannattasio.it, re-toned for Nordlys (near-black glass,
   aurora emerald, icy blue). Everything is scoped under .ngn.

   Tuning:
     --ngn-size        launcher diameter
     --ngn-top         launcher top on desktop (aligned to the nav)
     --ngn-edge        distance from the screen edge
     --ngn-dock-gap    phone dock distance above the safe area
   ========================================================= */

.ngn {
  --ngn-size: 48px;
  --ngn-top: 11px;
  --ngn-edge: 24px;
  --ngn-dock-gap: 16px;
  --ngn-emerald: #3ef0b4;
  --ngn-ice: #9fdcff;
  font-family: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ngn *, .ngn *::before, .ngn *::after { box-sizing: border-box; }
.ngn [hidden] { display: none !important; }

/* room for the launcher at the right of the existing nav (desktop) */
@media (min-width: 701px) {
  #nav { padding-right: calc(32px + var(--ngn-reserve, 64px)); }
}

/* ── launcher: the aurora-infinity companion ───────────────────────── */

.ngn-launcher {
  position: fixed;
  z-index: 60;
  top: var(--ngn-top);
  right: var(--ngn-edge);
  display: grid;
  width: var(--ngn-size);
  height: var(--ngn-size);
  place-items: center;
  padding: 0;
  border: 1px solid rgba(160, 255, 222, .22);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, rgba(62, 240, 180, .16), rgba(6, 14, 16, .86) 62%);
  color: #eaf8f2;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .14), 0 10px 28px -12px rgba(0, 30, 24, .8), 0 0 0 0 rgba(62, 240, 180, 0);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-tap-highlight-color: transparent;
  transition: top .35s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1), border-color .25s, box-shadow .25s, opacity .3s, visibility .3s;
  animation: ngn-idle 7s ease-in-out infinite;
}
/* the scrolled nav is shorter: follow its centre line */
#nav.nav-scrolled ~ .ngn .ngn-launcher { --ngn-top: 5px; }
/* a generous touch target around the visible circle */
.ngn-launcher::before { position: absolute; inset: -8px; border-radius: 50%; content: ""; }
/* breathing glow */
.ngn-launcher::after {
  position: absolute;
  z-index: -1;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 240, 180, .34), rgba(80, 170, 255, .1) 55%, transparent 72%);
  content: "";
  opacity: .45;
  pointer-events: none;
  animation: ngn-breathe 4.8s ease-in-out infinite;
}
/* the site's own aurora-infinity treatment (aurora GIF behind the infinity mask) */
.ngn-mark {
  display: block;
  width: 30px;
  height: 14px;
  background: #001219 url('media/aurora-logo-instagram.gif') 58% 50% / auto 210% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 32'%3E%3Cpath d='M5 16C5 8.1 10.8 3.5 18.3 3.5C27.2 3.5 32 10.4 36 16C40 21.6 44.8 28.5 53.7 28.5C61.2 28.5 67 23.9 67 16C67 8.1 61.2 3.5 53.7 3.5C44.8 3.5 40 10.4 36 16C32 21.6 27.2 28.5 18.3 28.5C10.8 28.5 5 23.9 5 16Z' fill='none' stroke='white' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 32'%3E%3Cpath d='M5 16C5 8.1 10.8 3.5 18.3 3.5C27.2 3.5 32 10.4 36 16C40 21.6 44.8 28.5 53.7 28.5C61.2 28.5 67 23.9 67 16C67 8.1 61.2 3.5 53.7 3.5C44.8 3.5 40 10.4 36 16C32 21.6 27.2 28.5 18.3 28.5C10.8 28.5 5 23.9 5 16Z' fill='none' stroke='white' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: saturate(1.35) brightness(1.25) drop-shadow(0 0 6px rgba(62, 240, 180, .5));
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.ngn-launcher:hover { border-color: rgba(160, 255, 222, .4); transform: translateY(-1px); }
.ngn-launcher:focus-visible { outline: 2px solid var(--ngn-emerald); outline-offset: 4px; }
.ngn-launcher[aria-expanded="true"] {
  border-color: rgba(120, 255, 210, .62);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .18), 0 10px 28px -12px rgba(0, 30, 24, .8), 0 0 0 4px rgba(62, 240, 180, .14);
  animation: none;
}
.ngn-launcher[aria-expanded="true"]::after { animation: none; opacity: .75; }
.ngn-launcher[aria-expanded="true"] .ngn-mark { transform: scale(1.12); }

/* ── panel ─────────────────────────────────────────────────────────── */

.ngn-panel {
  position: fixed;
  z-index: 59;
  top: calc(var(--ngn-top) + var(--ngn-size) + 12px);
  right: calc(var(--ngn-edge) - 6px);
  display: flex;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--ngn-top) - var(--ngn-size) - 28px);
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  transform-origin: calc(100% - 30px) -20px;
  animation: ngn-open .24s cubic-bezier(.2, .9, .3, 1.1) both;
}
#nav.nav-scrolled ~ .ngn .ngn-panel { --ngn-top: 5px; }
/* the pill and header keep their size; the account sheet shrinks and scrolls */
.ngn-panel > * { flex-shrink: 0; }
.ngn-panel > .ngn-account { flex: 0 1 auto; min-height: 0; }

.ngn-panel-head { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 0 4px; }
.ngn-panel-head p { margin: 0; padding: 7px 12px; border: 1px solid rgba(200, 255, 236, .1); border-radius: 999px; background: rgba(6, 14, 16, .78); color: rgba(190, 240, 222, .78); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ngn-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(200, 255, 236, .16);
  border-radius: 50%;
  background: rgba(6, 14, 16, .7);
  color: rgba(234, 248, 242, .8);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.ngn-close:focus-visible { outline: 2px solid var(--ngn-emerald); outline-offset: 2px; }

/* ── the liquid pill (Nimbus "Waterline") ──────────────────────────── */

.ngn .nimbus-nav {
  --n-tint: rgba(4, 12, 14, .72);
  --n-fg: #eef9f4;
  --n-fg-soft: rgba(222, 242, 236, .7);
  --n-rim: rgba(178, 255, 228, .3);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 999px;
  isolation: isolate;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ngn .nimbus-glass {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--n-tint);
  -webkit-backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  backdrop-filter: blur(10px) saturate(1.2) brightness(1.08);
  box-shadow: inset 0 1px 1px var(--n-rim), inset 0 0 0 1px rgba(170, 255, 225, .14), 0 16px 40px -14px rgba(0, 20, 18, .85), 0 2px 6px rgba(0, 20, 30, .3);
}
.ngn .nimbus-nav[data-refract="on"] .nimbus-glass {
  -webkit-backdrop-filter: url(#ngn-refract) blur(2px) saturate(1.2) brightness(1.08);
  backdrop-filter: url(#ngn-refract) blur(2px) saturate(1.2) brightness(1.08);
}
.ngn .nimbus-water { position: absolute; z-index: -1; top: -14px; left: -14px; pointer-events: none; }
.ngn .nimbus-nav[data-gl="off"] .nimbus-water { display: none; }
.ngn .nimbus-drop {
  position: absolute;
  z-index: -1;
  top: 6px;
  bottom: 6px;
  left: 0;
  display: none;
  border-radius: 999px;
  pointer-events: none;
  will-change: transform, width;
  background: radial-gradient(120% 140% at 30% 0%, rgba(200, 255, 236, .5), rgba(200, 255, 236, 0) 55%), rgba(62, 240, 180, .2);
  box-shadow: inset 0 1px 1px rgba(220, 255, 244, .7), inset 0 -2px 6px rgba(80, 170, 255, .22), inset 0 0 0 1px rgba(160, 255, 222, .4), 0 6px 16px -6px rgba(0, 60, 48, .6);
}
.ngn .nimbus-nav[data-gl="off"] .nimbus-drop { display: block; }
.ngn .nimbus-item {
  position: relative;
  z-index: 1;
  display: inline-flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--n-fg-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s;
}
.ngn .nimbus-item:hover, .ngn .nimbus-item[aria-current] { color: var(--n-fg); }
.ngn .nimbus-item[aria-current] .nimbus-label { font-weight: 600; }
.ngn .nimbus-item:focus-visible { outline: 2px solid var(--ngn-emerald); outline-offset: 2px; }
.ngn .nimbus-ext { margin-left: -3px; color: rgba(159, 220, 255, .75); font-size: 11px; }
.ngn .nv-ico { position: relative; display: inline-flex; flex: none; }
.ngn .nv-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.ngn .nimbus-item[aria-current] .nv-ico svg { transform: translateY(-1px) scale(1.08); }
.ngn .nv-door { fill: transparent; }
/* Freya is the featured, central destination: its icon is the aurora infinity */
.ngn .nimbus-item--freya .ngn-mark { width: 26px; height: 12px; }
.ngn .nimbus-item--freya { padding: 0 18px; }

/* the original icon scenes */
.ngn .nv-ico[data-fx="pop"] svg, .ngn .nv-ico[data-fx="pop"] .ngn-mark { animation: nvPop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes nvPop { 0% { transform: scale(.72); } 60% { transform: scale(1.2); } 100% { transform: translateY(-1px) scale(1.08); } }
.ngn .nv-ico[data-fx="spin"] svg { animation: nvSpin 1s cubic-bezier(.2, .75, .25, 1) both; }
@keyframes nvSpin { 0% { transform: perspective(80px) rotateY(0); } 100% { transform: perspective(80px) rotateY(360deg) translateY(-1px) scale(1.08); } }
.ngn .nv-ico[data-fx="glow"] svg { animation: nvHop .8s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
@keyframes nvHop { 0% { transform: none; } 30% { transform: translateY(-5px) scale(1.04, .96); } 55% { transform: translateY(0) scale(1.12, .88); } 75% { transform: translateY(-2px) scale(.98, 1.04); } 100% { transform: translateY(-1px) scale(1.08); } }
.ngn .nv-ico[data-fx="glow"] .nv-door { animation: nvDoor 1.3s ease both; }
@keyframes nvDoor { 0% { fill: transparent; } 30% { fill: #c9ffe9; } 100% { fill: rgba(62, 240, 180, .55); } }
.ngn .nv-ico[data-fx="wave"] svg { animation: nvWave .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.08); } }

/* ── account access ────────────────────────────────────────────────── */

.ngn-account {
  position: relative;
  width: min(420px, calc(100vw - 24px));
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(170, 255, 225, .16);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(8, 21, 21, .97), rgba(4, 10, 14, .97));
  color: #eaf7f2;
  box-shadow: inset 0 1px 1px rgba(178, 255, 228, .18), 0 24px 60px -20px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  animation: ngn-open .22s cubic-bezier(.2, .9, .3, 1.1) both;
  scrollbar-width: thin;
}
.ngn-account h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.ngn-account > p { margin: 0 0 14px; color: rgba(214, 236, 230, .7); font-size: 12.5px; line-height: 1.55; }
.ngn-access { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ngn-access li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 14px; padding: 13px 14px; border: 1px solid rgba(200, 255, 236, .1); border-radius: 16px; background: rgba(255, 255, 255, .025); }
.ngn-access strong { font-size: 13.5px; font-weight: 600; }
.ngn-access li > span { grid-column: 1; color: rgba(210, 234, 228, .66); font-size: 11.5px; line-height: 1.45; }
.ngn-access a {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid rgba(120, 255, 210, .3);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(36, 214, 164, .2), rgba(80, 160, 255, .12));
  color: #effcf7;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ngn-access a:hover { border-color: rgba(120, 255, 210, .55); }
.ngn-access a:focus-visible { outline: 2px solid var(--ngn-emerald); outline-offset: 2px; }
.ngn-access .is-quiet a { border-color: rgba(200, 255, 236, .16); background: rgba(255, 255, 255, .03); }
.ngn-account small { display: block; margin-top: 12px; color: rgba(190, 220, 212, .5); font-size: 10.5px; line-height: 1.5; }

.ngn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── no backdrop-filter: solid near-black glass ────────────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ngn .nimbus-glass { background: rgba(5, 13, 15, .95); }
  .ngn-launcher, .ngn-close, .ngn-panel-head p { background: rgba(6, 14, 16, .95); }
  .ngn-account { background: rgba(6, 14, 16, .97); }
}

/* ── phones: a bottom dock above the safe area ─────────────────────── */

@media (max-width: 700px) {
  .ngn { --ngn-edge: 16px; }
  .ngn-launcher {
    top: auto;
    bottom: calc(var(--ngn-dock-gap) + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
  .ngn-panel {
    top: auto;
    right: 12px;
    bottom: calc(var(--ngn-dock-gap) + 52px + 12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    max-height: calc(100vh - 52px - 40px - env(safe-area-inset-bottom, 0px) - 60px);
    max-height: calc(100dvh - 52px - 40px - env(safe-area-inset-bottom, 0px) - 60px);
    align-items: stretch;
    flex-direction: column-reverse;
    transform-origin: calc(100% - 30px) calc(100% + 20px);
  }
  .ngn-panel-head { padding: 0 2px; }
  .ngn .nimbus-nav { display: flex; width: 100%; justify-content: space-between; }
  /* icon above label: every destination keeps a readable name */
  .ngn .nimbus-item { height: 56px; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; padding: 0 4px; font-size: 11.5px; }
  .ngn .nimbus-item--freya { padding: 0 4px; }
  .ngn .nimbus-ext { position: absolute; top: 9px; right: 8px; margin: 0; }
  .ngn-account { width: 100%; }
  .ngn-access li { grid-template-columns: 1fr; }
  .ngn-access a { grid-row: auto; grid-column: 1; justify-content: center; margin-top: 6px; }
  /* steps aside while a form field is focused or the submit button is near */
  .ngn.is-yielding .ngn-launcher { opacity: 0; visibility: hidden; transform: translateY(16px); pointer-events: none; }
}
@media (max-width: 700px) and (max-height: 480px) {
  /* landscape phones: keep the panel inside the viewport */
  .ngn .nimbus-item { height: 46px; flex-direction: row; gap: 6px; }
  .ngn-account { padding: 14px; }
}

/* ── motion ───────────────────────────────────────────────────────── */

@keyframes ngn-idle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@keyframes ngn-breathe { 0%, 100% { opacity: .32; transform: scale(.94); } 50% { opacity: .62; transform: scale(1.06); } }
@keyframes ngn-open { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  @keyframes ngn-open { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
}
/* the idle glow rests while the page is hidden or the panel is open (CSS only, no JS loop) */
@media (prefers-reduced-motion: reduce) {
  .ngn-launcher, .ngn-launcher::after, .ngn-panel, .ngn-account { animation: none !important; }
  .ngn-launcher, .ngn-mark { transition: none; }
  .ngn .nv-ico svg, .ngn .nv-ico .ngn-mark, .ngn .nv-ico::before, .ngn .nv-ico::after, .ngn .nv-door { animation: none !important; transition: none; }
}