/* Disable the previous theme preloader when this plugin is active. */
#ddx-preloader { display: none !important; }

.dd-previsit {
  position: fixed;
  inset: 0;
  z-index: 99990;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  isolation: isolate;
}

.dd-previsit__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgb(247, 247, 245);
  opacity: 1;
  transition: opacity 1.05s cubic-bezier(.22,.72,.24,1);
}

.dd-previsit__window {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(11,11,13,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  opacity: 0;
  transform: translate3d(0,18px,0) scale(.94);
  filter: saturate(.96);
  box-shadow: 0 14px 55px rgba(0,0,0,.07);
  transition:
    opacity .7s cubic-bezier(.22,.72,.24,1),
    transform 1.1s cubic-bezier(.22,.72,.24,1),
    filter .7s ease;
  will-change: opacity, transform;
}

.dd-previsit__window iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 1000px;
  border: 0;
  transform: translate(-50%, -50%) scale(.42);
  transform-origin: center;
  pointer-events: none;
  background: #f7f7f5;
}

.dd-previsit__window--one {
  width: clamp(210px, 22vw, 360px);
  height: clamp(150px, 23vh, 260px);
  left: 4vw;
  top: 9vh;
  border-radius: 24px 24px 80px 24px;
}
.dd-previsit__window--one iframe { transform: translate(-50%, -50%) scale(.34); }

.dd-previsit__window--two {
  width: clamp(340px, 38vw, 620px);
  height: clamp(220px, 34vh, 390px);
  right: 4vw;
  top: 16vh;
  border-radius: 80px 24px 24px 24px;
}
.dd-previsit__window--two iframe { transform: translate(-50%, -50%) scale(.47); }

.dd-previsit__window--three {
  width: clamp(240px, 27vw, 430px);
  height: clamp(190px, 28vh, 320px);
  left: 14vw;
  bottom: 8vh;
  border-radius: 24px 72px 24px 24px;
}
.dd-previsit__window--three iframe { transform: translate(-50%, -50%) scale(.39); }

.dd-previsit__window--four {
  width: clamp(180px, 18vw, 300px);
  height: clamp(140px, 20vh, 230px);
  right: 16vw;
  bottom: 7vh;
  border-radius: 70px 24px 24px 70px;
}
.dd-previsit__window--four iframe { transform: translate(-50%, -50%) scale(.29); }

.dd-previsit.is-one .dd-previsit__window--one,
.dd-previsit.is-two .dd-previsit__window--two,
.dd-previsit.is-three .dd-previsit__window--three,
.dd-previsit.is-four .dd-previsit__window--four {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

.dd-previsit.is-two .dd-previsit__window--one { transform: translate3d(2vw,-1vh,0) scale(.97); }
.dd-previsit.is-three .dd-previsit__window--two { transform: translate3d(-1.5vw,1vh,0) scale(.985); }
.dd-previsit.is-four .dd-previsit__window--three { transform: translate3d(1vw,-1vh,0) scale(.98); }

.dd-previsit.is-revealing .dd-previsit__veil { opacity: 0; }
.dd-previsit.is-revealing .dd-previsit__window {
  opacity: 0;
  filter: saturate(.8) blur(1px);
}
.dd-previsit.is-revealing .dd-previsit__window--one { transform: translate3d(-5vw,-4vh,0) scale(.91); }
.dd-previsit.is-revealing .dd-previsit__window--two { transform: translate3d(6vw,-2vh,0) scale(.96); }
.dd-previsit.is-revealing .dd-previsit__window--three { transform: translate3d(-3vw,5vh,0) scale(.93); }
.dd-previsit.is-revealing .dd-previsit__window--four { transform: translate3d(4vw,5vh,0) scale(.90); }

/* miniature pages: no admin bar and no recursive preloader */
body.dd-previsit-frame #wpadminbar,
body.dd-previsit-frame #ddx-preloader,
body.dd-previsit-frame #dd-previsit,
body.dd-previsit-frame .ddx-assistant { display: none !important; }
html:has(body.dd-previsit-frame) { margin-top: 0 !important; }
body.dd-previsit-frame { overflow: hidden !important; }

@media (max-width: 760px) {
  .dd-previsit__window--one { left: -5vw; top: 9vh; width: 46vw; height: 24vh; }
  .dd-previsit__window--two { right: -8vw; top: 25vh; width: 68vw; height: 31vh; }
  .dd-previsit__window--three { left: 4vw; bottom: 9vh; width: 54vw; height: 25vh; }
  .dd-previsit__window--four { right: 2vw; bottom: 3vh; width: 34vw; height: 18vh; }
  .dd-previsit__window { border-radius: 16px; }
  .dd-previsit__window iframe { width: 1280px; height: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-previsit__window,
  .dd-previsit__veil { transition-duration: .18s !important; }
}