* { box-sizing: border-box; }
:root {
  --scroll: 0;
  --crest-size: min(28vw, 360px);
}
html, body {
  margin: 0;
  min-height: 100%;
  background: #0e1730;
  color: #f4f0df;
  font-family: Georgia, "Times New Roman", serif;
}
body { overflow-x: hidden; }
main { min-height: 230vh; }
.hero {
  position: relative;
  height: 185vh;
}
.scene {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #101c36;
  isolation: isolate;
}
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.base {
  z-index: 1;
  transform: scale(calc(1.018 + var(--scroll) * 0.018)) translateY(calc(var(--scroll) * 6px));
  transform-origin: center center;
}
.moonstars {
  z-index: 2;
  opacity: calc(.72 + var(--scroll) * .18);
  transform: translate3d(0, calc(var(--scroll) * -34px), 0) scale(calc(1 + var(--scroll) * .015));
}
.starfield {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(0, calc(var(--scroll) * -48px), 0);
}
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.back-clouds {
  z-index: 4;
  opacity: .68;
  transform: translate3d(0, calc(var(--scroll) * -30px), 0);
}
.front-clouds {
  z-index: 5;
  opacity: .88;
  transform: translate3d(0, calc(var(--scroll) * -58px), 0);
}
.foreground {
  z-index: 6;
  transform: translate3d(0, calc(var(--scroll) * 30px), 0) scale(calc(1 + var(--scroll) * .035));
  transform-origin: bottom center;
}
.crest {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: calc(55% - var(--scroll) * 7%);
  width: var(--crest-size);
  height: auto;
  transform: translate3d(-50%, -50%, 0) scale(calc(1 - var(--scroll) * .06));
  filter: drop-shadow(0 20px 26px rgba(4, 8, 18, .32));
  user-select: none;
  -webkit-user-drag: none;
}
.cloud {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  will-change: transform;
  filter: drop-shadow(0 8px 8px rgba(8, 14, 30, .10));
}
.cloud-1 { width: 33vw; min-width: 300px; left: -9vw; top: 11vh; animation: float-r 120s ease-in-out infinite; }
.cloud-2 { width: 16vw; min-width: 170px; left: 29vw; top: 8vh; animation: float-l 155s ease-in-out infinite; }
.cloud-3 { width: 26vw; min-width: 260px; right: -4vw; top: 13vh; animation: float-r2 140s ease-in-out infinite; }
.cloud-4 { width: 23vw; min-width: 220px; left: -1vw; top: 33vh; animation: float-l2 135s ease-in-out infinite; }
.cloud-5 { width: 18vw; min-width: 180px; left: 37vw; top: 36vh; animation: float-r 170s ease-in-out infinite; }
.cloud-6 { width: 12vw; min-width: 135px; right: 19vw; top: 29vh; animation: float-l 180s ease-in-out infinite; }
.cloud-7 { width: 26vw; min-width: 250px; right: -2vw; top: 43vh; animation: float-r2 160s ease-in-out infinite; }
@keyframes float-r {
  0%, 100% { transform: translate3d(-20px,0,0); }
  50% { transform: translate3d(70px,4px,0); }
}
@keyframes float-l {
  0%, 100% { transform: translate3d(24px,0,0); }
  50% { transform: translate3d(-54px,-3px,0); }
}
@keyframes float-r2 {
  0%, 100% { transform: translate3d(-12px,0,0); }
  50% { transform: translate3d(48px,-5px,0); }
}
@keyframes float-l2 {
  0%, 100% { transform: translate3d(12px,0,0); }
  50% { transform: translate3d(-42px,3px,0); }
}
.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  transform: translate(-50%, -50%);
  opacity: .35;
  animation: blink var(--t) ease-in-out infinite;
  animation-delay: var(--d);
}
.star::before, .star::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,235,177,.95), transparent);
  border-radius: 999px;
}
.star::before { width: 100%; height: 2px; }
.star::after { width: 2px; height: 100%; }
.star.small::before { height: 1px; }
.star.small::after { width: 1px; }
@keyframes blink {
  0%, 100% { opacity: .10; filter: drop-shadow(0 0 0 rgba(255,230,180,0)); transform: translate(-50%, -50%) scale(.75); }
  45% { opacity: .38; }
  62% { opacity: .95; filter: drop-shadow(0 0 8px rgba(255,226,160,.75)); transform: translate(-50%, -50%) scale(1.18); }
  78% { opacity: .28; }
}
.after {
  position: relative;
  z-index: 20;
  margin-top: -10vh;
  min-height: 60vh;
  padding: 0 1.25rem 8rem;
}
.panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  background: rgba(9, 15, 30, .62);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
  backdrop-filter: blur(8px);
}
.panel h1 { margin: 0 0 .5rem; font-size: clamp(2rem, 4vw, 3.25rem); }
.panel p { margin: 0; line-height: 1.55; }
@media (max-width: 900px) {
  :root { --crest-size: min(50vw, 300px); }
  .hero { height: 165vh; }
  .crest { top: calc(58% - var(--scroll) * 6%); }
  .cloud-1 { width: 58vw; }
  .cloud-2 { width: 28vw; left: 38vw; }
  .cloud-3 { width: 46vw; }
  .cloud-4 { width: 40vw; top: 36vh; }
  .cloud-5 { width: 30vw; left: 40vw; top: 40vh; }
  .cloud-6 { width: 22vw; }
  .cloud-7 { width: 45vw; top: 47vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .star { animation: none !important; }
  .base, .moonstars, .starfield, .back-clouds, .front-clouds, .foreground, .crest { transform: none !important; }
}

/* v3: foreground_forest.png en crest.png zijn omgezet naar echte PNG-alpha. */