/* ==========================================================================
   Prime-Site — Orb / Glass Theme (Dark only, ambient)
   Orbs are pure atmosphere — content is the hero.
   ========================================================================== */

/* --- Backdrop layer --- (interpolates via --mix) */
.orb-backdrop {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(63, 224, 160, 0.07), transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 110%, rgba(31, 171, 115, 0.05), transparent 65%),
    linear-gradient(180deg,
      color-mix(in oklab, #0E1F19 calc(100% - var(--mix-pct)), #E5EDE2 var(--mix-pct)) 0%,
      color-mix(in oklab, #0F2019 calc(100% - var(--mix-pct)), #ECF2E8 var(--mix-pct)) 50%,
      color-mix(in oklab, #0C1B15 calc(100% - var(--mix-pct)), #DDE6D9 var(--mix-pct)) 100%);
}
.orb { opacity: calc(0.35 + (1 - var(--mix)) * 0.0); }
.orb::before {
  background:
    radial-gradient(circle at 32% 28%,
      color-mix(in oklab, rgba(255,255,255,0.18) calc(100% - var(--mix-pct)), rgba(255,255,255,0.5) var(--mix-pct)) 0%,
      rgba(255,255,255,0.04) 30%, transparent 55%),
    radial-gradient(circle at 70% 75%,
      color-mix(in oklab, rgba(63,224,160,0.18) calc(100% - var(--mix-pct)), rgba(31,171,115,0.30) var(--mix-pct)),
      color-mix(in oklab, rgba(20,90,65,0.10) calc(100% - var(--mix-pct)), rgba(15,110,75,0.18) var(--mix-pct)) 55%,
      color-mix(in oklab, rgba(5,30,22,0.20) calc(100% - var(--mix-pct)), rgba(15,56,38,0.15) var(--mix-pct)) 100%);
}

/* Hexagon grid — barely there */
.orb-hex {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'><path d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z' fill='none' stroke='rgba(63,224,160,0.035)' stroke-width='0.6'/></svg>");
  background-size: 56px 64px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 10%, transparent 80%);
}

/* Floating orbs — soft, blurred, deep in the background */
.orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(var(--ox, 0), var(--oy, 0), 0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.35;
  filter: blur(8px);
}
.orb::before,
.orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* Soft glass body — desaturated, mostly atmospheric */
.orb::before {
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 30%, transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(63, 224, 160, 0.18), rgba(20, 90, 65, 0.10) 55%, rgba(5, 30, 22, 0.20) 100%);
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.04),
    0 0 60px rgba(63, 224, 160, 0.06);
}
.orb::after {
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 22%);
  mix-blend-mode: screen;
}

/* Drift animations — slow */
@keyframes orbDriftA { 0%,100% { translate: 0 0; } 50% { translate: 30px -20px; } }
@keyframes orbDriftB { 0%,100% { translate: 0 0; } 50% { translate: -20px 35px; } }
@keyframes orbDriftC { 0%,100% { translate: 0 0; } 50% { translate: 40px 15px; } }
@keyframes orbDriftD { 0%,100% { translate: 0 0; } 50% { translate: -35px -25px; } }

.orb.drift-a { animation: orbDriftA 32s ease-in-out infinite; }
.orb.drift-b { animation: orbDriftB 38s ease-in-out infinite; }
.orb.drift-c { animation: orbDriftC 28s ease-in-out infinite; }
.orb.drift-d { animation: orbDriftD 42s ease-in-out infinite; }

/* --- Cards stay opaque + readable; orbs only show in gaps --- */
.card,
.proj,
.proj-info,
.proj-mock,
.svc,
.svc-row,
.testi,
.tier,
.price-card,
.pricing-card,
.gallery-item,
.faq-item,
.step,
.guarantee,
.template-card,
.pkg-card,
.calc,
.calc-controls,
.calc-out,
.calc-result,
.quiz,
.quiz-card,
.blog-item,
.quote,
.stat,
.case-stat,
.case-section .case-stats > div,
.metric-card,
.feature-card,
.work-item {
  background: color-mix(in oklab,
    color-mix(in oklab, #163A2C calc(100% - var(--mix-pct)), #DCEFE2 var(--mix-pct))
    92%, transparent) !important;
  border: 1px solid color-mix(in oklab,
    rgba(63, 224, 160, 0.18) calc(100% - var(--mix-pct)),
    rgba(31, 171, 115, 0.25) var(--mix-pct)
  ) !important;
  border-radius: var(--radius-lg) !important;
}

/* Featured pricing card slightly more saturated */
.price-card.featured {
  background: color-mix(in oklab,
    color-mix(in oklab, #1B4A38 calc(100% - var(--mix-pct)), #C9E6D2 var(--mix-pct))
    94%, transparent) !important;
  border-radius: var(--radius-lg) !important;
}

/* Nav stays solid-ish but with light glass when scrolled */
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Footer solid */
footer.footer,
.footer {
  background: var(--bg-elev) !important;
  border-top: 1px solid var(--border);
}

/* Sections transparent so orbs show in negative space */
section,
.section,
main {
  background: transparent !important;
}

body {
  background: transparent !important;
}

/* ============== THEME SLIDER (inline in nav) ============== */
.theme-slider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: color-mix(in oklab, var(--bg-elev) 75%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-2);
}
.theme-slider .ts-icon {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.theme-slider .ts-icon svg { width: 14px; height: 14px; }
.theme-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 18px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.theme-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #08120D 0%, #16302A 50%, #B5D9C3 80%, #ECF2E8 100%);
  border: 1px solid var(--border-strong);
}
.theme-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #08120D 0%, #16302A 50%, #B5D9C3 80%, #ECF2E8 100%);
  border: 1px solid var(--border-strong);
}
.theme-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  margin-top: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 80%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 8px var(--accent-glow);
  border: 1.5px solid var(--bg-elev);
  cursor: grab;
}
.theme-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--accent) 80%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 8px var(--accent-glow);
  border: 1.5px solid var(--bg-elev);
  cursor: grab;
}
@media (max-width: 720px) {
  .theme-slider { display: none; }
}

/* Existing per-page hero glow / orb decoration — disable so global orbs lead */
.hero-glow { opacity: 0.3; }
.hero-orb { display: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none !important; transition: none !important; }
}