/* The brief stays independent of the simulation and downloads only on demand. */
.hero-section .mission-video {
  position:relative;
  isolation:isolate;
  min-width:0;
  width:100%;
  margin:0;
  overflow:visible;
  border-radius:19px;
  background:transparent;
  box-shadow:0 24px 65px #0004;
}
/* The light escapes the card; only the actual video clips to rounded corners. */
.hero-section .mission-video::before,
.hero-section .mission-video::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
}
.hero-section .mission-video::before {
  left:-25%;
  top:-42%;
  width:115%;
  height:170%;
  background:radial-gradient(ellipse at 35% 38%,#ffd65eb8 0%,#ffb44066 27%,#ffac3024 48%,#ffac3000 70%);
  filter:blur(60px);
}
.hero-section .mission-video::after {
  right:-27%;
  bottom:-47%;
  width:120%;
  height:180%;
  background:radial-gradient(ellipse at 60% 58%,#f70b8bb8 0%,#eb067963 30%,#dc147e22 52%,#dc147e00 73%);
  filter:blur(68px);
}
.mission-video-screen { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #ffffff30; border-radius:inherit; background:#05070b; }
/* Animate only the card, not its large blurred lights. No persistent GPU layer. */
.mission-video.is-entering .mission-video-screen {
  transform-origin:45% 60%;
  animation:mission-video-arrive 1s cubic-bezier(.22,.61,.36,1);
}
@keyframes mission-video-arrive {
  from { opacity:0; transform:translate3d(48px,12px,0) rotate(-3deg) scale(.98); }
  to { opacity:1; transform:translate3d(0,0,0) rotate(0deg) scale(1); }
}
/* Small/touch devices keep the same movement without the blur's rendering cost. */
@media(min-width:761px) and (hover:hover) and (pointer:fine) {
  @supports(filter:blur(2px)) {
    .mission-video.is-entering .mission-video-screen {
      animation:mission-video-arrive 1s cubic-bezier(.22,.61,.36,1),mission-video-focus 600ms ease-out;
    }
  }
}
@keyframes mission-video-focus { from { filter:blur(2px); } to { filter:blur(0); } }
.mission-video:focus-within .mission-video-screen,
.motion-paused .mission-video .mission-video-screen { animation:none; }
@media(prefers-reduced-motion:reduce) {
  .mission-video.is-entering .mission-video-screen { animation:none; }
}
.mission-video-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.mission-video .mission-video-play { position:absolute; z-index:1; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:64px; height:64px; padding:0; border:1.5px solid #ffffffe6; border-radius:50%; background:#08162599; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; box-shadow:0 5px 24px #0005; cursor:pointer; transition:background .2s,box-shadow .2s; }
.mission-video-play::before { content:""; position:absolute; inset:-7px; border:1px solid #ffffff45; border-radius:50%; pointer-events:none; }
.mission-video .mission-video-play[hidden] { display:none; }
.mission-video-play svg { width:25px; height:25px; margin-left:1px; fill:currentColor; }
.mission-video .mission-video-play:hover { background:#123b4bd9; box-shadow:0 0 30px #7defd94d,0 5px 24px #0005; }
.mission-video-play:focus-visible,.mission-video video:focus-visible { outline:3px solid #8af0db; outline-offset:-3px; }
@media(min-width:761px) {
  .hero-section .mission-hero { grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:40px; }
  .hero-section .hero-brief { white-space:normal; }
}
@media(max-width:760px) {
  .hero-section .mission-video { margin:22px 0 18px; border-radius:14px; }
  .hero-section .mission-video::before { left:-18%; top:-34%; width:110%; height:165%; filter:blur(36px); }
  .hero-section .mission-video::after { right:-19%; bottom:-39%; width:114%; height:170%; filter:blur(42px); }
  .mission-video .mission-video-play { width:50px; height:50px; }
  .mission-video-play svg { width:21px; height:21px; }
  .mission-video-play::before { inset:-5px; }
}