/* Interactive high-definition presentation for the pixel-art switcher. */
.f34-page .f34-3d-scene {
  --rx: 1deg;
  --ry: -7deg;
  --gx: 68%;
  --gy: 30%;
  position: relative;
  z-index: 2;
  width: min(520px, 94%);
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
  perspective: 1050px;
  outline: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.f34-page .f34-3d-scene:active { cursor: grabbing; }
.f34-page .f34-3d-card {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, -2px, 34px);
  transition: transform .16s cubic-bezier(.2,.75,.2,1);
  will-change: transform;
  backface-visibility: visible;
}
.f34-page .f34-3d-card > img {
  position: relative !important;
  z-index: 3;
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  filter: drop-shadow(0 34px 26px rgba(0,0,0,.56)) drop-shadow(0 0 24px rgba(123,44,255,.28)) !important;
  transform: translateZ(24px) !important;
  animation: none !important;
  user-select: none;
  pointer-events: none;
}
.f34-page .f34-3d-depth {
  display: none;
}
.f34-page .f34-3d-glare {
  position: absolute;
  z-index: 4;
  inset: 8% 7% 10% 8%;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.23), rgba(255,255,255,.055) 19%, transparent 45%);
  opacity: .34;
  transform: translateZ(32px);
  pointer-events: none;
}
.f34-page .image-demo::before {
  width: min(580px, 96%) !important;
  filter: blur(32px) !important;
  opacity: .78;
}
@media (max-width: 820px) {
  .f34-page .f34-3d-scene { width: min(460px, 92vw); }
}
@media (max-width: 560px), (prefers-reduced-motion: reduce) {
  .f34-page .f34-3d-card { transform: rotateX(1deg) rotateY(-5deg) translateZ(20px); transition: none; }
  .f34-page .f34-3d-glare { opacity: .3; }
}