/*
 * Border Beam — vendored from Jakub Antalik's border-beam (MIT)
 * https://github.com/Jakubantalik/border-beam  ·  config: size=md, colorVariant=colorful, theme=dark
 * Markup: <div data-beam="lp" data-active> <content/> <div data-beam-bloom></div> </div>
 */
@property --beam-angle-lp { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
@property --beam-opacity-lp { syntax: "<number>"; initial-value: 0; inherits: true; }

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

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

[data-beam="lp"][data-active]::after,
[data-beam="lp"][data-fading]::after {
  content: ""; position: absolute; inset: 0; border-radius: 21px; padding: 1px;
  clip-path: inset(0 round 22px);
  background:
    conic-gradient(from var(--beam-angle-lp),
      transparent 0%, transparent 54%,
      rgba(255,255,255,0.1) 57%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.6) 63%,
      rgba(255,255,255,0.75) 66%, rgba(255,255,255,0.6) 69%, rgba(255,255,255,0.3) 72%,
      rgba(255,255,255,0.1) 75%, transparent 78%, transparent 100%),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, rgb(255,50,100), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, rgb(40,140,255), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, rgb(50,200,80), transparent),
    radial-gradient(ellipse 20px 35px at 2.1% 68.3%, rgb(30,185,170), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, rgb(100,70,255), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, rgb(40,140,255), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, rgb(255,120,40), transparent),
    radial-gradient(ellipse 26px 42px at 100% 27.1%, rgb(240,50,180), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, rgb(180,40,240), transparent);
  -webkit-mask:
    conic-gradient(from var(--beam-angle-lp),
      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-lp),
      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-lp) * 0.72 * var(--beam-strength, 1));
  animation: beam-hue-shift-lp 12s ease-in-out infinite;
}

[data-beam="lp"][data-active]::before,
[data-beam="lp"][data-fading]::before {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  background:
    radial-gradient(ellipse 63px 36px at 33% -7.4%, rgba(255,50,100,0.45), transparent),
    radial-gradient(ellipse 54px 32px at 12% -5%, rgba(40,140,255,0.45), transparent),
    radial-gradient(ellipse 36px 63px at 2.1% 68.3%, rgba(50,200,80,0.45), transparent),
    radial-gradient(ellipse 18px 32px at 2.1% 68.3%, rgba(30,185,170,0.45), transparent),
    radial-gradient(ellipse 162px 29px at 74.4% 100%, rgba(100,70,255,0.45), transparent),
    radial-gradient(ellipse 77px 23px at 55% 100%, rgba(40,140,255,0.45), transparent),
    radial-gradient(ellipse 67px 29px at 93.9% 0%, rgba(255,120,40,0.45), transparent),
    radial-gradient(ellipse 23px 38px at 100% 27.1%, rgba(240,50,180,0.45), transparent),
    radial-gradient(ellipse 47px 43px at 100% 27.1%, rgba(180,40,240,0.45), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255,255,255,0.1);
  -webkit-mask-image:
    conic-gradient(from var(--beam-angle-lp),
      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 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    conic-gradient(from var(--beam-angle-lp),
      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 28px, transparent calc(100% - 28px), white),
    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
  mask-composite: intersect, add;
  pointer-events: none; z-index: 1;
  opacity: calc(var(--beam-opacity-lp) * 0.70 * var(--beam-strength, 1));
  clip-path: inset(0 round 22px);
  animation: beam-hue-shift-lp 12s ease-in-out infinite;
}

[data-beam="lp"] [data-beam-bloom] {
  display: none; position: absolute; inset: 0; border-radius: 21px;
  clip-path: inset(0 round 22px);
  background:
    conic-gradient(from var(--beam-angle-lp),
      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="lp"][data-active] [data-beam-bloom],
[data-beam="lp"][data-fading] [data-beam-bloom] {
  display: block; opacity: calc(var(--beam-opacity-lp) * 0.80 * var(--beam-strength, 1));
}

@keyframes beam-spin-lp { to { --beam-angle-lp: 360deg; } }
@keyframes beam-fade-in-lp { to { --beam-opacity-lp: 1; } }
@keyframes beam-fade-out-lp { from { --beam-opacity-lp: 1; } to { --beam-opacity-lp: 0; } }
@keyframes beam-hue-shift-lp {
  0%   { filter: hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
  50%  { filter: hue-rotate(30deg) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(-30deg) brightness(1.30) saturate(1.20); }
}
@media (prefers-reduced-motion: reduce) {
  [data-beam="lp"][data-active], [data-beam="lp"][data-active]::after,
  [data-beam="lp"][data-active]::before, [data-beam="lp"][data-active] [data-beam-bloom] { animation: none; }
}