/*
 * Border Beam by Jakub Antalik — https://libraries.dev/beam
 * Generated from the upstream CSS engine, using the small colorful preset.
 * https://github.com/Jakubantalik/Libraries.dev/blob/main/packages/border-beam/src/styles.ts
 * Source Git blob: 31f6ec65c48e00ed3fac34e19f88c516fb64e10f
 * MIT license: ../licenses/border-beam-MIT.txt
 * Geometry matches the original 141 x 26 SVG rendered at 0.8x:
 * radius 10.4px, stroke 0.6px, converted to rem for text scaling.
 * Duration 2.6s; stroke 0.85; inner glow 0.14; bloom 0.38;
 * brightness 1.5; saturation 1.2; hue range 30; strength 1.
 * Pre-generated CSS keeps the static site free of runtime dependencies.
 */

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

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

[data-beam="colophon"] {
  position: relative;
  border-radius: 0.65rem;
  overflow: hidden;
}

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

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

[data-beam="colophon"][data-active]::after,
[data-beam="colophon"][data-fading]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.6125rem;
  padding: 0.0375rem;
  clip-path: inset(0 round 0.65rem);
  background: conic-gradient(
        from var(--beam-angle-colophon),
        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 9px 18px at 2% 68%, rgb(50, 200, 80), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgb(30, 185, 170), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgb(255, 120, 40), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgb(100, 70, 255), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgb(240, 50, 180), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgb(180, 40, 240), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgb(40, 140, 255), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgb(255, 50, 100), transparent);
  -webkit-mask:
    conic-gradient(
      from var(--beam-angle-colophon),
      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-colophon),
      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-colophon) * 0.85 * var(--beam-stroke-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-colophon 12s ease-in-out infinite;
}

[data-beam="colophon"][data-active]::before,
[data-beam="colophon"][data-fading]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.65rem;
  clip-path: inset(0 round 0.65rem);
  background: radial-gradient(ellipse 9px 18px at 2% 68%, rgba(50, 200, 80, 0.5), transparent),
    radial-gradient(ellipse 4px 8px at 2% 68%, rgba(30, 185, 170, 0.45), transparent),
    radial-gradient(ellipse 59px 9px at 72% -3%, rgba(255, 120, 40, 0.35), transparent),
    radial-gradient(ellipse 42px 7px at 74% 100%, rgba(100, 70, 255, 0.35), transparent),
    radial-gradient(ellipse 10px 17px at 100% 27%, rgba(240, 50, 180, 0.3), transparent),
    radial-gradient(ellipse 10px 18px at 100% 27%, rgba(180, 40, 240, 0.4), transparent),
    radial-gradient(ellipse 5px 10px at 100% 27%, rgba(40, 140, 255, 0.3), transparent),
    radial-gradient(ellipse 11px 12px at 100% 27%, rgba(255, 50, 100, 0.3), transparent);
  box-shadow: inset 0 0 5px 1px rgba(255, 255, 255, 0.3);
  -webkit-mask-image: conic-gradient(
    from var(--beam-angle-colophon),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    white 46%, white 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  -webkit-mask-composite: source-over;
  mask-image: conic-gradient(
    from var(--beam-angle-colophon),
    transparent 0%, transparent 22%,
    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
    white 46%, white 82%,
    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
    transparent 97%, transparent 100%
  );
  mask-composite: add;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--beam-opacity-colophon) * 0.14 * var(--beam-inner-opacity, 1) * var(--beam-strength, 1));
  animation: beam-hue-shift-colophon 12s ease-in-out infinite;
}

[data-beam="colophon"] [data-beam-bloom] {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 0.6125rem;
  clip-path: inset(0 round 0.65rem);
  background: conic-gradient(
        from var(--beam-angle-colophon),
        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: 0.0375rem;
  filter: blur(8px) brightness(1.50) saturate(1.20);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

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

@keyframes beam-spin-colophon {
  0% { --beam-angle-colophon: 0deg; }
  50% { --beam-angle-colophon: 180deg; }
  100% { --beam-angle-colophon: 360deg; }
}

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

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

@keyframes beam-hue-shift-colophon {
  0% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.50) saturate(1.20); }
  50% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) + 30deg)) brightness(1.50) saturate(1.20); }
  100% { filter: hue-rotate(calc(var(--beam-hue-base, 0deg) - 30deg)) brightness(1.50) saturate(1.20); }
}

[data-beam="colophon"][data-paused],
[data-beam="colophon"][data-paused]::after,
[data-beam="colophon"][data-paused]::before,
[data-beam="colophon"][data-paused] [data-beam-bloom] {
  animation-play-state: paused !important;
}