/* BXY "House Lights": one fixed Canvas2D set behind a translucent page.
   Translucency only applies once the renderer is live (html.bg-concept-live). */
#bg-concept-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
  background: #06090f;
}

html:has(body.bg-concept) { background: #06090f; }
.gsp-home.bg-concept { background: transparent; }

/* Retire the old hero backdrop (app.js also skips creating/rendering it). */
.gsp-home.bg-concept #visualizer-canvas,
.gsp-home.bg-concept .hero::before { display: none; }

.bg-concept-live .bg-concept .site-shell,
.bg-concept-live .bg-concept .hero,
.bg-concept-live .bg-concept .forbidden-fruit-section { background: transparent; }

.bg-concept-live .bg-concept .hero-overlay {
  background:
    linear-gradient(90deg, rgba(6, 9, 15, .82) 0%, rgba(6, 9, 15, .5) 38%, rgba(6, 9, 15, 0) 66%),
    linear-gradient(0deg, rgba(6, 9, 15, .9) 0%, rgba(6, 9, 15, 0) 34%);
}

.bg-concept-live .bg-concept .intro-band { background: rgba(9, 13, 20, .7); }
.bg-concept-live .bg-concept .brand-house-section { background: linear-gradient(110deg, rgba(8, 11, 17, .86), rgba(10, 13, 20, .7)); }
.bg-concept-live .bg-concept .about-section { background: linear-gradient(135deg, rgba(8, 12, 19, .84), rgba(9, 13, 20, .7)); }
.bg-concept-live .bg-concept .project-section { background: linear-gradient(130deg, rgba(222, 231, 238, .96), rgba(192, 205, 216, .94)); }
.bg-concept-live .bg-concept .book-listen-section { background: linear-gradient(120deg, rgba(7, 11, 18, .84), rgba(9, 12, 20, .72)); }
.bg-concept-live .bg-concept .proof-section { background: linear-gradient(125deg, rgba(7, 11, 18, .86), rgba(10, 14, 21, .74)); }
.bg-concept-live .bg-concept .contact-section { background: linear-gradient(125deg, rgba(8, 13, 20, .86), rgba(10, 14, 22, .76)); }

/* Character strips stay; their bands become windows into the set. */
.bg-concept-live .bg-concept .game-transition-in,
.bg-concept-live .bg-concept .solar-skate-transit {
  background: linear-gradient(180deg, rgba(6, 8, 16, .5), rgba(6, 8, 16, .25));
}
.bg-concept-live .bg-concept .game-transition-in::before { background: rgba(5, 7, 16, .5); }

/* Arcade corridor shows through around the RunGun spotlight and the 3x3 grid (cards stay opaque). */
.bg-concept-live .bg-concept .forbidden-fruit-shade {
  background: linear-gradient(180deg, rgba(6, 7, 18, .62), rgba(6, 7, 18, .28) 26%, rgba(6, 7, 18, .34) 70%, rgba(6, 7, 18, .7));
}
.bg-concept-live .bg-concept .forbidden-fruit-video { opacity: .07; }

/* Signal lab behind the tool video cards. */
.bg-concept-live .bg-concept .tools-section { background: linear-gradient(180deg, rgba(5, 10, 12, .58), rgba(5, 10, 12, .42)); }

@media (max-width: 640px) {
  .bg-concept-live .bg-concept .brand-house-section,
  .bg-concept-live .bg-concept .about-section,
  .bg-concept-live .bg-concept .book-listen-section,
  .bg-concept-live .bg-concept .proof-section,
  .bg-concept-live .bg-concept .contact-section { background: rgba(7, 11, 18, .9); }
}

@media print, (forced-colors: active) {
  #bg-concept-canvas { display: none; }
}