/* ==========================================================================
   glass.css — the liquid-glass surfaces
   --------------------------------------------------------------------------
   .chrome  grey glass of the top bar, rail, tab bar and toasts (white text)
   .panel   the big frosted sheet the pages sit on (desktop)
   .card    a pane inside it; on phones every card frosts on its own
   .fx      light that follows the cursor / finger + a brighter rim
   .tilt    leans towards the pointer (angles set by js/glass.js)

   Why the blur sits on ::before for .chrome and .panel: a backdrop-filter
   on the element itself would trap position:fixed children and stop nested
   glass from blurring what is behind it.
   ========================================================================== */

[data-ink='dark'] {
  --spot: rgb(255 255 255 / 0.45);
  --rim: rgb(255 255 255 / 0.95);
  --sheen: rgb(255 255 255 / 0.2);
}
[data-ink='light'] {
  --spot: rgb(255 255 255 / 0.13);
  --rim: rgb(255 255 255 / 0.6);
  --sheen: rgb(255 255 255 / 0.07);
}

/* --------------------------------------------------------------- chrome -- */
.chrome {
  position: relative;
  isolation: isolate;
  color: var(--chrome-ink);
}
.chrome::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / 0.4);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.1), transparent 60%), var(--chrome);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 1.875rem 3.75rem -2.125rem rgb(20 14 8 / 0.6);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  pointer-events: none;
  animation: glassIn 0.9s var(--ease) var(--in, 0s) backwards;
}

/* ---------------------------------------------------------------- panel -- */
.panel {
  position: relative;
  isolation: isolate;
}
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--edge);
  background: linear-gradient(160deg, var(--sheen), transparent 35%), var(--panel);
  box-shadow: 0 2.5rem 5rem -2.5rem rgb(20 14 8 / 0.5);
  backdrop-filter: blur(44px) saturate(1.5);
  -webkit-backdrop-filter: blur(44px) saturate(1.5);
  pointer-events: none;
  animation: glassIn 1s var(--ease) 0.1s backwards;
}

/* The glass fades itself in (blur included). Containers only ever move —
   animating their opacity would make the glass inside show unblurred. */
@keyframes glassIn {
  from {
    opacity: 0;
  }
}

/* ----------------------------------------------------------------- card -- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1.375rem;
  background: linear-gradient(155deg, var(--sheen), transparent 42%), var(--glass);
  border: 1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    var(--shadow-card);
  color: var(--ink);
  min-width: 0;
}

/* inner surfaces — stats, params, list rows */
.tile {
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r-md);
}

/* --------------------------------------------------- light that follows -- */
.fx::after,
.card.fx::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
/* soft spotlight. No mix-blend-mode here on purpose: a blended child makes
   Chrome render its glass parent on a separate surface and the frost is lost. */
.fx::after {
  background: radial-gradient(23.75rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--spot) 60%, transparent), transparent 62%);
}
.chrome.fx::after {
  background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.16), transparent 60%);
}
/* brighter rim right where the pointer is */
.card.fx::before {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(13.75rem circle at var(--mx, 50%) var(--my, 0%), var(--rim), transparent 70%);
  -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 exclude,
    linear-gradient(#000 0 0);
}
.fx.lit::after,
.card.fx.lit::before {
  opacity: 1;
}
[data-glow='off'] .fx::after,
[data-glow='off'] .card.fx::before {
  display: none;
}

/* ----------------------------------------------------------------- tilt -- */
.tilt {
  transform: perspective(68.75rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.4s var(--ease);
  will-change: transform;
}
.tilt.lit {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 1.625rem 3.125rem -1.875rem rgb(20 14 8 / 0.55);
}
[data-tilt='off'] .tilt {
  transform: none;
}