/* ============================================================
   Twentecs soft launch preloader
   ============================================================ */

.loader {
  --loader-duration: 6s;

  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background-color: #006EE0;      /* startkleur, ook vóór de animatie */
  overflow: hidden;
}

/* step-end = harde cut, geen interpolatie
   1        = eenmalig, geen loop
   both     = houdt begin- en eindkleur vast */
.loader.is-playing {
  animation: loader-bg var(--loader-duration) step-end 1 both;
}

@keyframes loader-bg {
  0%      { background-color: #006EE0; }   /* frame 0   — 0ms     */
  42%     { background-color: #BB0018; }   /* frame 63  — 2520ms  */
  46%     { background-color: #DC8600; }   /* frame 69  — 2760ms  */
  50%     { background-color: #096022; }   /* frame 75  — 3000ms  */
  54%     { background-color: #970965; }   /* frame 81  — 3240ms  */
  58%     { background-color: #006775; }   /* frame 87  — 3480ms  */
  62%     { background-color: #004297; }   /* frame 93  — 3720ms  */
  66.667% { background-color: #FFF8E6; }   /* frame 100 — 4000ms  */
  100%    { background-color: #FFF8E6; }   /* frame 150 — 6000ms  */
}

/* Lottie: 1200 × 400, dus 3:1. Schaalt mee, maar nooit breder dan 900px. */
.loader__logo {
  width: min(72vw, 900px);
  aspect-ratio: 3 / 1;
}

.loader__logo svg { display: block; }

@media (max-width: 600px) {
  .loader__logo { width: 86vw; }
}

@media (prefers-reduced-motion: reduce) {
  .loader.is-playing { animation: none; background-color: #FFF8E6; }
}

.loader {
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.has-loader,
html.has-loader body {
  overflow: hidden;
  height: 100%;
}