/* Home-only decorative layer; the existing gradients are the no-WebGL fallback. */
.cc-home { isolation: isolate; }
.cc-home-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}
.cc-home-background.is-ready { opacity: .24; }
.cc-home-background canvas { display: block; width: 100%; height: 100%; }
.cc-home-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(16,17,22,.4));
}
.cc-home:has(.cc-home-background.is-ready) .cc-hero-glass {
  background: radial-gradient(ellipse at 50% 120%, rgba(163,44,66,.2), transparent 68%), rgba(20,22,29,.76);
}
.cc-background-toggle {
  position: absolute;
  bottom: 12px;
  right: 20px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #202229;
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.5;
  cursor: pointer;
}
.cc-background-toggle:hover { color: var(--text); border-color: var(--text-muted); }
@media (max-width: 600px) {
  .cc-home .cc-hero-glass { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active), (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  .cc-home-background, .cc-background-toggle { display: none !important; }
  .cc-home:has(.cc-home-background.is-ready) .cc-hero-glass { background: var(--bg-elevated); }
}
@media print {
  .cc-home-background, .cc-background-toggle { display: none !important; }
}