body {
      font-family: 'Inter', sans-serif;
  }

  .active-card {
      transition: all 0.3s ease-in-out;
      opacity: 0;
      transform: scale(0.9) translate(-50%, -50%);
      pointer-events: none;
  }

  .active-card.show {
      opacity: 1;
      transform: scale(1) translate(-50%, -50%);
      pointer-events: auto;
  }

  .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 40;
  }

  #videoBox {
      transition: opacity 0.5s ease, transform 0.5s ease;
      opacity: 0;
  }

  #videoBox.show {
      opacity: 1;
  }

  img {
      user-select: none;
      -webkit-user-drag: none;
  }



  @keyframes fade-in-up {
      0% {
          opacity: 0;
          transform: translateY(30px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @keyframes fade-in-down {
      0% {
          opacity: 0;
          transform: translateY(-30px);
      }

      100% {
          opacity: 1;
          transform: translateY(0);
      }
  }

  .animate-fade-in-up {
      animation: fade-in-up 0.8s ease-out both;
  }

  .animate-fade-in-down {
      animation: fade-in-down 0.8s ease-out both;
  }