.base-phone-3d {
  --phone-3d-w: 262px;
  --phone-3d-r: 46px;
  --phone-3d-depth: 1.2px;
  --phone-3d-tilt: rotateY(-20deg) rotateX(6deg) rotateZ(1.5deg);
  --phone-3d-glow: var(--primary, #fb596e);
  --phone-3d-screen-bg: #ffffff;
  --phone-3d-status-color: #1b1718;
  position: relative;
  display: inline-block;
  padding: 20px 40px 50px;
  perspective: 1600px;
}

.base-phone-3d--glow::before {
  content: '';
  position: absolute;
  inset: -8% -30% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--phone-3d-glow) 30%, transparent),
    color-mix(in srgb, var(--phone-3d-glow) 12%, transparent) 55%,
    transparent
  );
  pointer-events: none;
}

.base-phone-3d__device {
  position: relative;
  width: var(--phone-3d-w);
  aspect-ratio: 1206 / 2622;
  transform: var(--phone-3d-tilt);
  transform-style: preserve-3d;
}

.base-phone-3d--float .base-phone-3d__device {
  animation: base-phone-3d-float 6s ease-in-out infinite;
}

@keyframes base-phone-3d-float {
  0%,
  100% {
    transform: var(--phone-3d-tilt) translateY(0);
  }
  50% {
    transform: var(--phone-3d-tilt) translateY(-10px);
  }
}

.base-phone-3d__slice {
  position: absolute;
  inset: 0;
  border-radius: var(--phone-3d-r);
  background: linear-gradient(
    90deg,
    #8d9097 0%,
    #4b4e54 6%,
    #2b2d31 50%,
    #4b4e54 94%,
    #8d9097 100%
  );
}

.base-phone-3d__slice[data-z='-12'] {
  transform: translateZ(calc(-12 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-11'] {
  transform: translateZ(calc(-11 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-10'] {
  transform: translateZ(calc(-10 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-9'] {
  transform: translateZ(calc(-9 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-8'] {
  transform: translateZ(calc(-8 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-7'] {
  transform: translateZ(calc(-7 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-6'] {
  transform: translateZ(calc(-6 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-5'] {
  transform: translateZ(calc(-5 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-4'] {
  transform: translateZ(calc(-4 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-3'] {
  transform: translateZ(calc(-3 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-2'] {
  transform: translateZ(calc(-2 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='-1'] {
  transform: translateZ(calc(-1 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='1'] {
  transform: translateZ(calc(1 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='2'] {
  transform: translateZ(calc(2 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='3'] {
  transform: translateZ(calc(3 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='4'] {
  transform: translateZ(calc(4 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='5'] {
  transform: translateZ(calc(5 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='6'] {
  transform: translateZ(calc(6 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='7'] {
  transform: translateZ(calc(7 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='8'] {
  transform: translateZ(calc(8 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='9'] {
  transform: translateZ(calc(9 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='10'] {
  transform: translateZ(calc(10 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='11'] {
  transform: translateZ(calc(11 * var(--phone-3d-depth)));
}

.base-phone-3d__slice[data-z='12'] {
  transform: translateZ(calc(12 * var(--phone-3d-depth)));
}

.base-phone-3d__slice:first-child {
  background: linear-gradient(135deg, #3a3c41, #1d1e21 60%, #34363a);
}

.base-phone-3d__key {
  position: absolute;
  width: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #9a9da4, #3e4046);
}

.base-phone-3d__key--a,
.base-phone-3d__key--b,
.base-phone-3d__key--c {
  left: -10px;
  transform: rotateY(-90deg);
  transform-origin: right center;
}

.base-phone-3d__key--a {
  top: 17%;
  height: 4%;
}

.base-phone-3d__key--b {
  top: 25%;
  height: 8%;
}

.base-phone-3d__key--c {
  top: 35%;
  height: 8%;
}

.base-phone-3d__key--d {
  top: 28%;
  right: -10px;
  height: 12%;
  transform: rotateY(90deg);
  transform-origin: left center;
}

.base-phone-3d__front {
  position: absolute;
  inset: 0;
  padding: 9px;
  border-radius: var(--phone-3d-r);
  background: #0b0b0c;
  box-shadow:
    inset 0 0 0 1.5px #6e7178,
    inset 0 0 0 3px #1a1b1e;
  transform: translateZ(calc(12.5 * var(--phone-3d-depth)));
}

.base-phone-3d__glass {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--phone-3d-r) - 9px);
  background: var(--phone-3d-screen-bg);
}

.base-phone-3d__screen {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: scale(1.02);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.base-phone-3d__screen.is-active {
  opacity: 1;
  transform: none;
}

.base-phone-3d__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.base-phone-3d .base-phone-3d__shot--dark {
  display: none !important;
}

body.theme-dark .base-phone-3d .base-phone-3d__shot--light {
  display: none !important;
}

body.theme-dark .base-phone-3d .base-phone-3d__shot--dark {
  display: block !important;
}

.base-phone-3d__status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--phone-3d-w) * 0.154);
  padding: 0 7% 0 10%;
  box-sizing: border-box;
  color: var(--phone-3d-status-color);
  font-family: -apple-system, 'SF Pro Text', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: calc(var(--phone-3d-w) * 0.048);
  line-height: 1;
  pointer-events: none;
}

.base-phone-3d__icons {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--phone-3d-w) * 0.014);
}

.base-phone-3d__icons svg {
  width: auto;
  height: calc(var(--phone-3d-w) * 0.04);
  fill: currentColor;
}

.base-phone-3d__shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 28%,
    transparent 42%
  );
  pointer-events: none;
}

.base-phone-3d__shadow {
  position: absolute;
  right: 0;
  bottom: 14px;
  left: 8%;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.35), transparent);
  filter: blur(6px);
  transform: translateX(34px) scaleX(1.1);
  pointer-events: none;
}

body.theme-dark .base-phone-3d__shadow {
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
}

@media (max-width: 640px) {
  .base-phone-3d {
    --phone-3d-w: 210px;
    --phone-3d-r: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .base-phone-3d--float .base-phone-3d__device {
    animation: none;
  }

  .base-phone-3d__screen {
    transition: none;
  }
}