/* BorderGlow: the supplied React Bits mesh, directional cone and soft halo,
   shared by the portfolio's existing frames without changing their contents. */
.border-glow {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 34;
  --color-sensitivity: 54;
  --cone-spread: 13;
  --glow-padding: 31px;
  --fill-opacity: .5;
  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 66%);
  --glow-color-50: hsl(40deg 80% 80% / 55%);
  --glow-color-40: hsl(40deg 80% 80% / 44%);
  --glow-color-30: hsl(40deg 80% 80% / 33%);
  --glow-color-20: hsl(40deg 80% 80% / 22%);
  --glow-color-10: hsl(40deg 80% 80% / 11%);
  --glow-mesh:
    radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%),
    radial-gradient(at 69% 34%, #f472b6 0px, transparent 50%),
    radial-gradient(at 8% 6%, #38bdf8 0px, transparent 50%),
    radial-gradient(at 41% 38%, #c084fc 0px, transparent 50%),
    radial-gradient(at 86% 85%, #f472b6 0px, transparent 50%),
    radial-gradient(at 82% 18%, #38bdf8 0px, transparent 50%),
    radial-gradient(at 51% 4%, #f472b6 0px, transparent 50%),
    linear-gradient(#c084fc 0 100%);
  position: relative;
  isolation: isolate;
}
.border-glow > .border-glow-rim,
.border-glow > .border-glow-fill,
.border-glow > .edge-light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 0;
  padding: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity .25s ease-out;
}
.border-glow > .border-glow-rim {
  opacity: clamp(0, calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), 1);
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((85 - var(--cone-spread)) * 1%), black calc((100 - var(--cone-spread)) * 1%));
  mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((85 - var(--cone-spread)) * 1%), black calc((100 - var(--cone-spread)) * 1%));
}
.border-glow-rim::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--glow-mesh);
  -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;
}
.border-glow > .border-glow-fill {
  background: var(--glow-mesh);
  opacity: clamp(0, calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity))), .5);
  -webkit-mask-image: linear-gradient(black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-image: linear-gradient(black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  mix-blend-mode: soft-light;
}
.border-glow > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  opacity: clamp(0, calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity))), 1);
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mix-blend-mode: plus-lighter;
}
.edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px var(--glow-color-60),
    inset 0 0 3px var(--glow-color-50),
    inset 0 0 6px var(--glow-color-40),
    inset 0 0 15px var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px var(--glow-color-60),
    0 0 3px var(--glow-color-50),
    0 0 6px var(--glow-color-40),
    0 0 15px var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}
.border-glow:not(.glow-engaged):not(.sweep-active) > :is(.border-glow-rim, .border-glow-fill, .edge-light) {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}
.border-glow.glow-focused > .border-glow-rim {
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
}
.featured-frame {display:block; border-radius:var(--ui-radius); box-shadow:inset 0 0 0 1px #ffffff14}
.featured-frame > .project-image {border-radius:inherit}
.filter-button.border-glow {--glow-padding:18px; --fill-opacity:.22; transition:color .2s,background .2s,border-color .2s}
.filter-button.active.border-glow {--fill-opacity:.06}
.filter-button:hover:not(.active) {border-color:#5b5269}
.year-select-frame {display:inline-block; border:1px solid var(--line); border-radius:var(--ui-radius); --glow-padding:18px; --fill-opacity:.2}
.year-filter .year-select-frame select {display:block; border:0; background:transparent; padding:9px 10px; max-width:150px; cursor:pointer}
.year-select-frame option {background:#111; color:var(--text)}
.motion-stage.border-glow {overflow:visible; border:1px solid #ffffff12; border-radius:var(--ui-radius)}
.motion-stage > video {border-radius:inherit; min-width:0}
.expertise > .border-glow {--glow-padding:14px; --fill-opacity:.2}
.detail-proposal.border-glow {--glow-padding:14px; --fill-opacity:.15}
.project-dialog.border-glow {position:fixed; overflow:visible; border-radius:var(--ui-radius)}
.dialog-scroll {height:100%; overflow:auto; overscroll-behavior:contain; border-radius:inherit}
.dialog-bar {border-radius:var(--ui-radius) var(--ui-radius) 0 0}
.close-button.border-glow {--glow-padding:16px; --fill-opacity:.2; border:1px solid #ffffff20; border-radius:var(--ui-radius); padding:2px 10px}
.detail-end [data-close].border-glow {--glow-padding:18px; --fill-opacity:.2; padding:10px 14px; border:1px solid var(--line); border-radius:var(--ui-radius)}
@media(min-width:681px) and (max-width:1000px) {
  .border-glow {--glow-padding:24px}
}
@media(max-width:680px) {
  .project-dialog.border-glow {border-radius:var(--ui-radius)}
  .dialog-bar {border-radius:var(--ui-radius) var(--ui-radius) 0 0}
  .year-filter .year-select-frame select {padding:8px 10px}
  .border-glow {--glow-padding:14px}
}
@media(max-width:680px), (prefers-reduced-motion:reduce), (hover:none), (pointer:coarse) {
  .border-glow > :is(.border-glow-rim, .border-glow-fill, .edge-light) {display:none}
  .border-glow:focus-visible > .border-glow-rim,
  .border-glow:has(:focus-visible) > .border-glow-rim,
  .featured-card:focus-visible .border-glow-rim {display:block; opacity:1; -webkit-mask-image:none; mask-image:none}
}