/* Keep the video hit area and sound control below the overlaid copy panel. */
html.pv-home-video-device .pv-reference-images {
  isolation:isolate;
}

.pv-home-loop-video { display:none; }
  html.pv-home-video-device .pv-reference-scene:is([data-photo="2"],[data-photo="1"],[data-photo="0"],[data-photo="3"]) .pv-reference-frame {
    animation:none;
    transform:none;
    background:#414247;
  }
  /* Hide the old photograph before the deferred video controller starts. */
  html.pv-home-video-device .pv-reference-scene:is([data-photo="2"],[data-photo="1"],[data-photo="0"],[data-photo="3"]) .pv-reference-image {
    visibility:hidden;
  }
  html.pv-home-video-device .pv-home-loop-video {
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:right center;
    background:#414247;
    opacity:1;
    z-index:1;
    pointer-events:none;
  }
  html.pv-home-video-device .pv-reference-scene:is([data-photo="2"],[data-photo="1"],[data-photo="0"],[data-photo="3"]) .original-effect { display:none; }

/* Fill the existing phone image area with the moving scene. */
@media (max-width:600px) {
  html.pv-home-video-device .pv-home-loop-video {
    object-fit:cover;
    object-position:70% center;
  }
}

/* Match the opening slide's gray field and video edge on every scene. */
@media (min-width:601px) {
  html.pv-home-video-device .pv-reference-scene .pv-home-loop-video,
  html.pv-home-video-device .pv-reference-scene .pv-video-toggle,
  html.pv-home-video-device .pv-reference-images::before {
    inset:0 0 0 auto;
    width:auto;
    height:100%;
    max-width:100%;
    aspect-ratio:1080 / 1450;
  }
  html.pv-home-video-device .pv-reference-scene .pv-home-loop-video {
    object-fit:cover;
  }
  html.pv-home-video-device .pv-reference-images::before {
    content:"";
    position:absolute;
    z-index:2;
    pointer-events:none;
    /* Use the header charcoal for one shared hairline outside the moving picture. */
    box-shadow:-1px 0 0 #27272b;
  }
  html.pv-home-video-device .pv-reference-images::after {
    /* Paint the existing edge fade over the divider as well as the video.
       At equal stack levels, ::after follows ::before in paint order. */
    z-index:2;
  }
}

/* One quiet audio control stays in the lower-right corner of every video. */
.pv-reference-images .pv-video-sound {
  position:absolute;
  right:clamp(24px,3vw,48px);
  bottom:clamp(12px,1.2vw,20px);
  z-index:3;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:#fff;
  background:rgba(39,39,43,.5);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s,border-color .2s;
}
.pv-reference-images .pv-video-sound[hidden] { display:none; }
.pv-video-sound svg { display:block; width:18px; height:18px; pointer-events:none; }
.pv-video-sound .pv-video-sound-off,
.pv-video-sound[data-muted="true"] .pv-video-sound-on { display:none; }
.pv-video-sound[data-muted="true"] .pv-video-sound-off { display:block; }
.pv-reference-images .pv-video-sound:focus-visible { outline:2px solid #fff; outline-offset:3px; }
@media (hover:hover) {
  .pv-reference-images .pv-video-sound:hover { background:rgba(39,39,43,.75); border-color:rgba(255,255,255,.5); }
}
@media (max-width:600px) {
  .pv-reference-images .pv-video-sound { width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .pv-reference-images .pv-video-sound { transition:none; }
}

/* The transparent playback target follows the video, leaving copy and sound controls independent. */
.pv-reference-frame .pv-video-toggle {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#fff;
  z-index:3;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.pv-reference-frame .pv-video-toggle[hidden],
.pv-reference-scene:not(.is-active) .pv-video-toggle { display:none; }
.pv-video-toggle .pv-video-toggle-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(39,39,43,.5);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  pointer-events:none;
}
.pv-video-toggle[data-paused="true"] .pv-video-toggle-icon { opacity:1; }
.pv-video-toggle .pv-video-toggle-icon svg { width:20px; height:20px; margin-left:3px; }
.pv-reference-frame .pv-video-toggle:focus-visible { outline:2px solid #fff; outline-offset:-5px; }
@media (min-width:1600px) and (min-height:700px) {
  .pv-video-toggle .pv-video-toggle-icon { width:calc(52 * var(--pv-opening-unit)); height:calc(52 * var(--pv-opening-unit)); }
  .pv-video-toggle .pv-video-toggle-icon svg { width:calc(20 * var(--pv-opening-unit)); height:calc(20 * var(--pv-opening-unit)); }
}

@media (max-width:600px) {
  /* Keep the paused indicator in the exposed video area above the mobile copy panel. */
  .pv-video-toggle .pv-video-toggle-icon { position:absolute; top:18px; right:24px; width:44px; height:44px; }
}

/* Show the next video immediately when its scene becomes active. */
html.pv-home-video-device .pv-reference-scene {
  transition:none;
}