/* Home page, level 2: a masked headline, and a second link in the hero.
   One entrance, then only motion that answers the reader; reduced motion leaves everything at rest. */
:root{--hx-ease:cubic-bezier(.16,1,.3,1)}
.home-main{flex:1 0 auto;width:100%}
.home-body .hero{flex:none}

@keyframes hx-rise{from{transform:translate3d(0,112%,0)}to{transform:translate3d(0,0,0)}}

/* ---------- Background: a deeper, roomier night-sky blue ----------
   Lighter around the virus, falling away to deep indigo toward the bottom and the corners. */
.home-body{
  background:
    radial-gradient(ellipse 62% 56% at 72% 36%,rgba(126,184,255,.5),transparent 64%),
    radial-gradient(ellipse 85% 60% at 0% 100%,rgba(9,14,74,.78),transparent 62%),
    radial-gradient(ellipse 85% 60% at 100% 100%,rgba(9,12,66,.8),transparent 60%),
    radial-gradient(ellipse 70% 40% at 0% 0%,rgba(18,30,110,.32),transparent 70%),
    linear-gradient(176deg,#527fe4 0%,#3b5fcc 30%,#2540a8 58%,#152270 82%,#0a1049 100%)}
.home-body::before{opacity:.6;background:
    radial-gradient(ellipse at 74% 30%,rgba(120,200,255,.3),transparent 38%),
    radial-gradient(ellipse at 16% 78%,rgba(116,92,235,.34),transparent 40%),
    radial-gradient(ellipse at 92% 90%,rgba(74,62,205,.3),transparent 36%)}
.home-body footer{background:rgba(5,10,52,.28);border-top-color:#ffffff1f}

/* ---------- Hero ---------- */
.home-body .hero-copy h1{animation:none}
/* the padding and negative margin keep descenders (j) and the final t from being clipped by the mask */
.hl{display:block;overflow:hidden;padding:.06em .12em .16em 0;margin:-.06em 0 -.16em}
.hl>span{display:inline-block;animation:hx-rise 1.3s var(--hx-ease) both;animation-delay:calc(.14s + var(--i,0) * .11s)}
.home-body .actions{flex-wrap:wrap}
.home-body .secondary{display:inline-flex;align-items:center;transition:border-color .25s ease}
.home-body .secondary span{display:inline-block;transition:transform .45s var(--hx-ease)}
.home-body .secondary:hover span{transform:translateX(5px)}

@media(prefers-reduced-motion:reduce){
  .hl>span{animation:none}
  .home-body .secondary span{transition:none}
  .home-body .secondary:hover span{transform:none}
}

/* A single soft, slightly out-of-focus virus rests in the footer. */
.home-body footer{position:relative;overflow:hidden}
.home-body .footer-inner{position:relative;z-index:1}
.footer-virus{position:absolute;left:41%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;opacity:.62;filter:blur(1.6px);pointer-events:none}
@media(max-width:1000px){.footer-virus{left:62%}}
@media(max-width:760px){.footer-virus{left:auto;right:-30px;top:-14px;margin:0;width:150px;height:150px;opacity:.5}}