/* ═══════════════════════════════════════════════════════════════
   Honeydew · liquid glass border system
   ---------------------------------------------------------------
   Architecture — each .glass element is a frame:

     .glass                border ring itself: luminous layered
       │                   gradients + outer glow. Padding = ring
       │                   thickness (--bw).
       ├─ ::before         SHIMMER PASS — masked to the ring only
       │                   (mask-composite: exclude). Two conic
       │                   gradients rotate at different speeds &
       │                   directions via registered @property
       │                   angles: a white light sweep + a slow
       │                   iridescent refraction band.
       ├─ ::after          CAUSTIC PASS — masked to the ring; a
       │                   drifting diagonal sheen (background-
       │                   position animation) that reads as light
       │                   moving through the glass.
       ├─ .glass-spark     a blurred specular dot travelling the
       │                   full border path via offset-path:
       │                   border-box (progressive enhancement).
       ├─ .glass-inner     the card face (translucent fill,
       │                   backdrop blur, inner top-light).
       └─ .drip            droplets welded to the bottom edge —
                           pulsating; JS detaches & drops them
                           when an action completes in the card.
   ═══════════════════════════════════════════════════════════════ */

@property --sweep-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sweep-b { syntax: "<angle>"; inherits: false; initial-value: 140deg; }

.glass {
  position: relative;
  border-radius: var(--r);
  padding: var(--bw);
  isolation: isolate;
  /* the standing glass ring: cool highlight top-left, warm honeyed
     light pooling bottom-right, white rim edges */
  background:
    linear-gradient(148deg,
      var(--rim-hi) 0%,
      rgba(255, 248, 229, .72) 22%,
      var(--rim-lo) 46%,
      rgba(255, 244, 216, .68) 72%,
      var(--rim-hi) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .65),
    inset 0 2px 3px rgba(255, 255, 255, .9),
    inset 0 -2px 4px rgba(224, 176, 90, .28),
    0 0 18px -2px var(--glow, var(--rim-glow)),
    var(--shadow-card);
}

/* ── shimmer pass (ring-masked) ───────────────────────────────── */
.glass::before,
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--bw);
  -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: 2;
}

.glass::before {
  background:
    /* primary light sweep — a soft white blade + faint trailing blade */
    conic-gradient(from var(--sweep-a) at 50% 50%,
      transparent 0deg,
      rgba(255, 255, 255, 0)   28deg,
      rgba(255, 255, 255, .85) 47deg,
      rgba(255, 253, 244, .95) 55deg,
      rgba(255, 255, 255, .55) 66deg,
      transparent 92deg,
      transparent 178deg,
      rgba(255, 249, 231, .38) 202deg,
      transparent 226deg,
      transparent 360deg),
    /* slow counter-rotating refraction band — pastel dispersion,
       like light splitting inside the glass */
    conic-gradient(from var(--sweep-b) at 50% 50%,
      rgba(255, 208, 128, .30) 0deg,
      rgba(255, 245, 214, .12) 55deg,
      rgba(168, 214, 255, .26) 120deg,
      rgba(255, 255, 255, .08) 170deg,
      rgba(255, 184, 205, .22) 226deg,
      rgba(255, 233, 178, .30) 290deg,
      rgba(255, 208, 128, .30) 360deg);
  filter: blur(.5px) saturate(1.25);
  animation:
    glass-sweep var(--sweep-dur, 13s) linear infinite,
    glass-refract var(--refract-dur, 27s) linear infinite reverse;
  animation-delay: var(--sweep-delay, 0s), calc(var(--sweep-delay, 0s) * 1.7);
}

@keyframes glass-sweep   { to { --sweep-a: 360deg; } }
@keyframes glass-refract { to { --sweep-b: 500deg; } }

/* ── caustic pass — drifting diagonal sheen ───────────────────── */
.glass::after {
  background:
    repeating-linear-gradient(115deg,
      transparent 0px,
      rgba(255, 255, 255, .0)  14px,
      rgba(255, 255, 255, .38) 22px,
      rgba(255, 249, 226, .18) 30px,
      transparent 42px,
      transparent 74px),
    repeating-linear-gradient(65deg,
      transparent 0px,
      rgba(255, 236, 190, .16) 26px,
      rgba(255, 255, 255, .22) 34px,
      transparent 52px,
      transparent 118px);
  background-size: 260px 260px, 340px 340px;
  mix-blend-mode: screen;
  opacity: .8;
  animation: glass-caustic var(--caustic-dur, 21s) linear infinite;
  animation-delay: var(--sweep-delay, 0s);
}
@keyframes glass-caustic {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 260px 260px, -340px 340px; }
}

/* ── travelling specular spark ────────────────────────────────── */
.glass-spark {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 244, 208, .55) 38%,
    rgba(255, 230, 170, .18) 60%,
    transparent 72%);
  filter: blur(1.1px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 3;
}
@supports (offset-path: border-box) {
  .glass-spark {
    display: block;
    offset-path: border-box;
    offset-rotate: 0deg;
    offset-anchor: 50% 50%;
    animation: spark-travel var(--spark-dur, 17s) linear infinite;
    animation-delay: var(--spark-delay, 0s);
  }
  .glass-spark.spark-minor {
    width: 20px; height: 20px; margin: -10px 0 0 -10px;
    opacity: .7;
    animation-duration: calc(var(--spark-dur, 17s) * 1.618);
    animation-delay: calc(var(--spark-delay, 0s) - 7s);
  }
}
@keyframes spark-travel { to { offset-distance: 100%; } }

