@layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .bottle-glow {
        box-shadow: 0 0 15px rgba(157, 78, 221, 0.5);
      }
      .ingredient-hover {
        transition: all 0.3s ease;
      }
      .ingredient-hover:hover {
        transform: scale(1.05);
        cursor: pointer;
      }
      .shake-animation {
        animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
      }
      @keyframes shake {
        10%, 90% { transform: translate3d(-1px, 0, 0); }
        20%, 80% { transform: translate3d(2px, 0, 0); }
        30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
        40%, 60% { transform: translate3d(4px, 0, 0); }
      }
      .pour-animation {
        animation: pour 1.5s ease-out forwards;
      }
      @keyframes pour {
        0% { transform: translateY(0); opacity: 1; }
        50% { transform: translateY(-20px); opacity: 1; }
        100% { transform: translateY(-100px); opacity: 0; }
      }
      .fade-in {
        animation: fadeIn 0.5s ease-in-out;
      }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .bubble {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        animation: bubble-up 2s ease-in-out forwards;
        pointer-events: none;
      }
      @keyframes bubble-up {
        0% { transform: translateY(0) scale(0.1); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: translateY(-100px) scale(1); opacity: 0; }
      }
      .rotate-in {
        animation: rotateIn 0.8s cubic-bezier(0.26, 1.36, 0.74, 1.04) forwards;
      }
      @keyframes rotateIn {
        0% { transform: scale(0) rotate(-180deg); opacity: 0; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
      }
      .search-highlight {
        background-color: rgba(248, 147, 29, 0.3);
        border-radius: 2px;
      }
      .mobile-scroll {
        -webkit-overflow-scrolling: touch;
      }
      .tab-active {
        border-bottom: 3px solid theme('colors.secondary');
        color: theme('colors.secondary');
      }
    }