/*!
 * iphone-scroll.css
 * Deliberately background-free: the component must composite over whatever
 * the host page puts behind it. Do not add a background to .iphone-scroll,
 * .iphone-scroll__stage or the canvas.
 */

.iphone-scroll {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;          /* never paint a background here */
  /* the component is decorative: let touch scrolling pass straight through */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.iphone-scroll__stage {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.iphone-scroll__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
  pointer-events: none;
  /* stops mobile browsers from compositing the canvas onto an opaque layer */
  will-change: transform;
}

/* Poster: shown while the GLB downloads, and permanently if WebGL is missing. */
.iphone-scroll__poster {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 1;
  /* short on purpose: poster and rendered phone are not in the same place,
     so a long crossfade shows two phones at once */
  transition: opacity 140ms linear;
  pointer-events: none;
  user-select: none;
}

.iphone-scroll.is-ready .iphone-scroll__poster {
  opacity: 0;
}

/* While the 3D is loading, the poster sits exactly where the phone comes to
   rest, instead of in the middle of the stage. Otherwise the handover shows
   the still phone and the rendered one about 200px apart — two phones, one
   above the other.

   The numbers follow the component's own options and nothing else:
     top = 1 - heightRatio + (1 - startVisibleRatio) * heightRatio
   With the defaults (0.80 and 0.75) that is 40%, and 53.5% below the mobile
   breakpoint, where heightRatio becomes mobileHeightRatio (0.62).
   Change those options and these two numbers follow. */
.iphone-scroll.is-booting .iphone-scroll__poster {
  top: 40%;
  max-height: 80%;
  transform: translate(-50%, 0);
}

@media (max-width: 767px) {
  .iphone-scroll.is-booting .iphone-scroll__poster {
    top: 53.5%;
    max-height: 62%;
  }
}

/* WebGL unavailable / model failed: keep the poster, drop the dead canvas. */
.iphone-scroll.is-fallback .iphone-scroll__canvas {
  display: none;
}

.iphone-scroll.is-fallback .iphone-scroll__poster {
  opacity: 1 !important;
}

/* GSAP's pin wrapper must stay transparent too. */
.iphone-scroll-pin-spacer,
.pin-spacer {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .iphone-scroll__poster {
    transition: none;
  }
}

/* Debug elevations (?debug=1) — never rendered in normal use. */
.iphone-scroll__debug {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.iphone-scroll.is-debug .iphone-scroll__poster {
  display: none;
}

/* Live site on the display: a real iframe on a CSS3D layer BEHIND the canvas.
   The display mesh is a depth-only hole, so the canvas is transparent exactly
   over the screen and the chassis still occludes the page. */
.iphone-scroll__site {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;          /* the wheel must reach the host page */
}

.iphone-scroll__canvas {
  z-index: 1;
}

.iphone-scroll__frame {
  border: 0;
  display: block;
  background: #fff;
  pointer-events: none;
}

.iphone-scroll__screen {
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  pointer-events: none;
}