/* Original Libraries.dev Border Beam (MIT); see LICENSE.
 * Generated from packages/border-beam/src/styles.ts, md/colorful/dark defaults.
 * https://github.com/Jakubantalik/Libraries.dev/blob/main/packages/border-beam/src/styles.ts
 */

@property --beam-angle-placeholder {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@property --beam-opacity-placeholder {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

[data-beam="placeholder"] {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

[data-beam="placeholder"][data-active] {
  animation:
    beam-spin-placeholder 1.96s linear infinite,
    beam-fade-in-placeholder 0.6s ease forwards;
}

[data-beam="placeholder"][data-fading] {
  animation:
    beam-spin-placeholder 1.96s linear infinite,
    beam-fade-out-placeholder 0.5s ease forwards;
}

[data-beam="placeholder"][data-active]::after,
[data-beam="placeholder"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  clip-path: inset(0 round 16px);
  background: conic-gradient(
        from var(--beam-angle-placeholder),
        transparent 0%, transparent 54%,
        rgba(255, 255, 255, 0.05) 57%,
        rgba(255, 255, 255, 0.12) 60%,
        rgba(255, 255, 255, 0.22) 63%,
        rgba(255, 255, 255, 0.32) 66%,
        rgba(255, 255, 255, 0.22) 69%,
        rgba(255, 255, 255, 0.12) 72%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 78%, transparent 100%
      ),radial-gradient(ellipse 70px 40px at 33% -7.4%, var(--spectrum-1), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, var(--spectrum-2), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, var(--spectrum-3), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, var(--spectrum-4), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, var(--spectrum-5), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, var(--spectrum-6), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, var(--spectrum-7), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, var(--spectrum-8), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, var(--spectrum-5), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-placeholder),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    conic-gradient(
      from var(--beam-angle-placeholder),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  z-index: 2;
  opacity: calc(var(--beam-opacity-placeholder) * 0.9 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
}

[data-beam="placeholder"][data-active]::before,
[data-beam="placeholder"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(ellipse 140px 72px at 33% -4%, rgb(from var(--spectrum-1) r g b / .9), transparent),
    radial-gradient(ellipse 120px 64px at 12% -2%, rgb(from var(--spectrum-2) r g b / .85), transparent),
    radial-gradient(ellipse 72px 120px at 2% 68%, rgb(from var(--spectrum-3) r g b / .9), transparent),
    radial-gradient(ellipse 40px 70px at 2% 68%, rgb(from var(--spectrum-4) r g b / .8), transparent),
    radial-gradient(ellipse 340px 64px at 74% 108%, rgb(from var(--spectrum-5) r g b / .92), transparent),
    radial-gradient(ellipse 180px 52px at 55% 108%, rgb(from var(--spectrum-6) r g b / .88), transparent),
    radial-gradient(ellipse 150px 64px at 94% -2%, rgb(from var(--spectrum-7) r g b / .9), transparent),
    radial-gradient(ellipse 56px 80px at 102% 28%, rgb(from var(--spectrum-8) r g b / .88), transparent),
    radial-gradient(ellipse 110px 90px at 102% 28%, rgb(from var(--spectrum-5) r g b / .82), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.12);
  -webkit-mask-image:
    conic-gradient(
      from var(--beam-angle-placeholder),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 56px, transparent calc(100% - 56px), white),
    linear-gradient(to right, white, transparent 56px, transparent calc(100% - 56px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(
      from var(--beam-angle-placeholder),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    ),
    linear-gradient(white, transparent 56px, transparent calc(100% - 56px), white),
    linear-gradient(to right, white, transparent 56px, transparent calc(100% - 56px), white);
  mask-composite: intersect, add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-placeholder) * 0.78 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  clip-path: inset(0 round 16px);
}

[data-beam="placeholder"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 15px;
  clip-path: inset(0 round 16px);
  background: conic-gradient(
        from var(--beam-angle-placeholder),
        transparent 0%, transparent 58%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.08) 65%,
        rgba(255, 255, 255, 0.2) 67%,
        rgba(255, 255, 255, 0.45) 69%,
        rgba(255, 255, 255, 0.85) 70%,
        rgba(255, 255, 255, 0.85) 70.5%,
        rgba(255, 255, 255, 0.45) 71.5%,
        rgba(255, 255, 255, 0.2) 73%,
        rgba(255, 255, 255, 0.08) 75%,
        rgba(255, 255, 255, 0.03) 78%,
        transparent 82%
      );
  -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;
  padding: 1px;
  filter: blur(8px) brightness(1.30) saturate(1.20);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

[data-beam="placeholder"][data-active] [data-beam-bloom],
[data-beam="placeholder"][data-fading] [data-beam-bloom] {
  display: block;
  opacity: calc(var(--beam-opacity-placeholder) * 0.16 * var(--beam-bloom-opacity, 1) * var(--beam-strength, 1));
}

@keyframes beam-spin-placeholder {
  to { --beam-angle-placeholder: 360deg; }
}

@keyframes beam-fade-in-placeholder {
  to { --beam-opacity-placeholder: 1; }
}

@keyframes beam-fade-out-placeholder {
  from { --beam-opacity-placeholder: 1; }
  to { --beam-opacity-placeholder: 0; }
}

@keyframes beam-glow-drift-placeholder {
  0%, 100% { --beam-angle-placeholder: -26deg; }
  50% { --beam-angle-placeholder: 30deg; }
}

[data-beam="placeholder"][data-paused],
[data-beam="placeholder"][data-loading] {
  animation: beam-glow-drift-placeholder 11s ease-in-out infinite !important;
  animation-play-state: running !important;
}

[data-beam="placeholder"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-beam="placeholder"][data-paused],
  [data-beam="placeholder"][data-loading] {
    animation: none !important;
  }
}