html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Persistent logo copy above the opaque overlay. */
.bazoof-ufo-logo-clone {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateZ(0);
  view-transition-name: bazoof-persistent-logo;
}

.bazoof-ufo-logo-clone.is-visible {
  opacity: 1;
  visibility: visible;
}

.bazoof-ufo-logo-clone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1 !important;
  filter: none !important;
}

::view-transition-group(bazoof-persistent-logo) {
  z-index: 2147483647;
  animation: none !important;
}

::view-transition-old(bazoof-persistent-logo),
::view-transition-new(bazoof-persistent-logo) {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.bazoof-ufo-content-leaving #ajax-content-wrap {
  animation: bazoof-content-out calc(var(--bazoof-ufo-duration) * .76) ease forwards;
}

body.bazoof-ufo-content-arriving #ajax-content-wrap {
  animation: bazoof-content-in calc(var(--bazoof-ufo-duration) * .48) ease both;
}

#bazoof-ufo-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  background: transparent;
  transition: visibility 0s linear .01s;
}



/* Opaque blue field expanding from, and collapsing into, the top centre. */
.bazoof-ufo-circle-reveal {
  position: absolute;
  left: 50%;
  top: 0;
  width: 220vmax;
  height: 220vmax;
  margin: 0;
  border-radius: 50%;
  background: var(--bazoof-ufo-bg);
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

#bazoof-ufo-overlay.is-circle-expanding .bazoof-ufo-circle-reveal {
  animation: bazoof-circle-expand calc(var(--bazoof-ufo-duration) * .78)
             cubic-bezier(.20,.72,.26,1) forwards;
}

#bazoof-ufo-overlay.is-circle-full .bazoof-ufo-circle-reveal {
  transform: translate(-50%, -50%) scale(1);
}

#bazoof-ufo-overlay.is-circle-collapsing .bazoof-ufo-circle-reveal {
  animation: bazoof-circle-collapse calc(var(--bazoof-ufo-duration) * .78)
             cubic-bezier(.62,0,.80,.28) forwards;
}

@keyframes bazoof-circle-expand {
  from { transform: translate(-50%, -50%) scale(0); }
  to   { transform: translate(-50%, -50%) scale(1); }
}

@keyframes bazoof-circle-collapse {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(0); }
}
#bazoof-ufo-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bazoof-ufo-wash {
  z-index: 1;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 24%, rgba(48,84,162,.22), transparent 42%),
    linear-gradient(180deg, rgba(16,43,98,.50), rgba(16,43,98,.78));
  opacity: 0;
  transition: opacity calc(var(--bazoof-ufo-duration) * .28) ease;
}

#bazoof-ufo-overlay.is-active .bazoof-ufo-wash {
  opacity: 1;
}

.bazoof-ufo-stage {
  z-index: 2;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  overflow: hidden;
}

.bazoof-ufo-ship-wrap {
  position: relative;
  width: min(36vw,470px);
  margin-top: max(24px,3vh);
  transform: translate3d(-60vw,-35vh,0) rotate(-7deg) scale(.86);
  opacity: 0;
  will-change: transform,opacity;
}

.bazoof-ufo-ship {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.26));
  user-select: none;
  -webkit-user-drag: none;
}

.bazoof-ufo-glow {
  position: absolute;
  left: 50%;
  top: 94.25%;
  z-index: 1;
  width: 31%;
  aspect-ratio: 2/1;
  transform: translate(-50%,-50%) scale(.65);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse at center,rgba(190,236,84,.52),rgba(74,192,190,.16) 58%,transparent 76%);
  filter: blur(10px);
  transition: opacity .16s ease,transform .22s ease;
}

.bazoof-ufo-beam {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 94.25%;
  width: 68%;
  height: 115vh;
  transform-origin: 50% 0;
  transform: translateX(-50%) scaleY(.02);
  opacity: 0;
  clip-path: polygon(28% 0,72% 0,100% 100%,0 100%);
  background:
    linear-gradient(
      180deg,
      rgba(155,224,0,.96) 0%,
      rgba(155,224,0,.82) 4%,
      rgba(111,207,94,.62) 24%,
      rgba(46,167,191,.30) 66%,
      rgba(46,167,191,0) 100%
    );
  filter: drop-shadow(0 0 18px rgba(166,206,64,.24));
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.88) 4%,
    #000 12%,
    #000 88%,
    rgba(0,0,0,.88) 96%,
    transparent 100%
  );
}

