/* Vellora Picks — shared base styles
   Tailwind utilities live in the Play CDN; design tokens in assets/js/tailwind-config.js */
@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; }
  main > :first-child { margin-top: 0 !important; }
  main > :last-child { margin-bottom: 0 !important; }
}
::-webkit-scrollbar { display: none; }

/* Mobile navigation panel (populated by assets/js/nav.js) */
#mobile-menu { display: none; }
@media (max-width: 1023px) {
  #mobile-menu.open { display: block; }
}

/* Hero ambient pattern: low-contrast dot grid with a slow seamless drift.
   Sits behind hero content, fades out at the edges, and stops for reduced motion. */
.hero-pattern {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(rgba(227, 181, 255, 0.45) 1px, transparent 1px),
    radial-gradient(rgba(157, 210, 186, 0.32) 1px, transparent 1px);
  background-size: 28px 28px, 56px 56px;
  background-position: 0 0, 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  animation: hero-pattern-drift 44s linear infinite;
}

@keyframes hero-pattern-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(28px, 28px, 0); }
}

/* Canvas wave layer: takes over from the static grid when JS runs. */
.hero-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}

.hero-wave.is-active { display: block; }
.hero-pattern--off { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-pattern { animation: none; }
}