/**
 * sayebahr.com — Pro Glass shell (كل صفحات home-lite)
 * mobile-first · desktop-enhanced · perf-lite aware
 */

/* ── Fixed Pro Glass background ── */
body.home-lite {
  position: relative;
  isolation: isolate;
  background-color: var(--hl-bg);
  color: var(--hl-text);
}

body.home-lite::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 100% 70% at 50% -25%, rgba(var(--pg-primary-rgb), 0.22), transparent 58%),
    radial-gradient(ellipse 55% 45% at 100% 45%, rgba(125, 211, 252, 0.08), transparent 55%),
    radial-gradient(ellipse 45% 40% at 0% 85%, rgba(var(--pg-accent-rgb), 0.07), transparent 50%),
    linear-gradient(180deg, var(--hl-bg-top) 0%, var(--hl-bg-mid) 48%, var(--hl-bg) 100%);
}

.hl-pro-bg-waves {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  height: clamp(48px, 10vw, 96px);
  pointer-events: none;
  opacity: 0.35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='rgba(56,189,248,0.12)' d='M0,40 C200,80 400,0 600,40 C800,80 1000,0 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 600px 100%;
}

/* ── Glass panel utility ── */
.hl-glass {
  background: var(--pg-glass);
  border: 1px solid var(--hl-border);
  backdrop-filter: var(--pg-glass-blur);
  -webkit-backdrop-filter: var(--pg-glass-blur);
  box-shadow: var(--hl-shadow-glass);
}

/* cards inherit glass on non-perf-lite */
html:not(.perf-lite) .hl-card,
html:not(.perf-lite) .hl-step,
html:not(.perf-lite) .hl-stat,
html:not(.perf-lite) .hl-store-item,
html:not(.perf-lite) .hl-faq details,
html:not(.perf-lite) .pl-card,
html:not(.perf-lite) .pl-guide-card,
html:not(.perf-lite) .blog-card,
html:not(.perf-lite) .article-step,
html:not(.perf-lite) .article-toc {
  backdrop-filter: var(--pg-glass-blur);
  -webkit-backdrop-filter: var(--pg-glass-blur);
}

/* ── Desktop enhancements ── */
@media (min-width: 768px) {
  body.home-lite::before {
    background:
      radial-gradient(ellipse 90% 65% at 50% -22%, rgba(var(--pg-primary-rgb), 0.26), transparent 55%),
      radial-gradient(ellipse 50% 42% at 95% 35%, rgba(125, 211, 252, 0.1), transparent 52%),
      radial-gradient(ellipse 42% 38% at 5% 78%, rgba(var(--pg-accent-rgb), 0.09), transparent 48%),
      linear-gradient(180deg, var(--hl-bg-top) 0%, var(--hl-bg-mid) 45%, var(--hl-bg) 100%);
  }

  html:not(.perf-lite) .hl-card:hover,
  html:not(.perf-lite) .hl-step:hover,
  html:not(.perf-lite) .blog-card:hover {
    border-color: var(--hl-primary-a35);
    box-shadow: 0 8px 28px rgba(2, 10, 18, 0.4);
  }
}

@media (min-width: 1200px) {
  .hl-wrap {
    width: var(--hl-content-max);
  }
}