
.fvx{
  background-image:
    radial-gradient(42% 60% at 82% 30%,rgba(16,166,251,.30),rgba(16,166,251,0) 70%),
    radial-gradient(34% 50% at 62% 92%,rgba(0,58,229,.16),rgba(0,58,229,0) 70%),
    radial-gradient(30% 46% at 8% 12%,rgba(31,217,255,.20),rgba(31,217,255,0) 70%);
  background-size:140% 140%,140% 140%,140% 140%;
  background-position:50% 50%,50% 50%,50% 50%;
  background-repeat:no-repeat;
  animation:fvxAurora 16s ease-in-out infinite alternate;
}
.fvx::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.65) 47%,rgba(31,217,255,.22) 50%,transparent 58%) no-repeat;
  background-size:300% 100%;background-position:120% 0;opacity:0;animation:fvxBeam 2.2s .35s cubic-bezier(.3,.6,.2,1)}
.fvx .crumb,.fvx h1,.fvx .h2,.fvx .lead,.fvx .bt,.fvx .lab,.fvx .jump,.fvx .tabs,.fvx .keys,.fvx .anchors{animation:fvxUp .9s cubic-bezier(.2,.7,.2,1) both}
.fvx h1{animation-delay:.06s}.fvx .lab{animation-delay:.04s}.fvx .h2{animation-delay:.16s}.fvx .lead{animation-delay:.28s}
.fvx .bt,.fvx .jump,.fvx .tabs,.fvx .anchors{animation-delay:.4s}.fvx .keys{animation-delay:.52s}
.fvx img{animation:fvxWipe 1.2s .3s cubic-bezier(.65,0,.25,1) backwards,fvxZoom 3.2s .3s cubic-bezier(.2,.7,.2,1) backwards}
.fvx :nth-child(2)>img,.fvx :nth-child(2)>a>img{animation-delay:.42s,.42s}
.fvx :nth-child(3)>img,.fvx :nth-child(3)>a>img{animation-delay:.54s,.54s}
.fvx :nth-child(4)>img,.fvx :nth-child(4)>a>img{animation-delay:.66s,.66s}
.fvx :nth-child(5)>img,.fvx :nth-child(5)>a>img{animation-delay:.78s,.78s}
.fvx :nth-child(6)>img,.fvx :nth-child(6)>a>img{animation-delay:.9s,.9s}
.fvx canvas.vj-mini{animation:fvxPop 1.1s .5s cubic-bezier(.3,1.35,.5,1) backwards}
@keyframes fvxAurora{0%{background-position:50% 50%,50% 50%,50% 50%}50%{background-position:30% 60%,70% 40%,60% 30%}100%{background-position:60% 35%,35% 65%,40% 70%}}
@keyframes fvxBeam{0%{opacity:0;background-position:120% 0}25%{opacity:1}100%{opacity:0;background-position:-40% 0}}
@keyframes fvxUp{from{opacity:0;transform:translateY(26px)}}
@keyframes fvxWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fvxZoom{from{transform:scale(1.14)}}
@keyframes fvxPop{from{opacity:0;transform:scale(.55)}}
@media (prefers-reduced-motion:reduce){.fvx,.fvx *{animation:none!important}.fvx::after{display:none}}


