/* ============================================================================
   index.html: which surfaces are glass.

   The recipe lives in glass.css, which must be loaded before this. Loaded last
   so it can restyle thirty other stylesheets without rewriting any of them.
   Remove the one <link> and the homepage returns to what it was.

   The homepage is the one page where the blur budget actually matters, so the
   split here is by COUNT, not by size. It renders 27 replay cards and 28 Code
   Lab cards, and a backdrop-filter is composited per element: 55 of those is a
   different proposition from the six panels on sponsor.html. The handful of
   large one-off panels get the real blur. The repeated cards get the same
   fill, grain, lit edge and shadow with no blur, which over a dark page reads
   as glass anyway and costs nothing per card. Measured: this file adds 10
   blurred elements.

   Worth knowing before adding more: the page already carried 116 of them
   before any of this, and almost all are tiny badges sitting on those same
   cards (27 .play-btn, 26 .ss-live, 26 .ss-views, 24 .rp-date). That is the
   real cost on this page and it predates the glass. If the homepage ever
   feels heavy on a cheap phone, those 103 badges are where to look first, not
   here.
   ========================================================================= */

/* ---------- 1. The few: real glass --------------------------------------- */
.hero-glass,
.about-grid,
.app-launch,
.vt-card,
.ss-panel,
.ht-quote {
  background: var(--g-grain), var(--g-sheen), var(--g-fill) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-lo), var(--g-cast) !important;
}

/* The lit top edge. A real sheet catches light along its upper border and loses it toward the
   middle, which a flat 1px border cannot do. Only on the large panels: at card size it is a
   smudge rather than a highlight. */
/* about-grid and app-launch are left out: hero-clean.css and hero-stack.css already own their ::after
   with a higher specificity selector, so a rule here would never run. Their corner glows stay. */
.ss-panel, .vt-card { position: relative; }
.ss-panel::after,
.vt-card::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px; z-index: 2;
  pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

/* ---------- 2. The many: the look without the cost ----------------------- */
.replay-card,
.ss-card {
  background: var(--g-grain), var(--g-sheen), var(--g-fill) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-lo), var(--g-cast) !important;
}
/* Lifting on hover is cheap and sells the material better than a blur would. */
.replay-card, .ss-card, .ht-quote, .vt-card {
  transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.replay-card:hover, .ss-card:hover, .ht-quote:hover {
  border-color: color-mix(in srgb, #fff 26%, var(--g-edge)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 var(--g-rim-lo),
              0 40px 84px -44px rgba(0,0,0,.95) !important;
}

/* ---------- 3. Parts inside the panels ----------------------------------- */
/* The showcase stats strip was solid black, which punched a hole through the card it sits in. */
.vt-stats { background: color-mix(in srgb, #000 42%, transparent) !important; }
.vt-pic   { background: color-mix(in srgb, var(--g-fill) 80%, transparent) !important; }
/* The thumbnail wells sit on a pane already, so they stay darker rather than lighter. */
.replay-embed, .ss-thumb { background: color-mix(in srgb, #000 30%, transparent) !important; }

/* The map rail under the hero is a bar, not a card: lighter fill, no deep shadow. */
.mh-rail, .ss-chips {
  background: var(--g-sheen), var(--g-fill-2) !important;
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
}

/* ---------- 4. Text: one row where it fits, two where it does not -------- */
.section-head h2,
.hero h1,
.ht-quote p,
.vt-card h3, .vt-by,
.ss-card h3,
.replay-card h3, .replay-card .rc-title,
.about-copy h2 { text-wrap: balance; }
.section-head > p,
.hero .lede,
.about-copy p,
.ss-card p,
.replay-card p { text-wrap: pretty; }

/* ---------- 5. When glass is the wrong answer ---------------------------- */
@media (prefers-reduced-transparency: reduce) {
  .hero-glass, .about-grid, .app-launch, .vt-card, .ss-panel, .ht-quote,
  .replay-card, .ss-card {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-glass, .about-grid, .app-launch, .vt-card, .ss-panel, .ht-quote,
  .replay-card, .ss-card { background: var(--surface) !important; }
}