@layer universe {
  body { position: relative; isolation: isolate; }

  .universe-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    contain: layout paint style;
    border-radius: inherit;
    background: var(--universe-gradient, linear-gradient(145deg, #172031, #5f677f));
    transition: opacity 520ms ease, visibility 0s linear 520ms;
  }

  .universe-scene.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 700ms ease;
  }

  body[data-scene-layout="canvas"] .universe-scene {
    visibility: hidden;
    opacity: 0;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  body[data-scene-layout="hero-fade"] .universe-scene {
    inset: 0;
    block-size: auto;
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0 68%,
      rgba(0, 0, 0, .88) 78%,
      rgba(0, 0, 0, .34) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0 68%,
      rgba(0, 0, 0, .88) 78%,
      rgba(0, 0, 0, .34) 92%,
      transparent 100%
    );
  }
  body[data-scene-layout="hero-strip"] .universe-scene {
    inset: 0;
    block-size: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 0 58%, rgba(0,0,0,.64) 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0 58%, rgba(0,0,0,.64) 78%, transparent 100%);
  }

  .universe-scene-frame {
    position: absolute;
    inset: -4%;
    display: block;
    opacity: 0;
    transform: scale(1.045) translate3d(-.7%, -.4%, 0);
    transition: opacity 1100ms ease;
    animation: universe-depth var(--universe-motion-duration, 52s) ease-in-out infinite alternate;
    animation-play-state: paused;
    will-change: transform, opacity;
  }

  .universe-scene[data-motion="inward"] {
    --universe-depth-start: scale(1.045) translate3d(-.6%, -.3%, 0);
    --universe-depth-end: scale(1.11) translate3d(.4%, .4%, 0);
  }
  .universe-scene[data-motion="orbit"] {
    --universe-depth-start: scale(1.07) translate3d(-1.2%, .2%, 0) rotate(-.35deg);
    --universe-depth-end: scale(1.07) translate3d(1.2%, -.2%, 0) rotate(.35deg);
  }
  .universe-scene[data-motion="ascend"] {
    --universe-depth-start: scale(1.065) translate3d(0, 1%, 0);
    --universe-depth-end: scale(1.085) translate3d(0, -1%, 0);
  }
  .universe-scene[data-motion="breathe"] {
    --universe-depth-start: scale(1.055) translate3d(-.25%, 0, 0);
    --universe-depth-end: scale(1.08) translate3d(.25%, 0, 0);
  }
  .universe-scene[data-motion="unfold"] {
    --universe-depth-start: scale(1.09) translate3d(0, -.45%, 0);
    --universe-depth-end: scale(1.045) translate3d(0, .45%, 0);
  }
  .universe-scene[data-motion="stillness"] {
    --universe-depth-start: scale(1.055) translate3d(-.2%, -.15%, 0);
    --universe-depth-end: scale(1.06) translate3d(.2%, .15%, 0);
  }

  .universe-scene-frame.is-current {
    opacity: .94;
  }

  body[data-scene-layout="hero-fade"] .universe-scene-frame.is-current {
    opacity: .92;
  }
  body[data-scene-layout="hero-strip"] .universe-scene-frame.is-current { opacity: .68; }

  .universe-scene.is-active:not(.is-paused) .universe-scene-frame.is-current {
    animation-play-state: running;
  }

  .universe-scene-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--universe-object-position, 50% 50%);
  }

  .universe-caustic {
    position: absolute;
    inset: -22%;
    opacity: .22;
    background:
      radial-gradient(ellipse at 28% 32%, color-mix(in srgb, var(--universe-accent, #9bdfff) 58%, transparent), transparent 26%),
      radial-gradient(ellipse at 74% 64%, rgba(255,255,255,.30), transparent 31%);
    transform: translate3d(-2%, -1%, 0) rotate(-3deg);
    animation: universe-caustic-drift 34s ease-in-out infinite alternate;
    animation-play-state: paused;
    will-change: transform, opacity;
  }

  .universe-lumen,
  .universe-dust {
    position: absolute;
    inset: -16%;
    opacity: .18;
    transform: translate3d(-1.5%, -.8%, 0);
    animation-play-state: paused;
    will-change: transform, opacity;
  }

  .universe-lumen {
    background:
      radial-gradient(ellipse at 78% 34%, color-mix(in srgb, var(--universe-accent, #9bdfff) 42%, transparent), transparent 29%),
      radial-gradient(ellipse at 58% 74%, rgba(255,255,255,.18), transparent 24%);
    animation: universe-lumen-drift 46s ease-in-out infinite alternate;
  }

  .universe-dust {
    inset: -8%;
    opacity: .13;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.82) 0 1px, transparent 1.5px),
      radial-gradient(circle, color-mix(in srgb, var(--universe-accent, #9bdfff) 55%, white) 0 .8px, transparent 1.3px);
    background-position: 0 0, 41px 53px;
    background-size: 97px 89px, 137px 123px;
    animation: universe-dust-drift 78s linear infinite alternate;
  }

  .universe-scene.is-active:not(.is-paused) :where(.universe-caustic, .universe-lumen, .universe-dust) { animation-play-state: running; }

  .universe-content-scrim {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 76% 92% at 13% 42%,
        rgba(236,242,239,var(--universe-scrim-start,.22)) 0%,
        rgba(236,242,239,var(--universe-scrim-middle,.10)) 52%,
        rgba(236,242,239,var(--universe-scrim-end,.02)) 78%,
        transparent 100%),
      linear-gradient(180deg,
        rgba(232,239,235,.03) 0%,
        transparent 58%,
        rgba(232,239,235,var(--universe-scrim-bottom,.12)) 100%);
  }

  body[data-scene-layout="hero-fade"] .universe-content-scrim {
    background:
      linear-gradient(
        180deg,
        transparent 0 62%,
        rgba(241,244,241,.18) 78%,
        var(--canvas) 100%
      ),
      linear-gradient(
        90deg,
        rgba(241,244,241,.30) 0,
        rgba(241,244,241,.08) 24%,
        transparent 48%
      );
  }
  body[data-scene-layout="hero-strip"] .universe-content-scrim {
    background: linear-gradient(180deg, rgba(241,244,241,.08), var(--canvas));
  }

  .universe-scene.is-paused :where(.universe-scene-frame, .universe-caustic, .universe-lumen, .universe-dust) {
    animation-play-state: paused;
  }

  .universe-data-saver .universe-scene-frame,
  .universe-scene.is-gradient-only .universe-scene-frame { display: none; }
  .universe-data-saver :where(.universe-lumen, .universe-dust),
  .universe-scene.is-gradient-only :where(.universe-lumen, .universe-dust) { animation: none; }

  #state-flow-layer { z-index: 1; }
  body.visual-motion-paused #state-flow-layer { display: none !important; }

  @keyframes universe-depth {
    0% { transform: var(--universe-depth-start, scale(1.045) translate3d(-.7%, -.4%, 0)); }
    100% { transform: var(--universe-depth-end, scale(1.095) translate3d(.9%, .7%, 0)); }
  }

  @keyframes universe-caustic-drift {
    0% { transform: translate3d(-2%, -1%, 0) rotate(-3deg); opacity: .16; }
    100% { transform: translate3d(3%, 2%, 0) rotate(4deg); opacity: .26; }
  }

  @keyframes universe-lumen-drift {
    0% { transform: translate3d(-1.5%, -.8%, 0) scale(1); opacity: .13; }
    100% { transform: translate3d(2.5%, 1.6%, 0) scale(1.08); opacity: .22; }
  }

  @keyframes universe-dust-drift {
    0% { transform: translate3d(-1%, -.5%, 0); opacity: .08; }
    100% { transform: translate3d(2%, 1.5%, 0); opacity: .16; }
  }

  @media (max-width: 900px), (pointer: coarse) {
    body[data-scene-layout="hero-fade"] .universe-scene {
      block-size: auto;
      -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0 52%,
        rgba(0, 0, 0, .82) 68%,
        rgba(0, 0, 0, .28) 88%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        #000 0 52%,
        rgba(0, 0, 0, .82) 68%,
        rgba(0, 0, 0, .28) 88%,
        transparent 100%
      );
    }
    .universe-scene-frame {
      inset: 0;
      animation: none;
      transform: none;
    }
    .universe-scene-frame.is-current { opacity: .88; }
    body[data-scene-layout="hero-fade"] .universe-scene-frame.is-current { opacity: .86; }
    .universe-scene-frame img { object-position: var(--universe-mobile-object-position, 80% 50%); }
    .universe-caustic { animation: none; opacity: .13; transform: none; }
    .universe-lumen,
    .universe-dust { animation: none; transform: none; will-change: auto; }
    .universe-lumen { opacity: .12; }
    .universe-dust { opacity: .06; }
    .universe-content-scrim {
      background:
        radial-gradient(
          ellipse 98% 76% at 5% 12%,
          rgba(235,241,238,var(--universe-scrim-mobile,.42)) 0 26%,
          rgba(235,241,238,.24) 48%,
          transparent 72%
        ),
        linear-gradient(180deg, transparent 58%, rgba(235,241,238,.18) 100%);
    }
    body[data-scene-layout="hero-fade"] .universe-content-scrim {
      background:
        linear-gradient(
          180deg,
          transparent 0 58%,
          rgba(241,244,241,.16) 76%,
          var(--canvas) 100%
        ),
        linear-gradient(90deg, rgba(241,244,241,.10), transparent 40%);
    }
    .universe-scene-frame { will-change: auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .universe-scene,
    .universe-scene-frame { transition: none; }
    .universe-scene-frame,
    .universe-caustic,
    .universe-lumen,
    .universe-dust { animation: none; transform: none; will-change: auto; }
    #state-flow-layer { display: none !important; }
  }

  @media (prefers-reduced-transparency: reduce) {
    body[data-scene-layout="hero-fade"] .universe-scene-frame.is-current {
      opacity: .16;
    }
    body[data-scene-layout="hero-fade"] .universe-content-scrim {
      background: linear-gradient(180deg, rgba(237,242,240,.96), var(--canvas));
    }
  }

  @media (forced-colors: active) {
    .universe-scene { display: none; }
  }
}