/* Tailwind source file. Build in production to purge unused classes. */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Components */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg px-5 py-3 font-semibold bg-brand-red text-white shadow-md hover:bg-brand-redLight focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-red;
  }
  .btn-wa {
    @apply inline-flex items-center justify-center gap-2 rounded-lg px-5 py-3 font-semibold text-white shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-red bg-gradient-to-r from-brand-red to-brand-redLight hover:to-brand-red active:scale-95 transition;
  }
  .tag {
    @apply inline-flex items-center rounded-full border border-white/10 bg-white/5 px-3 py-2 text-sm hover:bg-white/10 active:scale-95 transition data-[active=true]:bg-brand-red data-[active=true]:text-white;
  }
}

/* Utilities */
@layer utilities {
  .shadow-gloss {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 12px 24px rgba(0, 0, 0, 0.4);
  }
  @keyframes float1 {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(2%, 6%, 0) scale(1.05);
    }
  }
  @keyframes float2 {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(-3%, -4%, 0) scale(1.06);
    }
  }
  @keyframes float3 {
    0%,
    100% {
      transform: translate3d(-50%, 0, 0) scale(1);
    }
    50% {
      transform: translate3d(-48%, -5%, 0) scale(1.04);
    }
  }
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  .skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
  }
  @keyframes waPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.04);
    }
  }
  .animate-wa-pulse {
    animation: waPulse 1.05s ease-in-out 3;
  }
  .wa-glow {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset,
      0 10px 20px rgba(0, 0, 0, 0.35), 0 0 28px rgba(179, 0, 27, 0.35);
  }
}

/* Note: Build with tailwindcss CLI for production */
/* npx tailwindcss -c tailwind.config.js -i ./css/tailwind.css -o ./public.css --minify */