/*! SONIC SNOWFLAKE RECORDS — Home View Styles */

.home-hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding-top: var(--nav-h);
}
.home-hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* .home-hero__canvas rule intentionally removed from use — initHeroViz() is preserved in home.js in case
   the particle effect gets reused elsewhere; it no longer renders in the hero now that the video plays there. */
.home-hero__vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, transparent 0%, var(--void) 82%),
    linear-gradient(to bottom, rgba(6,3,9,.15) 0%, var(--void) 97%);
}
.home-hero__grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) .6px, transparent .6px);
  background-size: 3px 3px;
}

.home-hero__content { position: relative; z-index: 2; text-align: center; padding: 90px 0 30px; }
.home-hero__title {
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs-hero); line-height: .92;
  letter-spacing: -0.015em; margin: 20px 0 22px; display: flex; flex-direction: column; gap: .06em;
}
.home-hero__tagline {
  font-family: var(--font-mono); font-size: clamp(1rem, 2vw, 1.3rem); color: var(--mist);
  letter-spacing: .05em; margin-bottom: 36px;
}
.home-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.home-hero__cta .btn svg { width: 15px; height: 15px; }

.home-hero__stats {
  position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(2.2rem, 7vw, 5.5rem);
  padding: 34px 0 6px;
}
.home-hero__stats > div { text-align: center; }
.home-hero__stats strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800;
  background: linear-gradient(180deg, var(--chrome-1), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-hero__stats span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }

.home-hero__scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mist-dim);
}
.home-hero__scroll-cue span { width: 1px; height: 34px; background: linear-gradient(to bottom, var(--neon-bright), transparent); animation: floatY 2.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .home-hero__scroll-cue span { animation: none; } }

@media (max-width: 700px) {
  .home-hero { min-height: 92vh; }
  .home-hero__stats { gap: 2rem; }
}

/* ---------------- Roster ---------------- */
.roster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1080px) { .roster-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roster-grid { grid-template-columns: 1fr; } }

/* ---------------- Latest drops ---------------- */
.latest-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px 20px; }
@media (max-width: 1080px) { .latest-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .latest-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }

/* ---------------- CTA banner ---------------- */
.cta-banner { padding: clamp(4rem, 10vw, 8rem) 0 clamp(5rem, 12vw, 10rem); position: relative; }
.cta-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(181,131,255,.14), transparent 70%);
}
.cta-banner__inner { text-align: center; max-width: 680px; margin: 0 auto; }
.cta-banner__inner h2 { font-size: var(--fs-h2); margin: 14px 0 18px; line-height: .98; }
.cta-banner__inner p { color: var(--mist); font-size: var(--fs-lead); margin-bottom: 32px; }

/* ---------------- Spotlight Artist ---------------- */
.spotlight-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem);
}
.spotlight-card__art { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; }
.spotlight-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spotlight-card__eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--card-accent, var(--neon-bright)); margin-bottom: 10px; }
.spotlight-card__blurb { font-size: var(--fs-body); color: var(--mist); line-height: 1.65; margin-bottom: 22px; max-width: 62ch; }
@media (max-width: 700px) {
  .spotlight-card { grid-template-columns: 1fr; text-align: center; }
  .spotlight-card__art { max-width: 240px; margin: 0 auto; }
}

/* ---------------- Web3 / Community ---------------- */
.web3-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.web3-card {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem); text-align: center;
}
.web3-card__art { width: 100%; max-width: 190px; margin: 0 auto 18px; display: block; border-radius: var(--radius-md); }
.web3-card__eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-dim); margin-bottom: 6px; }
.web3-card h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.web3-card__tag {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--neon); color: var(--void); border-radius: 999px; padding: 3px 10px; vertical-align: middle; margin-left: 6px;
}
.web3-card__desc { color: var(--mist); font-size: var(--fs-small); line-height: 1.55; margin-bottom: 20px; }
.web3-disclaimer { font-size: .74rem; color: var(--mist-dim); line-height: 1.6; max-width: 74ch; margin: 26px auto 0; text-align: center; }
@media (max-width: 700px) { .web3-grid { grid-template-columns: 1fr; } }