:root{
  --sb-parallax-radius: 24px;
  --sb-parallax-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.sb-parallax {
  --bg-scale: 1.05;
  --mid-scale: 1.05;
  --fg-scale: 1.08;
  position: relative;
  width: 100%;
  aspect-ratio: 1964 / 2454;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sb-parallax-radius);
  background: #0b0f14;
  box-shadow: var(--sb-parallax-shadow);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.sb-parallax .sb-parallax__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  filter: none;
  translate: none;
  pointer-events: none;
  will-change: auto;
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.sb-parallax__layer--bg {
  z-index: 1;
  transform: translate3d(0,0,0) scale(var(--bg-scale));
}
.sb-parallax__layer--mid {
  z-index: 2;
  transform: translate3d(0,0,0) scale(var(--mid-scale));
}
.sb-parallax__layer--fg {
  z-index: 3;
  transform: translate3d(0,0,0) scale(var(--fg-scale));
}

.sb-parallax::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.10), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.08) 100%);
}

/* Scene-specific overscan */
.sb-parallax[data-scene="scene-01"] {
  --bg-scale: 1.04;
  --mid-scale: 1.05;
  --fg-scale: 1.08;
}

.sb-parallax[data-scene="scene-02"] {
  /* The source has a 196px transparent left strip. 1.30 covers it
     even at the maximum background offset; retain this in static modes. */
  --bg-scale: 1.30;
  --mid-scale: 1.05;
  --fg-scale: 1.08;
}

/* Reuse the existing profile panels, borders, spacing and aspect ratio. */
.summary-visual > .sb-parallax,
.presence-photo > .sb-parallax {
  height: 100%;
  min-height: inherit;
  border-radius: inherit;
  box-shadow: none;
}
.summary-overlay { z-index: 1; }
.sb-parallax[data-parallax-state="moving"] .sb-parallax__layer {
  will-change: transform;
}

/* Keep per-scene overscan when motion is disabled, including Scene 02. */
@media (max-width: 1100px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .sb-parallax .sb-parallax__layer--bg {
    transform: translate3d(0,0,0) scale(var(--bg-scale)) !important;
  }
  .sb-parallax .sb-parallax__layer--mid {
    transform: translate3d(0,0,0) scale(var(--mid-scale)) !important;
  }
  .sb-parallax .sb-parallax__layer--fg {
    transform: translate3d(0,0,0) scale(var(--fg-scale)) !important;
  }
}