:root {
  --q-rood: #e52329;
  --q-donkerblauw: #213a8f;
  --q-lichtblauw: #41c0f0;
  --q-zwart: #1a1a1a;
  --q-wit: #ffffff;
  --font-display: "Roboto Slab", "Rockwell", Georgia, serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;
  --q: clamp(9px, 1.05vw, 14px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --fade-ms: 1200ms;
  --lockup-ms: 780ms;
  --qonnector-ms: 1200ms;
}

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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--q-wit);
  color: var(--q-zwart);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #0d0d0d;
}

.chrome {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 40;
  padding: clamp(1rem, 2.2vw, 2rem);
  pointer-events: none;
}

.logo {
  height: clamp(28px, 3.2vw, 48px);
  width: auto;
  display: block;
  transition: opacity 0.6s var(--ease-soft);
}

.logo--on-photo {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.25));
}

.progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--q-rood) 0%, var(--q-lichtblauw) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.progress__bar.is-resetting {
  transition: none !important;
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0d0d0d;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade-ms) var(--ease-in-out);
  will-change: opacity;
  backface-visibility: hidden;
}

.slide.is-active {
  opacity: 1;
  z-index: 2;
}

.slide.is-exit {
  opacity: 0;
  z-index: 1;
}

.slide__media {
  position: absolute;
  inset: -6%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.05) translateZ(0);
  will-change: transform;
}

/* Blijft ook op exiting slide staan, zodat zoom niet terugspringt */
.slide__media.is-animate {
  animation: kenburnsA 12s linear both;
}

.slide__media.is-animate-alt {
  animation: kenburnsB 12s linear both;
}

@keyframes kenburnsA {
  from {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.12) translate3d(-1.2%, -0.7%, 0);
  }
}

@keyframes kenburnsB {
  from {
    transform: scale(1.05) translate3d(-0.6%, 0.3%, 0);
  }
  to {
    transform: scale(1.12) translate3d(0.7%, -0.5%, 0);
  }
}

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, transparent 22%),
    linear-gradient(
      to top right,
      rgba(0, 0, 0, 0.44) 0%,
      rgba(0, 0, 0, 0.16) 38%,
      transparent 62%
    );
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fade-ms) var(--ease-in-out);
}

.slide.is-active::after {
  opacity: 1;
}

