/*
 * Option B — classic design, Apple Liquid Glass on interaction.
 * Loaded after every original stylesheet. Only :hover, :focus-visible, :active and the
 * site's own .is-touch-pressed states are restyled; resting surfaces are untouched.
 */
:root {
  --lgh-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lgh-glide: cubic-bezier(.32, .72, 0, 1);
  --lgh-rim:
    radial-gradient(140% 140% at var(--lg-x, 18%) var(--lg-y, -10%), #fff, rgba(255, 255, 255, .32) 32%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(120% 120% at calc(100% - var(--lg-x, 18%)) calc(100% - var(--lg-y, -10%)), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%);
  /* Soft edge: light gathers inside the rim and fades, no drawn outline. */
  --lgh-paper-shadow:
    inset 0 1px 6px rgba(255, 255, 255, .85),
    inset 0 -2px 8px rgba(255, 255, 255, .5),
    inset 0 0 12px rgba(255, 255, 255, .32),
    0 12px 30px -14px rgba(30, 40, 48, .22),
    0 2px 8px rgba(30, 40, 48, .05);
  --lgh-dark-shadow:
    inset 0 1px 8px rgba(255, 255, 255, .34),
    inset 0 -2px 10px rgba(255, 255, 255, .16),
    inset 0 0 16px rgba(255, 255, 255, .12),
    0 16px 36px -14px rgba(5, 12, 18, .4),
    0 2px 8px rgba(5, 12, 18, .1);
}
.lg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Motion: glass condenses quickly and settles with a slight spring. */
@media (prefers-reduced-motion: no-preference) {
  :is(button, select, summary, .service-list > a, .back-to-top) {
    transition: background-color .3s var(--lgh-glide), box-shadow .45s var(--lgh-glide), transform .55s var(--lgh-spring), color .25s;
  }
  .project-card .card-caption, .site-header { transition: background-color .35s var(--lgh-glide), box-shadow .45s var(--lgh-glide); }
  .column-glass { transition: opacity 220ms cubic-bezier(.22, 1, .36, 1), transform .55s var(--lgh-spring), box-shadow .45s var(--lgh-glide); }
  .site-header nav a::before, .text-link::before { transition: opacity .25s var(--lgh-glide), transform .5s var(--lgh-spring), visibility 0s .25s; }
  .site-header nav a:hover::before, .text-link:hover::before { transition: opacity .25s var(--lgh-glide), transform .5s var(--lgh-spring), visibility 0s; }
}

/* Pills behind nav links and text links: hidden at rest, no layout change. */
.site-header nav a::before, .text-link::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -2px -14px; border-radius: 999px;
  opacity: 0; transform: scale(.9);
  background: radial-gradient(120% 120% at var(--lg-x, 30%) var(--lg-y, 0%), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 65%), rgba(255, 253, 248, .45);
  box-shadow: var(--lgh-paper-shadow);
  visibility: hidden;
}
.text-link { position: relative; }
.text-link::before { inset: -4px -18px; }

