/* Magic UI WarpBackground, adapted for the static site. MIT: design-notices.txt. */
.hero-panel{border-radius:0;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line)}
.hero-panel:after{content:none}

/* Compact illustration centered on the hero rather than the right column. */
.hero-visual{position:static;width:0;height:0;pointer-events:none}
.hero-visual .people-caption{right:46px;border-radius:0;background:#161f2e;color:#edf2fc;box-shadow:none;font-weight:400}
.hero-visual .people-caption span{color:#b7c2d5}
.hero-visual .people-caption strong{font-weight:400}
.hero-visual::before{
  content:'';position:absolute;z-index:2;pointer-events:none;
  top:50%;left:50%;width:360px;max-width:34%;height:260px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--hero) 92%,transparent) 10%,transparent 72%);
}
.hero-illustration{
  position:absolute;z-index:3;top:50%;left:50%;width:280px;max-width:26%;height:auto;
  transform:translate(-50%,-50%);
  filter:brightness(.45) saturate(1.5);
}
[data-theme=dark] .hero-illustration{filter:drop-shadow(0 2px 8px #0e142066)}
@media(min-width:601px) and (max-width:1100px){
  .hero-visual::before{top:auto;bottom:12px;width:260px;height:210px;transform:translateX(-50%)}
  .hero-illustration{top:auto;bottom:72px;width:180px;max-width:20%;transform:translateX(-50%)}
  .hero-visual .people-caption{right:12px}
}
@media(max-width:600px){
  .hero-visual{position:relative;width:100%;height:260px}
  .hero-visual::before{top:46%;width:280px;max-width:90%;height:180px}
  .hero-visual .people-caption{right:12px}
  .hero-illustration{top:46%;width:180px;max-width:60%}
}

/* GlowingEffect: an angular highlight follows the pointer along the border. */
@property --glow-angle{syntax:'<angle>';inherits:true;initial-value:0deg}
.hero-glow{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:var(--glow-active,0);transition:opacity .3s,--glow-angle .4s ease-out;
  mask-image:conic-gradient(from calc(var(--glow-angle) - 40deg),transparent 0deg,#fff 40deg,transparent 80deg);
}
.hero-glow:before{
  content:'';position:absolute;inset:0;padding:2px;
  background:repeating-conic-gradient(from 237deg,#bc83c6 0deg,#9b94ec 18deg,#638ad0 36deg,#b49dde 54deg,#bc83c6 72deg);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
/* CardSpotlight: a radial reveal with a fine blue/violet dot pattern. */
.hero-spotlight{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--spotlight-active,0);transition:opacity .3s;
  background:radial-gradient(circle,#766bd77a 1px,transparent 1.6px) 0 0 / 7px 7px,#7566d313;
  mask-image:radial-gradient(350px circle at var(--spot-x,50%) var(--spot-y,50%),#fff,transparent 80%);
}
[data-theme=dark] .hero-spotlight{background:radial-gradient(circle,#859af7a3 1px,transparent 1.6px) 0 0 / 7px 7px,#6b75d91c}
[data-motion=paused] .hero-glow,[data-motion=paused] .hero-spotlight,.motion-page-hidden .hero-glow,.motion-page-hidden .hero-spotlight{opacity:0}
@media(prefers-reduced-motion:reduce),(hover:none){.hero-glow,.hero-spotlight{display:none}}

.warp-background{
  --warp-grid:color-mix(in srgb,var(--accent) 15%,transparent);
  --beam-size:5%;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  container-type:size;perspective:100px;transform-style:preserve-3d;
  overflow:hidden;clip-path:inset(0);
  mask-image:linear-gradient(90deg,#0004,#0009 45%,#000 70%);
}
.warp-plane{
  position:absolute;top:0;left:0;width:100cqi;height:100cqmax;
  container-type:inline-size;transform-style:preserve-3d;transform-origin:50% 0;
  background:
    linear-gradient(var(--warp-grid) 0 1px,transparent 1px) 50% -.5px / var(--beam-size) var(--beam-size),
    linear-gradient(90deg,var(--warp-grid) 0 1px,transparent 1px) 50% 50% / var(--beam-size) var(--beam-size);
  transform:rotateX(-90deg);
}
.warp-plane-bottom{top:100%}
.warp-plane-left{width:100cqh;transform-origin:0 0;transform:rotate(90deg) rotateX(-90deg)}
.warp-plane-right{left:auto;right:0;width:100cqh;transform-origin:100% 0;transform:rotate(-90deg) rotateX(-90deg)}
.warp-beam{
  position:absolute;top:0;left:var(--beam-x);width:var(--beam-size);
  aspect-ratio:1 / var(--beam-ratio);
  background:linear-gradient(var(--beam-color),transparent);
  opacity:.38;transform:translate(-50%,100cqmax);
  animation:warp-travel 4.8s linear var(--beam-delay) infinite;
  animation-play-state:paused;
}
.hero-panel.is-in-view .warp-beam{animation-play-state:running}
@keyframes warp-travel{to{transform:translate(-50%,-100%)}}
[data-motion=paused] .warp-beam,.motion-page-hidden .warp-beam{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.warp-beam{display:none}}
@media(max-width:600px){
  .warp-background{perspective:80px;mask-image:linear-gradient(#0003,#0005 45%,#000 70%)}
}