.hero {
  display: block;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: #eaf7ff;
}

.hero::before,
.hero::after {
  display: none !important;
}

.hero-inner {
  display: none;
}

.hero-cover-picture {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #061a42;
}

.hero-cover {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
  transform-origin: 50% 50%;
  animation: heroBannerMotion 14s ease-in-out infinite alternate !important;
  will-change: transform, filter;
  image-rendering: auto;
  backface-visibility: hidden;
}

.hero-cover-picture::before,
.hero-cover-picture::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.hero-cover-picture::before {
  background-image:
    linear-gradient(rgba(75,210,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75,210,255,.1) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(125,229,255,.028) 6px 7px);
  background-size: 72px 72px,72px 72px,100% 7px;
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.78) 38%,#000 100%);
  mix-blend-mode: screen;
  opacity:.6;
  animation: heroGridFlow 12s linear infinite,heroGridPulse 4.5s ease-in-out infinite;
}

.hero-cover-picture::after {
  background: linear-gradient(110deg, transparent 25%, rgba(140,232,255,.16) 46%, rgba(255,255,255,.24) 50%, transparent 66%);
  transform: translateX(-115%);
  animation: heroLightSweep 6.8s ease-in-out infinite;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(70,218,255,.7));
}

@keyframes heroBannerMotion {
  0% { transform: scale(1.008) translate3d(0,0,0); filter: saturate(1.02) contrast(1.015); }
  45% { transform: scale(1.035) translate3d(-.45%,.22%,0); filter: saturate(1.08) contrast(1.035); }
  100% { transform: scale(1.022) translate3d(.35%,-.15%,0); filter: saturate(1.04) contrast(1.02); }
}

@keyframes heroLightSweep {
  0%, 30% { transform: translateX(-115%); opacity: 0; }
  42% { opacity: 1; }
  68%, 100% { transform: translateX(115%); opacity: 0; }
}

@keyframes heroGridFlow {
  to { background-position:72px 36px,72px 36px,0 7px; }
}

@keyframes heroGridPulse {
  0%,100% { opacity:.35; }
  50% { opacity:.72; }
}

@media (max-width: 720px) {
  .hero {
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cover { animation: none !important; }
  .hero-cover-picture::before,
  .hero-cover-picture::after { animation: none !important; display: none; }
}

.hero>.edge-trace{position:absolute;z-index:4;inset:2.5% 1.6%;width:96.8%;height:95%;pointer-events:none;overflow:visible}
.edge-trace rect{fill:none;stroke:#a0efff;stroke-width:.32;vector-effect:non-scaling-stroke;stroke-dasharray:13 87;stroke-dashoffset:0;filter:drop-shadow(0 0 5px #54dfff) drop-shadow(0 0 12px #2c9fff);animation:edgeCircuit 10s linear infinite}
@keyframes edgeCircuit{to{stroke-dashoffset:-100}}
@media(prefers-reduced-motion:reduce){.edge-trace rect{animation:none;stroke-dasharray:100 0;opacity:.45}}

/* The still banner rests between video plays. */
.hero{position:relative;overflow:hidden;background:#061a42}
.hero-video{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:0;transition:opacity .55s ease}
.hero-video.is-current{opacity:1}
.hero-cover-picture{z-index:1;opacity:1;transition:opacity .85s ease-in-out}
.hero-video-active .hero-cover-picture{opacity:0}
.hero-video-halftone{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .55s ease;background-image:radial-gradient(circle,rgba(47,173,255,.52) 1.15px,transparent 1.5px),repeating-linear-gradient(0deg,rgba(92,207,255,.04) 0 1px,transparent 1px 7px),linear-gradient(110deg,rgba(3,24,75,.08),transparent 35%,rgba(44,168,230,.08));background-size:6px 6px,100% 7px,100% 100%;mix-blend-mode:screen}
.hero-video-active .hero-video-halftone{opacity:1}
.hero-video-halftone::after{content:"";position:absolute;inset:-20% -45%;background:linear-gradient(105deg,transparent 39%,rgba(85,218,255,.13) 48%,rgba(203,247,255,.2) 50%,rgba(68,193,255,.1) 53%,transparent 63%);transform:translateX(-75%);animation:heroVideoScan 9s ease-in-out infinite;mix-blend-mode:screen}
@keyframes heroVideoScan{0%,20%{transform:translateX(-75%)}70%,100%{transform:translateX(75%)}}
.hero-video-active>.edge-trace{opacity:0}
.hero-telop{position:absolute;z-index:3;inset:0;display:flex;align-items:center;justify-content:center;padding:5% 7%;opacity:0;transform:scale(.97);transition:opacity .8s ease,transform .8s ease;pointer-events:none;background:linear-gradient(90deg,rgba(2,14,43,.5),rgba(2,14,43,.08) 50%,rgba(2,14,43,.5))}
.hero-video-active .hero-telop{opacity:1;transform:translateY(0)}
.hero-telop img{display:block;width:min(78vw,900px);height:auto;filter:brightness(0) invert(1) drop-shadow(0 4px 16px rgba(0,14,54,.9)) drop-shadow(0 0 28px rgba(85,207,255,.65));clip-path:polygon(0 0,100% 0,100% 72%,84% 72%,84% 100%,16% 100%,16% 72%,0 72%)}
.hero-footage-note{position:absolute;z-index:4;right:2%;bottom:3%;color:rgba(255,255,255,.84);font-size:.72rem;letter-spacing:.06em;text-shadow:0 1px 5px #00112e;opacity:0;transition:opacity .6s;pointer-events:none}
.hero-video-active .hero-footage-note{opacity:1}
@media(max-width:720px){.hero-video{inset:0;width:100%;height:100%;object-fit:cover}.hero-video-halftone{background-size:7px 7px,100% 7px,100% 100%}}
@media(prefers-reduced-motion:reduce){.hero-cover-picture{opacity:1;transition:none}.hero-video{display:none}.hero-video-halftone{display:none}.hero-telop,.hero-footage-note{display:none}}