/* ============================================================
   Terug naar boven (homepage, prefix nb-)
   ============================================================
   Hoort bij assets/js/naarboven.js, dat de knop zelf bouwt. Het is
   het spiegelbeeld van het gidsendock: dezelfde hoek maar dan links,
   dezelfde hoogte (40px), hetzelfde glas en dezelfde omkering (donker
   op de lichte site, wit op de donkere, wit boven een donker vlak).
   Zo lezen de twee als één paar en niet als twee losse widgets.

   De ring rond de pijl is waar je bent op de pagina, zoals de
   downloadring in Apple Podcasts. Bij een klik schiet de pijl omhoog
   uit de ring en komt van onder terug, de pagina vliegt naar boven,
   de ring loopt zichtbaar leeg en bovenaan zakt de knop weg.
   Op de telefoon alleen de ronde knop, zonder tekst.

   Huisregels (zie gratis.css): alleen transform en opacity bewegen,
   geen filter: blur, en geen backdrop-filter onder 1061px. Zonder blur
   is de vulling 99%, anders spookt paginatekst door het glas.
   ============================================================ */

.nb {
  --nb-spring: cubic-bezier(0.3, 1.28, 0.42, 1);
  --nb-settle: cubic-bezier(0.5, 0, 0.2, 1);
  /* de ring: baan en vulling */
  --nb-baan: rgba(255, 255, 255, 0.16);
  --nb-a: #c6faff;
  --nb-b: #4f93ff;

  position: fixed;
  /* het spiegelbeeld van .gt-dock en .cookie */
  left: clamp(1rem, 2vw, 2rem);
  bottom: calc(clamp(1rem, 2vw, 2rem) + env(safe-area-inset-bottom, 0px));
  /* onder de nav (100), zodat het open menu hem bedekt, en onder elke modal */
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  margin: 0;
  padding: 0 1.05rem 0 5px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 0% 100%;
  color: var(--ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 60%);
  background-color: color-mix(in srgb, var(--bg) 99%, transparent);
  box-shadow: inset 0 1px 0 0 var(--glass-hi), var(--shadow-lift);
  transition:
    transform 0.8s var(--nb-spring),
    scale 0.5s var(--nb-spring),
    opacity 0.3s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    color 0.4s ease,
    visibility 0s;
}
@media (min-width: 1061px) {
  .nb {
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 60%);
    background-color: color-mix(in srgb, var(--bg) var(--nb-vulling, 74%), transparent);
    -webkit-backdrop-filter: blur(26px) saturate(185%);
    backdrop-filter: blur(26px) saturate(185%);
  }
}

/* Lichte site: de knop is donker (net als de pil van het dock) */
html:not([data-theme="dark"]) .nb:not(.is-op-donker) {
  --bg: #06080d;
  --ink: #eef3f9;
  --glass-border: rgba(174, 245, 253, 0.22);
  --glass-hi: rgba(190, 240, 255, 0.55);
  --nb-vulling: 92%;
  color-scheme: dark;
}
/* Donkere site, of boven een donker vlak: wit */
[data-theme="dark"] .nb,
.nb.is-op-donker {
  --bg: #f3f6fa;
  --ink: #0a0e14;
  --glass-border: #ffffff;
  --glass-hi: rgba(255, 255, 255, 0.98);
  --nb-vulling: 94%;
  --nb-baan: rgba(12, 18, 28, 0.1);
  --nb-a: #11a0d0;
  --nb-b: #1f7fe0;
  color-scheme: light;
  /* geen buitenschaduw en geen saturate: zie de toelichting in gratis.css */
  box-shadow: inset 0 1px 0 0 var(--glass-hi);
}
@media (min-width: 1061px) {
  [data-theme="dark"] .nb,
  .nb.is-op-donker {
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
  }
}

/* ---------- Komen en gaan ---------- */
.nb[data-state="hidden"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(150%);
  transition: opacity 0.3s ease, transform 0.45s var(--nb-settle), visibility 0s linear 0.45s;
}
/* aangekomen: hij zakt rustig weg, niet met een veer */
.nb.is-geland[data-state="hidden"] {
  transform: translateY(40%) scale(0.92);
  transition: opacity 0.35s ease 0.08s, transform 0.5s var(--nb-settle) 0.08s, visibility 0s linear 0.6s;
}

/* ---------- De ring met de pijl ---------- */
.nb__well {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* de pijl vliegt de ring uit en komt van onder terug; alleen binnen de ring zichtbaar */
  overflow: hidden;
}
.nb__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* de ring begint bovenaan, zoals een klok */
  overflow: visible;
}
.nb__baan,
.nb__vol {
  fill: none;
  stroke-width: 2;
}
.nb__baan { stroke: var(--nb-baan); transition: stroke 0.4s ease; }
.nb__vol {
  stroke: url(#nb-verloop);
  stroke-linecap: round;
  /* dasharray en dashoffset zet naarboven.js als attribuut: de omtrek van
     de ring, en hoeveel daarvan nog leeg is */
}
.nb__stop-a { stop-color: var(--nb-a); transition: stop-color 0.4s ease; }
.nb__stop-b { stop-color: var(--nb-b); transition: stop-color 0.4s ease; }
.nb__pijl {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  transition: transform 0.5s var(--nb-spring);
}
.nb__pijl svg { display: block; width: 100%; height: 100%; }
.nb__label { padding-top: 1px; }

/* ---------- Aanraken ---------- */
@media (hover: hover) {
  .nb:hover .nb__pijl { transform: translateY(-1.5px); }
}
/* indrukken: de glasplaat geeft mee (los van transform, dat de in- en uitkomst doet) */
.nb.is-ingedrukt {
  scale: 0.95;
  transition:
    transform 0.8s var(--nb-spring),
    scale 0.12s ease-out,
    opacity 0.3s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    color 0.4s ease,
    visibility 0s;
}
.nb:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 3px; }

/* ---------- De lancering ----------
   Uit: snel en versnellend omhoog de ring uit. Terug: van onder, met een
   veer die net voorbij de rustplek schiet. Samen 560ms, ruim voordat de
   pagina boven is, zodat de ring daarna rustig leeg kan lopen. */
.nb.is-vliegt .nb__pijl { animation: nb-lancering 0.56s linear both; }
@keyframes nb-lancering {
  0% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  34% { transform: translateY(-190%); opacity: 0.2; }
  35% { transform: translateY(190%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1.25); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- Telefoon: alleen de ronde knop ---------- */
@media (max-width: 760px) {
  .nb {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .nb__well { width: 30px; height: 30px; }
  .nb__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nb,
  .nb[data-state="hidden"],
  .nb.is-geland[data-state="hidden"] {
    transform: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .nb.is-vliegt .nb__pijl { animation: none; }
}