/* The opening story copy gets its own visible, animated engineering drawing. */
.legacy-content{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:rgba(7,10,11,.86);
}
.legacy-content::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0 0 auto;
  height:clamp(620px,58vw,900px);
  pointer-events:none;
  background:
    url("history-blueprint-v38.jpg") 18% 14% / 1680px auto no-repeat;
  opacity:.58;
  filter:contrast(1.18) brightness(1.2);
  transform:scale(1.04);
  transform-origin:left top;
  animation:legacyDrawingMove 20s cubic-bezier(.45,.05,.28,1) infinite alternate;
}
.legacy-content::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,10,11,.6),rgba(7,10,11,.34) 55%,rgba(7,10,11,.62)),
    linear-gradient(180deg,rgba(7,10,11,.12) 0,rgba(7,10,11,.32) 430px,rgba(7,10,11,.94) 900px);
}
.legacy-content>header,
.legacy-content>.legacy-article{
  position:relative;
  z-index:1;
}
.legacy-content>header::after{
  content:"";
  position:absolute;
  right:-4%;
  top:-10%;
  width:clamp(180px,25vw,390px);
  aspect-ratio:1;
  border:1px solid rgba(230,68,73,.24);
  border-radius:50%;
  box-shadow:0 0 0 24px rgba(255,255,255,.025),0 0 0 48px rgba(255,255,255,.014);
  pointer-events:none;
  animation:legacyGaugeRotate 24s linear infinite;
}
.legacy-content>header,
.legacy-article>p,
.legacy-article blockquote{
  text-shadow:0 3px 18px #000,0 1px 2px #000;
}
.legacy-article>p{
  padding:20px 22px;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(5,7,8,.48);
  backdrop-filter:blur(2px);
}
@keyframes legacyDrawingMove{
  0%{background-position:12% 14%;transform:scale(1.04) translate3d(-1%,0,0)}
  50%{background-position:35% 20%;transform:scale(1.075) translate3d(1%,-1%,0)}
  100%{background-position:58% 12%;transform:scale(1.05) translate3d(0,-2%,0)}
}
@keyframes legacyGaugeRotate{to{transform:rotate(360deg)}}
@media(max-width:900px){
  .legacy-content::before{height:860px;background-size:auto 860px;background-position:24% top;opacity:.5}
  .legacy-content::after{background:linear-gradient(180deg,rgba(7,10,11,.3),rgba(7,10,11,.93) 850px)}
  .legacy-content>header::after{right:-18%;top:2%;opacity:.6}
}
@media(max-width:560px){
  .legacy-content::before{height:960px;background-size:auto 820px;background-position:17% top;opacity:.45}
  .legacy-article>p{padding:17px 16px}
}
@media(prefers-reduced-motion:reduce){
  .legacy-content::before,.legacy-content>header::after{animation:none}
}