#preloader {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    svg {
      width: 200px;
      height: auto;
    }

    /* Initial States */
    .leaf {
      opacity: 0;
    }

    #center-figure {
      opacity: 0;
      transform: scale(0.8);
      transform-origin: center;
    }

    /* Animations */
    .animate-leaf-top {
      animation: slideTop 0.5s forwards;
    }

    .animate-leaf-left {
      animation: slideLeft 0.5s 0.2s forwards;
    }

    .animate-leaf-right {
      animation: slideRight 0.5s 0.4s forwards;
    }

    .animate-leaf-bottom {
      animation: slideBottom 0.5s 0.6s forwards;
    }

    .animate-leaf-top-left {
      animation: slideTopLeft 0.5s 0.8s forwards;
    }

    .animate-leaf-top-right {
      animation: slideTopRight 0.5s 1s forwards;
    }

    .show-center {
      animation: fadeZoom 0.5s 1.4s forwards;
    }

    @keyframes slideTop {
      from { transform: translateY(-100px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    @keyframes slideLeft {
      from { transform: translateX(-100px); opacity: 0; }
      to   { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideRight {
      from { transform: translateX(100px); opacity: 0; }
      to   { transform: translateX(0); opacity: 1; }
    }

    @keyframes slideBottom {
      from { transform: translateY(100px); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }

    @keyframes slideTopLeft {
      from { transform: translate(-100px, -100px); opacity: 0; }
      to   { transform: translate(0, 0); opacity: 1; }
    }

    @keyframes slideTopRight {
      from { transform: translate(100px, -100px); opacity: 0; }
      to   { transform: translate(0, 0); opacity: 1; }
    }

    @keyframes fadeZoom {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Loading Text Animation */
    .loading-text {
      margin-top: 20px;
      font-size: 20px;
      font-family: Arial, sans-serif;
      letter-spacing: 2px;
      color: #333;
      display: flex;
    }

    .loading-text span {
      opacity: 0;
      animation: fadeInLetter 1s forwards;
    }

    .loading-text span:nth-child(1) { animation-delay: 0.1s; }
    .loading-text span:nth-child(2) { animation-delay: 0.2s; }
    .loading-text span:nth-child(3) { animation-delay: 0.3s; }
    .loading-text span:nth-child(4) { animation-delay: 0.4s; }
    .loading-text span:nth-child(5) { animation-delay: 0.5s; }
    .loading-text span:nth-child(6) { animation-delay: 0.6s; }
    .loading-text span:nth-child(7) { animation-delay: 0.7s; }
    .loading-text span:nth-child(8) { animation-delay: 0.8s; }
    .loading-text span:nth-child(9) { animation-delay: 0.9s; }
    .loading-text span:nth-child(10) { animation-delay: 1s; }

    @keyframes fadeInLetter {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }