/* A surface needs no wrapper. Add the border class to opt into one pseudo-element. */
.lumenmorph {
  background-color: var(--lumen-bg, #302028b3);
  border-radius: var(--lumen-radius, 0.25rem);
  -webkit-backdrop-filter: blur(var(--lumen-blur, 32px)) saturate(var(--lumen-saturation, 1.6));
  backdrop-filter: blur(var(--lumen-blur, 32px)) saturate(var(--lumen-saturation, 1.6));
}

.lumenmorph-border {
  position: relative;
  border: var(--lumen-border-width, 1.5px) solid var(--lumen-border-color, #ffffff30);
}

.lumenmorph-border::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--lumen-border-width, 1.5px));
  border-radius: inherit;
  padding: var(--lumen-border-width, 1.5px);
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.lumenmorph-text,
.glassmorphism-text {
  color: var(--lumen-text-color, #ffffffb3);
}

@supports (background: color-mix(in srgb, red, transparent)) {
  .lumenmorph {
    background-image: radial-gradient(circle var(--lumen-glow-size, 460px) at var(--lumen-x, 50vw) var(--lumen-y, 35vh), color-mix(in srgb, var(--lumen-glow-color, #ffaa71) calc(var(--lumen-glow-opacity, 0.3) * 100%), transparent), transparent);
    background-attachment: var(--lumen-attachment, fixed);
    background-size: var(--lumen-space, 100vw 100vh);
    background-repeat: no-repeat;
  }

  .lumenmorph-border::before {
    background-image: radial-gradient(circle var(--lumen-glow-size, 460px) at var(--lumen-x, 50vw) var(--lumen-y, 35vh), color-mix(in srgb, var(--lumen-border-glow-color, var(--lumen-glow-color, #ffd4a3)) calc(var(--lumen-border-opacity, 0.9) * 100%), transparent), transparent);
    background-attachment: var(--lumen-attachment, fixed);
    background-size: var(--lumen-space, 100vw 100vh);
    background-repeat: no-repeat;
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .lumenmorph-text,
    .glassmorphism-text {
      background-color: transparent;
      background-image: radial-gradient(circle at bottom center, color-mix(in srgb, var(--lumen-glow-color, #ffaa71) 10%, transparent), transparent 50%), radial-gradient(circle var(--lumen-text-glow-size, var(--lumen-glow-size, 80vmax)) at var(--lumen-x, 50vw) var(--lumen-y, 35vh), color-mix(in srgb, var(--lumen-glow-color, #ffaa71) calc(var(--lumen-text-glow-opacity, 1) * 100%), transparent), transparent);
      background-attachment: scroll, var(--lumen-attachment, fixed);
      background-size: var(--lumen-space, 100vw 100vh);
      background-position: center center, 0 0;
      background-repeat: no-repeat;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      -webkit-text-stroke: var(--lumen-text-stroke-width, 2px) transparent;
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  .lumenmorph {
    background: var(--lumen-solid-bg, #302028);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .lumenmorph {
    background: Canvas;
    color: CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lumenmorph-border { border-color: CanvasText; }
  .lumenmorph-border::before { display: none; }
  .lumenmorph-text,
  .glassmorphism-text { background: none; color: CanvasText; -webkit-text-stroke: 0; }
}