.hero-slate {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.hero[data-landing-variant="scene"][data-scene-preset="concrete"] .hero-slate { opacity: 1; }
.hero[data-scene-preset="concrete"] .hero-3d-scene { opacity: 0 !important; }
.hero[data-landing-variant="scene"][data-scene-preset="concrete"] .hero-scene-base,
.hero[data-landing-variant="scene"][data-scene-preset="concrete"] .hero-bokeh { opacity: 0 !important; }

.slate-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.778vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
}
.slate-photo-frame,
.slate-photo-frame img,
.slate-network { position: absolute; inset: 0; width: 100%; height: 100%; }
.slate-photo-frame {
  transform: translate3d(var(--slate-photo-x, 0px), var(--slate-photo-y, 0px), 0);
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}
.slate-photo-frame img { object-fit: cover; animation: slate-breath 27s ease-in-out infinite alternate; }
.slate-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .48) 48%, rgba(0, 0, 0, .43));
}
@keyframes slate-breath { from { transform: scale(1.025); } to { transform: scale(1.055); } }

.slate-network {
  overflow: visible;
  transform: translate3d(var(--slate-network-x, 0px), var(--slate-network-y, 0px), 0);
  transition: transform .52s cubic-bezier(.2, .7, .2, 1);
}
.slate-network-beam,
.slate-network-aura {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.slate-network-beam { stroke-width: 1.45; filter: drop-shadow(0 0 4px rgba(230, 252, 255, .75)); }
.slate-network-aura { stroke-width: 7; filter: blur(6px); opacity: .44; }

.slate-hub-logo {
  position: absolute;
  left: 36%;
  top: 46%;
  width: 16%;
  aspect-ratio: 420 / 500;
  transform: translate(calc(-50% + var(--slate-logo-x, 0px)), calc(-50% + var(--slate-logo-y, 0px)));
  transition: transform .46s cubic-bezier(.2, .7, .2, 1);
}
.slate-logo-ember,
.slate-logo-spot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask: url("../assets/pb-hub-plaque.svg") center / contain no-repeat;
  mask: url("../assets/pb-hub-plaque.svg") center / contain no-repeat;
}
.slate-logo-ember {
  background: linear-gradient(155deg, #020405 30%, #0c1214 53%, #020405 75%);
  filter: drop-shadow(-1px -1px 1px rgba(224, 242, 244, .15)) drop-shadow(2px 2px 1px #000);
  opacity: .74;
}
.slate-logo-spot {
  background: radial-gradient(ellipse var(--slate-glow-rx, 35%) var(--slate-glow-ry, 29%)
    at var(--slate-glow-x, 4%) var(--slate-glow-y, 93%),
    rgba(247, 253, 254, .76) 0%, rgba(229, 246, 248, .5) 29%,
    rgba(202, 231, 235, .17) 67%, transparent 100%);
  opacity: var(--slate-glow-opacity, 0);
  filter: drop-shadow(0 0 3px rgba(225, 250, 252, .34));
}
.hero[data-landing-variant="scene"][data-scene-preset="concrete"] .hero-vignette { opacity: .22; }
.hero[data-landing-variant="scene"][data-scene-preset="concrete"]::after { background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .1) 100%); }
@media (max-width: 700px) { .slate-stage { transform: translate(-36%, -50%); } }
@media (prefers-reduced-motion: reduce) {
  .slate-photo-frame img { animation: none; }
  .slate-logo-spot { opacity: 0; }
}