/*
 * Glass layer for the marketing site.
 *
 * The pages are plain Tailwind-CDN HTML, so rather than re-tagging every section this
 * sheet re-skins the surfaces they already use: `bg-white` and `bg-gray-50` panels become
 * frosted glass over a soft brand backdrop painted on the body. Solid dark sections
 * (bg-brand-600/900, the footer) are left alone on purpose: they anchor the page and give
 * the translucent surfaces something to read against.
 *
 * Every rule is scoped to `body.glass`, which also wins over Tailwind's own `bg-white`
 * utility on the body element (class + element beats a bare class).
 */

:root {
  --glass-surface: rgba(255, 255, 255, 0.55);
  --glass-surface-strong: rgba(255, 255, 255, 0.86);
  --glass-hairline: rgba(255, 255, 255, 0.8);
  --glass-edge: rgba(6, 78, 46, 0.08);
  --glass-shadow: 0 20px 45px -28px rgba(6, 60, 34, 0.35);
}

body.glass {
  background-color: #eef7f1;
  background-image:
    radial-gradient(ellipse 60% 45% at 6% -6%, #b9ecd0 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 98% 4%, #c9f2da 0%, transparent 58%),
    radial-gradient(ellipse 70% 40% at 78% 48%, #dff6e9 0%, transparent 62%),
    radial-gradient(ellipse 85% 50% at 20% 100%, #cfeedd 0%, transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Frosted panels. `supports` keeps the fallback opaque enough to read on browsers
   without backdrop-filter (older Firefox, some in-app webviews). */
body.glass .bg-white,
body.glass .bg-gray-50 {
  background-color: var(--glass-surface-strong);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.glass .bg-white {
    background-color: var(--glass-surface);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }

  /* Section bands: lighter, so the backdrop reads through between cards. */
  body.glass .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  body.glass nav {
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
  }
}

/* Brand-tinted panels keep their hue but let light through. */
body.glass .bg-brand-50 {
  background-color: rgba(220, 252, 231, 0.62);
}

/* Hairline edges instead of grey rules: the light border is what reads as glass. */
body.glass .border-gray-100 {
  border-color: var(--glass-hairline);
}

body.glass .border-gray-200 {
  border-color: var(--glass-edge);
}

/* Lift the card-shaped surfaces off the backdrop. */
body.glass .rounded-2xl.bg-white,
body.glass .rounded-3xl.bg-white,
body.glass .rounded-xl.bg-white {
  box-shadow: var(--glass-shadow);
}

/* The hero sits directly on the backdrop; its own white background would cover it. */
body.glass section.relative.bg-white {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Dark sections stay solid: contrast anchors, and white text needs them opaque. */
body.glass .bg-brand-600,
body.glass .bg-brand-700,
body.glass .bg-brand-800,
body.glass .bg-brand-900,
body.glass .bg-gray-900,
body.glass .bg-gray-950 {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sticky headers and fixed bars on phones: respect the notch, and never let a
   translucent surface stack into an unreadable smear. */
@media (max-width: 767px) {
  body.glass nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.glass .bg-white,
  body.glass .bg-gray-50 {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

/* A light top edge is what sells the material: it reads as a pane catching light. */
body.glass .rounded-2xl.bg-white,
body.glass .rounded-3xl.bg-white,
body.glass .rounded-xl.bg-white {
  border: 1px solid rgba(255, 255, 255, 0.7);
}