/* ==========================================================================
   BORA — "Light Table": the shared glass material for v3 and v8.
   Loaded after v3.css / v8.css, so it owns the material, never the layout.
   The page is a lit table: soft brand light + film grain behind every surface,
   and the panes are frosted plates with a lit top edge, a brand-gradient rim
   and a wide, tinted shadow. Text never sits on clear glass.
   Chromium gets an optional edge refraction on [.glass--lens] (glass-lens.js);
   every other engine keeps the frosted plate, which is a complete fallback.
   ========================================================================== */

/* ---------- the light-table tokens ---------- */
.v3,
.v8 {
  --g-ground: #faf7fe;
  --g-thin-a: rgba(255, 255, 255, 0.6);
  --g-thin-b: rgba(255, 255, 255, 0.36);
  --g-std-a: rgba(255, 255, 255, 0.81);
  --g-std-b: rgba(255, 255, 255, 0.63);
  --g-strong-a: rgba(255, 255, 255, 0.91);
  --g-strong-b: rgba(255, 255, 255, 0.79);
  --g-sheen: rgba(255, 255, 255, 0.32);
  --g-tint: rgba(186, 149, 200, 0.14);
  --g-rim-1: rgba(255, 255, 255, 0.96);
  --g-rim-2: rgba(186, 149, 200, 0.58);
  --g-rim-3: rgba(114, 62, 160, 0.3);
  --g-inner-top: rgba(255, 255, 255, 0.94);
  --g-inner-line: rgba(255, 255, 255, 0.22);
  --g-inner-bottom: rgba(36, 20, 93, 0.22);
  --g-shadow: 0 30px 64px -34px rgba(36, 20, 93, 0.46);
  --g-blur: 20px;
  --g-sat: 170%;
  --g-fill-top: var(--g-std-a);
  --g-fill-bottom: var(--g-std-b);
  /* the loader's ground matches the tinted page, so the reveal has no white flash */
  --loader-rgb: 250 247 254;
}

[data-theme="dark"] .v3,
[data-theme="dark"] .v8 {
  --g-ground: #06062e;
  --g-thin-a: rgba(39, 24, 92, 0.7);
  --g-thin-b: rgba(7, 7, 59, 0.48);
  --g-std-a: rgba(34, 21, 84, 0.82);
  --g-std-b: rgba(7, 7, 59, 0.66);
  --g-strong-a: rgba(29, 18, 76, 0.93);
  --g-strong-b: rgba(7, 7, 59, 0.84);
  --g-sheen: rgba(255, 255, 255, 0.09);
  --g-tint: rgba(154, 93, 233, 0.15);
  --g-rim-1: rgba(255, 255, 255, 0.36);
  --g-rim-2: rgba(186, 149, 200, 0.36);
  --g-rim-3: rgba(154, 93, 233, 0.36);
  --g-inner-top: rgba(255, 255, 255, 0.22);
  --g-inner-line: rgba(255, 255, 255, 0.06);
  --g-inner-bottom: rgba(0, 0, 0, 0.44);
  --g-shadow: 0 32px 72px -30px rgba(0, 0, 0, 0.72);
  --g-blur: 22px;
  --g-sat: 160%;
  --loader-rgb: 6 6 46;
}

/* ---------- the lit ground ---------- */
/* the lit ground: each page gets its bright side behind the hero object,
   and its coloured side behind the glass plate (the two layouts mirror). */
