/* === Reset & Grundlayout === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
}


/* === Hintergrund-Ebenen === */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/expF_map_09.png');
  background-size: cover;
  background-position: center;
  z-index: -2;
}

.bg-color-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(35, 117, 83);
  mix-blend-mode: multiply;
  z-index: -1;
}


/* === Typografie/Logo === */
.typo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 70vh);
  z-index: 3;
}

.st0 {
  fill: #fff;
  transition: all 0.5s ease-out;
}

.st0:hover {
  fill: blue;
}


/* === SVG Drift Animation === */
.logo {
  width: 200px;
  height: 200px;
}

.part {
  animation: drift 20s ease-in-out infinite;
  transform-origin: center;
}

/* Sanfte Drift-Bewegung */
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, -8px); }
  50%      { transform: translate(4px, 3px); }
  75%      { transform: translate(-2px, 3px); }
}

/* Organische Variation durch zeitversetztes Starten */
.part1 { animation-delay: 0s; }
.part2 { animation-delay: 0.8s; }
.part3 { animation-delay: 0.4s; }
.part4 { animation-delay: 0.1s; }