.device-scene {
  isolation: isolate;
}

.device-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 64%;
  height: 64%;
  left: 20%;
  top: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 36, 255, .3), rgba(105, 32, 255, .12) 42%, transparent 72%);
  filter: blur(28px);
  animation: ambient-glow 5.5s ease-in-out infinite;
}

.device-mockup {
  display: block;
  width: 112%;
  max-width: none;
  margin: -5% 0 0 -10%;
  mix-blend-mode: screen;
  animation: device-float 6s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes device-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 18px 25px rgba(0, 0, 0, .75));
  }
  50% {
    transform: translateY(-7px) scale(1.004);
    filter: drop-shadow(0 26px 31px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(123, 35, 255, .28));
  }
}

@keyframes ambient-glow {
  0%, 100% { opacity: .58; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .device-mockup, .device-scene::before { animation: none; }
}

@media (max-width: 800px) {
  .device-mockup { width: 108%; margin: -3% 0 0 -5%; }
}

@media (max-width: 480px) {
  .device-mockup { width: 118%; margin: 0 0 0 -10%; }
}