/* ==========================================================================
   NATURE SHAPES — organic decorative layer
   --------------------------------------------------------------------------
   Everything here is drawn in the brand greys only, via --shape-* tokens.
   It sits behind content at z-index 0, never intercepts pointer events, and
   is the first thing removed under prefers-reduced-motion.

   Forms borrowed from nature: topographic contours, river meanders, mountain
   ridges, leaf fronds, seed heads, wave crests, pebbles.
   ========================================================================== */

.shape-field {
  position: absolute;
  inset: 0;
  z-index: var(--z-shapes);
  pointer-events: none;
  overflow: hidden;
}

.shape {
  position: absolute;
  pointer-events: none;
  color: var(--shape-line);
  will-change: transform;
}

.shape svg { width: 100%; height: 100%; overflow: visible; }

.shape--soft { color: var(--shape-line); }
.shape--hard { color: var(--shape-line-2); }

/* Position helpers ------------------------------------------------------- */
.shape--tl { top: -4%;  left: -6%; }
.shape--tr { top: -8%;  right: -8%; }
.shape--bl { bottom: -10%; left: -8%; }
.shape--br { bottom: -6%; right: -6%; }
.shape--cl { top: 50%; left: -10%; translate: 0 -50%; }
.shape--cr { top: 50%; right: -10%; translate: 0 -50%; }

/* --------------------------------------------------------------------------
   1 · MORPHING BLOB — a slow, living organic mass
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  pointer-events: none;
  background: var(--shape-fill);
  border: 1px solid var(--shape-line);
  border-radius: 61% 39% 45% 55% / 43% 62% 38% 57%;
  animation: blob-morph 22s var(--ease-in-out) infinite;
  will-change: border-radius, transform;
}

.blob--2 { animation-duration: 29s; animation-delay: -7s; background: transparent; }
.blob--3 { animation-duration: 35s; animation-delay: -14s; border-color: var(--shape-line-2); }

@keyframes blob-morph {
  0%,  100% { border-radius: 61% 39% 45% 55% / 43% 62% 38% 57%; transform: rotate(0deg) scale(1); }
  25%       { border-radius: 40% 60% 65% 35% / 55% 40% 60% 45%; transform: rotate(4deg) scale(1.035); }
  50%       { border-radius: 55% 45% 34% 66% / 38% 58% 42% 62%; transform: rotate(-3deg) scale(0.975); }
  75%       { border-radius: 36% 64% 57% 43% / 63% 35% 65% 37%; transform: rotate(2deg) scale(1.02); }
}

/* --------------------------------------------------------------------------
   2 · TOPOGRAPHIC CONTOURS — nested elevation rings
   One base path, scaled from the centre. Drawn by JS or inline SVG.
   -------------------------------------------------------------------------- */
.topo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-origin: 50% 50%;
}

.topo path:nth-child(1) { transform: scale(0.18); opacity: 0.30; }
.topo path:nth-child(2) { transform: scale(0.32); opacity: 0.42; }
.topo path:nth-child(3) { transform: scale(0.46); opacity: 0.55; }
.topo path:nth-child(4) { transform: scale(0.60); opacity: 0.68; }
.topo path:nth-child(5) { transform: scale(0.74); opacity: 0.80; }
.topo path:nth-child(6) { transform: scale(0.88); opacity: 0.90; }
.topo path:nth-child(7) { transform: scale(1.00); opacity: 1; }

/* Contours breathe outward like a slow tide */
.topo--live path { animation: topo-breathe 14s var(--ease-in-out) infinite; }
.topo--live path:nth-child(1) { animation-delay: 0s; }
.topo--live path:nth-child(2) { animation-delay: -0.6s; }
.topo--live path:nth-child(3) { animation-delay: -1.2s; }
.topo--live path:nth-child(4) { animation-delay: -1.8s; }
.topo--live path:nth-child(5) { animation-delay: -2.4s; }
.topo--live path:nth-child(6) { animation-delay: -3.0s; }
.topo--live path:nth-child(7) { animation-delay: -3.6s; }

