/* SGS BACKGROUND DEPTH V9 (2026-09-26).
   Both themes use faint topographic contour lines instead of the old full-screen perspective grid. Sunset keeps its
   original dark colours; Sunrise gets warmer layered glows with a slow drift on scroll. Glass panes get a light
   frost so lines never run through text. Loaded last so it replaces the earlier body::before/::after scene. */

/* ---------- Sunset (dark): original colours, topographic lines ---------- */

html[data-theme='sunset'] body::before {
  transform: none;
  background:
    /* original Sunset sky, unchanged */
    radial-gradient(circle at 16% 14%, color-mix(in srgb, var(--glass-cyan) 40%, transparent), transparent 31%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--glass-violet) 36%, transparent), transparent 34%),
    radial-gradient(circle at 56% 72%, color-mix(in srgb, var(--glass-gold) 24%, transparent), transparent 38%),
    radial-gradient(ellipse at center, transparent 16%, color-mix(in srgb, var(--space-edge) 76%, transparent) 100%),
    radial-gradient(ellipse at 50% 42%, var(--space-center) 3%, transparent 74%),
    var(--space-plum);
}

html[data-theme='sunset'] body::after {
  inset: -40px;
  opacity: .38;
  background: url('/images/topo-contours-dark.svg') center / cover no-repeat;
  filter: none;
  transform: none;
  /* Brightest in the middle, fading toward the edges. */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
}

/* Glass panes get a light frost on Sunset so the contour lines never cut through text. */
html[data-theme='sunset'] :is(
  .filter-panel, .search-filters, .results-main, .search-main, .compare-controls, .compare-results,
  .catalog-status-banner, .search-status, .compare-note, .empty-state, .scout-note,
  .home-category-card, .home-b-tool-card, .home-b-editorial-card, .live-value-shell, .live-value-card,
  .home-principle, .scout-feature, .scout-answer, .trust-card, .result-card, .product-result,
  .search-result-card, .compare-product-card, .price-basis-note, .disclosure
) {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .045), transparent 40%),
    rgb(18 14 20 / .20);
  -webkit-backdrop-filter: blur(4px) saturate(130%);
  backdrop-filter: blur(4px) saturate(130%);
}

/* ---------- Sunrise: layered light, no lines ---------- */

html[data-theme='sunrise'] body::before {
  transform: none;
  background:
    url('/images/topo-contours.svg') center / cover no-repeat,
    radial-gradient(ellipse 70% 50% at 50% 0%, rgb(255 222 180 / .95), transparent 70%),
    linear-gradient(180deg, #fff6e8 0%, #ffe9d6 50%, #fbdfe0 100%);
}

html[data-theme='sunrise'] body::after {
  inset: -10vh -10vw;
  opacity: 1;
  background-image:
    radial-gradient(circle at 14% 20%, rgb(255 150 90 / .55), transparent 30%),
    radial-gradient(circle at 86% 12%, rgb(255 196 70 / .55), transparent 26%),
    radial-gradient(circle at 74% 70%, rgb(110 180 235 / .40), transparent 32%),
    radial-gradient(circle at 24% 84%, rgb(240 120 170 / .38), transparent 28%),
    radial-gradient(circle at 50% 46%, rgb(255 170 120 / .22), transparent 38%);
  background-size: auto;
  -webkit-mask-image: none;
  mask-image: none;
  filter: blur(24px) saturate(120%);
  transform: none;
}

/* Light frost on Sunrise glass panes so contour lines never run through text. */
html[data-theme='sunrise'] :is(
  .filter-panel, .search-filters, .results-main, .search-main, .compare-controls, .compare-results,
  .catalog-status-banner, .search-status, .compare-note, .empty-state, .scout-note,
  .home-category-card, .home-b-tool-card, .home-b-editorial-card, .live-value-shell, .live-value-card,
  .home-principle, .scout-feature, .scout-answer, .trust-card, .result-card, .product-result,
  .search-result-card, .compare-product-card, .price-basis-note, .disclosure
) {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .22), transparent 45%),
    rgb(255 250 244 / .22);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}

/* Parallax: the glow layer drifts a little slower than the page, so it sits "behind" the content. */
@supports (animation-timeline: scroll()) {
  html[data-theme='sunrise'] body::after {
    animation: sgs-sunrise-drift linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes sgs-sunrise-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -8vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='sunrise'] body::after { animation: none; transform: none; }
}