.hero-animation-host {
  --hero-animation-light-image: url("/light-f5f3fb.webp");
  --hero-animation-light-cover-color: #f5f3fb;
  --hero-animation-noise-image-webkit: url("/Noise.avif");
  --hero-animation-noise-image: url("/Noise.avif");
  --hero-animation-noise-sprite-image: url("/Noise-tile.png");
  position: relative;
  overflow: hidden;
}

.hero-animation-host .beam-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-animation-host .scene {
  --light-x: 800px;
  --light-y: 640px;
  --light-size: 1400px;
  --light-opacity: 0.74;
  --light-solid-core-opacity: 0.96;
  --light-scale-x: 1;
  --light-scale-y: 1;
  --light-veil-opacity: 0.12;
  --light-veil-secondary-x: 800px;
  --light-veil-secondary-y: 640px;
  --light-veil-secondary-size: 1400px;
  --light-veil-secondary-opacity: 0;
  --light-veil-secondary-scale-x: 1;
  --light-veil-secondary-scale-y: 1;
  --light-expand-scale-x: 1.18;
  --light-expand-scale-y: 1.18;
  --light-expand-duration: 1400ms;
  --scroll-expand-scale-x: 1;
  --scroll-expand-scale-y: 1;
  --scroll-expand-opacity: 0;
  --noise-opacity: 0.12;
  --noise-scale-x: 1;
  --noise-scale-y: 1;
  --light-ball-svg-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='rgb(255,255,255)' stop-opacity='1'/%3E%3Cstop offset='10%25' stop-color='rgb(249,246,255)' stop-opacity='0.99'/%3E%3Cstop offset='22%25' stop-color='rgb(245,243,251)' stop-opacity='0.94'/%3E%3Cstop offset='40%25' stop-color='rgb(229,221,255)' stop-opacity='0.6'/%3E%3Cstop offset='60%25' stop-color='rgb(182,166,247)' stop-opacity='0.24'/%3E%3Cstop offset='78%25' stop-color='rgb(111,93,221)' stop-opacity='0.07'/%3E%3Cstop offset='100%25' stop-color='rgb(111,93,221)' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='50' fill='url(%23g)'/%3E%3C/svg%3E");
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1600px;
  height: 1000px;
  transform: translate(-50%, -50%) scale(var(--scene-scale, 1));
  transform-origin: center center;
  pointer-events: none;
}

.hero-animation-host .light-load-cover {
  position: absolute;
  inset: 0;
  background: var(--hero-animation-light-cover-color);
  pointer-events: none;
  z-index: 20;
}

.hero-animation-host .noise-hook {
  position: absolute;
  inset: 0;
  transform: scale(var(--noise-scale-x), var(--noise-scale-y));
  transform-origin: center center;
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: 2;
}

