/* A background material, not an overlay: text, controls and artwork keep their
   original geometry. Only the broad reflection moves, at most twelve pixels. */
body.vector.eup-pages [data-premium-surface] {
  --panel-sheen-shift: 0px;
  background-color: var(--panel-metal-base);
  background-image: var(--panel-metal-finish);
  background-size: calc(100% + 96px) 100%, 100% 100%, 100% 100%;
  background-position: calc(50% + var(--panel-sheen-shift)) 50%, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: var(--panel-metal-shadow);
}

body.vector.eup-pages [data-premium-surface="dark"] {
  background-color: var(--palette-dark-panel);
  background-image: var(--panel-metal-dark-sheen), var(--panel-metal-dark-grain), var(--panel-metal-dark-body);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18),
    inset 1px 0 0 rgb(255 255 255 / .07),
    inset -1px -1px 0 rgb(0 0 0 / .22),
    0 14px 30px -18px color-mix(in srgb, var(--palette-ink) 38%, transparent);
}

body.vector.eup-pages [data-premium-surface="warm"] {
  background-color: var(--palette-warm-surface);
  background-image: var(--panel-metal-sheen), var(--panel-metal-grain), var(--panel-metal-warm-body);
}

/* The security columns become finished cards with room around their copy. */
body.vector.eup-pages .security-services:not(.serverhousing-page) .security-service[data-premium-surface] {
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid var(--panel-metal-edge);
  border-top: 2px solid var(--eup-accent);
}

/* Disable the old clock-driven sweep on every upgraded panel. */
body.vector.eup-pages [data-premium-surface] > .optical-light {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body.vector.eup-pages [data-premium-surface] {
    background-position: 50% 50%, 0 0, 0 0;
  }
}

@media (forced-colors: active) {
  body.vector.eup-pages [data-premium-surface] {
    background-image: none;
    box-shadow: none;
  }
}