/* Official device bezel swap-in. OFF by default (no Apple artwork is bundled in this site).
   To use an Apple-provided bezel PNG after the licence click-through (see NOTES.md > Device bezel):
   1) put the PNG at assets/img/bezel/iphone-bezel.png
   2) set the five variables below from the PNG (CSS px = file px / its scale factor)
   3) add class="official-bezel" to <html>
   With the class on, tilt, drag-and-throw, gloss, specular and glow are switched off, because Apple's marketing
   guidelines say product images are used "as is" with no added reflections, shadows, highlights, tilting or animation. */
:root{
 /* --bezel-src:url("../img/bezel/iphone-bezel.png");  set after dropping Apple artwork */
 --bezel-src:none;
 --bezel-w:444px;   /* full bezel image width in CSS px */
 --bezel-h:916px;   /* full bezel image height in CSS px */
 --bezel-ox:21px;   /* screen opening offset from image left */
 --bezel-oy:21px;   /* screen opening offset from image top */
 --bezel-r:62px;    /* screen corner radius in CSS px */
}
html.official-bezel .dev-official{display:block;position:absolute;z-index:100;pointer-events:none;left:calc(13px - var(--bezel-ox));top:calc(13px - var(--bezel-oy));width:var(--bezel-w);height:var(--bezel-h);background:var(--bezel-src) center/100% 100% no-repeat}
html.official-bezel .dev-edge,html.official-bezel .dev-body,html.official-bezel .dev-chamfer,html.official-bezel .dev-lip,html.official-bezel .dev-ant,html.official-bezel .dev-bezel,html.official-bezel .dev-btn,html.official-bezel .dev-glow,html.official-bezel .dev-shadow,html.official-bezel .dev-gloss,html.official-bezel .dev-spec,html.official-bezel .dev-island{display:none}
html.official-bezel .dev-screen{clip-path:none;border-radius:var(--bezel-r)}