@keyframes topo-breathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Scroll-drawn contour: JS sets --draw 0→1 */
.topo--draw path {
  stroke-dasharray: 1200;
  stroke-dashoffset: calc(1200 - (var(--draw, 0) * 1200));
}

/* --------------------------------------------------------------------------
   3 · MOUNTAIN RIDGE — layered silhouette, used as a section divider
   -------------------------------------------------------------------------- */
.ridge {
  display: block;
  width: 100%;
  height: clamp(70px, 9vw, 150px);
}

.ridge path { fill: currentColor; }
.ridge .r-far  { color: var(--shape-fill); }
.ridge .r-mid  { color: var(--shape-fill-2); }
.ridge .r-near { color: var(--bg-sunk); }

/* --------------------------------------------------------------------------
   4 · RIVER / WAVE LINES — long flowing strokes that drift sideways
   -------------------------------------------------------------------------- */
.waves { width: 100%; height: 100%; }

.waves path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: wave-drift 26s linear infinite;
}

.waves path:nth-child(2) { opacity: 0.72; animation-duration: 32s; animation-direction: reverse; }
.waves path:nth-child(3) { opacity: 0.52; animation-duration: 38s; }
.waves path:nth-child(4) { opacity: 0.34; animation-duration: 44s; animation-direction: reverse; }
.waves path:nth-child(5) { opacity: 0.22; animation-duration: 50s; }

@keyframes wave-drift {
  to { transform: translateX(-240px); }
}

/* --------------------------------------------------------------------------
   5 · LEAF / FROND — a single elegant blade with veins
   -------------------------------------------------------------------------- */
.frond path,
.frond line { stroke: currentColor; fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.frond .blade { fill: var(--shape-fill); }
.frond .vein { opacity: 0.55; }

.frond--sway { animation: sway 11s var(--ease-in-out) infinite; transform-origin: 50% 100%; }

@keyframes sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}

/* --------------------------------------------------------------------------
   6 · SEED HEAD — dandelion-style radiating filaments
   -------------------------------------------------------------------------- */
.seed line { stroke: currentColor; stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.seed circle { fill: currentColor; }
.seed--turn { animation: seed-turn 60s linear infinite; transform-origin: 50% 50%; }

@keyframes seed-turn { to { transform: rotate(360deg); } }

/* Drifting motes — small seeds carried across a section */
.motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.mote {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--shape-line-2);
  animation: mote-float var(--md, 24s) linear infinite;
  animation-delay: var(--mdel, 0s);
  opacity: 0;
}

@keyframes mote-float {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.5; }
  100% { transform: translate(var(--mx-end, 70px), -130px) scale(1.15); opacity: 0; }
}

/* --------------------------------------------------------------------------
   7 · PEBBLES — a scattered cluster of stacked stones
   -------------------------------------------------------------------------- */
.pebbles ellipse {
  fill: var(--shape-fill);
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   8 · SECTION DIVIDERS
   -------------------------------------------------------------------------- */
.divider {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  color: var(--bg);
}

.divider svg { display: block; width: 100%; height: clamp(52px, 6.5vw, 110px); }
.divider path { fill: currentColor; }

.divider--to-sunk { color: var(--bg-sunk); }
.divider--to-bg { color: var(--bg); }

/* Hairline contour that rides on top of a divider */
.divider__line {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.divider__line path {
  fill: none;
  stroke: var(--shape-line-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --------------------------------------------------------------------------
   9 · AMBIENT ORB — soft radial bloom behind key content
   -------------------------------------------------------------------------- */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--shape-fill-2), transparent 68%);
  animation: orb-drift 20s var(--ease-in-out) infinite;
  will-change: transform;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, -4%) scale(1.08); }
  66%      { transform: translate(-3%, 3%) scale(0.94); }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — keep the forms, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .topo--live path,
  .waves path,
  .frond--sway,
  .seed--turn,
  .orb { animation: none; }

  .motes { display: none; }
}