/* ---------------------------------------------------------------
   Liquid glass layer
   Sits on top of components.css: same pink / plum palette, but every
   glass surface gets a saturated backdrop, a light-catching rim, inner
   caustic glow and a specular sheen that follows the pointer
   (--mx / --my, set by js/liquid-glass.js). On Chromium the backdrop is
   also refracted through the SVG filter #lg-refract in index.html.
   --------------------------------------------------------------- */

:root {
  --lg-saturate: saturate(185%) brightness(1.08);

  /* neutral glass */
  --lg-tint: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(249, 168, 212, 0.08) 100%
  );
  --lg-tint-hover: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.19) 0%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(249, 168, 212, 0.12) 100%
  );
  --lg-border: rgba(255, 255, 255, 0.16);

  /* pink glass — same pink-500 → rose-500 as before */
  --lg-pink: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.78),
    rgba(244, 63, 94, 0.78)
  );

  /* rim + caustics, drawn with inset shadows so it works on any element */
  --lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 12px 22px -16px rgba(255, 255, 255, 0.45),
    inset 0 -14px 24px -18px rgba(249, 168, 212, 0.45);
  --lg-edge-pink: inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    inset 0 10px 16px -10px rgba(255, 255, 255, 0.45),
    inset 0 -10px 18px -10px rgba(131, 24, 67, 0.45);

  --lg-drop: 0 10px 30px rgba(18, 3, 22, 0.45);
}

/* Moving specular highlight — sits under the tint. */
.chip,
.btn--ghost,
.btn--no,
.yes__badge,
.counter__unit,
.timeline__entry,
.timeline__node,
.notebook,
.lock__book,
.lock__clasp,
.key,
.music__fab,
.music__mini,
.music__panel,
.btn--primary,
.btn--yes,
.letter__tag,
.music__play,
.music__mini-toggle {
  --lg-sheen: radial-gradient(
    140% 90% at var(--mx, 25%) var(--my, 0%),
    rgba(255, 255, 255, var(--lg-sheen-a, 0.16)),
    transparent 55%
  );
}

/* === Neutral glass ===================================================== */

.chip,
.btn--ghost,
.btn--no,
.yes__badge,
.counter__unit,
.timeline__entry,
.timeline__node,
.notebook,
.lock__book,
.lock__clasp,
.key,
.music__fab,
.music__mini,
.music__panel {
  background: var(--lg-sheen), var(--lg-tint);
  border-color: var(--lg-border);
  backdrop-filter: blur(var(--lg-blur, 18px)) var(--lg-saturate);
  -webkit-backdrop-filter: blur(var(--lg-blur, 18px)) var(--lg-saturate);
  box-shadow: var(--lg-edge), var(--lg-drop);
}

.chip:hover,
.btn--ghost:hover,
.btn--no:hover,
.key:hover,
.music__fab:hover,
.timeline__entry:hover {
  --lg-sheen-a: 0.26;
  background: var(--lg-sheen), var(--lg-tint-hover);
}

/* Big panels: thicker glass, deeper shadow */
.notebook,
.lock__book,
.music__panel {
  --lg-blur: 20px;
  --lg-sheen-a: 0.1;
}

/* Glass inside the notebook already sits on blurred glass, so a second
   backdrop pass adds almost nothing visible but costs a full extra render of
   everything behind it, every frame. Tint only. */
.notebook * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.notebook {
  box-shadow: var(--lg-edge), 0 30px 80px rgba(18, 3, 22, 0.55);
}

.lock__book {
  box-shadow: var(--lg-edge), 0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 70px rgba(236, 72, 153, 0.28);
}

.music__panel {
  box-shadow: var(--lg-edge), 0 24px 64px rgba(0, 0, 0, 0.5);
}

/* Small controls: thinner glass so the refraction stays visible */
.chip,
.key,
.btn--no,
.yes__badge,
.music__fab,
.timeline__node {
  --lg-blur: 10px;
}

.key--util {
  --lg-sheen-a: 0.08;
  background: var(--lg-sheen),
    linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 255, 255, 0.12);
}

.timeline__entry--dream {
  border-color: rgba(249, 168, 212, 0.45);
}

/* Full gradient rim (light catches top-left, a pink glint bottom-right) —
   replaces the old flat top-edge line. */
.notebook::before,
.lock__rim,
.music__specular {
  inset: 0;
  height: auto;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(249, 168, 212, 0.4) 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 exclude,
    linear-gradient(#000 0 0);
}

.music__panel .music__specular {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.02) 55%,
    rgba(249, 168, 212, 0.45) 100%
  );
}

/* === Pink glass ======================================================== */

.btn--primary,
.btn--yes,
.letter__tag,
.music__play,
.music__mini-toggle,
.timeline__node.is-active {
  --lg-sheen-a: 0.32;
  background: var(--lg-sheen), var(--lg-pink);
  backdrop-filter: blur(14px) var(--lg-saturate);
  -webkit-backdrop-filter: blur(14px) var(--lg-saturate);
}

.btn--primary {
  box-shadow: var(--lg-edge-pink), 0 8px 24px rgba(236, 72, 153, 0.42);
}

.btn--primary-lg,
.btn--yes {
  box-shadow: var(--lg-edge-pink), 0 10px 34px rgba(236, 72, 153, 0.5);
}

.letter__tag,
.music__mini-toggle {
  box-shadow: var(--lg-edge-pink), 0 2px 10px rgba(236, 72, 153, 0.4);
}

.music__play,
.timeline__node.is-active {
  box-shadow: var(--lg-edge-pink), 0 4px 22px rgba(236, 72, 153, 0.5);
}

.btn--primary:hover,
.btn--yes:hover,
.music__play:hover,
.music__mini-toggle:hover {
  --lg-sheen-a: 0.45;
}

/* Squish like a droplet when pressed */
.btn:active,
.key:active,
.key.is-flashing,
.music__fab:active,
.music__play:active {
  transform: scale(0.94, 0.9);
}

/* === Refraction (Chromium only: backdrop-filter: url()) ================ */

.lg-refract .chip,
.lg-refract .btn--ghost,
.lg-refract .btn--no,
.lg-refract .yes__badge,
.lg-refract .counter__unit,
.lg-refract .timeline__entry,
.lg-refract .key,
.lg-refract .music__fab,
.lg-refract .music__mini {
  backdrop-filter: url(#lg-refract) blur(var(--lg-blur, 18px))
    var(--lg-saturate);
}

/* === Living background so the glass has something to bend ============= */

.mesh__blob {
  will-change: transform;
}

.mesh__blob--1 {
  animation: lg-drift-1 22s ease-in-out infinite alternate;
}

.mesh__blob--2 {
  animation: lg-drift-2 26s ease-in-out infinite alternate;
}

.mesh__blob--3 {
  animation: lg-drift-3 18s ease-in-out infinite alternate;
}

@keyframes lg-drift-1 {
  to {
    transform: translate(12vw, 10vh) scale(1.1);
  }
}

@keyframes lg-drift-2 {
  to {
    transform: translate(-14vw, -8vh) scale(1.15);
  }
}

@keyframes lg-drift-3 {
  to {
    transform: translate(-10vw, 12vh) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mesh__blob {
    animation: none;
  }
}

/* Lighter phones: drop the most expensive blur radius a notch */
@media (max-width: 640px) {
  .notebook,
  .lock__book,
  .music__panel {
    --lg-blur: 22px;
  }
}