/* ── card face ────────────────────────────────────────────────── */
.glass-inner {
  position: relative;
  border-radius: calc(var(--r) - var(--bw));
  background: var(--face, linear-gradient(165deg, rgba(255, 253, 246, .92), rgba(250, 241, 219, .88)));
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 12px 24px -14px rgba(255, 255, 255, .65),
    inset 0 -14px 30px -22px rgba(120, 84, 20, .35);
  z-index: 1;
}

/* soft interior top light */
.glass-inner::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 60% at 50% -12%, rgba(255, 255, 255, var(--toplight, .5)), transparent 55%);
  pointer-events: none;
}

/* rail / soft variants (sidebar, footer) get a quieter ring */
.glass-soft { --bw: 5px; }
.glass-soft::before { opacity: .75; }
.glass-soft::after  { opacity: .5; }
.glass-rail .glass-inner { background: linear-gradient(172deg, rgba(255, 253, 246, .9), rgba(249, 239, 216, .84)); }

/* ═══════════════════════════════════════════════════════════════
   Droplets — welded to the bottom of the ring, pulsating.
   Structure (built by js/glass.js):
     .drip            positioning shell (below border edge)
       .drip-neck     meniscus where glass meets bead
       .drip-bead     the droplet body (pulsates; falls on action)
   ═══════════════════════════════════════════════════════════════ */

.drip {
  position: absolute;
  bottom: 1px;
  width: 18px; height: 30px;
  margin-left: -9px;
  transform: translateY(100%);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 4px 6px rgba(190, 138, 52, .35));
}

.drip-neck {
  position: absolute;
  top: -2px; left: 50%;
  width: 14px; height: 9px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--rim-mid), rgba(255, 246, 222, .92));
  border-radius: 0 0 58% 58% / 0 0 100% 100%;
  box-shadow: inset 0 -1px 2px rgba(255, 255, 255, .8);
  transform-origin: top center;
  animation: neck-swell var(--drip-dur, 4.6s) ease-in-out infinite;
  animation-delay: var(--drip-delay, 0s);
}

.drip-bead {
  position: absolute;
  top: 4px; left: 50%;
  width: 12px; height: 15px;
  margin-left: -6px;
  border-radius: 46% 46% 50% 50% / 34% 34% 64% 64%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .35) 26%, transparent 44%),
    radial-gradient(circle at 68% 82%, rgba(255, 224, 156, .75), transparent 58%),
    linear-gradient(168deg, rgba(255, 252, 242, .95), rgba(250, 226, 176, .88) 62%, rgba(240, 200, 128, .9));
  box-shadow:
    inset 0 -2px 3px rgba(218, 166, 78, .5),
    inset 1px 1px 2px rgba(255, 255, 255, .95),
    0 0 8px -1px var(--rim-glow);
  transform-origin: top center;
  animation: bead-pulse var(--drip-dur, 4.6s) ease-in-out infinite;
  animation-delay: var(--drip-delay, 0s);
}

/* subtle breathing: the bead slowly swells & elongates, the neck
   thins in counterpoint — reads as surface tension straining */
@keyframes bead-pulse {
  0%, 100% { transform: scale(1, 1) translateY(0); }
  38%      { transform: scale(1.06, .95) translateY(.4px); }
  70%      { transform: scale(.94, 1.12) translateY(1.6px); }
  86%      { transform: scale(1.02, 1.02) translateY(.6px); }
}
@keyframes neck-swell {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  38%      { transform: translateX(-50%) scale(1.1, .9); }
  70%      { transform: translateX(-50%) scale(.86, 1.25); }
  86%      { transform: translateX(-50%) scale(1.04, 1); }
}

/* falling state — applied by JS, animated with WAAPI for the
   trajectory; this class handles the neck snap + regrow */
.drip.falling .drip-neck { animation: neck-snap .5s ease-out forwards; }
@keyframes neck-snap {
  0%   { transform: translateX(-50%) scale(1, 1.4); }
  45%  { transform: translateX(-50%) scale(.5, 1.9); }
  100% { transform: translateX(-50%) scale(1, .55); }
}
.drip.regrow .drip-bead { animation: bead-regrow 1.6s cubic-bezier(.34, 1.45, .5, 1) forwards; }
@keyframes bead-regrow {
  0%   { transform: scale(.1, .1) translateY(-4px); opacity: 0; }
  55%  { transform: scale(1.12, .9) translateY(.5px); opacity: 1; }
  100% { transform: scale(1, 1) translateY(0); opacity: 1; }
}

/* splash ring left at the impact point of a fallen droplet */
.drip-splash {
  position: absolute;
  width: 26px; height: 10px;
  margin: -5px 0 0 -13px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 244, 214, .9);
  box-shadow: 0 0 10px rgba(240, 196, 110, .8), inset 0 0 4px rgba(255, 255, 255, .8);
  pointer-events: none;
  z-index: 40;
}

/* ── motion preferences ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass::before, .glass::after { animation: none; }
  .glass-spark { display: none; }
  .drip-bead, .drip-neck { animation: none; }
}
body.reduced-motion .glass::before,
body.reduced-motion .glass::after { animation: none; }
body.reduced-motion .glass-spark { display: none; }
body.reduced-motion .drip-bead,
body.reduced-motion .drip-neck { animation: none; }