.garden-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at 70% 20%,
      rgba(105, 202, 1, 0.24) 0,
      transparent 30%
    ),
    linear-gradient(180deg, #0a0f0b 0%, #061208 100%);
  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;
}

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

.loader-inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 24px;
}

.garden-loader svg {
  width: min(260px, 70vw);
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(31, 42, 31, 0.16));
}

.loader-text {
  font-size: 15px;
  color: #306143;
  letter-spacing: 0.03em;
  animation: textPulse 1.6s ease-in-out infinite;
}

@keyframes textPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

main.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.icon {
  overflow: visible;
}

.icon path {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0;
  animation-duration: 3.6s;
  animation-timing-function: cubic-bezier(0.22, 0.9, 0.32, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: var(--delay, 0s);
}

/* Boden, Töpfe, Zaun/Bogen */
.icon path:nth-of-type(11),
.icon path:nth-of-type(12),
.icon path:nth-of-type(13),
.icon path:nth-of-type(14),
.icon path:nth-of-type(15),
.icon path:nth-of-type(16),
.icon path:nth-of-type(17),
.icon path:nth-of-type(18),
.icon path:nth-of-type(19),
.icon path:nth-of-type(20),
.icon path:nth-of-type(21),
.icon path:nth-of-type(22),
.icon path:nth-of-type(23),
.icon path:nth-of-type(24),
.icon path:nth-of-type(25),
.icon path:nth-of-type(26),
.icon path:nth-of-type(27),
.icon path:nth-of-type(28),
.icon path:nth-of-type(29),
.icon path:nth-of-type(30) {
  animation-name: baseIn;
}

.icon path:nth-of-type(11) {
  --delay: 0s;
}
.icon path:nth-of-type(12),
.icon path:nth-of-type(13),
.icon path:nth-of-type(14),
.icon path:nth-of-type(15),
.icon path:nth-of-type(16),
.icon path:nth-of-type(17),
.icon path:nth-of-type(18),
.icon path:nth-of-type(19) {
  --delay: 0.08s;
}
.icon path:nth-of-type(20),
.icon path:nth-of-type(21),
.icon path:nth-of-type(22),
.icon path:nth-of-type(23),
.icon path:nth-of-type(24),
.icon path:nth-of-type(25),
.icon path:nth-of-type(26),
.icon path:nth-of-type(27) {
  --delay: 0.12s;
}
.icon path:nth-of-type(28),
.icon path:nth-of-type(29),
.icon path:nth-of-type(30) {
  --delay: 0.18s;
}

/* Baumstämme */
.icon path:nth-of-type(3),
.icon path:nth-of-type(7) {
  animation-name: trunkGrow;
  --delay: 0.35s;
}

/* Kleine Ast-/Schattenformen */
.icon path:nth-of-type(5),
.icon path:nth-of-type(9) {
  animation-name: softPop;
  --delay: 0.55s;
}

/* Baumkronen und Büsche */
.icon path:nth-of-type(1),
.icon path:nth-of-type(2),
.icon path:nth-of-type(4),
.icon path:nth-of-type(6),
.icon path:nth-of-type(8),
.icon path:nth-of-type(10) {
  transform-origin: center center;
  animation-name: canopyGrow;
}

.icon path:nth-of-type(6) {
  --delay: 0.75s;
}
.icon path:nth-of-type(10) {
  --delay: 0.9s;
}
.icon path:nth-of-type(4),
.icon path:nth-of-type(8) {
  --delay: 1.05s;
}
.icon path:nth-of-type(1) {
  --delay: 1.1s;
}
.icon path:nth-of-type(2) {
  --delay: 1.2s;
}

/* Sonne */
.icon path:nth-of-type(31) {
  transform-origin: center center;
  animation-name: sunPulse;
  --delay: 0.25s;
}

/* Einzelne Blätter */
.icon path:nth-of-type(32),
.icon path:nth-of-type(33),
.icon path:nth-of-type(34),
.icon path:nth-of-type(35) {
  transform-origin: center center;
  animation-name: leafSway;
}

.icon path:nth-of-type(32) {
  --delay: 1.45s;
}
.icon path:nth-of-type(33) {
  --delay: 1.6s;
}
.icon path:nth-of-type(34) {
  --delay: 1.75s;
}
.icon path:nth-of-type(35) {
  --delay: 1.9s;
}

@keyframes baseIn {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  12%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.98);
  }
}

@keyframes trunkGrow {
  0%,
  10% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  30%,
  86% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(0.05);
  }
}

@keyframes canopyGrow {
  0%,
  16% {
    opacity: 0;
    transform: translateY(34px) scale(0.2);
  }
  38% {
    opacity: 1;
    transform: translateY(-6px) scale(1.05);
  }
  50%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(0.85);
  }
}

@keyframes softPop {
  0%,
  22% {
    opacity: 0;
    transform: scale(0.6);
  }
  42%,
  86% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes leafSway {
  0%,
  34% {
    opacity: 0;
    transform: translateY(18px) scale(0.15) rotate(-8deg);
  }
  48% {
    opacity: 1;
    transform: translateY(0) scale(1.08) rotate(6deg);
  }
  62% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-5deg);
  }
  76%,
  86% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(4deg);
  }
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.85) rotate(0deg);
  }
}

@keyframes sunPulse {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.75);
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  36% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  52% {
    opacity: 1;
    transform: translateY(0) scale(1.06);
  }
  72%,
  88% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}