/* ==========================================================================
   Reclameworks · preloader
   Logo bouwt zich op, teller loopt naar 100% en het doek schuift omhoog.
   ========================================================================== */

.rw-preloader {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 34px;
  padding: clamp(24px, 4vw, 56px) var(--gut);
  background: var(--rw-koolzwart);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s cubic-bezier(.76, 0, .24, 1);
}

.rw-preloader.is-done {
  clip-path: inset(0 0 100% 0);
}

/* Logo: staat precies op de plek van het hero-logo (positie via JS) */
.rw-preloader-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.rw-preloader-top svg {
  position: absolute;
  width: 50px; /* zelfde maat als het hero-logo */
  height: auto;
  overflow: visible;
}

.rw-preloader svg polygon {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.rw-preloader .rw-logo-part-a {
  animation: rw-logo-in-a .9s cubic-bezier(.2, .8, .2, 1) .15s forwards;
}

.rw-preloader .rw-logo-part-c {
  animation: rw-logo-in-c .9s cubic-bezier(.2, .8, .2, 1) .35s forwards;
}

.rw-preloader .rw-logo-part-b {
  animation: rw-logo-in-b .7s cubic-bezier(.2, .8, .2, 1) .85s forwards;
}

/* Teller en balk */
.rw-preloader-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.rw-preloader-count {
  display: flex;
  font-family: var(--font-display);
  font-size: clamp(120px, 24vw, 380px);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--rw-warm-wit);
}

.rw-preloader-count i {
  align-self: flex-start;
  margin-left: .1em;
  font-style: normal;
  font-size: .3em;
  line-height: 1;
  color: var(--rw-diepblauw);
}

.rw-preloader-digit {
  height: .8em;
  overflow: hidden;
}

.rw-preloader-digit span {
  display: flex;
  flex-direction: column;
  transition: transform .45s cubic-bezier(.76, 0, .24, 1);
}

.rw-preloader-digit b {
  height: .8em;
  font-weight: 400;
  line-height: .8;
}

.rw-preloader-caption {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rw-zacht-grijs);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .12em;
}

.rw-preloader-label {
  color: #6b6b69;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.rw-preloader-bar {
  position: relative;
  width: clamp(120px, 18vw, 260px);
  height: 1px;
  overflow: hidden;
  background: #4A4A4A;
}

.rw-preloader-bar i {
  position: absolute;
  inset: 0;
  background: var(--rw-diepblauw);
  transform: scaleX(0);
  transform-origin: left;
}

/* Lage laptopschermen */
@media (min-width: 1101px) and (max-height: 950px) {
  .rw-preloader-count {
    font-size: min(clamp(120px, 24vw, 380px), 36vh);
  }
}

@keyframes rw-logo-in-a {
  from { opacity: 0; transform: translate(-70%, 30%) skewX(-20deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes rw-logo-in-c {
  from { opacity: 0; transform: translate(40%, -60%); }
  to   { opacity: 1; transform: none; }
}

@keyframes rw-logo-in-b {
  from { opacity: 0; transform: translateX(220%) skewX(-30deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}