#landing-atmosphere {
  position: absolute;
  z-index: 0;
  top: var(--landing-atmosphere-start, 100vh);
  right: 0;
  left: 0;
  height: var(--landing-atmosphere-height, 0);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.landing-atmosphere-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

html body section[data-screen-label="Feature matrix"] {
  position: relative;
  z-index: 1;
  background-color: #fff !important;
  background-image: none !important;
}

.landing-atmosphere-scene {
  position: absolute;
  height: auto;
  aspect-ratio: 1.7692307692;
  overflow: visible;
  -webkit-mask-image: radial-gradient(
    ellipse 68% 70% at center,
    #000 34%,
    rgba(0, 0, 0, 0.82) 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 68% 70% at center,
    #000 34%,
    rgba(0, 0, 0, 0.82) 58%,
    transparent 100%
  );
  mix-blend-mode: multiply;
  transform-origin: center;
}

.landing-atmosphere-scene--upper-right {
  top: var(--landing-scene-top, 19%);
  right: clamp(-20px, 4vw, 80px);
  width: min(980px, 90vw);
  opacity: 0.98;
  transform: translateY(-50%) scaleX(-1) scale(1.35);
}

.landing-atmosphere-scene--bottom-center {
  top: var(--landing-scene-top, 77%);
  left: var(--landing-scene-left, 50%);
  width: min(1280px, 115vw);
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(-1) scale(1.5);
}

.landing-atmosphere-scene canvas {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  filter: url("#landing-muted-brand-blue");
}

.landing-atmosphere-scene::before {
  position: absolute;
  z-index: 2;
  inset: -8%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='sand'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sand)' opacity='.68'/%3E%3C/svg%3E");
  background-position: 0 0;
  background-size: 180px 180px;
  content: "";
  mask-image: radial-gradient(
    ellipse at center,
    rgb(0 0 0 / 0.9) 0%,
    rgb(0 0 0 / 0.58) 43%,
    transparent 76%
  );
  filter: url("#landing-muted-brand-blue");
  mix-blend-mode: multiply;
  opacity: 0.36;
  pointer-events: none;
  animation: landing-sand-drift 13s steps(8, end) infinite alternate;
}

@keyframes landing-sand-drift {
  from {
    background-position: 0 0;
    transform: translate3d(-0.8%, -0.4%, 0);
  }

  to {
    background-position: 71px 43px;
    transform: translate3d(0.9%, 0.6%, 0);
  }
}

body {
  isolation: isolate;
}

body.landing-atmosphere-ready #landing-atmosphere {
  opacity: 1;
}

#dc-root {
  position: relative;
  z-index: 1;
}

div[data-screen-label="First page"] {
  isolation: isolate;
  background: transparent;
}

div[data-screen-label="First page"] > header,
div[data-screen-label="First page"] > section,
div[data-screen-label="First page"] > footer {
  position: relative;
  z-index: 1;
}

div[data-screen-label="First page"] > header {
  z-index: 2;
  background-color: #09090b;
}

div[data-screen-label="First page"] > section[data-screen-label="Validation"] {
  z-index: 2;
  background: #fff !important;
}

div[data-screen-label="First page"]
  > section[data-screen-label]:not([data-screen-label="Validation"]):not(
    [data-screen-label="Problem"]
  ):not([data-screen-label="Hosted runtime"]):not(
    [data-screen-label="Wallet agnostic"]
  ):not([data-screen-label="Feature matrix"]) {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.64) 20%,
    rgba(255, 255, 255, 0.88) 38%,
    rgba(255, 255, 255, 0.88) 62%,
    rgba(255, 255, 255, 0.64) 80%,
    rgba(255, 255, 255, 0.18) 100%
  ) !important;
}

div[data-screen-label="First page"]
  > section[data-screen-label="Feature matrix"] {
  background: #fff !important;
}

@media (max-width: 900px) {
  .landing-atmosphere-scene--upper-left {
    left: -190px;
    width: 460px;
    opacity: 0.34;
  }

  .landing-atmosphere-scene--upper-right {
    right: -80px;
    width: 680px;
    opacity: 0.5;
    transform: translateY(-50%) scaleX(-1) scale(1.2);
  }

  .landing-atmosphere-scene--middle-left {
    left: -120px;
    width: 420px;
    opacity: 0.34;
  }

  .landing-atmosphere-scene--lower-right {
    right: -80px;
    width: 380px;
    opacity: 0.3;
  }

  .landing-atmosphere-scene--bottom-left {
    left: -480px;
    width: 860px;
    opacity: 0.52;
    transform: translateY(-50%) scaleX(-1) scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  #landing-atmosphere {
    transition: none;
  }
}