body.v8 {
  background:
    radial-gradient(64% 46% at 76% -4%, #ffffff 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(54% 54% at 0% 26%, color-mix(in srgb, var(--bora-lavender) 18%, transparent) 0%, transparent 66%),
    radial-gradient(108% 84% at 86% 110%, color-mix(in srgb, var(--bora-soft-violet) 9%, transparent) 0%, transparent 64%),
    var(--g-ground);
}
body.v3 {
  background:
    radial-gradient(64% 46% at 22% -4%, #ffffff 0%, rgba(255, 255, 255, 0) 64%),
    radial-gradient(54% 54% at 100% 26%, color-mix(in srgb, var(--bora-lavender) 18%, transparent) 0%, transparent 66%),
    radial-gradient(108% 84% at 18% 110%, color-mix(in srgb, var(--bora-soft-violet) 9%, transparent) 0%, transparent 64%),
    var(--g-ground);
}

[data-theme="dark"] body.v3,
[data-theme="dark"] body.v8 {
  background:
    radial-gradient(100% 72% at 100% 0%, color-mix(in srgb, var(--bora-core-purple) 32%, transparent) 0%, transparent 58%),
    radial-gradient(94% 74% at -4% 38%, color-mix(in srgb, var(--bora-deep-indigo) 62%, transparent) 0%, transparent 66%),
    radial-gradient(80% 60% at 70% 106%, color-mix(in srgb, var(--bora-soft-violet) 22%, transparent) 0%, transparent 64%),
    var(--g-ground);
}

/* ---------- the sky: five fixed brand lights, a sheen and the grain ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.sky span {
  position: absolute;
  border-radius: 50%;
  filter: blur(92px);
}
.sky span:nth-child(1) {
  inset-block-start: -26vh;
  inset-inline-end: -15vw;
  inline-size: 62vw;
  block-size: 62vw;
  opacity: 0.32;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-lavender) 52%, transparent), transparent);
}
.sky span:nth-child(2) {
  inset-block-start: 26vh;
  inset-inline-start: 2vw;
  inline-size: 48vw;
  block-size: 48vw;
  opacity: 0.4;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-core-purple) 26%, transparent), transparent);
}
.sky span:nth-child(3) {
  inset-block-start: 34vh;
  inset-inline-start: 32vw;
  inline-size: 42vw;
  block-size: 42vw;
  opacity: 0.24;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-soft-violet) 18%, transparent), transparent);
}
.sky span:nth-child(4) {
  inset-block-end: -30vh;
  inset-inline-start: -18vw;
  inline-size: 54vw;
  block-size: 54vw;
  opacity: 0.32;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-lavender) 38%, transparent), transparent);
}
.sky span:nth-child(5) {
  inset-block-end: -26vh;
  inset-inline-end: -18vw;
  inline-size: 60vw;
  block-size: 60vw;
  opacity: 0.28;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-digital-indigo) 20%, transparent), transparent);
}
.sky span:nth-child(6) {
  inset-block-start: 40vh;
  inset-inline-end: 2vw;
  inline-size: 38vw;
  block-size: 38vw;
  opacity: 0.3;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-lavender) 36%, transparent), transparent);
}
/* the fixed specular sweep: a single sheet of glass over the whole page */
.sky::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background: linear-gradient(107deg, transparent 33%, rgba(255, 255, 255, 0.52) 44%, rgba(255, 255, 255, 0.1) 51%, transparent 64%);
  opacity: 0.42;
  mix-blend-mode: soft-light;
}
/* film grain: the last 3% that makes glass feel like a material, not a gradient */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: soft-light;
}
[data-theme="dark"] .sky span:nth-child(1) {
  opacity: 0.7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-core-purple) 66%, transparent), transparent);
}
[data-theme="dark"] .sky span:nth-child(2) {
  opacity: 0.8;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-digital-indigo) 78%, transparent), transparent);
}
[data-theme="dark"] .sky span:nth-child(3) {
  opacity: 0.42;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-soft-violet) 52%, transparent), transparent);
}
[data-theme="dark"] .sky span:nth-child(4) {
  opacity: 0.52;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-deep-indigo) 74%, transparent), transparent);
}
[data-theme="dark"] .sky span:nth-child(5) {
  opacity: 0.5;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-core-purple) 42%, transparent), transparent);
}
[data-theme="dark"] .sky span:nth-child(6) {
  opacity: 0.38;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bora-lavender) 30%, transparent), transparent);
}
[data-theme="dark"] .sky::before {
  background: linear-gradient(107deg, transparent 33%, rgba(186, 149, 200, 0.22) 44%, rgba(255, 255, 255, 0.04) 51%, transparent 64%);
  opacity: 0.6;
}
[data-theme="dark"] .sky::after {
  opacity: 0.065;
  mix-blend-mode: overlay;
}

