/* -----------------------------------------------------------------------------
   VALEON — landing page
   Spec: v0.6 §6 — "Black space, tiny particles drifting through, Lux Shards
   passing slowly at low alpha, and buttons that stand out against it."
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  place-items: center;
  padding: var(--space-7) 0 var(--space-8);
  text-align: center;
}

/* Backdrop pool behind the hero — mirrors MenuChrome.Backdrop() from the
   game, which sits a soft dark pool between the drifting space and the
   wordmark. Without this, shards drifting past the letters add their light
   straight through and read as passing OVER the wordmark. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 96vw);
  height: 78%;
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, rgba(5, 8, 18, 0.80), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.hero-wordmark {
  display: block;
  width: min(92vw, 980px);
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto var(--space-6);
  user-select: none;
  -webkit-user-drag: none;
  /* Black-backdrop kill, in three redundant layers so the failure of any
     one still leaves a clean logo on the page:
       1) SVG luminance filter (see #luminance-alpha in index.html) — turns
          RGB luminance into alpha channel. Pure CSS/SVG, no JS required.
       2) mix-blend-mode: screen for browsers where the SVG filter is
          disabled or the img is treated as a raster resource that ignores
          filter chaining.
       3) wordmark.js alpha-keys the PNG in JS, then optionally upgrades to
          a live WebGL canvas.
     Any one of these succeeding hides the black rectangle. */
  filter: url(#luminance-alpha)
          drop-shadow(0 0 30px rgba(51, 230, 255, 0.22))
          drop-shadow(0 0 90px rgba(153, 77, 255, 0.14));
  mix-blend-mode: screen;
}
/* When wordmark.js swaps in the WebGL canvas, the shader already produces
   correct alpha — we just want the ambient drop-shadow glow. */
canvas.hero-wordmark {
  filter: drop-shadow(0 0 30px rgba(51, 230, 255, 0.22))
          drop-shadow(0 0 90px rgba(153, 77, 255, 0.14));
  mix-blend-mode: normal;
}

.hero-cta {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.hero-stores {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stores .store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0.95rem 1.6rem;
  min-width: 260px;
  min-height: 76px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.hero-stores .store:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 40px rgba(51, 230, 255, 0.18);
  color: #fff;
}
.hero-stores .store-mark {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: visible;   /* belt-and-braces so nothing clips at the edges */
}
.hero-stores .store-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
}
.hero-stores .store-line1 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.02em;
}
.hero-stores .store-line2 {
  font-family: var(--font-display);
  font-size: 1.44rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}

/* ----- Families strip -------------------------------------------------- */
.families {
  padding: var(--space-8) 0;
}
.families h2 { text-align: center; }
.families-sub {
  text-align: center;
  color: var(--ink-lo);
  max-width: 620px;
  margin: 0 auto var(--space-7);
}
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
.family-card {
  position: relative;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-3);
  background: linear-gradient(180deg, rgba(14, 22, 38, 0.6), rgba(5, 8, 18, 0.6));
  text-align: center;
  transition: transform var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
  cursor: default;
}
.family-card:hover {
  transform: translateY(-3px);
  border-color: var(--_glow, var(--ink-mid));
  box-shadow: 0 0 30px color-mix(in oklab, var(--_glow, var(--ink-mid)) 30%, transparent);
}
.family-card svg.shard {
  width: 74px;
  height: 74px;
  margin: 0 auto var(--space-3);
  overflow: visible;
}
.family-card .fam-name {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: var(--track-huge);
  text-transform: uppercase;
  color: var(--_glow, var(--ink-hi));
  margin-bottom: var(--space-1);
}
.family-card .fam-tag {
  font-size: 0.78rem;
  color: var(--ink-lo);
  letter-spacing: var(--track-tight);
}

/* ----- Pitch section --------------------------------------------------- */
.pitch {
  padding: var(--space-8) 0;
}
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.pitch-card {
  padding: var(--space-6);
  border: 1px solid var(--grid-line);
  border-radius: var(--radius-3);
  background: rgba(14, 22, 38, 0.4);
}
.pitch-card h3 { color: var(--ink-hi); margin-bottom: var(--space-3); }
.pitch-card p { color: var(--ink-mid); }
.pitch-card .kw { color: var(--cryo); }