/* ==========================================================================
   phone-frame — a rendered device photo with a live screen warped behind it.

   The layout box is the frame asset's natural size, scaled by --pf-scale, so
   the quad coordinates in data-quad stay in plain image pixels. Everything
   inside is positioned in that same pixel space.

   Markup is built by phone-frame.js:

     <div class="pf" data-frame="…" data-quad="…">
       <div class="pf__screen">  …your content, warped…  </div>
       <img class="pf__frame">
       <div class="pf__glass"></div>
     </div>
   ========================================================================== */

.pf {
  --pf-scale: 1;
  --pf-frame-w: 1000px;   /* overwritten from the asset's natural size */
  --pf-frame-h: 1000px;
  /* Strength of the replacement highlight. The reflections a render bakes into
     its screen leave with the transparent hole; this puts a plain one back.
     Set to 0 for a product photo that has its own glass layer. */
  --pf-glass: .06;
  --pf-glass-angle: 112deg;

  position: relative;
  width: calc(var(--pf-frame-w) * var(--pf-scale));
  height: calc(var(--pf-frame-h) * var(--pf-scale));
}

/* The pixel space of the asset. Everything inside is laid out in image pixels
   and the whole thing is scaled once, so the warp stays exact at any size. */
.pf > * {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.pf__frame {
  width: var(--pf-frame-w);
  height: var(--pf-frame-h);
  /* The frame lives in the asset's pixel space and is scaled as a whole. An
     `img { max-width: 100% }` in the host stylesheet — nearly every one has it —
     would squeeze it to the box width while the warped screen follows its own
     maths, and the two would end up offset from each other. */
  max-width: none;
  max-height: none;
  transform: scale(var(--pf-scale));
  pointer-events: none;
  /* The frame is on top of the screen; only its transparent hole lets the
     screen through. */
  z-index: 2;
}

.pf__screen {
  /* width/height/transform are written by the JS: the box is the screen in
     points, the transform is the homography onto the quad. The extra scale
     wrapper would break the warp, so --pf-scale is folded in here. */
  scale: var(--pf-scale);
  transform-box: border-box;
  overflow: hidden;
  background: #000;
  z-index: 1;
  isolation: isolate;
}

.pf__screen > img,
.pf__screen > video,
.pf__screen > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

.pf__glass,
.pf__glass-img {
  scale: var(--pf-scale);
  pointer-events: none;
  z-index: 3;
}

.pf__glass {
  opacity: var(--pf-glass);
  background: linear-gradient(
    var(--pf-glass-angle),
    #fff 0%,
    rgba(255, 255, 255, .25) 14%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 64%,
    rgba(255, 255, 255, .35) 82%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: screen;
}

.pf__glass-img {
  width: var(--pf-frame-w);
  height: var(--pf-frame-h);
  max-width: none;
  max-height: none;
  mix-blend-mode: screen;
}

@supports (mix-blend-mode: plus-lighter) {
  .pf__glass,
  .pf__glass-img { mix-blend-mode: plus-lighter; }
}

/* While the asset is loading, and if it never arrives. A caller that wants to
   fall back to phone-mock hooks mountPhoneFrames(scope, { onError }). */
.pf:not([data-pf-mounted]) {
  visibility: hidden;
}

.pf[data-pf-failed] {
  display: none;
}