/* HeyScale: atmósfera compartida por las páginas secundarias. */
html.page-shell-root {
  background: #0b0b0b;
  --visual-viewport-height: 100dvh;
}

body.page-shell {
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent !important;
  isolation: isolate;
}

body.page-shell > .hero__floating-lines {
  position: fixed;
  top: -2px;
  right: -2px;
  bottom: auto;
  left: -2px;
  z-index: -1;
  width: calc(100% + 4px);
  height: 100vh;
  height: 100dvh;
  height: calc(var(--visual-viewport-height, 100dvh) + 4px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1);
  background-image:
    radial-gradient(ellipse 115% 52% at -12% 48%, transparent 46%, rgba(0,255,136,.20) 47%, transparent 48.2%, transparent 53%, rgba(29,62,255,.22) 54%, transparent 55.2%),
    radial-gradient(ellipse 120% 58% at 112% 34%, transparent 49%, rgba(29,62,255,.18) 50%, transparent 51.2%, transparent 56%, rgba(0,255,136,.13) 57%, transparent 58.2%),
    linear-gradient(145deg, rgba(29,62,255,.06), transparent 46%, rgba(0,255,136,.035));
  background-size: 118% 100%, 124% 100%, 100% 100%;
  background-position: center;
}

html.floating-lines-ready body.page-shell > .hero__floating-lines {
  background-image: none;
  opacity: .11;
}

html.floating-lines-ready.floating-lines-hero body.page-shell > .hero__floating-lines {
  opacity: .38;
}

html.floating-lines-fallback body.page-shell > .hero__floating-lines {
  opacity: .12;
  animation: siteFloatingLinesFallback 16s ease-in-out infinite alternate;
}

body.page-shell .cursor-glow,
body.page-shell .vec-parallax-layer,
body.page-shell > .orb,
body.page-shell .com-hero__bg {
  display: none !important;
}

body.page-shell .com-section--dark {
  background: transparent !important;
}

@keyframes siteFloatingLinesFallback {
  from { background-position: 48% 50%, 52% 50%, center; }
  to { background-position: 53% 47%, 47% 54%, center; }
}

@media (prefers-reduced-motion: reduce) {
  html.floating-lines-ready.floating-lines-hero body.page-shell > .hero__floating-lines,
  html.floating-lines-fallback body.page-shell > .hero__floating-lines {
    opacity: .24;
    animation: none;
  }
}
