/* Splash screen */
    #splash {
      position: fixed;
      flex-direction: column;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5); /* dark overlay */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      transition: opacity 1s ease;
      cursor: pointer;
      overflow: hidden;
    }

    #splash img {
      max-width: 300px;
      animation: fadeInScale 3s ease forwards;

    }

    @keyframes fadeInScale {
      0% { opacity: 0; transform: scale(0.8); }
      100% { opacity: 1; transform: scale(1); }
    }

    /* Hidden state */
    #splash.hidden {
      opacity: 0;
      pointer-events: none;
    }

    /* Items hidden while splash is active */
    .hidden-during-splash {
    opacity: 0;
    pointer-events: none; /* prevent clicks */
    transition: opacity 1s ease;
    }

    /* When splash is gone, reveal them */
    .show {
    opacity: 1;
    pointer-events: auto;
    }
    /* When scroll is locked, disable page scrolling */
    .lock-scroll {
    overflow: hidden;
    height: 100vh; /* prevent mobile bounce */
    }

  @media (max-width: 768px) {
    #splash {
      gap: 50px;
    }

    #splash div img {
      max-width: 110px;
      justify-content: space-evenly;
    }
}