/* =========================================================================
   Scroll-gedreven "groeiend nest" — alleen homepage
   ========================================================================= */
.nest-intro { padding-bottom: var(--s4); }

.nest-scroll { position: relative; background: var(--sand); }
.nest-track { position: relative; height: 360vh; }
@media (max-width: 700px){ .nest-track { height: 320vh; } }

.nest-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ---- Scène ---- */
.ns-scene {
  position: relative;
  width: min(94vw, 1080px);
  height: min(86svh, 760px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #edf0e6 0%, #e6e3d3 76%, #ddd8c4 100%);
  box-shadow: inset 0 0 0 1px rgba(92,115,85,0.18), var(--shadow-md);
}
/* zachte grond */
.ns-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  background: linear-gradient(180deg, #d9d3bf 0%, #cdc6ad 100%);
}
.ns-ground::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: radial-gradient(closest-side, rgba(92,115,85,0.25), transparent 70%);
  filter: blur(2px);
}

/* ---- Echte boom ---- */
.ns-treewrap {
  position: absolute;
  left: 57%; bottom: 2%;
  transform: translateX(-50%);
  height: 90%;
  aspect-ratio: 718 / 900;
  filter: drop-shadow(0 16px 22px rgba(35,53,41,0.14));
}
@media (max-width: 760px){ .ns-treewrap { left: 50%; height: 56%; bottom: 4%; } }
.ns-tree-img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; }

/* ---- Zijdeweb: gesponnen draden, geen wolk ---- */
.ns-nest {
  position: absolute;
  left: 48.5%; top: 62%;
  width: 26%;
  aspect-ratio: 1 / 1.5;
  transform: translate(-50%, -50%) scale(var(--nest, 0.14));
  transform-origin: center 34%;
  will-change: transform;
  pointer-events: none;
}
.ns-nest .silk {
  position: absolute; inset: 0;
  background:
    radial-gradient(42% 30% at 52% 24%, rgba(255,255,255,0.94), rgba(249,246,239,0.62) 54%, transparent 78%),
    radial-gradient(52% 46% at 48% 54%, rgba(247,243,234,0.8), rgba(236,229,214,0.32) 70%, transparent 84%),
    radial-gradient(46% 30% at 50% 86%, rgba(208,196,170,0.55), rgba(208,196,170,0) 72%);
  border-radius: 46% 54% 48% 52% / 25% 27% 75% 73%;
  filter: blur(0.5px);
  box-shadow: inset 0 -7px 16px rgba(150,134,98,0.20);
}
.ns-nest .silk::before {
  content: ""; position: absolute; inset: 6% 20% 10%;
  background: radial-gradient(50% 50% at 50% 40%, rgba(255,255,255,0.6), transparent 72%);
  border-radius: 50%;
  filter: blur(1.6px);
}
.ns-nest .silk::after {
  content: ""; position: absolute; inset: -16% -10%;
  background: radial-gradient(46% 42% at 50% 34%, rgba(255,255,255,0.14), transparent 62%);
  filter: blur(9px);
}
.ns-nest .threads { position: absolute; inset: -6% -8%; width: 116%; height: 112%; overflow: visible; }
.ns-nest .threads path { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 0.5; stroke-linecap: round; }
.ns-nest .threads path.dim { stroke: rgba(247,244,237,0.32); stroke-width: 0.38; }

/* ---- Rupsen ---- */
.ns-procession { position: absolute; inset: 0; }
.ns-cat-wrap {
  position: absolute;
  width: clamp(8px, 1.4vw, 13px);
  transform: translate(-50%, -50%) rotate(var(--rot, 90deg));
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(40,28,14,0.22));
}
.ns-cat-wrap.on { opacity: 1; }
.ns-cat { display: block; width: 100%; height: auto; overflow: visible; }
.ns-cat-shadow { fill: rgba(40,28,14,0.10); }
.ns-cat-b circle { fill: #9b9488; }
.ns-cat-b circle:nth-child(even) { fill: #8b8478; }
.ns-cat-head { fill: #4f4636 !important; }

@media (prefers-reduced-motion: no-preference) {
  .ns-cat { animation: nsCrawl 1.4s ease-in-out infinite; }
}
@keyframes nsCrawl {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50%      { transform: translateX(1px) scaleX(0.92); }
}
@keyframes nsHairs {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.12); }
}

/* ---- HUD ---- */
.ns-hud {
  position: absolute;
  left: clamp(14px, 3%, 34px);
  top: clamp(14px, 4%, 34px);
  width: min(86%, 360px);
  background: rgba(246,243,236,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid rgba(92,115,85,0.22);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: clamp(16px, 2.4vw, 24px);
  z-index: 4;
}
.ns-hud .ns-eyebrow {
  font-family: var(--display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss);
  margin: 0 0 14px;
}
.ns-readout { display: flex; gap: 6px; margin-bottom: 14px; }
.ns-readout > div { flex: 1; }
.ns-readout b {
  display: block;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  letter-spacing: -0.03em; color: var(--oak);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}
.ns-readout span {
  display: block; font-size: 0.74rem; color: var(--ink-soft);
  letter-spacing: 0.02em; margin-top: 3px;
}
.ns-progress { height: 6px; border-radius: 999px; background: rgba(92,115,85,0.2); overflow: hidden; margin-bottom: 14px; }
.ns-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--moss), var(--oak)); border-radius: 999px; }
.ns-caps { position: relative; min-height: 128px; }
.ns-cap {
  position: absolute; inset: 0;
  margin: 0; opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.ns-cap.on { opacity: 1; transform: none; }
.ns-cap b { font-family: var(--display); font-weight: 600; color: var(--ink); display: block; margin-bottom: 4px; font-size: 1.05rem; letter-spacing: -0.01em; }
.ns-cap span { color: var(--ink-soft); font-size: 0.96rem; }
.ns-cta { margin-top: 16px; width: 100%; min-height: 48px; }
.ns-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 13px; color: var(--moss);
  background: rgba(246,243,236,0.8); padding: 6px 14px; border-radius: 999px;
  z-index: 4; transition: opacity .3s ease;
}
.ns-hint svg { width: 15px; height: 15px; animation: nsBob 1.6s ease-in-out infinite; }
@keyframes nsBob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(3px);} }
@media (prefers-reduced-motion: reduce) { .ns-hint svg { animation: none; } }

@media (max-width: 760px) {
  .ns-hud { left: 50%; right: auto; transform: translateX(-50%); top: 12px; bottom: auto; width: calc(100% - 24px); }
  .ns-caps { min-height: 116px; }
  .ns-hint { display: none; }
}