/* ==========================================================================
   The material. Large sheets are thin, standard panes are frosted, small
   controls are thick and (via .glass--flat) skip the blur entirely.
   ========================================================================== */
.v3 .glass,
.v8 .glass {
  background:
    linear-gradient(118deg, var(--g-sheen) 0%, transparent 34%, transparent 72%, var(--g-tint) 100%) padding-box,
    linear-gradient(160deg, var(--g-fill-top), var(--g-fill-bottom)) padding-box,
    linear-gradient(180deg, var(--g-rim-1), var(--g-rim-2) 52%, var(--g-rim-3)) border-box;
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  border: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 var(--g-inner-top),
    inset 0 0 0 1px var(--g-inner-line),
    inset 0 -24px 36px -30px var(--g-inner-bottom),
    var(--g-shadow);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out);
}

/* a big, thin plate: the hero sheet, the CTA plaque, the value ledger */
.v3 .glass--sheet,
.v8 .glass--sheet {
  --g-fill-top: var(--g-thin-a);
  --g-fill-bottom: var(--g-thin-b);
  --g-blur: 26px;
}

/* a small control: keep the rim and the sheen, drop the backdrop pass */
.v3 .glass--flat,
.v8 .glass--flat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.v3 .glass--lift:hover,
.v8 .glass--lift:hover {
  border-color: color-mix(in srgb, var(--bora-lavender) 70%, transparent);
  box-shadow:
    inset 0 1px 0 var(--g-inner-top),
    inset 0 0 0 1px var(--g-inner-line),
    inset 0 -24px 36px -30px var(--g-inner-bottom),
    0 34px 70px -34px color-mix(in srgb, var(--bora-soft-violet) 54%, transparent);
}

/* the pointer's light: one specular highlight, not a second material */
.v3 [data-pointer-light],
.v8 [data-pointer-light] {
  position: relative;
  isolation: isolate;
}
.v3 [data-pointer-light]::after,
.v8 [data-pointer-light]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.55), transparent 62%),
    radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--bora-lavender) 30%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.v3 [data-pointer-light]:hover::after,
.v8 [data-pointer-light]:hover::after {
  opacity: 1;
}
[data-theme="dark"] .v3 [data-pointer-light]::after,
[data-theme="dark"] .v8 [data-pointer-light]::after {
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--bora-core-purple) 32%, transparent), transparent 70%);
}

/* ==========================================================================
   The refraction showpiece. glass-lens.js builds the map and adds .has-lens
   only where url() in backdrop-filter actually renders (Chromium today).
   The -webkit property above is always the frosted fallback.
   ========================================================================== */
@supports (backdrop-filter: url(#bora-lens)) {
  html.has-lens .v3 .glass--lens,
  html.has-lens .v8 .glass--lens {
    backdrop-filter: url(#bora-lens) blur(var(--g-blur)) saturate(var(--g-sat));
  }
}
.glass-lens-defs {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- during the loader: the page behind it needs no backdrop pass ---------- */
html.is-loading .v8 .site-header__bar.glass,
html.is-loading .v8 .chat.glass,
html.is-loading .v3 .site-header::before,
html.is-loading .v3 .c-chat.glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- no backdrop-filter: keep the plate, make it solid ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .v3,
  .v8 {
    --g-thin-a: var(--g-strong-a);
    --g-thin-b: var(--g-strong-b);
    --g-std-a: var(--g-strong-a);
    --g-std-b: var(--g-strong-b);
  }
}

/* ---------- phones: no per-pane blur except the bar and the chat ---------- */
@media (max-width: 767px) {
  .v3,
  .v8 {
    --g-thin-a: var(--g-strong-a);
    --g-thin-b: var(--g-strong-b);
    --g-std-a: var(--g-strong-a);
    --g-std-b: var(--g-strong-b);
  }
  .v3 .glass,
  .v8 .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .v8 .site-header__bar.glass,
  .v8 .chat.glass {
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
  }
  html.has-lens .v3 .glass--lens,
  html.has-lens .v8 .glass--lens {
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
    backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  }
}

/* ---------- forced colours: opaque plates, no glass ---------- */
@media (forced-colors: active) {
  .v3 .glass,
  .v8 .glass {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}