/* Intro, pointer depth and continuous motion each own a separate layer. */
.hero{background:radial-gradient(ellipse at 78% 36%,#a8a0f811,transparent 52%)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--pointer-x,75%) var(--pointer-y,40%),#c8fcee0b,transparent 75%);z-index:0}
.hero-image{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,.65,.25,1);will-change:transform}
.portrait-scene{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;isolation:isolate;transform-style:preserve-3d}
.portrait-scene>img{height:91%;width:100%;object-fit:cover;object-position:50% 10%;filter:saturate(.9) contrast(1.04);mix-blend-mode:lighten;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 67%,transparent 99%),linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;position:relative;z-index:2}
.portrait-aura{position:absolute;inset:12% -8% 8%;border-radius:50%;background:radial-gradient(ellipse at 55% 42%,#a8a0f840,transparent 66%);filter:blur(14px);z-index:0;pointer-events:none}
.portrait-orbit{position:absolute;left:-2%;top:16%;width:106%;aspect-ratio:1;border-radius:50%;border:1px solid #b8aff83a;pointer-events:none;z-index:1}
.portrait-orbit::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 48%,#a8a0f8 58%,#dcff92 67%,transparent 72%);mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);filter:drop-shadow(0 0 8px #a8a0f8)}
.portrait-orbit::after{content:'';position:absolute;top:14%;left:14%;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px #d9fa73,0 0 35px #d9fa7360}
.portrait-orbit.orbit-inner{inset:21% auto auto 4%;width:94%;border-style:dashed;border-color:#a8a0f838;transform:rotate(110deg)}
.portrait-orbit.orbit-inner::before{background:conic-gradient(transparent 0 45%,#76e2ed 61%,transparent 73%)}
.portrait-orbit.orbit-inner::after{width:5px;height:5px;background:#93ecf8;box-shadow:0 0 15px #93ecf8}
.portrait-orbit.orbit-outer{left:-13%;top:8%;width:127%;border-color:#ffffff0b}
.portrait-orbit.orbit-outer::before{inset:14px;border:1px dashed #a8a0f825;background:none;mask:none}
.portrait-orbit.orbit-outer::after{height:4px;width:4px;opacity:.65}
.portrait-scan{position:absolute;left:10%;right:10%;top:23%;height:1px;z-index:3;opacity:0;background:linear-gradient(90deg,transparent,#bcf5ff90,transparent);box-shadow:0 0 17px 2px #a8a0f826;pointer-events:none}
.portrait-label{z-index:4;left:4%;bottom:21%;background:linear-gradient(110deg,#192127dd,#162326ac);border:1px solid #d9fa7340;border-left:2px solid var(--lime);border-radius:4px;box-shadow:0 8px 35px #0003;transform:translateZ(25px);padding:15px 19px}
.portrait-label span:first-child{color:var(--lime)}
.portrait-cross{z-index:4;top:15%;right:0;width:29px;height:29px;filter:drop-shadow(0 0 8px #d9fa7344)}
.hero-coordinates{z-index:3;color:#c0c7ce;right:-22px}
.hero-signal-label{position:absolute;left:4%;top:17%;z-index:4;display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.18em;color:#c8d4df}
.hero-signal-label::before{content:'';width:5px;height:5px;border-radius:50%;background:#a8a0f8;box-shadow:0 0 10px #a8a0f8}
.hero h1 span{background:linear-gradient(110deg,#a8a0f8 10%,#c6ddff 38%,#dbfba2 57%,#a8a0f8 83%);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;color:transparent}
#signal-field{opacity:1}
.hero-grid{background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent 26%,#000);transform:perspective(600px) rotateX(25deg) scale(1.2);opacity:.65}
.hero-statement em{color:var(--lime)}
html[data-motion=on] .hero-image{animation:portrait-arrive 1.2s both}
html[data-motion=on] .portrait-scene{animation:portrait-float 7s ease-in-out infinite}
html[data-motion=on] .portrait-orbit{animation:portrait-orbit 19s linear infinite}
html[data-motion=on] .portrait-orbit.orbit-inner{animation:portrait-orbit 27s linear infinite reverse}
html[data-motion=on] .portrait-orbit.orbit-outer{animation:portrait-orbit 39s linear infinite}
html[data-motion=on] .portrait-aura{animation:portrait-breathe 7s ease-in-out infinite}
html[data-motion=on] .portrait-scan{animation:portrait-scan 8s ease-in-out infinite}
html[data-motion=on] .hero h1 span{animation:name-spectrum 13s ease-in-out infinite alternate}
.hero[data-active=false] .portrait-scene,.hero[data-active=false] .portrait-orbit,.hero[data-active=false] .portrait-aura,.hero[data-active=false] .portrait-scan,.hero[data-active=false] h1 span{animation-play-state:paused!important}
@keyframes portrait-arrive{from{opacity:0}to{opacity:1}}
@keyframes portrait-float{0%,100%{transform:translate3d(0,9px,0) rotate(-.7deg)}50%{transform:translate3d(4px,-11px,0) rotate(.7deg)}}
@keyframes portrait-orbit{to{transform:rotate(360deg)}}
@keyframes portrait-breathe{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}
@keyframes portrait-scan{0%,18%,85%,100%{opacity:0;transform:translateY(0)}28%{opacity:.55}70%{opacity:.3;transform:translateY(290px)}80%{opacity:0;transform:translateY(320px)}}
@keyframes name-spectrum{from{background-position:0 50%}to{background-position:100% 50%}}
@media(max-width:1050px){.hero-signal-label{font-size:7px;top:20%}.portrait-label{left:0;bottom:24%}}
@media(max-width:760px){.hero-copy{padding-top:36px;padding-bottom:88px}.hero h1{font-size:16vw;line-height:.89;position:relative;z-index:5}.hero-image{height:340px;width:63%;top:54px;right:-3%;opacity:1;pointer-events:none}.portrait-scene>img{height:100%;mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 60%,transparent 96%),linear-gradient(to right,transparent,#000 13%,#000 88%,transparent);mask-composite:intersect}.portrait-orbit{top:21%;left:-6%;width:112%}.portrait-orbit.orbit-inner{top:25%;left:0;width:100%}.portrait-orbit.orbit-outer{top:15%;left:-16%;width:134%}.portrait-label,.hero-signal-label{display:none}.portrait-cross{right:11%;top:20%;width:18px;height:18px}.hero-statement{margin-top:163px;font-size:27px;position:relative;z-index:5}.hero-intro{max-width:340px}.portrait-scan{display:none}.hero-grid{background-size:42px 42px}.portrait-aura{inset:15% -6% 0}.hero::before{display:none}.hero-image{will-change:auto}}
@media(max-width:380px){.hero h1{font-size:16vw}.hero-image{height:290px;width:65%;top:57px;right:-4%}.hero-statement{margin-top:139px;font-size:24px}.hero-kicker{font-size:7px}.hero-intro{font-size:12px}}