/* Shared 3D portrait layer - Skyler page + home */
.skyler-hero-art,
.skyler-home-art {
  position: relative;
  isolation: isolate;
}

.skyler-portrait-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
}

.skyler-portrait-stage[data-skyler-3d-stage] {
  perspective: 900px;
  transform-style: preserve-3d;
  isolation: isolate;
  z-index: 1;
}

.skyler-portrait-3d {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  will-change: transform;
}

.skyler-portrait-3d > [data-skyler-depth] {
  will-change: transform;
}

.skyler-home-art .skyler-portrait-stage[data-skyler-3d-stage] {
  width: min(100%, 340px);
  min-height: 420px;
}

.skyler-home-art .skyler-portrait-3d {
  min-height: 420px;
}

@media (max-width: 767px) {
  .skyler-home-art .skyler-portrait-stage[data-skyler-3d-stage] {
    width: min(100%, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skyler-portrait-3d,
  .skyler-portrait-3d > [data-skyler-depth] {
    transform: none !important;
  }
}