.hero-animation-host .noise-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-animation-host .noise-layer--image {
  background-image: var(--hero-animation-noise-image-webkit);
  background-image: var(--hero-animation-noise-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-animation-host .noise-layer--sprites {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.hero-animation-host .noise-sprite-cell {
  min-width: 0;
  min-height: 0;
  background-image: var(--hero-animation-noise-sprite-image);
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-animation-host .noise-sprite-cell:nth-child(1) {
  background-position: left top;
}

.hero-animation-host .noise-sprite-cell:nth-child(2) {
  background-position: 70% 18%;
  transform: scale(1.03);
}

.hero-animation-host .noise-sprite-cell:nth-child(3) {
  background-position: 18% 82%;
  transform: scale(1.05) rotate(1deg);
}

.hero-animation-host .noise-sprite-cell:nth-child(4) {
  background-position: right 12% top 22%;
  transform: scale(1.02) rotate(-1deg);
}

.hero-animation-host .noise-sprite-cell:nth-child(5) {
  background-position: 24% 18%;
  transform: scale(1.04) rotate(-1deg);
}

.hero-animation-host .noise-sprite-cell:nth-child(6) {
  background-position: center;
}

.hero-animation-host .noise-sprite-cell:nth-child(7) {
  background-position: 78% 76%;
  transform: scale(1.06) rotate(1deg);
}

.hero-animation-host .noise-sprite-cell:nth-child(8) {
  background-position: left 14% bottom 14%;
  transform: scale(1.03);
}

.hero-animation-host[data-noise-mode="sprite-grid"] .noise-layer--image {
  display: none;
}

.hero-animation-host[data-noise-mode="sprite-grid"] .noise-layer--sprites {
  display: grid;
}

.hero-animation-host .light-ball-hook {
  position: absolute;
  left: var(--light-x);
  top: var(--light-y);
  width: var(--light-size);
  height: var(--light-size);
  transform: translate(-50%, -50%) scale(var(--light-scale-x), var(--light-scale-y));
  transform-origin: center center;
  opacity: var(--light-opacity);
  pointer-events: none;
  z-index: 3;
}

.hero-animation-host .light-ball-hook--veil {
  z-index: 4;
  opacity: var(--light-veil-opacity);
}

.hero-animation-host .light-ball-hook--intro-expand,
.hero-animation-host .light-ball-hook--scroll-expand {
  transform: translate(-50%, -50%) scale(var(--scroll-expand-scale-x), var(--scroll-expand-scale-y));
  z-index: 5;
}

.hero-animation-host .light-ball-hook--intro-expand {
  opacity: var(--light-opacity);
}

.hero-animation-host .light-ball-hook--intro-expand.is-armed {
  transform: translate(-50%, -50%) scale(var(--light-expand-scale-x), var(--light-expand-scale-y));
}

.hero-animation-host .light-ball-hook--scroll-expand {
  opacity: var(--scroll-expand-opacity);
}

.hero-animation-host .light-ball-hook--veil-secondary {
  left: var(--light-veil-secondary-x);
  top: var(--light-veil-secondary-y);
  z-index: 4;
  width: var(--light-veil-secondary-size);
  height: var(--light-veil-secondary-size);
  transform: translate(-50%, -50%) scale(var(--light-veil-secondary-scale-x), var(--light-veil-secondary-scale-y));
  opacity: var(--light-veil-secondary-opacity);
}

.hero-animation-host .light-ball-hook--intro-expand.is-expanding {
  animation: light-ball-source-contract var(--light-expand-duration) cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.hero-animation-host .light-ball-hook--scroll-expand.is-expanding {
  animation: light-ball-source-contract var(--light-expand-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-animation-host .light-ball {
  position: absolute;
  inset: 0;
  background-image: var(--hero-animation-light-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: transform, opacity;
}

.hero-animation-host .light-ball::before,
.hero-animation-host .light-ball::after {
  content: none;
}

.hero-animation-host .light-ball--main {
  background-image:
    var(--hero-animation-light-image),
    var(--hero-animation-light-image),
    var(--hero-animation-light-image);
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain, 98% 98%, 94% 94%;
}

.hero-animation-host .scene[data-light-renderer="css"] .light-ball {
  background-image:
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 1) 0%,
      rgb(250 247 255 / 1) 10%,
      rgb(245 243 251 / 0.96) 20%,
      rgb(241 236 255 / 0.78) 34%,
      rgb(224 214 255 / 0.44) 50%,
      rgb(176 159 247 / 0.18) 66%,
      rgb(109 93 220 / 0.05) 80%,
      rgb(109 93 220 / 0) 100%
    );
}

.hero-animation-host .scene[data-light-renderer="css"] .light-ball--main,
.hero-animation-host .scene[data-light-renderer="css"] .light-ball--veil-secondary {
  background-image:
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 1) 0%,
      rgb(250 247 255 / 1) 9%,
      rgb(245 243 251 / 0.98) 19%,
      rgb(241 236 255 / 0.8) 34%,
      rgb(223 213 255 / 0.46) 50%,
      rgb(177 160 247 / 0.18) 65%,
      rgb(109 93 220 / 0.05) 80%,
      rgb(109 93 220 / 0) 100%
    ),
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 1) 0%,
      rgb(248 244 255 / 0.98) 8%,
      rgb(243 239 255 / 0.8) 22%,
      rgb(227 218 255 / 0.42) 44%,
      rgb(162 145 242 / 0.12) 68%,
      rgb(109 93 220 / 0) 100%
    ),
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 1) 0%,
      rgb(249 246 255 / 0.98) 10%,
      rgb(243 239 255 / 0.74) 26%,
      rgb(225 216 255 / 0.22) 52%,
      rgb(109 93 220 / 0) 100%
    );
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain, 98% 98%, 94% 94%;
}

.hero-animation-host .scene[data-light-renderer="svg"] .light-ball {
  background-image: var(--light-ball-svg-source);
}

.hero-animation-host .scene[data-light-renderer="svg"] .light-ball--main,
.hero-animation-host .scene[data-light-renderer="svg"] .light-ball--veil-secondary {
  background-image:
    var(--light-ball-svg-source),
    var(--light-ball-svg-source),
    var(--light-ball-svg-source);
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain, 98% 98%, 94% 94%;
}

.hero-animation-host .light-ball--veil {
  transform: scale(1.08);
  opacity: 0.92;
}

.hero-animation-host .light-ball--veil::before,
.hero-animation-host .light-ball--veil-secondary::before {
  content: none;
}

.hero-animation-host .light-ball--scroll-expand {
  filter: blur(calc(var(--light-size) * 0.035));
}

.hero-animation-host .light-ball--veil-secondary {
  transform: scale(1.04);
  opacity: 1;
  background-image:
    var(--hero-animation-light-image),
    var(--hero-animation-light-image),
    var(--hero-animation-light-image);
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: contain, 98% 98%, 94% 94%;
}

.hero-animation-host .beam-layer {
  --beam-saturation: 1;
  --beam-contrast: 1;
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: saturate(var(--beam-saturation)) contrast(var(--beam-contrast));
}

.hero-animation-host .beam-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-animation-host .beam-use {
  pointer-events: none;
}

.hero-animation-host .ellipse {
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.hero-animation-host .ellipse::before,
.hero-animation-host .ellipse::after {
  content: none;
}

@keyframes light-ball-source-contract {
  0% {
    transform: translate(-50%, -50%) scale(var(--light-expand-scale-x), var(--light-expand-scale-y));
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(var(--light-scale-x), var(--light-scale-y));
    opacity: 1;
  }
}