/*
  Stiljgids p.22 — linkslijnend onder
*/
.brand-lockup {
  --lockup-q: clamp(11px, 1.25vw, 16px);
  position: absolute;
  left: clamp(1.2rem, 2.8vw, 2.8rem);
  right: auto;
  bottom: clamp(1.4rem, 3vw, 2.8rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(52vw, 680px);
  opacity: 0;
  transform: translate3d(-18px, 14px, 0);
  transition:
    opacity var(--lockup-ms) var(--ease-out),
    transform var(--lockup-ms) var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}

.brand-lockup.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.brand-lockup.is-visible .tekstkader {
  animation: kaderIn 0.85s var(--ease-out) both;
}

@keyframes kaderIn {
  from {
    opacity: 0;
    transform: translate3d(-12px, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.tekstkader {
  position: relative;
  z-index: 2;
  display: block;
  width: fit-content;
  max-width: 82%;
  margin-left: 18%;
  padding: calc(1.5 * var(--lockup-q))
    calc(1.5 * var(--lockup-q) + 1.75 * var(--lockup-q))
    calc(1.5 * var(--lockup-q))
    calc(1.5 * var(--lockup-q));
  background: var(--q-rood);
  color: var(--q-wit);
  text-align: left;
  clip-path: polygon(
    0 0,
    calc(100% - (1.75 + 2.5) * var(--lockup-q)) 0,
    calc(100% - (1.75 + 2.5) * var(--lockup-q)) calc(1 * var(--lockup-q)),
    100% calc(1 * var(--lockup-q)),
    100% calc(2 * var(--lockup-q)),
    calc(100% - 1.75 * var(--lockup-q)) calc(2 * var(--lockup-q)),
    calc(100% - 1.75 * var(--lockup-q)) 100%,
    0 100%
  );
}

.tekstkader__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.9vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  word-spacing: -0.04em;
}

.qonnector {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(56px, 7.5vw, 84px);
  margin-top: calc(-1.2 * var(--lockup-q));
  align-self: stretch;
  opacity: 0;
  pointer-events: none;
}

.qonnector.is-animate {
  animation: qonnectorFade var(--qonnector-ms) var(--ease-out) both;
  animation-delay: 0.12s;
}

.qonnector.is-animate .q-bar {
  animation: qBarIn 1s var(--ease-out) both;
}

@keyframes qonnectorFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes qBarIn {
  from {
    transform: scaleX(0.2);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

.q-bar {
  position: absolute;
  left: 0;
  height: 3px;
  transform: scaleX(0.2);
  transform-origin: left center;
  opacity: 0;
  background: var(--q-rood);
  will-change: transform, opacity;
}

.q-bar--1  { top: 4%;  width: 72%; height: 3px; background: var(--q-rood); animation-delay: 0.14s; }
.q-bar--2  { top: 10%; width: 54%; height: 2px; background: var(--q-donkerblauw); left: 8%; animation-delay: 0.18s; }
.q-bar--3  { top: 15%; width: 88%; height: 5px; background: var(--q-lichtblauw); animation-delay: 0.22s; }
.q-bar--4  { top: 24%; width: 64%; height: 2px; background: var(--q-donkerblauw); left: 14%; animation-delay: 0.26s; }
.q-bar--5  { top: 29%; width: 38%; height: 6px; background: var(--q-rood); left: 22%; animation-delay: 0.3s; }
.q-bar--6  { top: 34%; width: 18%; height: 2px; background: var(--q-lichtblauw); left: 62%; animation-delay: 0.33s; }
.q-bar--7  { top: 38%; width: 78%; height: 4px; background: var(--q-donkerblauw); left: 4%; animation-delay: 0.36s; }
.q-bar--8  { top: 45%; width: 46%; height: 2px; background: var(--q-lichtblauw); animation-delay: 0.4s; }
.q-bar--9  { top: 50%; width: 58%; height: 2px; background: var(--q-rood); left: 18%; animation-delay: 0.44s; }
.q-bar--10 { top: 55%; width: 92%; height: 5px; background: var(--q-donkerblauw); animation-delay: 0.48s; }
.q-bar--11 { top: 64%; width: 70%; height: 2px; background: var(--q-lichtblauw); left: 6%; animation-delay: 0.52s; }
.q-bar--12 { top: 69%; width: 52%; height: 3px; background: var(--q-rood); animation-delay: 0.56s; }
.q-bar--13 { top: 75%; width: 24%; height: 2px; background: var(--q-donkerblauw); left: 48%; animation-delay: 0.59s; }
.q-bar--14 { top: 79%; width: 84%; height: 5px; background: var(--q-lichtblauw); left: 2%; animation-delay: 0.63s; }
.q-bar--15 { top: 88%; width: 42%; height: 2px; background: var(--q-donkerblauw); left: 12%; animation-delay: 0.67s; }
.q-bar--16 { top: 93%; width: 66%; height: 2px; background: var(--q-rood); left: 8%; animation-delay: 0.71s; }
.q-bar--17 { top: 20%; width: 22%; height: 3px; background: var(--q-lichtblauw); left: 0; animation-delay: 0.24s; }
.q-bar--18 { top: 60%; width: 28%; height: 3px; background: var(--q-rood); left: 0; animation-delay: 0.5s; }

.section-intro {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--q-wit);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.75s var(--ease-in-out);
}

.section-intro.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.logo--intro {
  position: absolute;
  top: clamp(1rem, 2.2vw, 2rem);
  left: clamp(1rem, 2.2vw, 2rem);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.7s var(--ease-out) 0.15s,
    transform 0.7s var(--ease-out) 0.15s;
}

.section-intro.is-visible .logo--intro {
  opacity: 1;
  transform: translateY(0);
}

.brand-lockup--intro {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  width: min(62vw, 720px);
  transition:
    opacity 0.8s var(--ease-out) 0.2s,
    transform 0.8s var(--ease-out) 0.2s;
  will-change: auto;
}

.section-intro.is-visible .brand-lockup--intro {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.brand-lockup--intro .tekstkader {
  --lockup-q: clamp(12px, 1.4vw, 18px);
  margin-left: 18%;
  animation: none;
}

.brand-lockup--intro .tekstkader__title {
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
}

.brand-lockup--intro .qonnector {
  width: 100%;
  height: clamp(60px, 8vw, 90px);
}

@media (max-width: 700px) {
  .brand-lockup {
    width: calc(100vw - 2.2rem);
    left: 1rem;
    right: auto;
    align-items: stretch;
  }

  .tekstkader {
    width: auto;
    max-width: 100%;
    margin-left: 0;
  }

  .qonnector {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .brand-lockup,
  .section-intro,
  .logo--intro,
  .brand-lockup--intro {
    transition-duration: 0.01ms !important;
  }

  .slide.is-active .slide__media.is-animate,
  .slide.is-active .slide__media.is-animate-alt,
  .qonnector.is-animate,
  .qonnector.is-animate .q-bar,
  .brand-lockup.is-visible .tekstkader {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}