/* ==========================================================
   MTS — Concept 7 · Samen sterker
   Twee werelden, één merk. De naad volgt de bezoeker.
   ========================================================== */

:root {
  --dark: #050b14;
  --light: #f4f5f2;
  --navy: #06101c;
  --ice: #eef3fa;
  --electric: #01a0ff;

  --pad: clamp(20px, 3.2vw, 60px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--dark);
  font-family: var(--display);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: pan-y;
}
@media (hover: hover) and (pointer: fine) {
  body { cursor: col-resize; }
}

img { display: block; max-width: 100%; height: auto; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ----------------------------------------------------------
   De twee werelden
   ---------------------------------------------------------- */
.world {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.world--dark {
  background:
    radial-gradient(ellipse 60% 50% at 50% 38%, rgba(1, 110, 230, 0.14), transparent 70%),
    var(--dark);
  color: var(--ice);
}
.world--light {
  color: var(--navy);
  will-change: transform;
  transform: translate3d(100vw, 0, 0);
}
.world__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  /* Achtergrond hier (niet op .world--light): deze laag is zelf een
     stacking context, dus multiply op het logo moet dit papier kunnen zien */
  background:
    radial-gradient(ellipse 70% 60% at 50% 38%, rgba(1, 160, 255, 0.045), transparent 85%),
    var(--light);
  will-change: transform;
  transform: translate3d(-100vw, 0, 0);
}

/* ----------------------------------------------------------
   Scène (identiek in beide werelden)
   ---------------------------------------------------------- */
.scene {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 36px);
  padding: calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 1.8);
  text-align: center;
}

.top {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}
.top strong { font-weight: 400; opacity: 1; margin-right: 0.5em; }
.top__soon { color: var(--electric); opacity: 1; }

.mark {
  width: clamp(220px, min(34vw, 50vh), 680px);
}
.logo-crop {
  position: relative;
  display: block;
  aspect-ratio: 1420 / 636;
  overflow: hidden;
}
.logo-crop img {
  position: absolute;
  left: -10.4225%;
  top: -20.126%;
  width: 117.746%;
  max-width: none;
  filter: url(#logo-on-dark);
}
.world--light .mark { mix-blend-mode: multiply; } /* op het geanimeerde element zelf, anders isoleert de fade de blend */
.world--light .logo-crop img { filter: none; }

.headline {
  font-size: clamp(3.4rem, min(12vw, 19vh), 14rem);
  font-weight: 800;
  font-variation-settings: "opsz" 96;
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.headline__l { display: block; }
.headline i {
  font-style: normal;
  color: var(--electric);
}

.sub {
  max-width: 34ch;
  font-size: clamp(0.98rem, 1.15vw, 1.2rem);
  line-height: 1.45;
  opacity: 0.66;
}

.corner {
  position: absolute;
  bottom: var(--pad);
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.corner span { color: var(--electric); }
.corner--l { left: var(--pad); }
.corner--r { right: var(--pad); }

/* ----------------------------------------------------------
   De naad
   ---------------------------------------------------------- */
.seam {
  position: fixed;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(100vw, 0, 0);
}
.seam__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--electric);
  box-shadow: 0 0 18px rgba(1, 160, 255, 0.55);
}
.seam__knob {
  position: absolute;
  bottom: calc(var(--pad) - 15px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background: var(--electric);
  box-shadow: 0 0 0 6px rgba(1, 160, 255, 0.16);
}
/* Twee kleine pijlpunten: ‹ › */
.seam__knob i {
  width: 7px;
  height: 7px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
.seam__knob i + i { transform: rotate(-135deg); }

/* ----------------------------------------------------------
   Intro
   ---------------------------------------------------------- */
.scene > * { opacity: 0; }
.is-ready .scene > * { animation: fade 1.2s ease forwards; }
.is-ready .scene .mark { animation: rise 1.4s var(--ease) 0.2s forwards; }
.is-ready .scene .headline { animation: rise 1.4s var(--ease) 0.35s forwards; }
.is-ready .scene .sub { animation-delay: 0.8s; }
.is-ready .scene .top,
.is-ready .scene .corner { animation-delay: 1s; }
.top { --to: 0.62; }

.mark, .headline { transform: translate3d(0, 18px, 0); }

@keyframes fade { to { opacity: var(--to, 1); } }
@keyframes rise { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ----------------------------------------------------------
   Responsief
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  .top { flex-direction: column; gap: 4px; text-align: left; }
  .mark { width: min(78vw, 42vh); }
  .headline { font-size: clamp(3rem, 19vw, 5.4rem); }
  .sub { font-size: 0.95rem; max-width: 28ch; }
  .seam__knob { width: 38px; height: 38px; margin-left: -19px; }
}

@media (max-height: 560px) {
  .sub { display: none; }
}

/* ----------------------------------------------------------
   Minder beweging
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
}