/*
 * Border beam: a light that travels along the bottom edge of a search bar.
 *
 * Adapted from the "line" preset (colorful variant, dark theme) of the npm
 * package border-beam, version 1.3.0, by Jakub Antalik
 * (https://github.com/Jakubantalik/border-beam), licensed MIT.
 *
 * The visual design, gradient colours and positions, preset values and
 * keyframes below are that package's work and are reproduced from its
 * published code - they are not original to this project. The package is a
 * React component; this dashboard is server-rendered without React, so the
 * same CSS it generates is emitted here statically, and nothing from the
 * package is loaded at runtime.
 *
 * Changes made in this adaptation:
 * - Honours prefers-reduced-motion (the package's line preset does not): the
 *   beam rests, dimmed, at the centre instead of travelling.
 * - Pauses while off screen or while the page is hidden (a class toggled by
 *   liquid-metal.js).
 * - The host's own content is kept above every beam layer, so the glow can
 *   never sit over the text being typed.
 * - The layers are clipped individually rather than setting overflow on the
 *   host, so the host's focus ring and any dropdown beside it are not clipped.
 * - Shared custom-property names instead of per-instance ids, and hidden in
 *   forced-colors mode.
 *
 * Usage: add class="border-beam-line" to the element that draws the rounded
 * box, set --beam-radius to its border-radius, and put one
 * <span class="border-beam-bloom" aria-hidden="true"></span> inside it.
 *
 * ---------------------------------------------------------------------------
 * border-beam licence (verbatim):
 *
 * MIT License
 *
 * Copyright (c) 2026 Jakub Antalik
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

@property --beam-x { syntax: "<number>"; initial-value: 0; inherits: true; }
@property --beam-w { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --beam-h { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --beam-spike { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --beam-spike2 { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --beam-edge { syntax: "<number>"; initial-value: 1; inherits: true; }
@property --beam-opacity { syntax: "<number>"; initial-value: 0; inherits: true; }

.border-beam-line {
  --beam-radius: 16px;
  position: relative;
  isolation: isolate;
  animation:
    border-beam-travel 3.1s linear infinite,
    border-beam-edge-fade 3.1s linear infinite,
    border-beam-breathe 4.0s ease-in-out infinite,
    border-beam-spike 4.1s ease-in-out infinite,
    border-beam-spike2 5.3s ease-in-out infinite,
    border-beam-fade-in 0.6s ease forwards;
}

/* Hosts. Each sets --beam-radius to its own border-radius, here rather than in
   styles.css, so a cached older styles.css can never pair with this file. */
.mission-search.border-beam-line { --beam-radius: 7px; }

/* The host's own children sit above the beam. */
.border-beam-line > :not(.border-beam-bloom) {
  position: relative;
  z-index: 4;
}

/* Travelling stroke, drawn only on the 1px ring. inset: -1px lines it up with
   the host's own border rather than just inside it. */
.border-beam-line::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  border-radius: var(--beam-radius);
  clip-path: inset(0 round var(--beam-radius));
  background:
    radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%),
    radial-gradient(ellipse calc(36px * var(--beam-w)) calc(36px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgb(255, 50, 100), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w)) calc(32px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100%), rgb(40, 180, 220), transparent),
    radial-gradient(ellipse calc(33px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100% + 2px), rgb(50, 200, 80), transparent),
    radial-gradient(ellipse calc(29px * var(--beam-w)) calc(34px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100%), rgb(180, 40, 240), transparent),
    radial-gradient(ellipse calc(27px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgb(255, 160, 30), transparent),
    radial-gradient(ellipse calc(36px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100% + 1px), rgb(100, 70, 255), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w)) calc(22px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100%), rgb(40, 140, 255), transparent),
    radial-gradient(ellipse calc(25px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100% + 1px), rgb(240, 50, 180), transparent),
    radial-gradient(ellipse calc(23px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgb(30, 185, 170), transparent);
  -webkit-mask:
    radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  pointer-events: none;
  opacity: calc(var(--beam-opacity) * var(--beam-edge) * 1.14);
  animation: border-beam-hue 12s ease-in-out infinite;
}

