/* Homepage. Alle maten komen uit de Figma-frames van 1440 x 738.
   --u: 1 designpixel, schaalt mee zodat foto en carrousel het scherm altijd vullen.
   --t: 1 designpixel voor tekst, zodat die ook op brede schermen binnen beeld blijft.
   --k: 1 designpixel voor contact, zodat het hele frame altijd past. */

/* De pagina scrollt niet: de hero is het hele scherm. */
html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.hero {
  --u: max(100vw / 1440, 100svh / 738);
  --t: min(100vw / 540, max(0.8px, 100svh / 738));
  position: relative;
  height: 100svh;
  overflow: hidden;
  overflow: clip;
  background: var(--color-navy);
}

/* Achtergrond. Hij staat 250 designpixels hoger, zodat hij kan zakken bij de overgang. */
.hero__background {
  position: absolute;
  top: calc(-250 * var(--u));
  left: calc(50% - 872 * var(--u));
  width: calc(1756 * var(--u));
  max-width: none;
  height: calc(988 * var(--u));
}

/* Verticale banen over de achtergrond. Ze lopen 250 designpixels door boven het scherm,
   zodat ze kunnen meezakken. Het verloop start daarom pas op 25.8%. */
.hero__strip {
  position: absolute;
  top: calc(-250 * var(--u));
  left: calc(50% + (var(--x) - 720) * var(--u));
  width: calc(171 * var(--u));
  height: calc(968 * var(--u));
  background: linear-gradient(to bottom, rgb(222 222 222 / 0.8) 25.8%, rgb(255 255 255 / 0.8));
  opacity: 0.3;
  mix-blend-mode: color-burn;
}

.hero__strip--flip {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.8) 25.8%, rgb(222 222 222 / 0.8));
}

/* Maatstreepjes links en rechts. */
.hero__ticks {
  position: absolute;
  top: calc(187 * var(--u));
  width: calc(11 * var(--u));
  height: calc(410 * var(--u));
  overflow: hidden;
}

.hero__ticks--left {
  left: calc(100vw * 44 / 1440);
}

.hero__ticks--right {
  right: calc(100vw * 23 / 1440);
}

.hero__ticks-track {
  will-change: transform;
}

.hero__ticks-track img {
  width: 100%;
  max-width: none;
  height: calc(410.4 * var(--u));
  margin-bottom: calc(-0.4 * var(--u));
}

/* 3D-carrousel: je staat binnen in een ring, dus het midden is ver weg en de zijkanten dichtbij.
   --radius en --perspective bepalen samen hoe sterk het verloop groot > klein > groot is. */
.carousel {
  --c: var(--u);
  --radius: calc(616 * var(--c));
  --perspective: calc(1356 * var(--c));
  --center-x: calc(50% + 87 * var(--c));
  --center-y: calc(370 * var(--u));
  position: absolute;
  inset: 0;
  perspective: var(--perspective);
  perspective-origin: var(--center-x) var(--center-y);
  pointer-events: none;
}

.carousel__pivot {
  position: absolute;
  top: var(--center-y);
  left: var(--center-x);
  transform: translateZ(var(--radius));
  transform-style: preserve-3d;
}

.carousel__ring {
  transform-style: preserve-3d;
  will-change: transform;
}

.carousel__card {
  position: absolute;
  top: calc(-130 * var(--c));
  left: calc(-192 * var(--c));
  width: calc(384 * var(--c));
  height: calc(260 * var(--c));
  opacity: 0.62;
  transform: rotateY(var(--angle, 0deg)) translateZ(calc(var(--radius) * -1));
  backface-visibility: hidden;
}

.carousel__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Blauwe gloed. Een kant-en-klare afbeelding van de vervaagde ellips uit hero-glow.svg,
   want een SVG-blur van deze maat kost de browser bij elk frame veel rekenwerk.
   De 45% dekking zit in de afbeelding zelf, dit element faadt van 0 naar 1. */
