@font-face {
      font-family: 'Rainmaker Script';
      src: url('/font/RainmakerScriptRegular.OTF') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    @font-face {
      font-family: 'AbrilFatface';
      src: url('/font/AbrilFatface-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

    .font-rainmaker {
      font-family: 'Rainmaker Script', cursive;
    }

    .font-AbrilFatface {
      font-family: 'AbrilFatface', cursive;
    }

    .montserrat {
      font-family: "Montserrat", sans-serif;
    }

    .fade-in-start {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }

    .fade-in {
      opacity: 1;
      transform: translateY(0);
    }


    .category-btn {
      transition: all 0.3s ease;
    }

    .category-btn.active {
      background: #ec4899;
      color: white;
      box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
    }

    .category-btn:hover {
      transform: translateY(-2px);
    }

    .hidden-item {
      display: none;
    }

    .show-item {
      animation: fadeInUp 0.6s ease-out;
    }

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

    .pulse-loading {
      animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .nav-backdrop {
      backdrop-filter: blur(8px);
      background: rgba(255, 255, 255, 0.9);
    }