.phone-float-shell,
[data-floating-phone] {
  --phone-float-x: 0px;
  --phone-float-y: 0px;
  --phone-float-z: 0px;
  --phone-float-rx: 0deg;
  --phone-float-ry: 0deg;
  --phone-float-rz: 0deg;
  --phone-float-scale: 1;
  display: inline-block;
  transform-style: preserve-3d;
  perspective: 1200px;
  transform:
    translate3d(var(--phone-float-x), var(--phone-float-y), var(--phone-float-z))
    rotateX(var(--phone-float-rx))
    rotateY(var(--phone-float-ry))
    rotateZ(var(--phone-float-rz))
    scale(var(--phone-float-scale)) !important;
  will-change: transform;
}

.phone-float-shell.is-floating-phone,
[data-floating-phone].is-floating-phone {
  transition: transform 70ms linear;
}

.phone-float-shell.is-floating-phone > .device,
[data-floating-phone].is-floating-phone > .device,
.device.is-floating-phone {
  filter: saturate(calc(1 + var(--phone-float-presence, 0) * .08));
}

.phone-float-shell.is-floating-phone > .device::after,
[data-floating-phone].is-floating-phone > .device::after,
.device.is-floating-phone::after {
  content: '';
  position: absolute;
  inset: 8% 4% auto;
  height: 42%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgb(255 255 255 / .22), transparent 45%);
  opacity: var(--phone-float-shine, .18);
  mix-blend-mode: screen;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .phone-float-shell,
  [data-floating-phone] {
    transform: none !important;
  }
}


.feature-story .phone-float-shell,
.feature-story [data-floating-phone],
.feature-story .phone-float-shell.is-floating-phone,
.feature-story [data-floating-phone].is-floating-phone {
  --phone-float-x: 0px !important;
  --phone-float-y: 0px !important;
  --phone-float-z: 0px !important;
  --phone-float-rx: 0deg !important;
  --phone-float-ry: 0deg !important;
  --phone-float-rz: 0deg !important;
  --phone-float-scale: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
.feature-story .device,
.feature-story .device.is-floating-phone,
.feature-story .phone-float-shell.is-floating-phone > .device {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  filter: none !important;
}

/* Hard lock FeatureStory visuals: no float, hover, transform or filter hops. */
.feature-story .feature-phone-stage,
.feature-story .feature-slide,
.feature-story .feature-slide.is-active,
.feature-story .feature-phone-stage:hover .feature-slide.is-active,
.feature-story .mobile-phone-stage,
.feature-story .mobile-feature-phone,
.feature-story .phone-float-shell,
.feature-story [data-floating-phone],
.feature-story .device {
  transform: none !important;
  transition-property: opacity !important;
  will-change: opacity !important;
  filter: none !important;
}
.feature-story .feature-slide { opacity: 0; }
.feature-story .feature-slide.is-active { opacity: 1; }

.phone-float-shell.is-static-phone,
.phone-float-shell.is-static-phone *,
.phone-float-shell.is-static-phone *::before,
.phone-float-shell.is-static-phone *::after,
[data-float-lock] .phone-float-shell,
[data-float-lock] .phone-float-shell *,
[data-float-lock] .device,
[data-float-lock] .device * {
  transform: none !important;
  rotate: none !important;
  scale: none !important;
  translate: none !important;
  filter: none !important;
  perspective: none !important;
  transform-style: flat !important;
  animation: none !important;
}