/* Shared electronics 3D stage — shop / seller / rider / admin */
:root {
  --vt3d-phone: #1a2330;
  --vt3d-shadow: #2c211845;
}

.vt3d-stage {
  --tilt-x: 14deg;
  --tilt-y: -22deg;
  position: relative;
  width: min(100%, 480px);
  height: 320px;
  margin-inline: auto;
  perspective: 1100px;
  transform-style: preserve-3d;
  pointer-events: none;
  isolation: isolate;
}

.hero-panel .vt3d-stage {
  --tilt-x: 16deg;
  --tilt-y: -20deg;
  height: 280px;
}

.hero-panel .vt3d-floor {
  background: radial-gradient(ellipse at center, #d4af6a66 0%, #d4af6a18 45%, transparent 72%);
}

.hero-panel .vt3d-glow {
  background: radial-gradient(circle, #d4af6a88, transparent 68%);
}

.vt3d-stage[data-role="seller"] { --tilt-y: 18deg; }
.vt3d-stage[data-role="rider"] { --tilt-x: 10deg; --tilt-y: -14deg; height: 220px; }
.vt3d-stage[data-role="admin"] { --tilt-y: 12deg; height: 200px; width: min(100%, 300px); }

.vt3d-world {
  position: absolute;
  inset: 6% 4%;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  animation: vt3d-float 8s ease-in-out infinite;
}

.vt3d-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #d4a86e66 0%, #e7c27a22 42%, transparent 72%);
  transform: rotateX(80deg) translateZ(-48px);
  filter: blur(2px);
}

.vt3d-phone,
.vt3d-laptop,
.vt3d-buds,
.vt3d-chip,
.vt3d-bag {
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.vt3d-phone {
  width: 96px;
  height: 178px;
  left: 12%;
  top: 10%;
  border-radius: 16px;
  background: linear-gradient(155deg, #3a4658, var(--vt3d-phone) 55%, #0b1016);
  box-shadow:
    22px 34px 48px var(--vt3d-shadow),
    inset 0 0 0 2px #ffffff22,
    inset 0 1px 0 #ffffff33;
  transform: translateZ(64px) rotateY(-10deg);
}

.vt3d-phone::before {
  content: "";
  position: absolute;
  inset: 10px 8px 16px;
  border-radius: 8px;
  background:
    linear-gradient(165deg, #c8e8ff 0%, #6aa8d4 35%, #2a5578 70%, #132230 100%);
  box-shadow: inset 0 0 28px #ffffff44;
}

.vt3d-phone::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 6px;
  height: 3px;
  border-radius: 99px;
  background: #ffffff55;
}

.vt3d-laptop {
  width: 210px;
  height: 132px;
  right: 2%;
  top: 22%;
  transform: translateZ(28px) rotateY(14deg);
}

.vt3d-laptop .lid {
  height: 104px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(160deg, #3a4656, #10161e);
  box-shadow: 16px 24px 40px var(--vt3d-shadow), inset 0 0 0 1px #ffffff18;
  position: relative;
}

.vt3d-laptop .lid::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  background: linear-gradient(140deg, #d4eeff, #5a92b8 50%, #243848);
  box-shadow: inset 0 0 24px #ffffff33;
}

.vt3d-laptop .lid::after {
  content: "";
  position: absolute;
  left: 46%;
  top: 3px;
  width: 8%;
  height: 3px;
  border-radius: 99px;
  background: #ffffff33;
}

.vt3d-laptop .base {
  height: 12px;
  margin-top: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #4a5564, #1a222c);
  transform: translateZ(-8px) rotateX(70deg);
  transform-origin: top;
  box-shadow: 0 20px 28px #2c211838;
}

.vt3d-buds {
  width: 68px;
  height: 68px;
  left: 46%;
  top: 58%;
  border-radius: 18px;
  background: linear-gradient(145deg, #fffaf2, #d9c7a8 60%, #b89a6a);
  box-shadow: 14px 22px 32px var(--vt3d-shadow), inset 0 0 0 1px #ffffffaa;
  transform: translateZ(88px) rotateZ(-14deg);
}

.vt3d-buds::before,
.vt3d-buds::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 26px;
  border-radius: 12px 12px 14px 14px;
  background: linear-gradient(180deg, #fffdf8, #cbb892);
  top: -12px;
  box-shadow: 3px 6px 10px #2c211828;
}

.vt3d-buds::before { left: 10px; transform: rotate(-18deg); }
.vt3d-buds::after { right: 10px; transform: rotate(18deg); }

.vt3d-chip {
  width: 76px;
  height: 76px;
  left: 40%;
  top: 18%;
  border-radius: 12px;
  background:
    linear-gradient(135deg, #4a5a48, #1f2a24 60%),
    repeating-linear-gradient(90deg, transparent 0 8px, #e7c27a28 8px 9px);
  box-shadow: 12px 22px 34px var(--vt3d-shadow), inset 0 0 0 2px #e7c27a66;
  transform: translateZ(70px) rotateZ(16deg);
}

.vt3d-chip::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 5px;
  background: linear-gradient(145deg, #e0c078, #7a4330);
  opacity: .9;
}

.vt3d-bag {
  width: 82px;
  height: 92px;
  left: 34%;
  top: 30%;
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(160deg, #4d7a5c, #243f2e);
  box-shadow: 16px 26px 36px var(--vt3d-shadow);
  transform: translateZ(48px) rotateY(-16deg);
}

.vt3d-bag::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -12px;
  height: 18px;
  border: 3px solid #e7c27a;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

.vt3d-bag::after {
  content: "VT";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e7c27a;
  font: 800 15px/1 Palatino, Georgia, serif;
  letter-spacing: .1em;
}

.vt3d-glow {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #e7c27a77, transparent 68%);
  filter: blur(10px);
  left: 28%;
  top: 16%;
  transform: translateZ(-24px);
  animation: vt3d-pulse 5s ease-in-out infinite;
  z-index: -1;
}

@keyframes vt3d-float {
  0%, 100% { transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0); }
  50% { transform: rotateX(calc(var(--tilt-x) - 3deg)) rotateY(calc(var(--tilt-y) + 5deg)) translateY(-10px); }
}

@keyframes vt3d-pulse {
  0%, 100% { opacity: .4; transform: translateZ(-24px) scale(1); }
  50% { opacity: .85; transform: translateZ(-24px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .vt3d-world,
  .vt3d-glow { animation: none; }
}

@media (max-width: 720px) {
  .vt3d-stage { height: 240px; }
}