/* SGS GLASS DEPTH V6 — full-height subtle grid + polished SGS media.
   Loaded after Astro's compiled page CSS so this remains the final visual cascade. */

:root {
  --sgs-window-fill: transparent;
  --sgs-window-fill-hover: rgb(18 14 20 / .028);
  --sgs-window-line: rgb(255 255 255 / .22);
  --sgs-window-highlight: rgb(255 255 255 / .024);
  --sgs-window-cyan: rgb(83 205 255 / .36);
  --sgs-window-violet: rgb(184 82 255 / .32);
  --sgs-window-gold: rgb(255 152 72 / .24);
  --sgs-depth-grid-opacity: .13;
}

html[data-theme='sunrise'] {
  --sgs-window-fill: rgb(255 255 255 / .025);
  --sgs-window-fill-hover: rgb(255 255 255 / .055);
  --sgs-window-line: rgb(255 255 255 / .68);
  --sgs-window-highlight: rgb(255 255 255 / .055);
  --sgs-window-cyan: rgb(0 137 196 / .20);
  --sgs-window-violet: rgb(160 70 220 / .18);
  --sgs-window-gold: rgb(227 162 26 / .24);
  --sgs-depth-grid-opacity: .08;
}

/* Never let section wrappers paint over the far-depth scene. */
html:is([data-theme='sunset'],[data-theme='sunrise']) :is(
  main,
  .home-section,
  .home-stats,
  .live-catalog,
  .foundation,
  .scout-section,
  .category-hero,
  .search-hero,
  .compare-hero,
  .product-hero
) {
  background: transparent;
}

/* Fixed ambient depth layer. */
html:is([data-theme='sunset'],[data-theme='sunrise']) body::before {
  background:
    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);
}

/* Perspective grid now reaches the very top of the viewport. It is intentionally
   dimmer than V5 so it reads as depth rather than foreground decoration. */
html:is([data-theme='sunset'],[data-theme='sunrise']) body::after {
  opacity: var(--sgs-depth-grid-opacity);
  background-image:
    linear-gradient(color-mix(in srgb, var(--space-light) 72%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--space-light) 72%, transparent) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: none;
  -webkit-mask-image: none;
  filter: none;
  transform: perspective(1100px) rotateX(54deg) scale(2.15) translateY(-34vh);
  transform-origin: center bottom;
}

/* Main glass panes. Zero backdrop blur is deliberate so grid lines remain crisp
   and can be followed straight through a card/panel. */
html:is([data-theme='sunset'],[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-stat-grid,
  .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, var(--sgs-window-highlight), transparent 40%),
    var(--sgs-window-fill);
  border-color: var(--sgs-window-line);
  border-top-color: color-mix(in srgb, white 30%, var(--sgs-window-line));
  border-left-color: color-mix(in srgb, var(--sgs-window-cyan) 74%, var(--sgs-window-line));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .25),
    inset 1px 0 0 var(--sgs-window-cyan),
    inset -1px 0 0 var(--sgs-window-violet),
    inset 0 -1px 0 var(--sgs-window-gold),
    0 16px 42px -34px var(--space-shadow),
    0 24px 60px -48px var(--glass-bloom);
}

/* Header keeps a small frost so navigation remains legible while still reading as glass. */
html:is([data-theme='sunset'],[data-theme='sunrise']) .site-header {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .045), transparent 42%),
    rgb(18 14 20 / .055);
  -webkit-backdrop-filter: blur(8px) saturate(155%);
  backdrop-filter: blur(8px) saturate(155%);
  border-color: var(--sgs-window-line);
}
html[data-theme='sunrise'] .site-header {
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), transparent 42%),
    rgb(255 255 255 / .10);
}

/* Use the cleaned emblem rather than cropping the old wordmark artwork. This fixes
   the flat/pixelated lower edge on desktop while keeping the strong mobile read. */
