/* ============================================================
   Regenplan.nl — hero-doorsnede
   Technische blauwdruk van een modern NL huis met ondergronds
   regenwatersysteem. Lichte lijnen op de donkere hero, amber
   waterstroom door de leidingen, golvend tankniveau.
   ============================================================ */

.doorsnede {
  position: absolute;
  right: max(-60px, calc((100vw - 1480px) / 2));
  top: 50%;
  transform: translateY(-51%);
  width: min(45vw, 620px);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.doorsnede svg { width: 100%; height: auto; display: block; }

/* alleen op brede schermen; daaronder doet de hero-stat-kaart het werk */
@media (max-width: 1180px) { .doorsnede { display: none; } }
@media (min-width: 1181px) {
  .hero-stat { display: none; }            /* het 84.000 L-cijfer zit nu ín de tekening */
  .hero .lead { max-width: 42ch; }         /* tekstkolom vrijhouden van de tekening */
  .hero h1 { max-width: 12ch; }
}

/* ---------- lijnstijlen ---------- */
.ds-line   { fill: none; stroke: rgba(196, 212, 220, .85); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-thin   { fill: none; stroke: rgba(196, 212, 220, .38); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ds-pipe   { fill: none; stroke: rgba(196, 212, 220, .45); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.ds-fill   { fill: rgba(196, 212, 220, .045); }
.ds-soil   { fill: rgba(10, 18, 20, .35); }
.ds-water  { fill: rgba(168, 191, 201, .22); }

.ds-label      { font-family: "Instrument Sans", sans-serif; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; fill: rgba(196, 212, 220, .65); }
.ds-stat       { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 30px; fill: #C4914A; }
.ds-stat-sub   { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; fill: rgba(248, 248, 244, .6); letter-spacing: .02em; text-transform: none; }

/* ---------- intro: blauwdruk tekent zichzelf ---------- */
.ds-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dsDraw 1.4s cubic-bezier(.45, 0, .2, 1) forwards;
}
.ds-draw.d2 { animation-delay: .25s; }
.ds-draw.d3 { animation-delay: .5s; }
.ds-draw.d4 { animation-delay: .75s; }
@keyframes dsDraw { to { stroke-dashoffset: 0; } }

/* onderdelen en labels faden ná het tekenwerk in */
.ds-fade {
  opacity: 0;
  animation: dsFade .8s cubic-bezier(.22, .8, .3, 1) forwards;
  animation-delay: 1.1s;
}
.ds-fade.f2 { animation-delay: 1.35s; }
.ds-fade.f3 { animation-delay: 1.6s; }
.ds-fade.f4 { animation-delay: 1.85s; }
@keyframes dsFade { to { opacity: 1; } }

/* ---------- waterstroom door de leidingen ---------- */
.ds-flow {
  fill: none;
  stroke: #C4914A;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 3 14;
  opacity: 0;
  animation: dsFlow 1.6s linear infinite, dsFade .8s cubic-bezier(.22, .8, .3, 1) 1.9s forwards;
}
.ds-flow.slow { animation-duration: 2.4s, .8s; }
@keyframes dsFlow { to { stroke-dashoffset: -34; } }

/* ---------- tankwater: golfje + zachte deining ---------- */
.ds-waterbody { animation: dsBob 5.5s ease-in-out infinite; }
@keyframes dsBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.ds-wave { animation: dsWave 4s linear infinite; }
@keyframes dsWave { to { transform: translateX(-72px); } }

/* ---------- regen boven het dak ---------- */
.ds-drop {
  stroke: rgba(196, 212, 220, .55);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: dsRain 1.5s linear infinite;
}
.ds-drop.r2 { animation-delay: .3s; }
.ds-drop.r3 { animation-delay: .6s; }
.ds-drop.r4 { animation-delay: .9s; }
.ds-drop.r5 { animation-delay: 1.2s; }
@keyframes dsRain {
  0%   { transform: translateY(-26px); opacity: 0; }
  25%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* ---------- pulserende hotspots ---------- */
.ds-dot { fill: #C4914A; }
.ds-puls {
  fill: none; stroke: #C4914A; stroke-width: 1.4;
  transform-origin: center;
  transform-box: fill-box;
  animation: dsPuls 2.6s cubic-bezier(.22, .8, .3, 1) infinite;
}
@keyframes dsPuls {
  0%   { transform: scale(.4); opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ---------- reduced motion: eindbeeld tonen, alles stil ---------- */
@media (prefers-reduced-motion: reduce) {
  .ds-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .ds-fade, .ds-flow { opacity: 1; animation: none; }
  .ds-waterbody, .ds-wave, .ds-drop, .ds-puls { animation: none; }
  .ds-drop { opacity: 0; }
  .ds-puls { opacity: 0; }
}