/* Two visual languages, using the original portrait assets. */
.identity{background:linear-gradient(90deg,#fa0704 0 50%,#20201e 50% 100%)}
.identity-scroll{background:linear-gradient(90deg,#fa0704 0 50%,#20201e 50% 100%)}
.hero-heading{background:linear-gradient(90deg,var(--ink) 0 50%,var(--paper) 50% 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.portrait-stage{top:31%;width:min(49vw,56svh,620px)}
.side-link.right,.scroll-hint{color:var(--paper)}
body:not(.subpage):not(.past-hero) header nav{color:var(--paper)}
.hero-bottom .explore{background:var(--paper);border-color:var(--paper);color:var(--ink);box-shadow:0 0 0 4px #17171515}
.background.technical{left:50%;background-image:linear-gradient(#faf7ee15 1px,transparent 1px),linear-gradient(90deg,#faf7ee15 1px,transparent 1px)}
.technical:before,.technical:after{border-color:var(--paper)}
.background.network{right:50%;overflow:hidden}
.identity[data-hover=left] .network,.identity[data-hover=right] .technical{opacity:.16}
.splash{position:absolute;top:28%;width:50%;height:62%;z-index:0;pointer-events:none;opacity:0;transform:scale(.5);transition:opacity .25s,transform .6s cubic-bezier(.16,1,.3,1)}
.splash.left{left:0;color:#ffbb69;transform-origin:78% 50%}
.splash.right{right:0;color:#faf7ee;transform-origin:22% 50%}
.splash svg{width:100%;height:100%;overflow:visible}
.splash .burst{fill:currentColor;transform-origin:50% 50%;animation:splash-breathe 3.5s ease-in-out infinite alternate;animation-play-state:paused}
.splash .drop{fill:currentColor;transform-box:fill-box;transform-origin:center;animation:splash-droplet 2.6s ease-in-out infinite alternate;animation-play-state:paused}
.splash .drop:nth-child(2n){animation-delay:-1.4s}
.splash .ring{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:5 11;transform-origin:50% 50%;animation:rotate 32s linear infinite;animation-play-state:paused}
.identity[data-hover=left] .splash.left,.identity[data-hover=right] .splash.right{opacity:.82;transform:scale(1)}
.identity[data-hover=left] .splash.left svg *,.identity[data-hover=right] .splash.right svg *{animation-play-state:running}
.identity[data-hover=right] .side-link.right{color:var(--paper);text-shadow:0 1px 8px #20201e}
.side-link{transition:top .4s,color .3s}
@keyframes splash-breathe{from{transform:rotate(-5deg) scale(.94)}to{transform:rotate(5deg) scale(1.06)}}
@keyframes splash-droplet{from{transform:translateY(-7px) scale(.8)}to{transform:translateY(9px) scale(1.15)}}
@media(min-width:761px){.identity[data-state=open] .side-link{top:82%;font-size:20px}.identity[data-state=open] .face.left{transform:translateX(calc(var(--progress) * -55%)) rotate(-7deg) scale(.86)}.identity[data-state=open] .face.right{transform:translateX(calc(var(--progress) * 55%)) rotate(7deg) scale(.86)}}
@media(min-width:1500px){.portrait-stage{top:30%;width:min(47vw,56svh,680px)}}
@media(max-width:760px){.portrait-stage{top:31%;width:min(82vw,47svh)}.hero-heading{font-size:clamp(40px,10.7vw,80px)}.splash{top:28%;height:45%}.side-link.right{color:var(--paper)}body:not(.subpage):not(.past-hero) .menu-toggle{color:var(--paper)}body:not(.subpage):not(.past-hero) header nav{color:var(--ink)}.identity[data-state=open] .face.left{transform:translateX(calc(var(--progress) * -42%)) rotate(-7deg) scale(.86)}.identity[data-state=open] .face.right{transform:translateX(calc(var(--progress) * 42%)) rotate(7deg) scale(.86)}}
@media(prefers-reduced-motion:reduce){.splash,.splash svg *{animation:none!important;transition:none!important}}
@media(max-width:760px){.identity[data-hover=left]:not([data-state=open]) .face.left{transform:translateX(calc(-22% - var(--progress) * 20%)) rotate(-5deg) scale(.94)}.identity[data-hover=right]:not([data-state=open]) .face.right{transform:translateX(calc(22% + var(--progress) * 20%)) rotate(5deg) scale(.94)}}