/* ------------------------------------------------------------------
   Reference grid: 1170 x 669. --u = 1 reference pixel, scaled to the
   viewport so the composition stays identical at any desktop size.
------------------------------------------------------------------- */
:root {
  --bg: #04060a;
  --ink: #f4f7fb;
  --ink-2: rgba(244, 247, 251, .62);
  --ink-3: rgba(244, 247, 251, .34);
  --ink-4: rgba(244, 247, 251, .16);
  --line: rgba(244, 247, 251, .22);
  --gold: #f2c25b;
  --font: "Zalando Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --u: calc(100vw / 1170);
  /* "cover" scale of the 1170x669 composition (video and copy) */
  --cw: max(100vw, calc(100vh * 1170 / 669));
  --cu: calc(var(--cw) / 1170);
  --ox: calc((100vw - var(--cw)) / 2);
  --oy: calc((100vh - var(--cu) * 669) / 2);
}

@media (min-aspect-ratio: 1170/669) {
  :root { --u: calc(100vh / 669); }
}

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

html {
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 247, 251, .28) transparent;
}
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(244, 247, 251, .22); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244, 247, 251, .4); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* ------------------------------ stage ----------------------------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
}
.stage input, .stage textarea { user-select: text; -webkit-user-select: text; }

/* native scroll length (height is set in JS: sections × viewport height) */
.scroller { position: relative; width: 1px; pointer-events: none; }

/* ---------------------------- background -------------------------- */
.bg { position: absolute; inset: 0; overflow: hidden; }

.bg__media {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--cw);
  height: calc(var(--cu) * 669);
  transform: translate(-50%, -50%) scale(1.04);
  will-change: transform;
  opacity: 0;
  transition: opacity 1.6s var(--ease) .2s;
}
body:not(.is-loading) .bg__media { opacity: 1; }

.bg__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: fill;
  filter: saturate(.85) contrast(1.05) brightness(.92);
}

.bg__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,6,10,.55) 0%, rgba(4,6,10,0) 22%, rgba(4,6,10,0) 56%, rgba(4,6,10,.62) 100%),
    linear-gradient(180deg, rgba(4,6,10,.55) 0%, rgba(4,6,10,0) 18%, rgba(4,6,10,0) 78%, rgba(4,6,10,.55) 100%);
}

.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 38% 55%, transparent 40%, rgba(2,3,6,.7) 100%);
}

/* ------------------------------ header ---------------------------- */
.header { position: absolute; inset: 0 0 auto 0; height: calc(var(--u) * 90); z-index: 5; }

.logo {
  position: absolute;
  left: calc(var(--u) * 44);
  top: calc(var(--u) * 32);
  display: flex; flex-direction: column;
}
.logo__mark {
  font-weight: 400;
  font-size: calc(var(--cu) * 21);
  line-height: 1.1;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.logo__name {
  margin-top: calc(var(--u) * 6);
  font-size: calc(var(--cu) * 10.5);
  font-weight: 300;
  letter-spacing: .005em;
  color: var(--ink);
  white-space: nowrap;
}

/* ------------------------------- rail ----------------------------- */
.rail {
  position: absolute;
  top: calc(var(--u) * 6);
  right: 0; bottom: 0;
  width: calc(var(--u) * 60);
  z-index: 5;
  background: linear-gradient(90deg, rgba(4,6,10,.35), rgba(4,6,10,.8));
}
.rail__dots {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 244);
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  gap: calc(var(--u) * 21.4);
  align-items: center;
}
.rail__dots li { width: calc(var(--u) * 14); height: calc(var(--u) * 7); display: grid; place-items: center; }
.rail__dots a {
  position: relative;
  display: block;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 14);
  margin: calc(var(--u) * -3.5) 0;
}
.rail__dots a::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 3);
  margin: calc(var(--u) * -1.5);
  border-radius: 50%;
  background: rgba(244, 247, 251, .38);
  transition: background .4s, transform .4s var(--ease);
}
.rail__dots a::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  margin: calc(var(--u) * -5.5);
  border-radius: 50%;
  border: 1px solid var(--ink);
  transform: scale(.2);
  opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}
.rail__dots a:hover::before { background: var(--ink); transform: scale(1.5); }
.rail__dots a.is-active::before { background: var(--ink); transform: scale(1.1); }
.rail__dots a.is-active::after { transform: scale(1); opacity: 1; }

.rail__scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 32);
  z-index: 5;
  transform: translateX(-50%);
  color: var(--ink);
  padding: calc(var(--u) * 8);
  line-height: 0;
  border-radius: 999px;
  transition: transform .5s var(--ease), color .3s, opacity 1.4s var(--ease) .9s;
}
.rail__scroll svg {
  display: block;
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 24);
  overflow: visible;
}
.mouse__body {
  fill: rgba(244, 247, 251, .06);
  stroke: currentColor;
  stroke-width: 1.2;
  opacity: .85;
  transition: opacity .3s, fill .3s;
}
.mouse__wheel {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  animation: wheel 1.9s cubic-bezier(.65, 0, .35, 1) infinite;
}
.rail__scroll:hover .mouse__body,
.rail__scroll:focus-visible .mouse__body { opacity: 1; fill: rgba(244, 247, 251, .14); }
.rail__scroll:hover { transform: translateX(-50%) translateY(calc(var(--u) * 2)); }
.rail__scroll:focus-visible { outline: 1px solid var(--line); outline-offset: 2px; }
@keyframes wheel {
  0%   { transform: translateY(0) scaleY(1);   opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translateY(calc(var(--u) * 6)) scaleY(1.15); opacity: 1; }
  80%  { transform: translateY(calc(var(--u) * 8)) scaleY(.6);  opacity: 0; }
  100% { transform: translateY(calc(var(--u) * 8)) scaleY(.6);  opacity: 0; }
}

