/* The Liquid Glass material.

   This is the ONLY stylesheet allowed to use backdrop-filter, which keeps the
   Apple rule mechanical rather than aspirational: glass belongs to the
   navigation and control layer, content stays matte.

   The optical model, in the order the layers are painted:

     1. the backdrop, blurred and saturated by the element itself;
     2. a rim ring that blurs the backdrop far LESS than the centre and lifts
        its brightness - the edge of a real lens resolves what its body melts;
     3. a thin translucent fill carrying the rose-lilac tint;
     4. inner contour: a bright hairline on the lit edge, a dark one opposite;
     5. an inner shade along the bottom, so the body reads as having thickness;
     6. a specular streak plus the colour the surroundings throw back;
     7. pointer illumination;
     8. a contact shadow and one wide, tinted ambient shadow.

   Nothing here is a border plus a drop shadow: that combination is exactly
   what makes web glass read as a white card. */

.glass {
  --fill: var(--glass-fill);
  --blur: var(--glass-blur);
  --rim: 6px;
  --rim-blur: 1px;
  position: relative;
  isolation: isolate;
  background-image: var(--a11y-fill, var(--fill));
  backdrop-filter: blur(var(--a11y-blur, var(--blur))) saturate(var(--glass-saturate))
    brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--a11y-blur, var(--blur))) saturate(var(--glass-saturate))
    brightness(var(--glass-brightness));
  border: 0;
  box-shadow:
    /* lit edge */
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 1px 0 0.5px rgba(255, 255, 255, 0.5),
    /* full hairline, weak enough not to read as a border */
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    /* shadowed edge opposite the light */
    inset 0 -1px 0.5px rgba(116, 74, 106, 0.22),
    inset -1px 0 0.5px rgba(116, 74, 106, 0.1),
    /* body thickness */
    inset 0 -18px 26px -22px rgba(96, 58, 86, 0.38),
    inset 0 14px 22px -22px rgba(255, 255, 255, 0.55),
    var(--shadow-island);
}

/* Edge refraction. The ring is nearly clear while the body is heavily blurred,
   so whatever passes behind the object visibly sharpens and brightens at the
   rim - the single cue that separates a lens from a frosted panel. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--rim);
  backdrop-filter: blur(var(--a11y-blur, var(--rim-blur))) saturate(138%) contrast(1.05);
  -webkit-backdrop-filter: blur(var(--a11y-blur, var(--rim-blur))) saturate(138%) contrast(1.05);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  z-index: -1;
}

/* Specular highlight plus the colour the surroundings throw back into the
   surface. Geometry is inherited, so it always matches the object's shape. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.14) 6%,
      rgba(255, 255, 255, 0.03) 18%,
      rgba(255, 255, 255, 0) 40%
    ),
    linear-gradient(
      328deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.04) 9%,
      rgba(255, 255, 255, 0) 26%
    ),
    radial-gradient(125% 82% at 4% -12%, rgba(255, 228, 243, 0.36) 0%, rgba(255, 228, 243, 0) 56%),
    radial-gradient(105% 74% at 104% 110%, rgba(203, 192, 232, 0.42) 0%, rgba(203, 192, 232, 0) 60%);
  pointer-events: none;
  z-index: -1;
}

/* Two densities, the way Apple splits regular and clear.
   `regular` goes over busy content and keeps labels legible;
   `clear` goes over a calm backdrop and lets far more of it through. */
.glass--regular {
  --fill: var(--glass-fill-regular);
  --blur: 30px;
  --rim-blur: 2px;
}

.glass--clear {
  --fill: var(--glass-fill-clear);
  --blur: 16px;
  --rim-blur: 0px;
}

/* A thicker object refracts more: wider rim, deeper shadow. */
.glass--thick {
  --rim: 13px;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 1px 0 0.5px rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    inset 0 -1px 0.5px rgba(116, 74, 106, 0.24),
    inset 0 -24px 34px -26px rgba(96, 58, 86, 0.42),
    inset 0 18px 28px -26px rgba(255, 255, 255, 0.6),
    var(--shadow-float);
}

.glass--thin {
  --rim: 6px;
  box-shadow:
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -1px 0.5px rgba(116, 74, 106, 0.2),
    inset 0 -12px 18px -16px rgba(96, 58, 86, 0.32),
    var(--shadow-card);
}

/* Pointer light. Follows the cursor across the surface and brightens on press,
   the way a real lens catches a moving light source. */
.glass-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--glow, 0);
  background: radial-gradient(
    180px 180px at var(--gx, 50%) var(--gy, 50%),
    var(--glass-glow) 0%,
    rgba(255, 244, 250, 0) 66%
  );
  transition: opacity var(--dur) var(--ease-out);
  z-index: -1;
}

/* The selection lens.

   It lives inside the glass container and therefore carries no backdrop-filter
   of its own - that would be glass on glass. It is a tinted, translucent plate:
   the container's material stays readable through it, and its own rim and
   specular streak give it optical depth. */
