/* =========================
   FULL CSS (drop-in)
   - Full-width section background gradient: #D8FFFF -> #52D0DE
   - Top wave cut-out
   - Text color: #0077B6
   - Keeps your original scroll text animation + indents
   ========================= */

:root {
  /* layout */
  --max-width: 1200px;
  --section-padding: 80px;
  --line-gap: 5px;

  /* colors */
  --grad-top: #D8FFFF;
  --grad-bottom: #52D0DE;
  --font-color: #0077B6;
  --muted: rgba(0, 119, 182, 0.75);

  /* wave */
  --wave-h: 140px;

  /* background color ABOVE this section (set to match the section above) */
  --above-bg: #FFFFB5;

  /* anim */
  --duration: 1400ms;
  --ease: cubic-bezier(.2, .9, .2, 1);
  --slide-from: min(1200px, 110vw);

  /* layout */
  --indent-max: 62%;
}

* { box-sizing: border-box; }

/* voorkomt horizontaal scrollen door animaties */
html, body { overflow-x: hidden; }

/* NIET site-wide. Alleen voor de lines sectie */
section#scroll-text.wave-section{
  color: var(--font-color);
  font-family: var(--font-heading);
}

/* optional: your header styles (kept from your old CSS) */
header.site-header {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 24px;
}

header h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 12px;
}

header p,
footer p {
  color: var(--muted);
  max-width: 70ch;
  margin: 0;
}

/* spacer (kept) */
.spacer {
  height: 60vh;
  display: grid;
  place-items: center;
  color: var(--muted);
}

/* =========================
   WAVE SECTION (FULL WIDTH)
   ========================= */

section#scroll-text.wave-section {
  position: relative;
  width: 100%;
  background: linear-gradient(to bottom, var(--grad-top), var(--grad-bottom));
  color: var(--font-color);

  /* room for wave */
  padding-top: var(--wave-h);

  overflow: hidden;

  /* IMPORTANT: don't center all text */
  text-align: left;
}

/* content wrapper keeps your old max-width behavior */
section#scroll-text .wave-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding) 24px;
}

/* top wave overlay (cut-out) */
section#scroll-text .wave-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--wave-h);
  pointer-events: none;
  z-index: 0;
}

section#scroll-text .wave-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* "air" above the wave = color of the section above */
section#scroll-text .wave-top path {
  fill: var(--above-bg);
}

/* =========================
   LINES / TEXT
   ========================= */

.lines {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--line-gap);

  /* ensure left layout */
  align-items: flex-start;
}

.line {
  font-family: "Knewave", system-ui;
  font-size: clamp(22px, 3vw, 36px);
  white-space: nowrap;

  color: var(--font-color);

  opacity: 0;
  transform: translateX(0); /* belangrijk: NIET buiten beeld zetten */

  will-change: transform, opacity;
}

.line.is-visible {
  animation: slideIn var(--duration) var(--ease) forwards;
}

@keyframes slideIn {
  from { transform: translateX(var(--slide-from)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* =========================
   BACKWARDS COMPAT
   If you still have old rule:
   section#scroll-text { max-width... }
   make sure it's NOT present anymore,
   OR this override will neutralize it.
   ========================= */

section#scroll-text {
  max-width: none;
  margin: 0;
  padding: 0;
}

section#scroll-text.wave-section{
  margin-top: -40px;
  padding-top: calc(var(--wave-h) + 40px);
}

section#scroll-text .wave-top { transform: none !important; }

section#scroll-text .wave-top svg{
  will-change: transform;
  transform: translate3d(0,0,0);
}