/* Product Explorer — frosted surfaces.
   Budget: only .pe-panel__copy uses a real backdrop-filter, and only one panel is
   visible at a time. Cards use "faux glass" (gradients + rim light) so three 3D
   cards never stack three blur layers on the GPU. */

/* Cards: faux glass rim + sheen */
.pe-card__float {
  background: var(--pe-bg-2);
  box-shadow:
    var(--pe-shadow),
    inset 0 0 0 1px var(--pe-glass-border),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.pe-card__float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%),
    linear-gradient(0deg, color-mix(in srgb, var(--pe-accent) 10%, transparent), transparent 40%);
  mix-blend-mode: screen;
}

/* Gallery copy: the single real frosted layer */
.pe-panel__copy {
  background: var(--pe-glass-solid);
  border: 1px solid var(--pe-glass-border);
  box-shadow: var(--pe-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pe-panel__copy {
    background: var(--pe-glass-bg), rgba(14, 16, 20, 0.58);
    -webkit-backdrop-filter: blur(var(--pe-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--pe-glass-blur)) saturate(140%);
  }
}

/* Accent hairline on the frosted panel */
.pe-panel__copy {
  position: relative;
}

.pe-panel__copy::before {
  content: "";
  position: absolute;
  inset-inline-start: clamp(18px, 1.8vw, 26px);
  top: 0;
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--pe-accent);
  box-shadow: 0 0 14px var(--pe-accent);
}