.hero__glow {
  position: absolute;
  top: calc(-302 * var(--u));
  left: calc(50% - 777 * var(--u));
  width: calc(1524 * var(--u));
  height: calc(1738 * var(--u));
  max-width: none;
  pointer-events: none;
}

.js .hero__glow {
  opacity: 0;
}

/* Alles wat bij de overgang samen naar beneden gaat. */
.hero__front {
  position: absolute;
  inset: 0;
}

.hero__portrait {
  position: absolute;
  top: calc(-226.66 * var(--u));
  left: calc(50% - 742 * var(--u));
  width: calc(1496 * var(--u));
  max-width: none;
  height: calc(1045.66 * var(--u));
}

/* Coming soon */
.hero__soon {
  position: absolute;
  top: calc(89 * var(--u));
  left: 50%;
  display: block;
  font-size: calc(21.715 * var(--t));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hero__soon-mask {
  display: block;
  overflow: hidden;
}

.hero__soon-label {
  display: block;
}

.js .hero__soon-label {
  visibility: hidden;
}

/* Merknaam en contactknop */
.hero__brand {
  position: absolute;
  bottom: calc(69 * var(--t));
  left: 50%;
  display: flex;
  flex-direction: column;
  width: calc(516 * var(--t));
  transform: translateX(-50%);
}

.hero__title {
  font-size: calc(42.617 * var(--t));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__tagline {
  display: flex;
  align-items: center;
  gap: calc(11.6 * var(--t));
  margin-top: calc(3.7 * var(--t));
  margin-left: calc(149.7 * var(--t));
  font-size: calc(12.206 * var(--t));
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__tagline img {
  width: calc(9.3 * var(--t));
  height: calc(9.3 * var(--t));
  flex: none;
  transform: rotate(180deg);
}

.hero__brand .contact-link {
  align-self: center;
  margin-top: calc(21.2 * var(--t));
}

/* Contactsectie: staat boven de hero. Bij de overgang beweegt de camera er omhoog naartoe. */
.contact {
  --k: min(100vw / 1440, 100svh / 738);
  --t: var(--k);
  position: absolute;
  inset: 0;
  outline: none;
  visibility: hidden;
}

.contact__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(1440 * var(--k));
  height: calc(738 * var(--k));
  transform: translate(-50%, -50%);
}

.contact__intro {
  position: absolute;
  top: calc(257 * var(--k));
  left: calc(225 * var(--k));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.contact__eyebrow {
  font-size: calc(19.809 * var(--k));
}

.contact__eyebrow--indent {
  margin-top: calc(6 * var(--k));
  margin-left: calc(3.9 * var(--k));
}

.contact__title {
  margin-top: calc(5.8 * var(--k));
  font-size: calc(40.17 * var(--k));
}

.contact__text {
  margin-top: calc(26.4 * var(--k));
  font-size: calc(22 * var(--k));
}

.contact__details {
  margin-top: calc(27 * var(--k));
  margin-left: calc(1 * var(--k));
  font-size: calc(22 * var(--k));
}

.contact__details a {
  display: block;
  width: fit-content;
}

.contact__details a:hover {
  text-decoration: underline;
}

.contact__cookies {
  margin-top: calc(18 * var(--k));
  margin-left: calc(1 * var(--k));
  font-size: max(11px, calc(12 * var(--k)));
  font-weight: 500;
}

.contact__panel {
  position: absolute;
  top: calc(116 * var(--k));
  left: calc(753 * var(--k));
  width: calc(433 * var(--k));
  height: calc(562 * var(--k));
  padding: calc(54 * var(--k)) calc(38 * var(--k)) 0 calc(50 * var(--k));
  background: var(--color-white);
  color: var(--color-black);
}

.contact__fields {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(397 * var(--k));
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--k));
  font-size: calc(14 * var(--k));
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.contact__input {
  display: block;
  width: 100%;
  height: calc(26 * var(--k));
  padding: 0 calc(8 * var(--k));
  border: 0;
  border-radius: 0;
  background: #d9d9d9;
  color: var(--color-black);
  font: 500 calc(14 * var(--k)) / 1.2 var(--font-sans);
  appearance: none;
}

.contact__input--short {
  width: calc(270 * var(--k));
}

.contact__input--message {
  height: calc(111 * var(--k));
  padding-block: calc(6 * var(--k));
  resize: none;
}

.contact__input:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 0;
}

.contact__actions {
  display: flex;
  align-items: flex-end;
  gap: calc(16 * var(--k));
  margin-top: calc(31 * var(--k));
}

.contact__submit {
  flex-shrink: 0;
}

.contact__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

.contact__status {
  font-size: calc(12 * var(--k));
  font-weight: 500;
  line-height: 1.2;
}

.contact__status a {
  text-decoration: underline;
}

.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__submit:focus-visible {
  outline-color: var(--color-black);
}

/* De hamer ligt over het formulier. De knop ligt als onzichtbare vorm over de afbeelding,
   zodat alleen de hamer zelf klikbaar is en de afbeelding nooit wordt afgesneden. */
.contact__hammer {
  position: absolute;
  top: calc(-17 * var(--k));
  left: calc(1089 * var(--k));
  width: calc(800 * var(--k));
  height: calc(600 * var(--k));
  filter: drop-shadow(0 calc(13 * var(--k)) calc(9 * var(--k)) rgb(0 0 0 / 0.25));
  pointer-events: none;
  transform-origin: 80% 80%;
}

.contact__hammer:has(button:focus-visible) {
  filter: drop-shadow(0 0 4px var(--color-white));
}

.contact__hammer img {
  width: 100%;
  height: 100%;
  max-width: none;
}

.contact__hammer button {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  clip-path: polygon(0 36%, 21% 2%, 24% 5%, 18% 20%, 65% 58%, 96% 85%, 95% 98%, 89% 98%, 55% 68%, 14% 31%, 7% 43%);
  cursor: pointer;
  pointer-events: auto;
}

/* Veiligheidslint. De maten van de strepen komen uit Figma: 135.5 per herhaling.
   Het lint is 19 herhalingen lang, zodat de uiteinden nooit in beeld komen. */
.contact__tape {
  position: absolute;
  top: calc(-3.6 * var(--u));
  left: calc(-1039.05 * var(--u));
  width: calc(2574.5 * var(--u));
  height: calc(56.55 * var(--u));
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #ef0;
  cursor: pointer;
  transform: rotate(-12.48deg);
}

.contact__tape-stripes {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(2710 * var(--u));
  background: repeating-linear-gradient(
    116.67deg,
    var(--color-black) 0 calc(56.55 * var(--u)),
    transparent 0 calc(121.085 * var(--u))
  );
}

@media (max-width: 900px), (max-height: 520px) {
  .contact {
    --k: 1px;
    --u: 0.6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .contact__inner {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: auto;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
    padding: 170px 16px 32px;
    transform: none;
  }

  .contact__intro {
    position: static;
    white-space: normal;
  }

  .contact__title {
    font-size: clamp(28px, 9vw, 40px);
  }

  .contact__text,
  .contact__details {
    font-size: clamp(17px, 5vw, 22px);
  }

  .contact__panel {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 32px 24px;
  }

  .contact__fields {
    gap: 18px;
    height: auto;
  }

  .contact__input,
  .contact__input--short {
    width: 100%;
    height: 40px;
    /* Onder 16px zoomt iOS in op het veld. */
    font-size: 16px;
  }

  .contact__input--message {
    height: 120px;
  }

  .contact__hammer {
    top: 16px;
    right: -60px;
    left: auto;
    width: 240px;
    height: 180px;
  }
}

@media (max-width: 600px) {
  .carousel {
    --c: calc(var(--u) * 0.62);
  }

  .hero__ticks--left {
    left: 12px;
  }

  .hero__ticks--right {
    right: 12px;
  }

  .hero__brand {
    --t: 1px;
    bottom: 40px;
    align-items: center;
    width: 100%;
    padding-inline: 16px;
  }

  .hero__title {
    font-size: 8.7vw;
  }

  .hero__tagline {
    margin-left: 0;
    font-size: 3.1vw;
  }
}