/* A transparent 3D logo, with the supplied artwork retained as its front face. */
.hero h1 .welcome-brand-accessible {
  position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;
  overflow: hidden;clip-path: inset(50%);white-space: nowrap;border: 0;
}
.hero .welcome-logo {
  --logo-size: 350px;
  --edge-glow: drop-shadow(0 0 2px rgb(22 220 255 / 90%)) drop-shadow(0 0 9px rgb(34 194 255 / 52%)) drop-shadow(0 0 23px rgb(67 85 247 / 25%));
  position: relative;isolation: isolate;
  width: calc(var(--logo-size) + 32px);max-width: 100%;
  height: calc(var(--logo-size) + 5px);margin: -24px 0 3px;perspective: 800px;
}
.welcome-logo-image,.welcome-logo-canvas {
  position: absolute;inset: 0 auto auto 0;
  width: var(--logo-size);height: var(--logo-size);max-width: 100%;filter: var(--edge-glow);
}
.welcome-logo-image {object-fit: contain;transform-origin: 50% 50%;animation: vns-logo-turn 18s linear infinite;}
.welcome-logo-canvas {cursor: grab;touch-action: pan-y;outline-offset: -8px;}
.welcome-logo-canvas:active {cursor: grabbing;}
.welcome-logo.has-3d .welcome-logo-image {visibility: hidden;animation: none;}
.welcome-logo-halo {
  position: absolute;inset: 12% auto auto 2%;z-index: -1;width: 89%;height: 76%;border-radius: 50%;
  background: radial-gradient(ellipse, rgb(104 235 255 / 19%), rgb(112 120 255 / 7%) 46%, transparent 72%);
}
.welcome-logo-shadow {
  position: absolute;left: 18%;bottom: 8%;width: 55%;height: 14px;border-radius: 50%;
  background: radial-gradient(ellipse, rgb(54 61 135 / 23%), rgb(74 81 160 / 10%) 42%, transparent 74%);
  animation: vns-logo-shadow 18s linear infinite;
}
.welcome-logo-toggle {
  position: absolute;right: 0;top: 32px;width: 32px;height: 32px;display: grid;place-items: center;padding: 0;
  border: 1px solid #d9d5ef;border-radius: 50%;background: rgb(255 255 255 / 85%);color: #57516f;
  opacity: 0;transition: opacity .18s ease;
}
.welcome-logo-toggle svg {width: 14px;height: 14px;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.welcome-logo-toggle .logo-play {display: none;}
.welcome-logo:hover .welcome-logo-toggle,.welcome-logo:focus-within .welcome-logo-toggle {opacity: 1;}
.welcome-logo.is-paused .welcome-logo-image,.welcome-logo.is-paused .welcome-logo-shadow {animation-play-state: paused;}
.welcome-logo.is-paused .logo-pause {display: none;}
.welcome-logo.is-paused .logo-play {display: block;}
@keyframes vns-logo-turn {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}
@keyframes vns-logo-shadow {
  0%, 50%, 100% {transform: scaleX(1);opacity: .8;}
  25%, 75% {transform: scaleX(.25);opacity: .4;}
}
@media (min-width: 701px) and (max-width: 950px) {.hero .welcome-logo {--logo-size: 300px;}}
@media (max-width: 700px) {
  .hero .welcome-logo {--logo-size: 270px;margin: -21px 0 3px;}
  .welcome-logo-shadow {height: 11px;}
  .welcome-logo-toggle {top: 26px;}
}
@media (max-width: 370px) {.hero .welcome-logo {--logo-size: 250px;}}
@media (hover: none) {.welcome-logo-toggle {opacity: .7;}}
@media (prefers-reduced-motion: reduce) {
  .welcome-logo-image {animation: none;transform: none;}
  .welcome-logo-shadow {animation: none;opacity: .65;}
  .welcome-logo-toggle {display: none;}
}