/* Lanceringspagina met filmpje */
:root {
  --coral: #EC644F; --peach: #F2AA91; --navy: #222C49; --navy-dark: #101423; --off: #FCFBF5;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy-dark); color: var(--off); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* ---------- Film ---------- */
.film { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #222C49 0%, #101423 70%); }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; }
.route { position: absolute; inset: 0; width: 100%; height: 100%; }
#route-ghost { fill: none; stroke: rgba(242,170,145,.35); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; }
#route-path { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(236,100,79,.5)); }
#rider { fill: var(--off); }
#rider-halo { fill: var(--coral); opacity: .25; }

.scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px; pointer-events: none; opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
.scene.is-on { opacity: 1; transform: none; filter: none; }
.scene.is-off { opacity: 0; transform: translateY(-24px) scale(1.02); filter: blur(6px); }

/* scène 1: logo */
.big-logo { width: min(34vw, 220px); height: auto; overflow: visible; }
.big-logo .ring { stroke: var(--coral); stroke-dasharray: 120; stroke-dashoffset: 120; }
.big-logo .m { stroke: var(--off); stroke-dasharray: 60; stroke-dashoffset: 60; }
.scene.is-on .big-logo .ring { animation: draw 1.6s .2s cubic-bezier(.6,.1,.2,1) forwards; }
.scene.is-on .big-logo .m { animation: draw 1.2s 1.1s cubic-bezier(.6,.1,.2,1) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 12vw, 150px); letter-spacing: .08em; line-height: 1; margin-top: 18px;
  opacity: 0; transform: translateY(20px); }
.scene.is-on .wordmark { animation: rise .9s 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* scène 2: naam */
.stack { margin: 0; display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 10vw, 128px); line-height: .92; letter-spacing: -.02em; }
.stack span { opacity: 0; transform: translateX(-60px); }
.scene.is-on .stack span { animation: slide .8s cubic-bezier(.2,.8,.2,1) forwards; }
.scene.is-on .stack span:nth-child(2) { animation-delay: .35s; }
.scene.is-on .stack span:nth-child(3) { animation-delay: .7s; }
@keyframes slide { to { opacity: 1; transform: none; } }
.accent { color: var(--coral); }

/* scène 3: club */
.big-line { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 10vw, 120px); line-height: 1; text-transform: uppercase; }
.mid-line { margin: 12px 0 0; font-size: clamp(18px, 2.6vw, 30px); font-weight: 500; }
.mid-line.accent { color: var(--peach); }

/* scène 4: woorden */
.words { position: relative; height: clamp(70px, 13vw, 150px); width: 100%; }
.words span { position: absolute; left: 0; right: 0; top: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 10vw, 128px);
  line-height: 1.1; text-transform: uppercase; opacity: 0; transform: translateY(40px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.words span.is-now { opacity: 1; transform: none; color: var(--off); }
.words span.is-past { opacity: 0; transform: translateY(-40px); }
.words span:nth-child(odd).is-now { color: var(--coral); }
.words-sub { margin: 18px 0 0; font-size: clamp(16px, 2.2vw, 24px); color: var(--peach); }

/* scène 5: slagzin */
.slogan { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 8vw, 104px); line-height: 1.02; letter-spacing: -.02em; }

/* scène 6: binnenkort */
.small-logo { width: 72px; height: 72px; margin-bottom: 14px; }
.small-logo circle { stroke: var(--coral); } .small-logo path { stroke: var(--off); }
.soon-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 8.5vw, 110px); line-height: 1; text-transform: uppercase; }
.soon-url { margin: 22px 0 0; font-size: clamp(16px, 2.2vw, 22px); letter-spacing: .18em; text-transform: uppercase; color: var(--peach); }
.countdown { display: flex; gap: clamp(10px, 3vw, 28px); margin-top: 26px; }
.countdown div { min-width: clamp(64px, 12vw, 110px); padding: 12px 8px; border-radius: 16px; background: rgba(252,251,245,.06); border: 1px solid rgba(242,170,145,.25); }
.countdown b { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--peach); }

/* bediening */
.film-ui { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; }
.film-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(252,251,245,.3); background: rgba(16,20,35,.5); color: var(--off);
  display: grid; place-items: center; cursor: pointer; }
.film-btn:hover { border-color: var(--coral); }
.film-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.film-btn svg { width: 16px; height: 16px; fill: currentColor; }
.film-progress { flex: 1; height: 3px; border-radius: 3px; background: rgba(252,251,245,.15); overflow: hidden; }
.film-progress span { display: block; height: 100%; width: 0; background: var(--coral); }
.scroll-hint { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); color: var(--peach); text-decoration: none; font-weight: 700; font-size: 14px;
  letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(242,170,145,.35); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- Inloggen ---------- */
.launch-login { background: var(--off); color: var(--navy-dark); padding: 64px 20px 28px; }
.launch-login-inner { max-width: 880px; margin: 0 auto; display: grid; grid-template-columns: 1fr minmax(0, 380px); gap: 40px; align-items: start; }
.eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.launch-login h2 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 40px; text-transform: uppercase; }
.muted { color: #5b6275; }
.login-form { display: grid; gap: 8px; background: #fff; border: 1px solid #ece7da; border-radius: 20px; padding: 22px; }
.login-form label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.login-form input { font: inherit; padding: 12px 14px; border-radius: 12px; border: 1px solid #c9cdd8; background: #fff; color: var(--navy-dark); }
.login-form input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }
.l-btn { margin-top: 10px; font: 700 16px var(--font-body); padding: 13px 18px; border-radius: 999px; border: 0; background: var(--coral); color: var(--navy-dark); cursor: pointer; text-align: center; text-decoration: none; }
.l-btn:hover { filter: brightness(1.05); }
.l-btn-ghost { margin-top: 0; background: #fff; border: 1px solid #c9cdd8; }
.or { display: flex; align-items: center; gap: 10px; color: #8a90a0; font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: #e3e0d6; }
.launch-flash { padding: 10px 12px; border-radius: 12px; background: #eef7f0; font-size: 14px; }
.launch-flash.is-error { background: #fdecea; color: #8a2a1b; }
.launch-foot { max-width: 880px; margin: 48px auto 0; font-size: 13px; color: #8a90a0; }

@media (max-width: 720px) {
  .launch-login-inner { grid-template-columns: 1fr; gap: 20px; }
  .scroll-hint { bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene, .words span, .stack span, .wordmark { transition: none !important; animation: none !important; }
  .scroll-hint { animation: none; }
}
.logged-as { margin: 0 0 4px; }
.login-form form { display: grid; margin: 0; }
.login-form form .l-btn-ghost { width: 100%; margin-top: 2px; }
.launch-foot a { color: inherit; }