@import url("./hero-intro.css");
.video-hero .hero,.video-hero .hero-art.photo-empty{background:#090a0d}
.hero-video-layer{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none;filter:saturate(1.4)}
.hero-video.is-active{opacity:1}
.hero-video-layer:after{content:"";position:absolute;inset:-8%;z-index:1;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse at 7% 24%,rgba(0,231,255,.43),rgba(0,180,225,.12) 21%,transparent 48%),radial-gradient(ellipse at 93% 72%,rgba(167,61,255,.48),rgba(109,41,245,.13) 24%,transparent 49%),linear-gradient(116deg,transparent 14%,rgba(0,222,255,.1) 17%,transparent 21%,transparent 74%,rgba(170,71,255,.12) 78%,transparent 82%);animation:hero-neon-drift 9s ease-in-out infinite alternate;animation-play-state:paused}
.hero-video-inview .hero-video-layer:after{animation-play-state:running}
@keyframes hero-neon-drift{from{transform:translate(-1%,1%) scale(1);opacity:.8}to{transform:translate(2%,-2%) scale(1.04);opacity:1}}
.video-hero .hero-art:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 25%,rgba(0,0,0,.12) 65%,rgba(0,0,0,.75)),radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.55),rgba(0,0,0,.12) 65%)}
.video-hero .hero-art:after{display:none}
.video-hero .hero-mark{z-index:3}
.video-hero .hero-logo{filter:invert(1) brightness(1.1) drop-shadow(0 2px 3px rgba(0,0,0,.75))}
.video-hero .hero-bottom{color:#fff;z-index:4}
.hero-video-info{position:absolute;z-index:5;bottom:30px;left:50%;transform:translateX(-50%);display:flex;align-items:center;color:#fff}
.hero-video-info[hidden],.hero-video-status[hidden]{display:none}
.hero-video-position{font:9px var(--mono);letter-spacing:.04em;white-space:nowrap;margin-right:8px}
.hero-video-status{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);z-index:5;color:#fff;font-size:12px;text-align:center}
@media(min-width:761px){
  .video-hero:has(.hero-video-inview) .site-header{mix-blend-mode:normal;filter:none;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
  .video-hero:has(.hero-video-inview) .site-header .brand img{filter:invert(1)}
}
@media(max-width:1100px){.hero-video-info{bottom:140px}}
@media(max-width:760px){.hero-video-info{bottom:148px}.hero-video-position{font-size:8px;margin-right:2px}.hero-video-status{bottom:202px;max-width:80%;width:300px}}
@media(max-width:760px){.hero-video[src*="/visual-studio."]{object-position:left center}}
@media(prefers-reduced-motion:reduce){.hero-video{transition:none}.hero-video-layer:after{animation:none!important}}