/* ============================================================
   Apollo — 50 liquid glass (deliberate: hero device, modals, buttons, nav)
   Glass is a signature treatment, not a default. Editorial sections stay solid.
   ============================================================ */

/* ---------- Liquid blobs (fluid cobalt color behind the glass hero device) ---------- */
.liquid-bg { position: absolute; inset: -12% -6%; z-index: -2; overflow: hidden; pointer-events: none; filter: blur(46px) saturate(1.2); }
.liquid-blob { position: absolute; width: 40vmax; height: 40vmax; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; opacity: 0.55; will-change: transform, border-radius; }
.liquid-blob.b1 { top: -14%; left: 52%; background: radial-gradient(circle at 32% 30%, rgba(27, 77, 255, 0.55), transparent 68%); }
.liquid-blob.b2 { top: 26%; left: -14%; background: radial-gradient(circle at 60% 40%, rgba(91, 124, 255, 0.5), transparent 68%); }
.liquid-blob.b3 { top: 46%; left: 56%; background: radial-gradient(circle at 50% 55%, rgba(123, 152, 255, 0.42), transparent 68%); }
@media (prefers-color-scheme: dark) { .liquid-bg { filter: blur(52px) saturate(1.3); } .liquid-blob { opacity: 0.5; } }

@keyframes blobMorph {
  0%,   100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg) scale(1); }
  33%        { border-radius: 58% 42% 37% 63% / 44% 41% 59% 56%; transform: translate(4%, -3%) rotate(12deg) scale(1.06); }
  66%        { border-radius: 38% 62% 56% 44% / 62% 38% 62% 38%; transform: translate(-3%, 4%) rotate(-10deg) scale(0.96); }
}
.liquid-blob { animation: blobMorph 20s ease-in-out infinite; }
.liquid-blob.b2 { animation-duration: 26s; animation-delay: -7s; }
.liquid-blob.b3 { animation-duration: 32s; animation-delay: -14s; }
@media (prefers-reduced-motion: reduce) { .liquid-blob { animation: none; } }

/* ---------- Modals → frosted glass ---------- */
.modal__box {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), var(--shadow-lg);
}
@media (prefers-color-scheme: dark) { .modal__box { background: color-mix(in srgb, var(--surface) 72%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), var(--shadow-lg); } }

/* ---------- Primary buttons → glossy glare sweep on hover ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease-out);
}
.btn--primary:hover::after { left: 150%; }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } }

/* ---------- Nav scrolled → stronger glass with a hairline gloss ---------- */
#nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: dark) { #nav.is-scrolled { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } }

/* ---------- Floating CTA pill / mobile bar → glass ---------- */
.mobile-cta { background: color-mix(in srgb, var(--bg) 70%, transparent) !important; backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); }

/* ---------- Mobile perf: freeze the animated hero blur (cheap GPU on phones) ----------
   A 46-52px blur over morphing blobs is one of the most expensive things to repaint
   every frame. On phones, hold it static and shrink the radius. Desktop keeps the full
   signature. Placed after the dark-mode blur(52px) rule so it wins by source order. */
@media (max-width: 860px) {
  .liquid-blob { animation: none; will-change: auto; }
  .liquid-bg { filter: blur(32px) saturate(1.15); }
  /* The persistent mobile bar is the one always-on blur during scroll — make it lighter. */
  .mobile-cta { backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
}