html .brand-mark {
  width: 56px;
  height: 56px;
  background: url('/images/sgs-mark-clean.webp') center / contain no-repeat;
  border-radius: 50%;
  box-shadow: none;
  filter: none;
  flex: 0 0 56px;
}

/* New homepage hero artwork: site-native sunset palette, no baked-in copy. */
html .scout-art.scout-art-photo {
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  overflow: hidden;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--sgs-window-cyan) 34%, var(--sgs-window-line));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 28px 72px -42px var(--space-shadow),
    0 0 54px -34px var(--sgs-window-gold);
}
html .scout-art.scout-art-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Compact controls can carry a little more tint than the panes. */
html:is([data-theme='sunset'],[data-theme='sunrise']) :is(
  .field,
  .select,
  .category-chip,
  .search-category-links a,
  .badge,
  .spec-pill,
  .home-b-secondary,
  .btn-secondary,
  .catalog-pagination button,
  .scout-search > div,
  input,
  select
) {
  background: linear-gradient(135deg, rgb(255 255 255 / .04), transparent), rgb(18 14 20 / .055);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme='sunrise'] :is(
  .field,.select,.category-chip,.search-category-links a,.badge,.spec-pill,
  .home-b-secondary,.btn-secondary,.catalog-pagination button,.scout-search > div,input,select
) {
  background: linear-gradient(135deg, rgb(255 255 255 / .10), transparent), rgb(255 255 255 / .09);
}

html:is([data-theme='sunset'],[data-theme='sunrise']) :is(.offer-row,.comparison-demo-row) {
  background: linear-gradient(135deg, rgb(255 255 255 / .025), transparent), rgb(18 14 20 / .025);
  border-color: color-mix(in srgb, var(--sgs-window-line) 82%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 8px 20px -22px var(--space-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html[data-theme='sunrise'] :is(.offer-row,.comparison-demo-row) {
  background: linear-gradient(135deg, rgb(255 255 255 / .06), transparent), rgb(255 255 255 / .06);
}

@media (hover:hover) and (pointer:fine) {
  html:is([data-theme='sunset'],[data-theme='sunrise']) :is(
    .home-category-card,
    .home-b-tool-card,
    .home-b-editorial-card,
    .live-value-card,
    .product-result,
    .search-result-card,
    .compare-product-card,
    .result-card
  ):hover {
    background:
      linear-gradient(145deg, rgb(255 255 255 / .05), transparent 44%),
      var(--sgs-window-fill-hover);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .30),
      inset 1px 0 0 var(--sgs-window-cyan),
      inset -1px 0 0 var(--sgs-window-violet),
      inset 0 -1px 0 var(--sgs-window-gold),
      -10px -8px 30px -25px var(--sgs-window-cyan),
      12px 10px 34px -26px var(--sgs-window-violet),
      0 22px 58px -38px var(--space-shadow);
  }
}

@media (max-width:980px) {
  :root { --sgs-depth-grid-opacity: .10; }
  html[data-theme='sunrise'] { --sgs-depth-grid-opacity: .065; }
  html:is([data-theme='sunset'],[data-theme='sunrise']) body::after {
    background-size: 66px 66px;
    transform: perspective(950px) rotateX(53deg) scale(1.95) translateY(-28vh);
  }
  html .brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}

@media (max-width:700px) {
  html .scout-art.scout-art-photo {
    max-width: 470px;
    width: 100%;
    margin-inline: auto;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion:reduce) {
  html:is([data-theme='sunset'],[data-theme='sunrise']) body::after {
    transform: perspective(1100px) rotateX(54deg) scale(2.15) translateY(-34vh);
  }
}

/* Readable opaque fallback for browsers that cannot render modern transparency well. */
@supports not (background: color-mix(in srgb, white 50%, transparent)) {
  html:is([data-theme='sunset'],[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-stat-grid,
    .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,.offer-row,.comparison-demo-row
  ) {
    background: var(--space-solid);
  }
}