#bazoof-ufo-overlay.is-gliding-in .bazoof-ufo-ship-wrap {
  animation: bazoof-ufo-in calc(var(--bazoof-ufo-duration) * .58) cubic-bezier(.18,.72,.24,1) forwards;
}

#bazoof-ufo-overlay.is-settled .bazoof-ufo-ship-wrap {
  transform: translate3d(0,18vh,0) rotate(0) scale(1);
  opacity: 1;
}

#bazoof-ufo-overlay.is-beaming .bazoof-ufo-beam {
  animation: bazoof-beam-open calc(var(--bazoof-ufo-duration) * .26) ease forwards;
}

#bazoof-ufo-overlay.is-beaming .bazoof-ufo-glow {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

#bazoof-ufo-overlay.is-gliding-out .bazoof-ufo-ship-wrap {
  animation: bazoof-ufo-out calc(var(--bazoof-ufo-duration) * .42) cubic-bezier(.55,.05,.72,.28) forwards;
}

#bazoof-ufo-overlay.is-gliding-out .bazoof-ufo-beam {
  animation: bazoof-beam-close calc(var(--bazoof-ufo-duration) * .24) ease forwards;
}

@keyframes bazoof-content-out {
  from { opacity:1; filter:blur(0); }
  to { opacity:0; filter:blur(7px); }
}

@keyframes bazoof-content-in {
  from { opacity:0; filter:blur(7px); }
  to { opacity:1; filter:blur(0); }
}

@keyframes bazoof-ufo-in {
  0% { transform:translate3d(-60vw,-35vh,0) rotate(-7deg) scale(.86);opacity:0 }
  72% { transform:translate3d(-1vw,19vh,0) rotate(.6deg) scale(1.01);opacity:1 }
  100% { transform:translate3d(0,18vh,0) rotate(0) scale(1);opacity:1 }
}

@keyframes bazoof-ufo-out {
  0% { transform:translate3d(0,18vh,0) rotate(0) scale(1);opacity:1 }
  100% { transform:translate3d(54vw,-30vh,0) rotate(6deg) scale(.9);opacity:0 }
}

@keyframes bazoof-beam-open {
  from { transform:translateX(-50%) scaleY(.02);opacity:0 }
  to { transform:translateX(-50%) scaleY(1);opacity:.72 }
}

@keyframes bazoof-beam-close {
  from { transform:translateX(-50%) scaleY(1);opacity:.72 }
  to { transform:translateX(-50%) scaleY(.02);opacity:0 }
}

@media(max-width:782px){
  .bazoof-ufo-ship-wrap{width:min(70vw,390px);margin-top:max(44px,8vh)}
  #bazoof-ufo-overlay.is-settled .bazoof-ufo-ship-wrap{transform:translate3d(0,16vh,0) scale(1)}
  .bazoof-ufo-beam{width:68%;height:112vh}
  @keyframes bazoof-ufo-in{
    0%{transform:translate3d(-80vw,-26vh,0) rotate(-7deg) scale(.86);opacity:0}
    72%{transform:translate3d(-1vw,17vh,0) rotate(.6deg) scale(1.01);opacity:1}
    100%{transform:translate3d(0,16vh,0) rotate(0) scale(1);opacity:1}
  }
  @keyframes bazoof-ufo-out{
    0%{transform:translate3d(0,16vh,0) rotate(0) scale(1);opacity:1}
    100%{transform:translate3d(76vw,-24vh,0) rotate(6deg) scale(.9);opacity:0}
  }
}

@media(prefers-reduced-motion:reduce){
  body.bazoof-ufo-content-leaving #ajax-content-wrap,
  body.bazoof-ufo-content-arriving #ajax-content-wrap,
  .bazoof-ufo-ship-wrap,.bazoof-ufo-beam{animation:none!important}
}