/* ------------------------------- copy ----------------------------- */
.copy {
  position: absolute;
  left: calc(var(--ox) + var(--cu) * 667);
  top: calc(var(--oy) + var(--cu) * 280);
  width: calc(var(--cu) * 430);
  z-index: 4;
  display: grid;
}
.slide { grid-area: 1 / 1; }
.js .slide { visibility: hidden; pointer-events: none; }
.slide--form { margin-top: calc(var(--cu) * -54); }

.slide__title {
  font-size: calc(var(--cu) * 31);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink);
  min-height: calc(var(--cu) * 67);
}
.slide__text {
  margin-top: calc(var(--cu) * 20);
  font-size: calc(var(--cu) * 12.2);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: .005em;
  color: rgba(244, 247, 251, .74);
}
.slide__text a {
  color: var(--ink);
  border-bottom: 1px solid rgba(244, 247, 251, .35);
  transition: border-color .3s;
}
.slide__text a:hover, .slide__text a:focus-visible { border-bottom-color: var(--ink); }

.slide__links { margin-top: calc(var(--cu) * 12); }
.slide__links li { margin-bottom: calc(var(--cu) * 3); }
.slide__links a {
  display: inline-block;
  font-size: calc(var(--cu) * 16);
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: -.005em;
  color: rgba(244, 247, 251, .74);
  transition: color .3s, transform .5s var(--ease);
}
.slide__links a:hover, .slide__links a:focus-visible { color: var(--ink); transform: translateX(calc(var(--cu) * 6)); }

/* form */
.form { margin-top: calc(var(--cu) * 14); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cu) * 18); }
.form__group { margin-bottom: calc(var(--cu) * 12); }
.form__label {
  display: block;
  font-size: calc(var(--cu) * 8.4);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: calc(var(--cu) * 2);
}
.form__input {
  display: block;
  width: 100%;
  padding: calc(var(--cu) * 5) 0;
  font: inherit;
  font-size: calc(var(--cu) * 14);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  transition: border-color .3s;
}
.form__input::placeholder { color: rgba(244, 247, 251, .28); }
.form__input:focus { border-bottom-color: var(--ink); }
.form__textarea { resize: none; line-height: 1.5; }
.form__foot { display: flex; align-items: center; gap: calc(var(--cu) * 16); }
.form__submit {
  font-size: calc(var(--cu) * 15);
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: calc(var(--cu) * 4) 0;
  border-bottom: 1px solid var(--ink);
  transition: opacity .3s, transform .5s var(--ease);
}
.form__submit:hover:not(:disabled) { transform: translateX(calc(var(--cu) * 4)); }
.form__submit:disabled { opacity: .5; cursor: default; }
.form__feedback {
  font-size: calc(var(--cu) * 10);
  color: var(--ink-2);
  opacity: 0;
  transition: opacity .4s;
}
.form__feedback.is-visible { opacity: 1; }
.form__feedback.is-error { color: #e87b7b; }

.legal {
  position: absolute;
  left: calc(var(--u) * 44);
  bottom: calc(var(--u) * 28);
  z-index: 4;
  font-size: calc(var(--u) * 9);
  letter-spacing: .02em;
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
}

/* scroll-scrubbed motion: transform + opacity only, values written per frame by main.js */
.slide .line { display: block; }
.slide .line > span,
.slide--form .form { display: block; will-change: transform, opacity, filter; }
.slide--form .form { display: block; }

/* intro */
body.is-loading .header,
body.is-loading .rail,
body.is-loading .rail__scroll,
body.is-loading .copy { opacity: 0; }
.header, .rail, .copy { transition: opacity 1.4s var(--ease) .6s; }
.rail { transition-delay: .7s; }
.copy { transition-delay: .5s; }

/* ------------------------------ mobile ---------------------------- */
@media (max-width: 820px) {
  :root { --u: calc(100vw / 390 * 1.35); }
  .logo { left: 20px; top: 20px; }
  .logo__mark { font-size: 21px; }
  .logo__name { font-size: 12px; }
  .rail { width: 44px; }
  .rail__dots { top: 38%; gap: 18px; }
  .rail__dots li, .rail__dots a { width: 14px; }
  .rail__dots a::before { width: 3px; height: 3px; margin: -1.5px; }
  .rail__dots a::after { width: 11px; height: 11px; margin: -5.5px; }
  .rail__scroll { bottom: 24px; }
  .rail__scroll svg { width: 15px; height: 24px; }
  .mouse__wheel { animation-name: wheel-m; }
  .copy { left: 24px; right: 64px; top: auto; bottom: 96px; width: auto; }
  .slide { align-self: end; }
  .slide--form { margin-top: 0; }
  .slide__title { font-size: 31px; min-height: 0; }
  .slide__text { margin-top: 14px; font-size: 14px; }
  .slide__links a { font-size: 19px; }
  .form { margin-top: 12px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__group { margin-bottom: 10px; }
  .form__label { font-size: 10px; }
  .form__input { font-size: 16px; padding: 6px 0; }
  .form__submit { font-size: 16px; }
  .form__feedback { font-size: 12px; }
  .legal { left: 24px; bottom: 14px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mouse__wheel { animation: none; opacity: 1; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: 0s !important; }
}

@keyframes wheel-m {
  0%   { transform: translateY(0) scaleY(1);   opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translateY(6px) scaleY(1.15); opacity: 1; }
  80%  { transform: translateY(8px) scaleY(.6);  opacity: 0; }
  100% { transform: translateY(8px) scaleY(.6);  opacity: 0; }
}