/* The centered title overlaps the large portrait; the logo keeps its own clear space. */
.hero--alien{--portrait-height:clamp(700px,calc(100svh - 100px),1080px);min-height:max(780px,100svh);display:flex;flex-direction:column;align-items:center;padding:136px 5% 25px;background:#010205;isolation:isolate}
.hero--alien .hero-stars{background:radial-gradient(ellipse 30% 40% at 50% 49%,#07347566 0%,#04163045 40%,transparent 75%),#010205;mask-image:none;-webkit-mask-image:none}
.hero--alien .hero-copy,.hero--alien .hero-followup{display:block;position:relative;width:100%;text-align:center;z-index:4;pointer-events:none}
.hero--alien .hero-copy{max-width:1080px;margin:0 auto}
.hero--alien .hero-copy .eyebrow{position:static;max-width:none;margin:0 0 20px;font-size:11px;letter-spacing:1.5px;line-height:1.8}
.hero--alien h1{display:block;margin:0;font-size:clamp(48px,6.2vw,88px);line-height:1.05;letter-spacing:-.065em;font-weight:700}
.hero--alien h1>span{position:static;display:block;width:auto;font:inherit;text-align:center}
/* Once the matching 3D text is ready, retain the HTML heading for layout and access. */
.hero--alien.has-layered-title #hero-title{opacity:0}
.hero--alien .hero-heading-left{color:#f7f7f9;background:none;background-clip:initial;-webkit-text-fill-color:currentColor}
.hero--alien .hero-title-break,.hero--alien .desktop-break{display:none}
.hero--alien .hero-followup{max-width:720px;margin-top:auto}
.hero--alien .hero-description{position:static;max-width:550px;width:100%;font-size:17px;line-height:1.7;margin:0 auto 24px}
.hero--alien .hero-actions{position:static;width:100%;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.hero--alien .hero-actions a{pointer-events:auto}
/* The neutral skull begins 12.8% down its canvas: anchor it just below the nav. */
.hero--alien .hero-object.hex-playground{position:absolute;left:50%;top:calc(116px - var(--portrait-height) * .128);bottom:auto;transform:translateX(-50%);width:min(92vw,980px);height:var(--portrait-height);max-height:none;margin:0;z-index:2;isolation:isolate}
.hero--alien .hex-canvas{border-radius:0;mask-image:linear-gradient(#000 75%,transparent 98%);-webkit-mask-image:linear-gradient(#000 75%,transparent 98%)}
.hero--alien .hex-playground::before{inset:-4% -2% 8%;height:auto;background:radial-gradient(ellipse 42% 46% at 50% 34%,#0750b35c 0%,#04327235 35%,#03163112 60%,transparent 80%);filter:blur(68px);z-index:-1}
/* The far beam remains behind the opaque portrait; stars retain their detail. */
.hero--alien .hero-light{display:block;width:clamp(580px,62vw,860px);height:clamp(580px,62vw,860px);z-index:1;background:radial-gradient(circle,#6dacf537 0%,#3278db30 18%,#164caa20 38%,#092f7110 56%,transparent 74%);filter:blur(48px)}
.hero--alien .hero-light::before,.hero--alien .hero-light::after{display:none}
.paused .hero--alien .hero-light{display:none}
.hero--alien .hex-playground .orbit-label{display:none}
.hero--alien .hero-bottom{position:relative;inset:auto;width:100%;max-width:1280px;margin:26px auto 0;z-index:4;pointer-events:none}
.hero--alien .sculpture-fallback{top:43%}
@media(min-width:801px) and (max-height:760px){.hero--alien h1{font-size:clamp(48px,5.5vw,74px)}}
@media(max-width:800px){.hero--alien{--portrait-height:clamp(520px,135vw,740px);min-height:max(780px,100svh);padding:126px 22px 24px}.hero--alien .hero-copy .eyebrow{font-size:10px;letter-spacing:1px;margin:0 0 18px}.hero--alien h1{font-size:clamp(37px,8.5vw,66px);line-height:1.1}.hero--alien .hero-object.hex-playground{top:calc(98px - var(--portrait-height) * .128);width:100%;margin:0}.hero--alien .hex-playground::before{inset:3% 0 8%}.hero--alien .hero-description{font-size:16px;max-width:460px;margin-bottom:18px}.hero--alien .hero-actions{gap:6px}.hero--alien .hero-bottom{margin-top:24px}.hero--alien .sculpture-phase{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero--alien .hex-playground::before{transition:none}}