/* capture-embed.css: host styles for the scripted app-demo iframe. No colour literals. */

/* Default (no iframe mounted): the box is inert layout, the fallback renders as before. */
.capture-box{position:relative}

/* Demo ready: the box takes the demo aspect ratio and the fallback fills it, cropped from the top. */
.capture-live{overflow:hidden;aspect-ratio:var(--capture-ratio,16 / 10)}
.v4-home .capture-live > .screen-zoom{position:absolute;top:0;left:0;width:100%;height:100%;
  transition:opacity var(--capture-fade,350ms) ease,visibility 0s linear var(--capture-fade,350ms)}
.v4-home .capture-live > .screen-zoom picture{display:block;width:100%;height:100%}
.v4-home .capture-live > .screen-zoom img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

.capture-frame{position:absolute;top:0;left:0;border:0;display:block;max-width:none;
  transform-origin:top left;pointer-events:none;opacity:0;
  transition:opacity var(--capture-fade,350ms) ease}

/* Ready: crossfade to the iframe, take the fallback out of the tab order and the hit area. */
.capture-ready > .capture-frame{opacity:1}
.capture-ready > .screen-zoom{opacity:0;visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .v4-home .capture-live > .screen-zoom,.capture-frame{transition:none}
}