/* The CSS material transmits the actual backdrop in every mode. WebGL adds
   full-face optics beneath text; it never captures or rasterizes that text. */
.floating-nav {
  background: linear-gradient(135deg, rgba(218,226,233,.045), rgba(25,30,37,.12) 46%, rgba(9,13,19,.2));
  border-color: rgba(230,237,243,.3);
  -webkit-backdrop-filter: blur(1.25px) saturate(1.14);
  backdrop-filter: blur(1.25px) saturate(1.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), inset 0 -1px 0 rgba(200,213,229,.09), 0 12px 38px rgba(0,0,0,.22);
}
#idea .card-copy {
  background: linear-gradient(140deg, rgba(217,230,242,.025), rgba(14,20,27,.045) 45%, rgba(5,10,17,.08));
  border-color: rgba(231,238,245,.36);
  -webkit-backdrop-filter: blur(.65px) saturate(1.12);
  backdrop-filter: blur(.65px) saturate(1.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(211,225,237,.15), 0 14px 34px rgba(0,0,0,.3), 0 0 18px rgba(188,212,238,.035);
  text-shadow: 0 1px 3px rgba(0,0,0,.86), 0 0 12px rgba(0,0,0,.45);
}
#idea .card-copy::before { opacity: .008; }
/* One continuous photograph fills each card and is sampled behind its glass.
   The image is cropped to the card, never repeated on a second backdrop. */
#idea .approach-card .card-media > :is(.idea-image, .experience-image, .impact-image, .approach-film-video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: none;
  mask-image: none;
}
.liquid-glass-pane,
#idea .card-copy > .liquid-glass-pane {
  position: absolute;
  z-index: 0;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: 0;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
}
.liquid-glass-pane.liquid-glass-pane-visible,
#idea .card-copy > .liquid-glass-pane.liquid-glass-pane-visible { opacity: 1; }
.floating-nav[data-liquid-panel] > a,
.floating-nav[data-liquid-panel] > .mobile-menu,
#idea .card-copy[data-liquid-panel] > :not(.liquid-glass-pane) {
  position: relative;
  z-index: 1;
}
.liquid-glass-layer {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  contain: strict;
  isolation: isolate;
}
.liquid-glass-layer.liquid-glass-visible { opacity: 1; }
/* Rendering atlas only; all visible optics live inside their own DOM surface. */
.liquid-glass-layer { visibility: hidden !important; pointer-events: none; }
.sw-folder-front[data-liquid-panel="folder"] > .liquid-glass-pane {
  inset: 0; width: 100%; height: 100%; border-radius: 0;
}
.sw-folder-front[data-liquid-panel="folder"]::after { z-index: 1; }
/* The exact original folder contour remains in CSS. The shader sits above it
   and samples only the matching image; it never changes image dimensions/crop. */
.liquid-glass-active .sw-folder-front[data-liquid-ready="true"]::before {
  -webkit-backdrop-filter: blur(1px) saturate(1.03);
  backdrop-filter: blur(1px) saturate(1.03);
}
@media (max-width: 760px) {
  .liquid-glass-active .sw-folder-front[data-liquid-ready="true"]::before {
    -webkit-backdrop-filter: blur(1px) saturate(1.03);
    backdrop-filter: blur(1px) saturate(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-glass-layer, .liquid-glass-pane,
  #idea .card-copy > .liquid-glass-pane { display: none; transition: none; }
}

/* Narrow prismatic rim; typography remains unfiltered above the glass. */
#idea .card-copy::after,
.floating-nav::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(127deg, rgba(131,204,255,.46), rgba(255,255,255,.12) 23%, transparent 41%, rgba(250,175,116,.3) 77%, rgba(183,163,255,.46));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.motion-enabled.idea-copy-in-flight #idea .idea-copy::after { opacity: 0; }


/* The shader owns the folder face; retain the CSS material as its fallback. */
.liquid-glass-active .sw-folder-front[data-liquid-ready="true"]::before{
  background:linear-gradient(165deg,#ecf4ff08,#10192318);
  -webkit-backdrop-filter:blur(.4px) saturate(1.05);
  backdrop-filter:blur(.4px) saturate(1.05);
}
.sw-folder-front[data-liquid-panel="folder"]>.liquid-glass-pane{z-index:1}
.sw-folder-front[data-liquid-panel="folder"]::after{z-index:2}