.fvs{float:right;position:relative;width:540px;height:470px;margin:-8px 0 28px 44px;z-index:2}
.fvx .band,.fvx .strip,.fvx .hero-ph{clear:both}
.fvs img{animation:none!important}
.fvs-orbit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(0,58,229,.2);stroke-width:1.2;overflow:visible;pointer-events:none}
.fvs-orbit ellipse{stroke-dasharray:1700;animation:fvsDraw 2.2s .3s cubic-bezier(.4,0,.2,1) both}
.fvs-orbit .b{stroke:rgba(16,166,251,.42);stroke-dasharray:4 8;animation:fvxFade 1.2s .9s both}
.fvs-a,.fvs-b{position:absolute;margin:0}
.fvs-a img,.fvs-b img{width:100%;height:100%;object-fit:cover}
.fvs-a{right:0;top:30px;width:450px;height:330px;z-index:1;animation:fvsReveal 1.3s .25s cubic-bezier(.65,0,.25,1) both}
.fvs-a img{border-radius:0;box-shadow:0 50px 80px -40px rgba(0,42,168,.6)}
.fvs-a::before{content:"";position:absolute;inset:-11px;border-radius:0;background:linear-gradient(135deg,#003ae5,#10a6fb 55%,#1fd9ff);z-index:-1;animation:fvsFrame 1.4s .1s cubic-bezier(.2,.7,.2,1) both}
.fvs-a::after{content:"";position:absolute;inset:0;border-radius:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%) no-repeat;background-size:250% 100%;background-position:-60% 0;animation:fvsSheen 1.6s 1.2s ease-out both;pointer-events:none;z-index:2}
.fvs-b{left:0;bottom:6px;width:210px;height:210px;z-index:3;animation:fvsPop .9s 1s cubic-bezier(.3,1.4,.5,1) both}
.fvs-b img{border-radius:50%;border:8px solid #fff;box-shadow:0 30px 50px -30px rgba(15,27,36,.45)}
.fvs-orb{position:absolute;left:34px;top:0;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.96),rgba(232,239,255,.88) 60%,rgba(16,166,251,.3));box-shadow:0 30px 60px -28px rgba(0,58,229,.6),inset 0 0 0 1px rgba(255,255,255,.9);z-index:2;animation:fvsPop .9s 1.2s cubic-bezier(.3,1.4,.5,1) both,fvsFloat 6s 2.2s ease-in-out infinite}
.fvs-orb canvas{position:absolute;inset:0;width:100%;height:100%}
@keyframes fvxFade{from{opacity:0}}
@keyframes fvsDraw{from{stroke-dashoffset:1700}to{stroke-dashoffset:0}}
@keyframes fvsReveal{from{clip-path:circle(0% at 62% 50%)}to{clip-path:circle(120% at 62% 50%)}}
@keyframes fvsFrame{from{opacity:0;transform:scale(.82) rotate(-4deg)}}
@keyframes fvsSheen{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes fvsPop{from{opacity:0;transform:scale(.4)}}
@keyframes fvsFloat{50%{transform:translateY(-10px)}}
@media (max-width:1240px){.fvs{width:460px;height:420px;margin-left:28px}.fvs-a{width:380px;height:290px}.fvs-b{width:170px;height:170px}.fvs-orb{width:128px;height:128px;left:16px}}
@media (max-width:1080px){
  .fvx>.wrap{display:flex;flex-direction:column}
  .fvx>.wrap>*{order:0}
  .fvs{float:none;width:100%;max-width:560px;height:420px;margin:28px auto 8px}
  .fvx>.wrap>.fvs{order:1}
  .fvx>.wrap>.band,.fvx>.wrap>.strip,.fvx>.wrap>.hero-ph{order:2}
  .fvs-a{width:min(450px,80%);height:310px}
}
@media (max-width:600px){
  .fvs{height:320px}
  .fvs-a{width:84%;height:226px;top:24px}
  .fvs-a img{border-radius:0}
  .fvs-a::before{inset:-7px;border-radius:0}
  .fvs-a::after{border-radius:0}
  .fvs-b{width:130px;height:130px;bottom:0}
  .fvs-b img{border-width:6px}
  .fvs-orb{left:auto;right:6px;top:auto;bottom:12px;width:92px;height:92px}
}
@media (prefers-reduced-motion:reduce){.fvs,.fvs *,.fvs *::before,.fvs *::after{animation:none!important}}


.fvs-orbit,.fvs-orb,.fvs-b{display:none}
.fvs-a::before{display:none}
.fvs{height:440px}
.fvs-a{left:0;right:0;top:10px;width:auto;height:420px}
.fvs-a img,.fvs-a::after{border-radius:0}
@media (max-width:1240px){.fvs{height:380px}.fvs-a{width:auto;height:360px}}
@media (max-width:1080px){.fvs{height:auto}.fvs-a{position:relative;top:0;width:100%;height:auto;aspect-ratio:4/3}}
@media (max-width:600px){.fvs-a img,.fvs-a::after{border-radius:0}}
