.st0,
.st1,
.st2 {
  fill: #042736;
}

.st3 {
  fill: #acd54f;
}

.st4 {
  fill: #ff6872;
}

.st1,
.st2,
.st3,
.st4 {
  fill-rule: evenodd;
}

#preloader {
  --t: 2000ms;
  --fade-dur: 350ms;
  --text-delay: calc(var(--t) * 0.25);
  --text-dur: calc(var(--t) * 0.5);
  --dot-in-dur: calc(var(--t) * 0.35);
  --dot-move-dur: calc(var(--text-dur) * 0.8);
  --dot-move-delay: var(--text-delay);
  --bg-fade-dur: calc(var(--t) * 1.2);

  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999991;
  overflow: hidden;
  background: #fff;
}

html.preloader-pending #preloader {
  display: flex;
}

html.preloader-skip #preloader {
  display: none !important;
}

#preloader.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/wp-content/uploads/2026/04/woodi-preloader-background-scaled.webp') center/cover no-repeat;
  z-index: 1;
  opacity: 1;
  animation: fadeOut var(--fade-dur) ease forwards;
  animation-delay: calc(var(--t) * 1.2);
}

#woodi-by-meplan-logo {
  position: relative;
  z-index: 2;
  max-width: 400px;
  width: 100%;
  height: auto;
  opacity: 1;
  overflow: visible;
}

#woodi-by-meplan-tex {
  overflow: hidden;
}

#woodi-by-meplan-tex-inner {
  will-change: transform;
}

#preloader.is-active #woodi-by-meplan-logo {
  animation: fadeOut var(--fade-dur) ease forwards;
  animation-delay: calc(var(--t) * 1);
}

@keyframes fadeOut {
  to {
    opacity: 0;
  }
}

#woodi-dot-koralle,
#woodi-dot-gruen {
  opacity: 0;
  transform-origin: 60% 25%;
}

#preloader.is-active #woodi-dot-koralle,
#preloader.is-active #woodi-dot-gruen {
  animation:
    dotIn var(--dot-in-dur) cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards,
    dotsShrinkAndMove var(--dot-move-dur) ease-in forwards;
}

#preloader.is-active #woodi-dot-koralle {
  animation-delay: 0s, var(--dot-move-delay);
}

#preloader.is-active #woodi-dot-gruen {
  animation-delay: calc(var(--t) * 0.12), var(--dot-move-delay);
}

@keyframes dotIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  25% {
    opacity: 1;
    transform: scale(6);
  }
  45% {
    opacity: 1;
    transform: scale(5);
  }
  100% {
    opacity: 1;
    transform: scale(5);
  }
}

@keyframes dotsShrinkAndMove {
  0% {
    transform: scale(5);
  }
  100% {
    transform: scale(1);
  }
}

.preloader-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  overflow: hidden;
  z-index: 10113;
  opacity: 1;
}

#preloader.is-active .preloader-progress {
  animation: fadeOut var(--fade-dur) ease forwards;
  animation-delay: calc(var(--t) * 1.2);
}

.preloader-progress-bar {
  width: 0%;
  height: 100%;
  background: #042736;
  transition: width var(--t) ease;
}

#preloader.wipe-out {
  pointer-events: none;
}

.woodi-logo {
  will-change: transform, opacity;
}

html.preloader-was-shown .woodi-logo {
    transform-origin: 50% 100%;
    will-change: transform;
    opacity: 0;
    transform: translateY(60%);

}

html.preloader-was-shown .woodi-intro-1 {
    height: 300px;
    transform-origin: 50% 100%;
    will-change: transform;
    opacity: 0;
    transform: translateY(50%);
}

html.preloader-was-shown .woodi-intro-2 {
    height: fit-content;
    transform-origin: 50% 100%;
    will-change: transform;
    opacity: 0;
    transform: translateY(100%);
}

html.preloader-was-shown.woodi-logo-reveal-start .woodi-logo {
  animation: woodiLogoRevealUp 700ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

html.preloader-was-shown.woodi-logo-reveal-start .woodi-intro-1,
html.preloader-was-shown.woodi-logo-reveal-start .woodi-intro-2 {
  animation: woodiLogoRevealUp 1000ms cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes woodiLogoRevealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width:768px) {
	html.preloader-was-shown .woodi-intro-1 {
		height: fit-content;
	}
	
	#woodi-by-meplan-logo {
	  max-width: 250px;
	}
}