.lens {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: var(--r-control);
  background:
    linear-gradient(
      164deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(255, 255, 255, 0.16) 42%,
      rgba(255, 255, 255, 0.03) 100%
    ),
    linear-gradient(
      180deg,
      rgba(176, 116, 160, 0.26) 0%,
      rgba(151, 96, 139, 0.15) 55%,
      rgba(151, 96, 139, 0.2) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(116, 74, 106, 0.2),
    inset 0 -12px 18px -14px rgba(96, 58, 86, 0.24),
    0 1px 2px rgba(72, 42, 64, 0.1),
    0 10px 22px -14px rgba(90, 52, 80, 0.5);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  transition:
    transform var(--dur-lens) var(--ease-lens),
    opacity var(--dur-fast) linear;
  pointer-events: none;
  z-index: -1;
}

/* The lens gets its own specular streak, so it never flattens into a chip. */
.lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      152deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.1) 14%,
      rgba(255, 255, 255, 0) 40%
    ),
    radial-gradient(80% 120% at 100% 100%, rgba(190, 150, 190, 0.3) 0%, rgba(190, 150, 190, 0) 70%);
  pointer-events: none;
}

.lens[data-ready="true"] {
  opacity: 1;
}

/* Press squashes the plate slightly rather than just shrinking it. */
.lens[data-pressed="true"] {
  transform: translate3d(var(--lx, 0), var(--ly, 0), 0) scale(0.965, 0.9);
  transition-duration: var(--dur-press), var(--dur-fast);
}

/* Neighbours give way a little while the lens travels past them. They move on
   transform only and settle back, so nothing in the island jumps. */
.dock .nav-item,
[data-lens-host] .seg {
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-lens) var(--ease-lens);
}

[data-near="1"] {
  transform: scale(0.965);
}

[data-near="2"] {
  transform: scale(0.985);
}

/* Scroll edge effect: the strip of material that keeps text legible as it
   passes under a floating island. */
.edge {
  position: fixed;
  left: 0;
  right: 0;
  height: 88px;
  pointer-events: none;
  z-index: var(--z-edge);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.edge[data-on="true"] {
  opacity: 1;
}

.edge-top {
  top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask: linear-gradient(#000 0%, #000 34%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0%, #000 34%, transparent 100%);
  background: linear-gradient(rgba(247, 243, 240, 0.62), rgba(247, 243, 240, 0));
}

.edge-bottom {
  bottom: 0;
  height: 116px;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  mask: linear-gradient(transparent 0%, #000 74%, #000 100%);
  -webkit-mask: linear-gradient(transparent 0%, #000 74%, #000 100%);
  background: linear-gradient(rgba(247, 243, 240, 0), rgba(247, 243, 240, 0.42));
}

@media (min-width: 768px) {
  .edge-bottom {
    display: none;
  }
}

/* Scrim behind a sheet or popover. Dim, not blurred: the sheet itself is the
   thing that should read as glass. */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(60, 36, 54, 0.24);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  z-index: var(--z-sheet);
}

.scrim[data-on="true"] {
  opacity: 1;
}

/* No backdrop-filter support, or a GPU that cannot afford it: fall back to a
   dense tinted surface that keeps every contrast ratio intact. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass {
    background-image: linear-gradient(152deg, #fffbfd 0%, #f8eef5 100%);
    background-color: #fdf8fb;
    box-shadow:
      inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
      inset 0 0 0 1px rgba(116, 74, 106, 0.16),
      inset 0 -1px 0.5px rgba(116, 74, 106, 0.22),
      var(--shadow-island);
  }

  .glass::before {
    display: none;
  }

  .lens {
    background: linear-gradient(180deg, rgba(151, 96, 139, 0.2), rgba(151, 96, 139, 0.12));
  }

  .edge-top,
  .edge-bottom {
    background: linear-gradient(rgba(247, 243, 240, 0.96), rgba(247, 243, 240, 0));
  }

  .edge-bottom {
    background: linear-gradient(rgba(247, 243, 240, 0), rgba(247, 243, 240, 0.96));
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass::before {
    display: none;
  }

  .glass::after {
    opacity: 0.5;
  }

  .lens {
    background: linear-gradient(180deg, rgba(151, 96, 139, 0.22), rgba(151, 96, 139, 0.14));
  }
}

:root[data-transparency="reduced"] .glass::before {
  display: none;
}

:root[data-transparency="reduced"] .lens {
  background: linear-gradient(180deg, rgba(151, 96, 139, 0.22), rgba(151, 96, 139, 0.14));
}

@media (prefers-reduced-motion: reduce) {
  .lens,
  .glass-light,
  .edge,
  .scrim,
  .dock .nav-item,
  [data-lens-host] .seg {
    transition-duration: 1ms;
  }

  [data-near="1"],
  [data-near="2"] {
    transform: none;
  }
}