:root {
  --sre-depth-factor: 0.82;
  --sre-tilt-factor: 0.24;
  --sre-dimensional-perspective: 972px;
  --sre-dimensional-active-lift: -4.37px;
}

:root,
html[data-sre-theme="cloud"] {
  --sre-webgl-primary: #7057e8;
  --sre-webgl-secondary: #38a8e8;
  --sre-webgl-highlight: #c38cff;
  --sre-webgl-fog: #f4f6ff;
}

html[data-sre-theme="aurora"] {
  --sre-webgl-primary: #08a88a;
  --sre-webgl-secondary: #4c76e8;
  --sre-webgl-highlight: #a75fe0;
  --sre-webgl-fog: #eefbf8;
}

html[data-sre-theme="sandstone"] {
  --sre-webgl-primary: #c66c32;
  --sre-webgl-secondary: #c49a43;
  --sre-webgl-highlight: #df7c6f;
  --sre-webgl-fog: #fbf5e9;
}

html[data-sre-theme="midnight"] {
  --sre-webgl-primary: #8c72ff;
  --sre-webgl-secondary: #31c8f4;
  --sre-webgl-highlight: #d45cff;
  --sre-webgl-fog: #080b1a;
}

html[data-sre-theme="graphite"] {
  --sre-webgl-primary: #8a9bb7;
  --sre-webgl-secondary: #4f8fd8;
  --sre-webgl-highlight: #d6dce8;
  --sre-webgl-fog: #10141c;
}

html[data-sre-theme="oceanic"] {
  --sre-webgl-primary: #12b7bc;
  --sre-webgl-secondary: #2f7de1;
  --sre-webgl-highlight: #56e0c5;
  --sre-webgl-fog: #041a28;
}

html[data-sre-theme="ember"] {
  --sre-webgl-primary: #e45d48;
  --sre-webgl-secondary: #e5a13d;
  --sre-webgl-highlight: #ff8068;
  --sre-webgl-fog: #21100e;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--sre-webgl-primary) 15%, transparent), transparent 34%),
    radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--sre-webgl-secondary) 12%, transparent), transparent 38%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--sre-webgl-highlight) 9%, transparent), transparent 32%);
  opacity: 0.78;
  transition: opacity 240ms ease;
}

.sre-webgl-surface[data-sre-webgl] {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100vh;
  pointer-events: none;
  opacity: 0.64;
  filter: saturate(1.08);
  transition: opacity 240ms ease, filter 240ms ease;
}

.sre-app-shell {
  position: relative;
  z-index: 1;
}

html.sre-webgl-ready body::before {
  opacity: 0.5;
}

html.sre-webgl-unavailable .sre-webgl-surface[data-sre-webgl] {
  display: none;
}

html.sre-webgl-unavailable body::before {
  opacity: 1;
}

[data-sre-dimensional="ready"] {
  --sre-tilt-x: 0deg;
  --sre-tilt-y: 0deg;
  --sre-dimensional-lift: 0px;
  position: relative;
  transform:
    perspective(var(--sre-dimensional-perspective))
    translate3d(0, var(--sre-dimensional-lift), 0)
    rotateX(var(--sre-tilt-x))
    rotateY(var(--sre-tilt-y));
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  box-shadow: var(--sre-dimensional-shadow-rest, var(--rm-shadow, var(--sre-shadow-sm)));
  transition:
    transform 180ms cubic-bezier(0.2, 0.75, 0.3, 1),
    box-shadow 180ms ease,
    border-color 180ms ease;
}

[data-sre-dimensional="ready"]::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  background: radial-gradient(
    circle at var(--sre-dimensional-light-x, 72%) var(--sre-dimensional-light-y, 18%),
    color-mix(in srgb, var(--sre-webgl-highlight) 16%, transparent),
    transparent 46%
  );
  opacity: 0;
  transition: opacity 180ms ease;
}

[data-sre-dimensional="ready"].is-sre-dimensional-active {
  --sre-dimensional-lift: var(--sre-dimensional-active-lift);
  z-index: 2;
  box-shadow: var(--sre-dimensional-shadow-active, var(--rm-lift, var(--sre-shadow-md)));
  transition-duration: 70ms, 140ms, 140ms;
}

[data-sre-dimensional="ready"].is-sre-dimensional-active::after {
  opacity: 0.72;
  transition-duration: 70ms;
}

html.sre-dimensional-static [data-sre-dimensional="ready"] {
  --sre-tilt-x: 0deg;
  --sre-tilt-y: 0deg;
  --sre-dimensional-lift: 0px;
  transform: none;
  transition-duration: 0.01ms;
}

html.sre-dimensional-static [data-sre-dimensional="ready"]::after {
  opacity: 0;
}

@media (max-width: 70rem) {
  .sre-webgl-surface[data-sre-webgl] {
    opacity: 0.48;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .sre-webgl-surface[data-sre-webgl],
  body::before,
  [data-sre-dimensional="ready"],
  [data-sre-dimensional="ready"]::after {
    transition: none;
  }
}

@media (forced-colors: active) {
  body::before,
  .sre-webgl-surface[data-sre-webgl] {
    display: none;
  }

  [data-sre-dimensional="ready"],
  [data-sre-dimensional="ready"].is-sre-dimensional-active {
    transform: none;
    box-shadow: none;
  }

  [data-sre-dimensional="ready"]::after {
    display: none;
  }
}