/* ==========================================================================
   Scroll-Effekte: Elemente erscheinen einmal, wenn sie ins Bild kommen.
   Greift nur, wenn <html> die Klasse js-reveal hat (per Skript im <head>,
   nicht bei „Bewegung reduzieren“). Ohne Skript ist alles sofort sichtbar.
   ========================================================================== */

:root {
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-step: 110ms;
}

/* Grundeffekt: leicht von unten */
html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--reveal-ease),
    transform 800ms var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}
html.js-reveal [data-reveal="right"] { transform: translateX(28px); }
@media (max-width: 860px) {
  html.js-reveal [data-reveal="right"] { transform: translateY(24px); }
}
/* Nichts, was gerade hereingleitet, darf die Seite verbreitern (clip bricht sticky nicht) */
main { overflow-x: clip; }
html.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Bilder und Videos: werden von unten nach oben aufgezogen */
html.js-reveal [data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0 round var(--radius-m));
  transition: clip-path 1100ms cubic-bezier(0.65, 0, 0.25, 1);
}
html.js-reveal [data-reveal="wipe"].is-revealed { clip-path: inset(0 0 0 0 round var(--radius-m)); }

/* Hero: Bäume und Haus wachsen aus dem Horizont */
html.js-reveal [data-reveal="grow"] { opacity: 1; transform: none; }
html.js-reveal .h-grow {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 700ms cubic-bezier(0.3, 1.35, 0.5, 1);
  transition-delay: calc(350ms + var(--i, 0) * 90ms);
}
html.js-reveal [data-reveal="grow"].is-revealed .h-grow { transform: none; }

/* Grundstücksplan: Straße und Grenze zeichnen sich, dann füllt sich das Gelände */
html.js-reveal [data-reveal="plan"] { opacity: 1; transform: none; }
html.js-reveal [data-reveal="plan"] .plan-road-line,
html.js-reveal [data-reveal="plan"] .plan-boundary {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.45, 0, 0.3, 1), fill-opacity 900ms ease 900ms;
}
html.js-reveal [data-reveal="plan"] .plan-boundary { fill-opacity: 0; transition-delay: 200ms, 1000ms; }
html.js-reveal [data-reveal="plan"] :is(.plan-trees, .plan-lake, .plan-fences, .plan-field, .plan-house, .plan-label) {
  opacity: 0;
  transition: opacity 700ms ease;
}
html.js-reveal [data-reveal="plan"] .plan-trees { transition-delay: 1300ms; }
html.js-reveal [data-reveal="plan"] .plan-lake { transition-delay: 1500ms; }
html.js-reveal [data-reveal="plan"] .plan-fences { transition-delay: 1700ms; }
html.js-reveal [data-reveal="plan"] .plan-house { transition-delay: 1900ms; }
html.js-reveal [data-reveal="plan"] .plan-field { transition-delay: 2100ms; }
html.js-reveal [data-reveal="plan"] .plan-label { transition-delay: 2200ms; }

html.js-reveal [data-reveal="plan"].is-revealed :is(.plan-road-line, .plan-boundary) { stroke-dashoffset: 0; fill-opacity: 1; }
html.js-reveal [data-reveal="plan"].is-revealed :is(.plan-lake, .plan-fences, .plan-field, .plan-house, .plan-label) { opacity: 1; }
html.js-reveal [data-reveal="plan"].is-revealed .plan-trees { opacity: 0.85; }