html,
html.intro-pending,
html.intro-playing {
  background: #fcfdff;
}
body,
html.intro-pending body,
html.intro-playing body {
  background: transparent !important;
  isolation: isolate;
}
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 34% 62%, rgb(142 195 250/32%), transparent 53%),
    radial-gradient(ellipse at 72% 30%, rgb(183 216 252/27%), transparent 52%),
    radial-gradient(ellipse at 66% 84%, rgb(242 215 198/20%), transparent 55%);
  transform-origin: center;
  animation: ambient-sky-drift 64s ease-in-out infinite alternate;
  will-change: transform;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/assets/images/background/vidrio-esmerilado.jpg) center/cover no-repeat;
  opacity: 0.12;
  filter: grayscale(1);
}
body .site-shell,
body main,
body main > .section,
body .hero,
body .intro-stage,
body .journey-stage,
body .portrait-collage,
body .collage-stage,
body .page-continuation,
body .section-opening,
body.blog-page .site-header,
body.blog-page .blog-controls,
html.intro-pending .site-shell,
html.intro-playing .site-shell {
  background: transparent !important;
}
@keyframes ambient-sky-drift {
  0% {
    transform: translate3d(-6%, 4%, 0) scale(1.02);
  }
  38% {
    transform: translate3d(5%, -5%, 0) scale(1.08);
  }
  72% {
    transform: translate3d(6%, 5%, 0) scale(1.03);
  }
  100% {
    transform: translate3d(-4%, -4%, 0) scale(1.06);
  }
}
@media (max-width: 899px) {
  body::before {
    animation-duration: 76s;
  }
}
html[data-motion='paused'] body::before {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    transform: none;
    will-change: auto;
  }
}
@media print {
  body::before,
  body::after {
    display: none;
  }
  html {
    background: #fff;
  }
}
body main > .mobile-contact-invite {
  background: linear-gradient(145deg, rgb(255 255 255/52%), rgb(232 235 241/28%)) !important;
  border-top: 1px solid rgb(255 255 255/88%);
  border-bottom: 1px solid rgb(255 255 255/70%);
  box-shadow:
    inset 0 1px 0#fff,
    inset 0-1px 0 rgb(255 255 255/55%),
    0 12px 26px rgb(39 43 56/10%),
    0 0 25px rgb(204 214 233/25%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body .site-footer.studio-footer {
  background: #101010 !important;
}
@media (max-width: 899px) {
  body main > .mobile-contact-invite {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}