[data-scroll-depth] {
  --depth-near: 0px;
  --depth-far: 0px;
  --depth-drift: 0px;
  --depth-drift-reverse: 0px;
  --depth-drift-soft: 0px;
  --depth-drift-reverse-soft: 0px;
  --depth-scan: 0px;
  --depth-pointer-x: 0px;
  --depth-pointer-y: 0px;
  --depth-pointer-x-reverse: 0px;
  --depth-pointer-y-reverse: 0px;
  --depth-pointer-x-soft: 0px;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

[data-scroll-depth] > :not(.scroll-depth__scene) {
  position: relative;
  z-index: 1;
}

.scroll-depth__scene {
  position: absolute;
  inset: -120px 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scroll-depth__grid,
.scroll-depth__axis,
.scroll-depth__frame,
.scroll-depth__scan {
  position: absolute;
  display: block;
  will-change: transform;
}

.scroll-depth__grid {
  top: -8%;
  right: -12%;
  width: min(76vw, 1040px);
  height: 128%;
  border-left: 1px solid rgba(10, 50, 90, 0.08);
  background-image:
    linear-gradient(rgba(10, 50, 90, 0.145) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 50, 90, 0.145) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: 0.78;
  mask-image: linear-gradient(90deg, transparent 0%, black 32%, black 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 32%, black 82%, transparent 100%);
  transform: perspective(900px) rotateY(-18deg) rotateZ(-5deg) translate3d(calc(var(--depth-drift) + var(--depth-pointer-x)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
  animation:
    depth-grid-idle 9s linear infinite,
    depth-grid-float 7.2s ease-in-out infinite alternate;
}

.scroll-depth__axis {
  top: 28%;
  right: -4%;
  width: min(62vw, 860px);
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(176, 139, 43, 0.58) 0 36px, transparent 36px 48px);
  opacity: 0.86;
  transform: rotate(-9deg) translate3d(calc(var(--depth-drift-reverse-soft) + var(--depth-pointer-x-reverse)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
  animation:
    depth-axis-idle 3.4s linear infinite,
    depth-axis-float 5.6s ease-in-out infinite alternate;
}

.scroll-depth__axis::before,
.scroll-depth__axis::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(176, 139, 43, 0.7);
  background: rgba(247, 250, 252, 0.92);
}

.scroll-depth__axis::before { left: 18%; }
.scroll-depth__axis::after { right: 21%; }

.scroll-depth__frame {
  right: clamp(28px, 7vw, 120px);
  bottom: 2%;
  width: clamp(180px, 25vw, 390px);
  aspect-ratio: 1.42;
  border: 1px solid rgba(10, 50, 90, 0.13);
  border-right-color: rgba(190, 151, 51, 0.7);
  opacity: 0.8;
  transform: translate3d(calc(var(--depth-drift-soft) + var(--depth-pointer-x-soft)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
  animation: depth-frame-float 6.4s ease-in-out infinite alternate;
}

.scroll-depth__frame::before,
.scroll-depth__frame::after {
  content: "";
  position: absolute;
  background: rgba(10, 50, 90, 0.16);
  will-change: translate;
}

.scroll-depth__scan {
  top: -14%;
  left: 31%;
  width: 1px;
  height: 138%;
  background: linear-gradient(180deg, transparent 0%, rgba(176, 139, 43, 0.22) 18%, rgba(190, 151, 51, 0.78) 52%, rgba(176, 139, 43, 0.22) 82%, transparent 100%);
  opacity: 0.88;
  background-size: 100% 180%;
  transform: rotate(7deg) translate3d(calc(var(--depth-scan) + var(--depth-pointer-x-reverse)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
  animation:
    depth-scan-idle 3.8s ease-in-out infinite alternate,
    depth-scan-float 4.6s ease-in-out infinite alternate;
}

.scroll-depth__scan::after {
  content: "";
  position: absolute;
  top: 52%;
  left: -4px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(176, 139, 43, 0.76);
  background: rgba(250, 244, 225, 0.94);
}

.scroll-depth__frame::before {
  top: 24%;
  right: -12%;
  left: 12%;
  height: 1px;
  animation: depth-frame-horizontal 4.8s ease-in-out infinite alternate;
}

.scroll-depth__frame::after {
  top: -14%;
  right: 24%;
  bottom: 12%;
  width: 1px;
  animation: depth-frame-vertical 5.4s ease-in-out infinite alternate;
}

[data-scroll-depth="flow"] .scroll-depth__grid {
  right: auto;
  left: -18%;
  width: min(72vw, 940px);
  background-size: 72px 36px;
  opacity: 0.42;
  transform: perspective(980px) rotateY(21deg) rotateZ(7deg) translate3d(calc(var(--depth-drift-reverse) + var(--depth-pointer-x-reverse)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
}

[data-scroll-depth="flow"] .scroll-depth__axis {
  top: 66%;
  right: auto;
  left: 3%;
  width: min(68vw, 920px);
  transform: rotate(6deg) translate3d(calc(var(--depth-drift) + var(--depth-pointer-x)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
}

[data-scroll-depth="flow"] .scroll-depth__frame {
  right: auto;
  left: clamp(24px, 8vw, 132px);
  bottom: 12%;
  width: clamp(150px, 20vw, 310px);
}

[data-scroll-depth="flow"] .scroll-depth__scan {
  right: 27%;
  left: auto;
  transform: rotate(-8deg) translate3d(calc(var(--depth-scan) + var(--depth-pointer-x-reverse)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
}

[data-scroll-depth="signal"] .scroll-depth__grid {
  inset: 0 -8% 0 auto;
  width: 72%;
  height: 116%;
  border-left: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(10, 50, 90, 0.085) 0 1px, transparent 1px 31px),
    linear-gradient(90deg, transparent 0 18%, rgba(10, 50, 90, 0.08) 18% 18.15%, transparent 18.15% 48%, rgba(10, 50, 90, 0.08) 48% 48.15%, transparent 48.15% 78%, rgba(10, 50, 90, 0.08) 78% 78.15%, transparent 78.15%);
  background-size: auto;
  opacity: 0.62;
  transform: translate3d(calc(var(--depth-drift) + var(--depth-pointer-x)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
}

[data-scroll-depth="signal"] .scroll-depth__axis {
  top: 42%;
  right: -8%;
  width: 70%;
  transform: translate3d(calc(var(--depth-drift-reverse-soft) + var(--depth-pointer-x-reverse)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
}

[data-scroll-depth="signal"] .scroll-depth__frame {
  right: 9%;
  bottom: 10%;
  width: clamp(150px, 18vw, 270px);
  aspect-ratio: 1;
}

[data-scroll-depth="signal"] .scroll-depth__scan {
  left: 56%;
  transform: translate3d(calc(var(--depth-scan) + var(--depth-pointer-x)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
}

[data-scroll-depth="matrix"] .scroll-depth__grid {
  top: -24%;
  right: -8%;
  width: min(68vw, 900px);
  height: 150%;
  background-size: 34px 34px;
  opacity: 0.5;
  transform: perspective(760px) rotateX(7deg) rotateZ(-3deg) translate3d(calc(var(--depth-drift) + var(--depth-pointer-x)), calc(var(--depth-far) + var(--depth-pointer-y)), 0);
}

[data-scroll-depth="matrix"] .scroll-depth__axis {
  top: 76%;
  width: min(54vw, 720px);
  transform: rotate(-3deg) translate3d(calc(var(--depth-drift-reverse-soft) + var(--depth-pointer-x-reverse)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
}

[data-scroll-depth="matrix"] .scroll-depth__scan {
  left: 44%;
  transform: rotate(3deg) translate3d(calc(var(--depth-scan) + var(--depth-pointer-x)), calc(var(--depth-near) + var(--depth-pointer-y-reverse)), 0);
}

[data-starfield] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

[data-starfield] > :not(.night-field) {
  position: relative;
  z-index: 2;
}

.night-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
}

[data-starfield="quiet"] .night-field {
  opacity: 0.66;
}

@keyframes depth-grid-idle {
  from { background-position: 0 0, 0 0; }
  to { background-position: 104px 52px, 104px 52px; }
}

@keyframes depth-grid-float {
  from { translate: 0 -10px; }
  to { translate: 0 12px; }
}

@keyframes depth-axis-idle {
  from { background-position-x: 0; }
  to { background-position-x: 192px; }
}

@keyframes depth-axis-float {
  from { translate: -12px -5px; }
  to { translate: 14px 7px; }
}

@keyframes depth-scan-idle {
  from { background-position-y: 0%; }
  to { background-position-y: 100%; }
}

@keyframes depth-scan-float {
  from { translate: -22px 0; }
  to { translate: 24px 0; }
}

@keyframes depth-frame-float {
  from { translate: -9px -7px; }
  to { translate: 11px 9px; }
}

@keyframes depth-frame-horizontal {
  from { translate: 0 -12px; }
  to { translate: 0 20px; }
}

@keyframes depth-frame-vertical {
  from { translate: -18px 0; }
  to { translate: 20px 0; }
}

@media (max-width: 760px) {
  .scroll-depth__scene {
    inset: -72px 0;
  }

  .scroll-depth__grid {
    right: -58%;
    width: 148vw;
    background-size: 42px 42px;
    opacity: 0.48;
  }

  .scroll-depth__axis {
    right: -36%;
    width: 118vw;
    opacity: 0.64;
  }

  .scroll-depth__frame {
    right: -36px;
    width: 190px;
    opacity: 0.58;
  }

  .scroll-depth__scan {
    left: 48%;
    opacity: 0.62;
  }

  .night-field {
    opacity: 0.78;
  }

  [data-scroll-depth="flow"] .scroll-depth__grid {
    left: -64%;
    width: 150vw;
  }

  [data-scroll-depth="flow"] .scroll-depth__axis {
    left: -24%;
    width: 126vw;
  }

  [data-scroll-depth="flow"] .scroll-depth__frame {
    left: -42px;
  }

  [data-scroll-depth="signal"] .scroll-depth__grid {
    right: -34%;
    width: 124%;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-depth] {
    --depth-near: 0px !important;
    --depth-far: 0px !important;
    --depth-drift: 0px !important;
    --depth-drift-reverse: 0px !important;
    --depth-drift-soft: 0px !important;
    --depth-drift-reverse-soft: 0px !important;
    --depth-scan: 0px !important;
    --depth-pointer-x: 0px !important;
    --depth-pointer-y: 0px !important;
    --depth-pointer-x-reverse: 0px !important;
    --depth-pointer-y-reverse: 0px !important;
    --depth-pointer-x-soft: 0px !important;
  }

  .scroll-depth__grid,
  .scroll-depth__axis,
  .scroll-depth__frame,
  .scroll-depth__scan {
    animation: none !important;
    will-change: auto;
  }

  .scroll-depth__frame::before,
  .scroll-depth__frame::after {
    animation: none !important;
    translate: none !important;
    will-change: auto;
  }
}