@media (any-hover: hover) and (any-pointer: fine) {
  .site-header nav a:hover::before, .text-link:hover::before {
    opacity: 1; transform: none; visibility: visible;
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    backdrop-filter: blur(10px) saturate(1.5);
  }
  .site-header nav a:hover, .site-header nav a[aria-current]:hover { text-decoration-color: transparent; }

  /* ---------- Clear glass over imagery: home project carousel ---------- */
  .hero-column:hover .column-glass {
    background:
      radial-gradient(120% 90% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 60%),
      rgba(10, 20, 28, .2);
    border-color: transparent;
    -webkit-backdrop-filter: blur(3px) saturate(1.8) brightness(.8);
    backdrop-filter: blur(3px) saturate(1.8) brightness(.8);
    box-shadow: var(--lgh-dark-shadow);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
  }
  .lg-refract .hero-column:hover .column-glass { backdrop-filter: blur(3px) var(--lg-filter,) saturate(1.8) brightness(.8); }
  .hero-column:hover .column-glass::before { display: none; }

  /* ---------- Paper glass: captions, header, controls ---------- */
  .project-card a:hover .card-caption,
  .site-header:hover,
  :is(button, select, summary, .service-list > a, .back-to-top):hover {
    background:
      radial-gradient(120% 110% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%),
      rgba(255, 253, 248, .4);
    -webkit-backdrop-filter: blur(8px) saturate(1.5);
    backdrop-filter: blur(8px) saturate(1.5);
    box-shadow: var(--lgh-paper-shadow);
  }
  .lg-refract :is(.project-card a:hover .card-caption, .site-header:hover, :is(button, select, summary, .service-list > a, .back-to-top):hover) {
    backdrop-filter: blur(8px) var(--lg-filter,) saturate(1.5);
  }
  .project-card a:hover .card-caption::before, .site-header:hover::before { display: none; }

  .filters button:hover, .filters button.is-touch-pressed { border-color: transparent; }

  /* Selected filter / lighting buttons stay dark, as dark glass. */
  :is(.filters button, .luong-lighting button, .luong-board-lighting button, .luong-viewer-lighting button)[aria-pressed=true]:hover {
    background:
      radial-gradient(120% 110% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%),
      rgba(16, 39, 56, .9);
    color: #fff;
    box-shadow: var(--lgh-dark-shadow);
  }
}

/* Physical press: the glass gives, then springs back. */
@media (prefers-reduced-motion: no-preference) {
  :is(button, select, summary, .service-list > a, .back-to-top):active { transform: scale(.955); transition-duration: .12s; }
}

/* Touch / pen press mirrors hover while the finger is down (the site already adds .is-touch-pressed). */
.hero-column.is-touch-pressed .column-glass {
  background: radial-gradient(120% 90% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 60%), rgba(10, 20, 28, .2);
  border-color: transparent;
  -webkit-backdrop-filter: blur(3px) saturate(1.8) brightness(.8);
  backdrop-filter: blur(3px) saturate(1.8) brightness(.8);
  box-shadow: var(--lgh-dark-shadow);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.lg-refract .hero-column.is-touch-pressed .column-glass { backdrop-filter: blur(3px) var(--lg-filter,) saturate(1.8) brightness(.8); }
.hero-column.is-touch-pressed .column-glass::before { display: none; }
:is(button, select, summary, .service-list > a).is-touch-pressed,
.project-card a.is-touch-pressed .card-caption {
  background: radial-gradient(120% 110% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%), rgba(255, 253, 248, .4);
  -webkit-backdrop-filter: blur(8px) saturate(1.5);
  backdrop-filter: blur(8px) saturate(1.5);
  box-shadow: var(--lgh-paper-shadow);
}
.lg-refract :is(:is(button, select, summary, .service-list > a).is-touch-pressed, .project-card a.is-touch-pressed .card-caption) {
  backdrop-filter: blur(8px) var(--lg-filter,) saturate(1.5);
}
.project-card a.is-touch-pressed .card-caption::before { display: none; }
:is(.filters button, .luong-lighting button, .luong-board-lighting button, .luong-viewer-lighting button)[aria-pressed=true].is-touch-pressed {
  background: radial-gradient(120% 110% at var(--lg-x, 20%) var(--lg-y, 0%), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 60%), rgba(16, 39, 56, .9);
  color: #fff;
  box-shadow: var(--lgh-dark-shadow);
}

/* Keyboard focus gets the same glass, so the effect isn't mouse-only. */
:is(button, select, summary, .service-list > a, .back-to-top):focus-visible {
  background: radial-gradient(120% 110% at 20% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 62%), rgba(255, 253, 248, .4);
  box-shadow: var(--lgh-paper-shadow), 0 0 0 2px var(--blue, #243b4b);
}
.site-header nav a:focus-visible::before, .text-link:focus-visible::before { opacity: 1; transform: none; visibility: visible; }

/* The site's existing reduced-transparency / increased-contrast !important fallbacks still win.
   These cover what this file adds. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header nav a::before, .text-link::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper, #f4f1ea); }
  .hero-column:hover .column-glass, .hero-column.is-touch-pressed .column-glass { text-shadow: none; }
}
@media print { .site-header nav a::before, .text-link::before { display: none; } }