/* hover-button.css — glassmorphic visual treatment applied to
   every button-shaped element on the site. Load AFTER style.css
   so these rules win the cascade where they overlap.

   The interaction (animated colour circles on pointermove) is
   wired in hover-button.js. The visual rules below stand on
   their own — no JS needed for the look. */

/* Liquid-glass surface — adapted from the LiquidButton React
   component the client referenced. The multi-stop inset shadow
   stack gives the "etched dewdrop" look (dark inner edges +
   subtle inner highlight ring + soft outer glow). Backdrop
   blur 18px refracts whatever sits behind the button.

   `.home-link` and `.latest__card` get the visual surface but
   are NOT in the hover-button.js selector list — those big
   tiles felt clunky with the per-pointermove DOM blobs. */
.hover-button,
.btn,
.stream-btn,
.contact__booking a,
.press__kit-buttons .btn,
.lightbox__download,
.home-link,
.latest__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 28px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: rgba(255, 255, 255, 0.04);
  /* The LiquidButton's exact dark-glass shadow recipe —
     gives the "wet glass pebble" look with subtle dark inner
     edges, two soft inner halos, and a faint white outer
     glow that fakes the refractive bloom. */
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.12),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.95),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.85),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.6),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.05),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.04),
    0 0 14px rgba(91, 194, 221, 0.10);
  --circle-start: #A0D9F8;
  --circle-end: var(--color-cyan);
  transition:
    transform 220ms var(--ease-out),
    background 220ms var(--ease-out),
    box-shadow 280ms var(--ease-out),
    filter 220ms var(--ease-out);
}

.hover-button:hover,
.btn:hover,
.stream-btn:hover,
.contact__booking a:hover,
.press__kit-buttons .btn:hover,
.lightbox__download:hover,
.home-link:hover,
.latest__card:hover {
  background: rgba(170, 202, 255, 0.08);
  filter: brightness(1.08);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.06),
    0 4px 14px rgba(0, 0, 0, 0.18),
    inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 1),
    inset -3px -3px 0.5px -3.5px rgba(255, 255, 255, 0.95),
    inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.7),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.7),
    inset 0 0 6px 6px rgba(255, 255, 255, 0.07),
    inset 0 0 2px 2px rgba(255, 255, 255, 0.05),
    0 0 22px rgba(91, 194, 221, 0.25);
}

.hover-button:active,
.btn:active,
.stream-btn:active,
.contact__booking a:active,
.press__kit-buttons .btn:active,
.lightbox__download:active,
.home-link:active,
.latest__card:active {
  transform: scale(0.975);
  filter: brightness(0.92);
}

/* Lightbox close button is a tiny circular control — preserve
   its 50% radius rather than the 28px rectangular pill. */
.lightbox__close {
  border-radius: 50%;
  width: 44px;
  height: 44px;
}

/* The animated colour blob that drops at the pointer. Lives
   inside the host button at z-index -1 so the label sits on
   top. The blob fades in (300ms), holds, then fades out (1.2s)
   before being removed (~2.2s total). */
.hover-button__circle {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.hover-button__circle.is-in {
  opacity: 0.75;
}
.hover-button__circle.is-out {
  opacity: 0;
  transition-duration: 1200ms;
}

/* Respect reduced-motion: still show the glass surface but
   skip the colour blobs (the JS still runs — harmless).
   We disable the opacity transition + active scale. */
@media (prefers-reduced-motion: reduce) {
  .hover-button__circle { display: none; }
  .hover-button:active,
  .btn:active,
  .stream-btn:active { transform: none; }
}