/* ─────────────────────────────────────────────────────────────────────────────
   Liquid Glass.

   Apple's rule, repeated in every WWDC25 session on the material: glass belongs to
   the floating navigation and control layer, never to the content layer, and never
   stacked on itself. Putting glass on product cards is the fastest way to look like
   generic glassmorphism, so this file only ever dresses chrome: the dock, the cart
   bar, the ETA pill, the search field, sheet headers, toasts and floating chips.

   Three tiers, in order of preference:
     1. blur + saturate + SVG refraction   (Chromium)
     2. blur + saturate                    (Safari, Firefox)
     3. an opaque surface                  (Reduce Transparency, or no backdrop-filter)
   ───────────────────────────────────────────────────────────────────────────── */

.glass {
  position: relative;
  border-radius: var(--radius-3xl);
  background: var(--glass-regular-tint);
  backdrop-filter: blur(var(--glass-regular-blur)) saturate(var(--glass-regular-saturate));
  -webkit-backdrop-filter: blur(var(--glass-regular-blur)) saturate(var(--glass-regular-saturate));
  /* Inner highlights suggest a thick, physical edge rather than a flat translucent panel. */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    inset -1px -1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(18, 17, 16, 0.06),
    0 12px 32px -8px rgba(18, 17, 16, 0.16);
  /* Keeps compositing local so a blur does not repaint the page on every scroll frame. */
  contain: paint;
  isolation: isolate;
}

[data-theme='dark'] .glass {
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.1),
    inset -1px -1px 0 rgba(0, 0, 0, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 16px 40px -8px rgba(0, 0, 0, 0.55);
}

/*
 * Refraction. feTurbulence builds a noise field and feDisplacementMap uses its red and green
 * channels to push the backdrop's pixels sideways — that sideways push is what reads as light
 * bending through a thick edge, rather than the flat wash a plain blur gives you.
 * Only Chromium runs an SVG filter inside backdrop-filter, so it lives in its own rule that can
 * fail without taking the blur with it.
 */
html[data-refract='yes'] .glass {
  backdrop-filter: blur(var(--glass-regular-blur)) saturate(var(--glass-regular-saturate))
    url('#nk-refract');
}

/* The rim: a gradient painted then masked down to the 1px border box. */
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    var(--glass-regular-border-top) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    var(--glass-regular-border-bottom) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Specular sweep. It stops at 45%: a full-height sheen reads as a gradient, not as light. */
.glass::after {
  content: '';
  position: absolute;
  inset: 0 0 55% 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-specular) 0%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

/* Content must sit above the rim and the sheen. */
.glass > * {
  position: relative;
  z-index: 2;
}

/* ── Variants ─────────────────────────────────────────────────────────────── */

/* Clear: icon-only controls over photography or the map. Never body text. */
.glass--clear {
  background: var(--glass-clear-tint);
  backdrop-filter: blur(var(--glass-clear-blur)) saturate(var(--glass-clear-saturate));
  -webkit-backdrop-filter: blur(var(--glass-clear-blur)) saturate(var(--glass-clear-saturate));
}

/* Exactly one tinted glass element per screen: the cart / pay capsule. */
.glass--brand {
  background:
    linear-gradient(var(--glass-brand-tint), var(--glass-brand-tint)), var(--glass-regular-tint);
}

.glass--pill {
  border-radius: var(--radius-pill);
}
.glass--flush {
  box-shadow: inset 0 -1px 0 var(--glass-regular-border-bottom);
  border-radius: 0;
}

.glass--interactive {
  transition:
    filter var(--duration-micro) var(--ease-liquid),
    transform var(--duration-micro) var(--ease-liquid);
}
.glass--interactive:active {
  filter: brightness(1.04);
  transform: scale(0.985);
}

/* ── Fallbacks ────────────────────────────────────────────────────────────── */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-regular-solid);
    box-shadow: 0 8px 24px -8px rgba(18, 17, 16, 0.18);
  }
  .glass::after {
    display: none;
  }
}

/*
 * The accessibility cascade. prefers-reduced-transparency is not supported everywhere, so the
 * app also carries its own "Reduce glass" switch — that is what [data-glass='off'] is for.
 */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-regular-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .glass::after {
    display: none;
  }
}

html[data-glass='off'] .glass,
html[data-glass='off'] .glass--clear,
html[data-glass='off'] .glass--brand {
  /* Flat colour, not a layered one: the brand tint would otherwise still let content through. */
  background: var(--glass-regular-solid) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 8px 24px -8px rgba(18, 17, 16, 0.18);
}
html[data-glass='off'] .glass--brand {
  background: var(--brand-tint) !important;
}
html[data-glass='off'] .glass::after {
  display: none;
}
html[data-glass='off'] .glass::before {
  background: var(--border-strong);
}

@media (prefers-contrast: more) {
  .glass::before {
    background: var(--border-strong);
  }
}