/* Inner glow, fading in from the edges. */
.border-beam-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: calc(var(--beam-radius) - 1px);
  clip-path: inset(0 round calc(var(--beam-radius) - 1px));
  background:
    radial-gradient(ellipse calc(33px * var(--beam-w)) calc(30px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100%), rgba(255, 50, 100, 0.48), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% + 39px) calc(100% - 3px), rgba(40, 180, 220, 0.42), transparent),
    radial-gradient(ellipse calc(27px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% - 36px) calc(100%), rgba(50, 200, 80, 0.48), transparent),
    radial-gradient(ellipse calc(23px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100% - 54px) calc(100% - 2px), rgba(180, 40, 240, 0.42), transparent),
    radial-gradient(ellipse calc(24px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 51px) calc(100% - 1px), rgba(255, 160, 30, 0.50), transparent),
    radial-gradient(ellipse calc(30px * var(--beam-w)) calc(20px * var(--beam-h)) at calc(var(--beam-x) * 100% + 21px) calc(100%), rgba(100, 70, 255, 0.45), transparent),
    radial-gradient(ellipse calc(25px * var(--beam-w)) calc(18px * var(--beam-h)) at calc(var(--beam-x) * 100% - 21px) calc(100% - 2px), rgba(40, 140, 255, 0.40), transparent),
    radial-gradient(ellipse calc(21px * var(--beam-w)) calc(24px * var(--beam-h)) at calc(var(--beam-x) * 100% + 66px) calc(100%), rgba(240, 50, 180, 0.45), transparent),
    radial-gradient(ellipse calc(18px * var(--beam-w)) calc(26px * var(--beam-h)) at calc(var(--beam-x) * 100% - 66px) calc(100% - 1px), rgba(30, 185, 170, 0.52), transparent);
  box-shadow: inset 0 0 9px 1px rgba(255, 255, 255, 0.1);
  -webkit-mask-image:
    radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, 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:
    radial-gradient(ellipse calc(78px * var(--beam-w)) calc(60px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 45%, 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;
  opacity: calc(var(--beam-opacity) * var(--beam-edge) * 0.70);
  animation: border-beam-hue 12s ease-in-out infinite;
}

/* Bloom: the soft colour that rises from the beam. */
.border-beam-line > .border-beam-bloom {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  border-radius: calc(var(--beam-radius) - 1px);
  clip-path: inset(0 round calc(var(--beam-radius) - 1px));
  background:
    radial-gradient(ellipse calc(0.8px * var(--beam-spike)) calc(92px * var(--beam-h)) at 8% calc(100% - 2px), rgb(255, 60, 80), rgb(255, 60, 80) 30%, transparent 88%),
    radial-gradient(ellipse calc(10px * var(--beam-spike2)) calc(35px * var(--beam-h)) at 22% calc(100% - 4px), rgba(40, 190, 180, 0.98), rgba(40, 190, 180, 0.49) 50%, transparent 95%),
    radial-gradient(ellipse calc(2px * (2 - var(--beam-spike))) calc(72px * var(--beam-h)) at 36% calc(100% - 3px), rgb(100, 70, 255), rgba(100, 70, 255, 1) 40%, transparent 90%),
    radial-gradient(ellipse calc(14px * var(--beam-spike2)) calc(28px * var(--beam-h)) at 50% calc(100% - 2px), rgba(255, 170, 40, 0.59), rgba(255, 170, 40, 0.29) 55%, transparent 96%),
    radial-gradient(ellipse calc(1.2px * (2 - var(--beam-spike2))) calc(85px * var(--beam-h)) at 64% calc(100% - 4px), rgb(50, 200, 100), rgba(50, 200, 100, 1) 35%, transparent 89%),
    radial-gradient(ellipse calc(7px * var(--beam-spike)) calc(45px * var(--beam-h)) at 78% calc(100% - 2px), rgba(200, 50, 240, 0.91), rgba(200, 50, 240, 0.45) 48%, transparent 94%),
    radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike))) calc(60px * var(--beam-h)) at 92% calc(100% - 3px), rgb(40, 140, 255), rgba(40, 140, 255, 1) 42%, transparent 91%),
    radial-gradient(ellipse calc(21px * var(--beam-spike)) calc(15px * var(--beam-spike2)) at calc(var(--beam-x) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(ellipse calc(42px * var(--beam-w)) calc(40px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%);
  -webkit-mask: radial-gradient(ellipse calc(84px * var(--beam-w)) calc(110px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%);
  mask: radial-gradient(ellipse calc(84px * var(--beam-w)) calc(110px * var(--beam-h)) at calc(var(--beam-x) * 100%) 100%, white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%);
  pointer-events: none;
  opacity: calc(var(--beam-opacity) * var(--beam-edge) * 0.80);
  animation: border-beam-hue-bloom 8s ease-in-out infinite;
}

/* Paused while the bar is off screen or the page is hidden. liquid-metal.js
   adds and removes the class; the effect itself stays pure CSS. Pausing
   (rather than removing the animation) resumes the beam where it stopped. */
.border-beam-line.border-beam-paused,
.border-beam-line.border-beam-paused::after,
.border-beam-line.border-beam-paused::before,
.border-beam-line.border-beam-paused > .border-beam-bloom {
  animation-play-state: paused;
}

@keyframes border-beam-travel {
  0%   { --beam-x: 0.06; --beam-w: 0.5; }
  10%  { --beam-x: 0.15; --beam-w: 0.8; }
  20%  { --beam-x: 0.25; --beam-w: 1.1; }
  30%  { --beam-x: 0.35; --beam-w: 1.3; }
  40%  { --beam-x: 0.44; --beam-w: 1.45; }
  50%  { --beam-x: 0.5;  --beam-w: 1.5; }
  60%  { --beam-x: 0.56; --beam-w: 1.45; }
  70%  { --beam-x: 0.65; --beam-w: 1.3; }
  80%  { --beam-x: 0.75; --beam-w: 1.1; }
  90%  { --beam-x: 0.85; --beam-w: 0.8; }
  100% { --beam-x: 0.94; --beam-w: 0.5; }
}

@keyframes border-beam-edge-fade {
  0%    { --beam-edge: 0; }
  12.5% { --beam-edge: 0; }
  32.5% { --beam-edge: 1; }
  67.5% { --beam-edge: 1; }
  87.5% { --beam-edge: 0; }
  100%  { --beam-edge: 0; }
}

@keyframes border-beam-breathe {
  0%, 100% { --beam-h: 0.8; }
  25%      { --beam-h: 1.25; }
  55%      { --beam-h: 0.85; }
  80%      { --beam-h: 1.3; }
}

@keyframes border-beam-spike {
  0%   { --beam-spike: 0.8; }
  25%  { --beam-spike: 1.3; }
  50%  { --beam-spike: 0.9; }
  75%  { --beam-spike: 1.4; }
  100% { --beam-spike: 0.8; }
}

@keyframes border-beam-spike2 {
  0%   { --beam-spike2: 1.2; }
  25%  { --beam-spike2: 0.7; }
  50%  { --beam-spike2: 1.4; }
  75%  { --beam-spike2: 0.8; }
  100% { --beam-spike2: 1.2; }
}

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

@keyframes border-beam-hue {
  0%   { filter: hue-rotate(-13deg) brightness(1.30) saturate(1.20); }
  50%  { filter: hue-rotate(13deg) brightness(1.30) saturate(1.20); }
  100% { filter: hue-rotate(-13deg) brightness(1.30) saturate(1.20); }
}

@keyframes border-beam-hue-bloom {
  0%   { filter: blur(8px) hue-rotate(-23deg) brightness(1.30) saturate(1.20); }
  50%  { filter: blur(8px) hue-rotate(23deg) brightness(1.30) saturate(1.20); }
  100% { filter: blur(8px) hue-rotate(-23deg) brightness(1.30) saturate(1.20); }
}

/* Reduced motion: the beam rests at the centre, dimmed, with no travel, no
   breathing and no colour cycling. */
@media (prefers-reduced-motion: reduce) {
  .border-beam-line {
    --beam-x: 0.5;
    --beam-w: 1.2;
    --beam-h: 1;
    --beam-edge: 0.55;
    --beam-opacity: 1;
    animation: none;
  }

  .border-beam-line::after,
  .border-beam-line::before {
    animation: none;
    filter: hue-rotate(0deg) brightness(1.30) saturate(1.20);
  }

  .border-beam-line > .border-beam-bloom {
    animation: none;
    filter: blur(8px) hue-rotate(0deg) brightness(1.30) saturate(1.20);
  }
}

@media (forced-colors: active) {
  .border-beam-line::after,
  .border-beam-line::before,
  .border-beam-line > .border-beam-bloom {
    display: none;
  }
}