/* Vanilla port of the React Bits GlassSurface component.
   Structure is injected by glass-surface.js; these rules carry over
   the original component's CSS (base layering + fallback styles). */

.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Isolate layout/paint recalculation to this element so the (expensive)
     backdrop-filter surfaces don't force recalculation of the rest of the
     page on scroll/resize. */
  contain: layout style paint;
  transition: background-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Cards are large, repeated, off-and-on-screen surfaces, so
   content-visibility skips layout/paint work entirely while they're
   off-screen regardless of whether a given card uses the real
   backdrop-filter glass (.card) or the static CSS-only look
   (.work-item) - this just stops paying for either kind of paint work
   when it isn't visible. contain-intrinsic-size keeps a placeholder
   size so the page doesn't jump as cards enter/exit that state. */
.work-item,
.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: hsl(0 0% 100% / var(--glass-frost, 0));
  backdrop-filter: var(--filter-id, none) saturate(var(--glass-saturation, 1));
  -webkit-backdrop-filter: saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px rgba(0, 0, 0, 0.08) inset,
    0 0 10px 4px rgba(0, 0, 0, 0.04) inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05);
}

.glass-surface--fallback {
  background: rgba(255, 255, 255, var(--glass-frost, 0.25));
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

/* A scroll-driven cheap-blur swap used to run here (see script.js's
   is-scrolling class): drop the SVG displacement filter to a flat
   blur(4px) mid-scroll and restore it on settle. Removed - changing a
   backdrop-filter's value at all, even as an instant (non-transitioned)
   swap, makes Chrome briefly flash the element blank/white while it
   reallocates the filter's texture. Tuning the swap's timing and tone
   (see git history) never eliminated it, only the swap itself does.
   The SVG filter now stays constant regardless of scroll state. */

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, calc(var(--glass-frost, 0.25) + 0.15));
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }
}

/* Dark-mode tint - the base rules above are pure white-based (hsl(0 0%
   100%) / rgba(255,255,255,...)), which reads as a washed-out light pill
   on a dark page. Same --glass-frost opacity, just a dark base instead of
   white, so the frost amount stays visually consistent between themes. */
[data-theme="dark"] .glass-surface--svg {
  background: hsl(0 0% 12% / var(--glass-frost, 0));
}

[data-theme="dark"] .glass-surface--fallback {
  background: rgba(20, 20, 22, var(--glass-frost, 0.25));
}

/* --- Header nav CTAs --- */

.navbar-button.glass-surface,
.navbar-button-contact.glass-surface {
  padding: 10.5px 24px;
  border-radius: 30px;
}

.navbar-button .glass-surface__content,
.navbar-button-contact .glass-surface__content {
  padding: 0;
  white-space: nowrap;
}

.navbar-button.glass-surface--svg:hover {
  background: hsl(0 0% 100% / 0.5);
}

.navbar-button.glass-surface--fallback:hover {
  background: rgba(255, 255, 255, 0.55);
}

[data-theme="dark"] .navbar-button.glass-surface--svg:hover {
  background: hsl(0 0% 20% / 0.5);
}

[data-theme="dark"] .navbar-button.glass-surface--fallback:hover {
  background: rgba(255, 255, 255, 0.12);
}

.works-bottom-button.glass-surface {
  padding: 16px 40px;
  border-radius: 30px;
}

.works-bottom-button .glass-surface__content {
  padding: 0;
  white-space: nowrap;
}

.works-bottom-button.glass-surface:hover {
  background: #DFFCA1 !important;
  color: #094020;
}

.navbar-button-contact.glass-surface--svg {
  background: hsl(150 76% 14% / var(--glass-frost, 0.62));
}

.navbar-button-contact.glass-surface--fallback {
  background: rgba(9, 64, 32, var(--glass-frost, 0.62));
}

/* --- Cards: Design Philosophy (.card) --- */
/* .work-item (Home "Best Works") no longer goes through this real
   glass-filter system - see .work-item in styles.css for its static
   CSS-only equivalent. */

.card.glass-surface {
  border-radius: 32px;
}

.card .glass-surface__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.card.glass-surface:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 2px 1px rgba(0, 0, 0, 0.08) inset,
    0 0 10px 4px rgba(0, 0, 0, 0.04) inset,
    0 20px 40px rgba(0, 0, 0, 0.1);
}