/* =========================================================
   SAENGÉ — Liquid Glass ("iOS crystal") material
   Web translation of the iOS 26 Liquid Glass language:
   translucency + blur/saturation + specular edge + inner sheen.
   Reserved for floating / interactive surfaces (not everything).
   ========================================================= */

:root {
  --glass-bg: oklch(99% 0.012 20 / 0.5);
  --glass-bg-strong: oklch(99% 0.014 20 / 0.66);
  --glass-tint: oklch(92% 0.05 12 / 0.18);
  --glass-blur: 20px;
  --glass-sheen: oklch(100% 0 0 / 0.7);
  --glass-edge-hi: oklch(100% 0 0 / 0.85);
  --glass-edge-lo: oklch(100% 0 0 / 0.15);
  --glass-shadow:
    0 10px 34px oklch(45% 0.09 16 / 0.16),
    0 2px 8px oklch(45% 0.07 16 / 0.1);
}

/* ---- Core material ---- */
.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(185%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(185%);
  border-radius: var(--radius-md);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-sheen),
    inset 0 -1px 1px oklch(80% 0.05 14 / 0.12);
  isolation: isolate;
}

/* crisp specular edge — a 1px gradient ring (the "crystal" tell) */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    140deg,
    var(--glass-edge-hi),
    transparent 38%,
    transparent 62%,
    var(--glass-edge-lo)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* top-left light bloom catching the surface */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    130% 90% at 12% -10%,
    oklch(100% 0 0 / 0.4),
    transparent 50%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.glass--strong {
  background: var(--glass-bg-strong);
}

.glass--tinted {
  background:
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--glass-bg);
}

@supports not (backdrop-filter: blur(1px)) {
  .glass,
  .glass--strong,
  .glass--tinted {
    background: var(--color-surface);
  }
}

/* =========================================================
   Apply to brand surfaces
   ========================================================= */

/* ---- Header → glass bar ---- */
.header {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(185%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(185%);
}

.header.is-scrolled {
  background: var(--glass-bg-strong);
  border-bottom-color: oklch(100% 0 0 / 0.4);
  box-shadow:
    0 8px 30px oklch(45% 0.08 16 / 0.12),
    inset 0 1px 0 var(--glass-sheen);
}

/* ---- Hero badges → signature crystal pills ---- */
.hero__badge {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(185%);
  -webkit-backdrop-filter: blur(16px) saturate(185%);
  border-radius: var(--radius-md);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-sheen);
}

.hero__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--glass-edge-hi), transparent 45%, var(--glass-edge-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Ghost button → glass button ---- */
.btn--ghost {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-color: oklch(100% 0 0 / 0.6);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-sm);
}

.btn--ghost:hover {
  background: var(--glass-bg-strong);
  border-color: oklch(100% 0 0 / 0.85);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-md);
}

/* ---- Bento chip → glass ---- */
.tile__chip {
  background: oklch(99% 0.012 20 / 0.55);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--shadow-xs);
}

/* ---- Review cards → glass over the bloom backdrop ---- */
.review {
  position: relative;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-sheen);
}

.review::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--glass-edge-hi), transparent 40%, var(--glass-edge-lo));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Gallery tag → glass ---- */
.gallery__tag {
  background: oklch(28% 0.035 25 / 0.6);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.25);
}

/* ---- Cart drawer → glass panel ---- */
.cart {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    -20px 0 60px oklch(40% 0.08 16 / 0.18),
    inset 1px 0 0 var(--glass-sheen);
}

/* ---- Newsletter input → frosted (dark context) ---- */
.newsletter__form input {
  background: oklch(100% 0 0 / 0.1);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18);
}

/* ---- Toast → glass chip ---- */
.toast {
  background: oklch(28% 0.035 25 / 0.78);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 oklch(100% 0 0 / 0.2);
}

@media (prefers-reduced-transparency: reduce) {
  .header,
  .header.is-scrolled,
  .hero__badge,
  .btn--ghost,
  .review,
  .cart {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-surface);
  }
}