/* Shared by the image block in the builder and on published pages. */
@media (hover: hover) and (pointer: fine) {
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover]:not([data-image-hover="none"]) {
    transition:transform .35s ease,box-shadow .35s ease;
  }
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame):is([data-image-hover="zoom"],[data-image-hover="pan"])>img {
    transition:transform .6s cubic-bezier(.2,.65,.3,1);
  }
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="pan"]>img {transform:scale(1.05) translateX(-1%)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="zoom"]:is(:hover,:focus-within)>img {transform:scale(1.045)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="pan"]:is(:hover,:focus-within)>img {transform:scale(1.05) translateX(1%)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="lift"]:is(:hover,:focus-within) {transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.14)}
  :is(.sp-responsive-image,.sbe-responsive_image):has([data-image-hover="lift"]) {overflow:visible}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame):is([data-image-hover="dim"],[data-image-hover="frame"])::after {
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  }
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="dim"]::after {background:rgba(0,0,0,.14)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="frame"]::after {inset:16px;border-radius:0;border:1px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame):is([data-image-hover="dim"],[data-image-hover="frame"]):is(:hover,:focus-within)::after {opacity:1}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="caption"]>:is(.sp-image-overlay-content,.sbe-image-overlay-content)>:is(h2,.sp-rich-text,.sbe-text) {transition:transform .4s cubic-bezier(.2,.65,.3,1)}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover="caption"]:is(:hover,:focus-within)>:is(.sp-image-overlay-content,.sbe-image-overlay-content)>:is(h2,.sp-rich-text,.sbe-text) {transform:translateY(-5px)}
}
/* The editor's phone canvas previews the same static state as a touch screen. */
.sbe-sheet.mobile .sbe-image-overlay-frame[data-image-hover],
.sbe-sheet.mobile .sbe-image-overlay-frame[data-image-hover]>img,
.sbe-sheet.mobile .sbe-image-overlay-frame[data-image-hover]>.sbe-image-overlay-content>* {transform:none!important;transition:none!important;box-shadow:none!important}
.sbe-sheet.mobile .sbe-image-overlay-frame[data-image-hover]::after {display:none!important}
@media (prefers-reduced-motion: reduce) {
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover],
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover]>img,
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover]>:is(.sp-image-overlay-content,.sbe-image-overlay-content)>* {transform:none!important;transition:none!important}
  :is(.sp-image-overlay-frame,.sbe-image-overlay-frame)[data-image-hover]::after {transition:none!important}
}