/* Decorative 3D gallery. This component intentionally owns no page layout. */
.project-orbit {
  position: relative;
  width: 100%;
  max-width: 680px;
  aspect-ratio: 1.48;
  isolation: isolate;
  container-type: inline-size;
  --pg-parallax-x: 0deg;
  --pg-parallax-y: 0deg;
}

.project-orbit::before {
  content: "";
  position: absolute;
  inset: 13% 3% 9%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse at 56% 48%, #6342db26 0%, #2b4fbb15 42%, transparent 72%);
  filter: blur(22px);
  pointer-events: none;
}

.pg-scene {
  --pg-radius: min(39cqw, 260px);
  --pg-card-width: calc(var(--pg-radius) * .535);
  --pg-card-height: calc(var(--pg-card-width) * .666667);
  position: absolute;
  inset: 0;
  perspective: calc(var(--pg-radius) * 4.5);
  perspective-origin: 50% 46%;
}

.pg-parallax,
.pg-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.pg-parallax {
  transform: rotateX(var(--pg-parallax-y)) rotateY(var(--pg-parallax-x));
  transition: transform .65s cubic-bezier(.18, .7, .25, 1);
}

.pg-tilt {
  transform: rotateX(-12deg) rotateZ(-13deg);
}

.pg-ring {
  --pg-card-width: calc(var(--pg-radius) * var(--pg-panel-width, .535) * .998);
  --pg-card-height: calc(var(--pg-card-width) * .666667);
  position: absolute;
  left: 50%;
  top: 49%;
  width: var(--pg-card-width);
  height: var(--pg-card-height);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(-20deg);
  animation: pg-revolve 42s linear infinite;
  will-change: transform;
}

.pg-panel {
  position: absolute;
  inset: 0;
  transform: rotateY(var(--pg-angle)) translateZ(var(--pg-radius));
  transform-style: preserve-3d;
}

.pg-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #a7b9ed52;
  border-radius: 3px;
  background: #0c152c;
  box-shadow: 0 0 1px #e8eeff66, 0 9px 23px #02071445;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(.6px);
}

.pg-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #e4eaff16, transparent 35%, transparent 68%, #02071820);
  pointer-events: none;
}

.pg-face-back {
  transform: rotateY(180deg) translateZ(.6px);
  border-color: #8c9dcc45;
}

.pg-face-back::after {
  background: linear-gradient(160deg, #0b163e30, #080b2245);
}

.pg-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.pg-face .pg-portrait { object-position: center 42%; }

.motion-paused .pg-ring,
.pg-is-paused .pg-ring,
.pg-is-offscreen .pg-ring {
  animation-play-state: paused;
}

@keyframes pg-revolve {
  from { transform: translate(-50%, -50%) rotateY(-20deg); }
  to { transform: translate(-50%, -50%) rotateY(340deg); }
}

@media (max-width: 760px) {
  .project-orbit { max-width: 440px; aspect-ratio: 1.16; }
  .pg-scene { --pg-radius: 38cqw; }
  .pg-ring { top: 48%; }
  .project-orbit::before { inset: 14% -5% 12%; filter: blur(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .pg-ring { animation: none; will-change: auto; }
  .pg-parallax { transform: none; transition: none; }
}