/* Phenome redesign, the 3D phone (apple/phone3d.js, apple/phone3d.module.js).

   The canvas stands over the host element and past its edges, so a turning
   phone and its reflection are never cut off; the host and its ancestors
   must let it overflow. While the 3D phone shows, whatever the host holds (a
   2D phone, an image) stays in the layout, unseen, so scripts that measure it
   keep working. The host should not paint a phone on its own box. */

.p3d-gl {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.25, .46, .45, .94);
}
.p3d-on > .p3d-gl { opacity: 1; }
/* The host's own content (a flat screenshot) stays hidden, whatever section
   reveal applies to it, until phone3d.js marks the host .p3d-flat because the
   3D phone will not come. Otherwise the 3D phone fades into the empty place. */
[data-phone3d]:not(.p3d-flat) > :not(.p3d-gl) { opacity: 0 !important; }
.p3d-flat > :not(.p3d-gl) { transition: opacity .5s ease; }
.p3d-on > :not(.p3d-gl) { opacity: 0 !important; transition: opacity .4s ease; }
.p3d-done > :not(.p3d-gl) { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .p3d-gl,
  .p3d-on > :not(.p3d-gl) { transition: none; }
}