/* The existing stars remain the single background; this canvas contains only transient effects. */
#heroEffects{position:fixed;inset:0;z-index:20;pointer-events:none;width:100%;height:100%}
#p0{animation:none;transition:opacity .22s ease;height:100dvh}
#p0 .hero-bg{animation:none;background-image:linear-gradient(to bottom,rgba(2,4,10,.12),#02040a),url('/assets/hero-woman.png')!important}
/* Reuse the two original cross/star elements; only their direction and light treatment change. */
#p0 .hero-cross{display:block;left:-15vw;top:26%;width:130vw;height:1px;transform:rotate(24deg);opacity:0;overflow:visible}
#p0 .hero-cross--horizontal{top:69%;transform:rotate(-22deg)}
#p0 .hero-cross::before{display:none}
#p0 .hero-cross__star{left:0;top:0;width:clamp(75px,14vw,175px);height:1px;transform:none;background:linear-gradient(90deg,transparent,#cdddea88,transparent);filter:blur(.35px);animation:none}
body.hero-full-intro #p0 .hero-cross{opacity:1}
body.hero-full-intro #p0 .hero-cross--vertical .hero-cross__star{animation:quiet-cross 3.6s cubic-bezier(.3,.05,.45,1) .85s both}
body.hero-full-intro #p0 .hero-cross--horizontal .hero-cross__star{animation:quiet-cross 3.4s cubic-bezier(.3,.05,.45,1) 1.55s both}
@keyframes quiet-cross{0%{left:-10%;opacity:0}25%{opacity:.32}70%{opacity:.24}100%{left:105%;opacity:0}}
.page.active:not(#p0){animation:cosmic-reveal 1s cubic-bezier(.22,.65,.3,1) both}
@keyframes cosmic-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
#heroContent{z-index:2}#heroContent>p{transition:opacity .25s ease}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .12s linear;mask-image:linear-gradient(#000000e0,transparent);pointer-events:none}
body.hero-video-transition #p0 .hero-bg,body.hero-video-transition #heroVideo{transition:none}
body.hero-intro #p0 .hero-bg,body.hero-intro #heroContent>p,body.hero-intro .ray-logo--hero{opacity:0}
body.hero-intro>nav,body.hero-intro>.page-controls{opacity:0}
body>nav,body>.page-controls{transition:opacity .3s ease}
body.hero-leaving #heroContent{opacity:0;transition:opacity .4s ease}
body.hero-dissolving #p0 .hero-bg,body.hero-dissolving #heroVideo{visibility:hidden}
body.section-changing .page.active{opacity:0;animation:none;transform:none;filter:none;transition:opacity .45s ease}
body.hero-entered #p0 .hero-bg{transition:opacity .5s ease}
@media(max-width:767px){#heroVideo{object-position:24% center}}
@media(prefers-reduced-motion:reduce){#heroEffects{display:none}#p0 .hero-bg,#heroContent,.page{animation:none!important;transform:none!important;filter:none!important;transition:opacity .15s linear!important}}
body:has(#p0.active)>nav{background:linear-gradient(#02040a55,transparent)}

@media(prefers-reduced-motion:reduce){#p0 .hero-cross{display:none!important}.page.active:not(#p0){animation:none!important}}