/* ====================================
   CUSTOM ADDITIONS BEYOND TAILWIND
   ==================================== */

/* Grain / noise overlay (used in hero) */
.grain-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Smooth scroll behavior (already in Tailwind base, but explicit) */
html {
  scroll-behavior: smooth;
}

/* Brand cards hover movement (subtle lift) */
.brand-card {
  transition: transform 0.3s ease, background 0.3s, color 0.3s;
}
.brand-card:hover {
  transform: translateY(-4px);
}

/* Hide scrollbar for trending on mobile (optional) */
.trending-scroll::-webkit-scrollbar {
  height: 4px;
}
.trending-scroll::-webkit-scrollbar-track {
  background: #111;
}
.trending-scroll::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

/* Parallax fix for mobile */
@media (max-width: 768px) {
  .bg-fixed {
    background-attachment: scroll;
  }
}