/* Binnenkort-pagina: dezelfde merklook als de site. De achtergrond loopt langzaam door de kleurwereld (roze, groen, geel);
   tekst is altijd ink, het logo en het woordmerk staan op ink, zodat geen logolijn wegvalt tegen de achtergrond. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/poppins-latin-900-normal.woff2') format('woff2'); }
:root {
  --yellow: #F9D300;
  --indigo: #5460D4;
  --pink: #FEBBF9;
  --green: #3CD95D;
  --ink: #17162A;
  --paper: #FFFFFF;
  --display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --side: max(16px, 5.3vw);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--pink); color: var(--ink); font-family: var(--display); font-size: clamp(16px, 1.1vw, 20px); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
/* Kleurwereld op een timer (er valt niets te scrollen): roze → groen → geel in 36 s. Twee vaste lagen die alleen in doorzichtigheid
   veranderen, zodat de browser niet elke frame het hele scherm opnieuw tekent. Zelfde menging als een achtergrondkleur-animatie. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none; will-change: opacity; animation: 36s ease-in-out infinite; }
body::before { background: var(--green); animation-name: world-green; }
body::after { background: var(--yellow); animation-name: world-yellow; }
@keyframes world-green { 0%, 22% { opacity: 0; } 33%, 66% { opacity: 1; } 66.01%, 100% { opacity: 0; } }
@keyframes world-yellow { 0%, 55% { opacity: 0; } 66%, 88% { opacity: 1; } 100% { opacity: 0; } }
::selection { background: var(--ink); color: var(--paper); }
h1 { margin: 0; line-height: 1.02; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.cs-wrap { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto auto; }

/* Bovenbalk: logo + woordmerk op een ink-pil */
.cs-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(16px, 2vw, 36px) var(--side) 0; }
.cs-brand { display: inline-flex; align-items: center; gap: clamp(8px, .8vw, 14px); background: var(--ink); color: var(--paper); border-radius: 999px; padding: clamp(8px, .7vw, 12px) clamp(18px, 1.6vw, 28px) clamp(8px, .7vw, 12px) clamp(12px, 1vw, 18px); }
.cs-brand .logo { width: clamp(28px, 2.4vw, 44px); height: auto; aspect-ratio: 399.55 / 450.12; display: block; overflow: visible; }
.wm { font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-size: clamp(22px, 2vw, 38px); }
.wm-i { position: relative; display: inline-block; }
.wm-i svg { position: absolute; left: calc(50% + 0.02em); top: -0.02em; transform: translateX(-50%); width: 0.42em; height: 0.34em; overflow: visible; }
.wm-i path { stroke: var(--yellow); stroke-width: 15; stroke-linecap: round; fill: none; }
.cs-place { font-weight: 700; font-size: clamp(14px, 1vw, 18px); }

/* Midden: kop links, logo-schijf rechts */
.cs-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 80px); padding: clamp(24px, 3vw, 56px) var(--side); }
/* Zelfde stijl als de hero-kop van de site (DESIGN.md: display) */
.cs-main h1 { font-size: clamp(48px, 7.8vw, 150px); font-weight: 700; letter-spacing: -0.035em; }
.cs-lead { margin-top: clamp(16px, 1.6vw, 30px); max-width: 34ch; font-size: clamp(17px, 1.4vw, 26px); font-weight: 700; line-height: 1.4; }
.cs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(24px, 2.4vw, 44px); }
.pillbtn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 0 1.5em; height: clamp(48px, 3.2vw, 60px); font-weight: 700; font-size: clamp(15px, 1.05vw, 19px); text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease); }
.pillbtn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 66%); transform: translateX(-120%); transition: transform .7s var(--ease); }
.pillbtn:hover { transform: translateY(-2px); }
.pillbtn:hover::after { transform: translateX(120%); }
.pillbtn svg { width: 1.15em; height: 1.15em; flex: none; }
/* Glans in het midden, zoals de PSD (DESIGN.md: bewuste contrast-uitzondering) */
.i { background: linear-gradient(180deg, #4652C8 0%, #8590EC 46%, #5460D4 60%, #3E49B8 100%); color: var(--paper); box-shadow: 0 8px 18px -10px rgba(23, 22, 42, .45); }
.cs-reply { display: inline-flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 15px; }
.cs-reply i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.cs-reply i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }

.cs-art { display: grid; place-items: center; }
/* Schijf: ink-cirkel met schaduw (sticker lifted); de ring draait als eigen laag, zonder filter */
.cs-disc { position: relative; width: min(100%, 48vh, 500px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--ink); box-shadow: 0 34px 60px -24px rgba(23, 22, 42, .55); }
.cs-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.cs-ring { animation: spin 24s linear infinite; will-change: transform; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Banden zoals op de site: twee pillen met lopende tekst */
.cs-band { display: grid; gap: clamp(10px, 1.2vw, 20px); padding: 0 2vw clamp(16px, 2vw, 32px); overflow: hidden; }
.cs-band .pill { height: clamp(52px, 5.6vw, 104px); width: 92%; border-radius: 999px; display: flex; align-items: center; overflow: hidden; }
.cs-band .dark { background: var(--ink); color: var(--paper); }
.cs-band .light { background: var(--paper); color: var(--ink); justify-self: end; box-shadow: inset 0 0 0 2px var(--ink); }
.marquee { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.marquee span { font-weight: 900; font-size: clamp(24px, 3.6vw, 70px); letter-spacing: -0.04em; white-space: nowrap; line-height: 1; }
/* Overal dezelfde afstand, ook op de naad van de lus (de band wordt gevuld door fillMarquee in binnenkort.js) */
.marquee .mq-i, .marquee .mq-s { padding-right: .3em; }
.marquee:not([data-sep]) .mq-i { padding-right: .75em; }
.light .marquee { animation-direction: reverse; animation-duration: 30s; }
@keyframes marquee { to { transform: translateX(-50%); } }

.cs-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0 var(--side) calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom, 0px)); font-size: 13px; font-weight: 700; }
/* Ruimer tikdoel zonder dat de regel verschuift */
.cs-foot a { text-underline-offset: 3px; padding-block: 12px; margin-block: -12px; }
.cs-pause { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; padding: 12px 0; margin-block: -12px; cursor: pointer; }
.cs-pause svg { width: 14px; height: 14px; }
.cs-pause .play, .is-paused .cs-pause .pause { display: none; }
.is-paused .cs-pause .play { display: block; }
/* Pauze: alle beweging staat stil (WCAG 2.2.2) */
.is-paused *, .is-paused *::before, .is-paused *::after, .is-paused body::before, .is-paused body::after { animation-play-state: paused !important; }

.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; }

@media (max-width: 860px) {
  /* Logo en kop als één blok in het midden; anders verdeelt een hoog scherm (tablet staand) de ruimte over de twee rijen */
  .cs-main { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .cs-art { order: -1; justify-items: start; }
  .cs-disc { width: min(52vw, 260px); }
  .cs-place { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body { background: var(--yellow); }
  body::before, body::after { display: none; }
  .marquee, .cs-ring, .cs-reply i::after { animation: none; }
  .pillbtn, .pillbtn::after { transition: none; }
  .cs-pause { display: none; }
}