/* Liquid glass overlay: purely additive on top of each page's existing styles.
   Colors are the site's own --pink/--cyan/white-translucent values, reused as-is. */

.brand-chip,
.menu-button,
.nav a,
.contact-link,
.reveal-name-button,
.comment-form button,
.hero,
.card,
.photo-card {
  position: relative;
  backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: url("glass-filters.svg#glass-rest");
  transform: perspective(900px) rotateX(var(--glass-ry, 0deg)) rotateY(var(--glass-rx, 0deg));
}

@media (prefers-reduced-motion: no-preference) {
  .brand-chip,
  .menu-button,
  .nav a,
  .contact-link,
  .reveal-name-button,
  .comment-form button,
  .hero,
  .card,
  .photo-card {
    transition: transform 150ms ease-out;
  }
}

/* Re-declare each page's existing hover transform (source-order wins over the
   inline <style> block) so the glass tilt composes with the original bounce
   instead of replacing it. */
.menu-button:hover {
  transform: translateY(-2px) rotate(-1deg) perspective(700px) rotateX(var(--glass-ry, 0deg)) rotateY(var(--glass-rx, 0deg));
}

.nav a:hover,
.contact-link:hover {
  transform: translateY(-2px) rotate(1deg) perspective(700px) rotateX(var(--glass-ry, 0deg)) rotateY(var(--glass-rx, 0deg));
}

.reveal-name-button:hover,
.comment-form button:hover {
  transform: translateY(-2px) rotate(-1deg) perspective(700px) rotateX(var(--glass-ry, 0deg)) rotateY(var(--glass-rx, 0deg));
}

/* Cursor-tracking sheen: a soft highlight that follows the pointer. */
.brand-chip::before,
.menu-button::before,
.nav a::before,
.contact-link::before,
.reveal-name-button::before,
.comment-form button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120px 120px at var(--glass-mx, 50%) var(--glass-my, 50%), rgba(255, 255, 255, 0.35), transparent 60%);
  transition: opacity 160ms ease;
}

.brand-chip:hover::before,
.brand-chip:focus-visible::before,
.menu-button:hover::before,
.menu-button:focus-visible::before,
.nav a:hover::before,
.nav a:focus-visible::before,
.contact-link:hover::before,
.contact-link:focus-visible::before,
.reveal-name-button:hover::before,
.reveal-name-button:focus-visible::before,
.comment-form button:hover::before,
.comment-form button:focus-visible::before {
  opacity: 1;
}

/* Hover-only lens ring: thick, crisp, refracted border with a clean/transparent
   interior — no blur, the distortion lives only in the ring itself. */
.brand-chip::after,
.menu-button::after,
.nav a::after,
.contact-link::after,
.reveal-name-button::after,
.comment-form button::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 2;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(83, 243, 255, 0.36) 45%, rgba(255, 107, 214, 0.42));
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  backdrop-filter: blur(2px);
  backdrop-filter: url("glass-filters.svg#glass-hover");
  transition: opacity 140ms ease;
}

.brand-chip:hover::after,
.brand-chip:focus-visible::after,
.menu-button:hover::after,
.menu-button:focus-visible::after,
.nav a:hover::after,
.nav a:focus-visible::after,
.contact-link:hover::after,
.contact-link:focus-visible::after,
.reveal-name-button:hover::after,
.reveal-name-button:focus-visible::after,
.comment-form button:hover::after,
.comment-form button:focus-visible::after {
  opacity: 1;
}

/* Respect reduced motion: kill the tilt/sheen transitions, keep the static filter. */
@media (prefers-reduced-motion: reduce) {
  .brand-chip,
  .menu-button,
  .nav a,
  .contact-link,
  .reveal-name-button,
  .comment-form button,
  .hero,
  .card,
  .photo-card,
  .brand-chip::before,
  .menu-button::before,
  .nav a::before,
  .contact-link::before,
  .reveal-name-button::before,
  .comment-form button::before,
  .brand-chip::after,
  .menu-button::after,
  .nav a::after,
  .contact-link::after,
  .reveal-name-button::after,
  .comment-form button::after {
    transition: none;
  }
}

/* Fallback for browsers where feDisplacementMap-on-backdrop-filter is
   unsupported/broken (Safari/iOS): glass.js adds this class, and these more
   specific rules win over the url()-based ones above without !important. */
html.no-glass-refraction .brand-chip,
html.no-glass-refraction .menu-button,
html.no-glass-refraction .nav a,
html.no-glass-refraction .contact-link,
html.no-glass-refraction .reveal-name-button,
html.no-glass-refraction .comment-form button,
html.no-glass-refraction .hero,
html.no-glass-refraction .card,
html.no-glass-refraction .photo-card {
  backdrop-filter: blur(16px) saturate(1.08);
}

html.no-glass-refraction .brand-chip::after,
html.no-glass-refraction .menu-button::after,
html.no-glass-refraction .nav a::after,
html.no-glass-refraction .contact-link::after,
html.no-glass-refraction .reveal-name-button::after,
html.no-glass-refraction .comment-form button::after {
  backdrop-filter: blur(6px);
}