#intro {
  position: fixed;
  inset: 0;
  background: white;
  z-index: 9999;
  overflow: hidden;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#intro-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  animation: introLogoFade 1.2s ease forwards;
  z-index: 3;
}

#intro .leaf {
  position: absolute;
  border-radius: 100% 0 100% 0;
  opacity: 0.85;
  z-index: 2;
  animation: introFall linear forwards;
}

@keyframes introLogoFade {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes introFall {
  from {
    transform: translate(0, var(--startY)) rotate(0deg);
    opacity: 0;
  }
  15% { opacity: 0.85; }
  to {
    transform: translate(var(--x), 120vh) rotate(var(--rot));
    opacity: 0;
  }
}