/* the Aorta hexagon from the studio dashboard, used as a mask so it takes any brand color */
.landingpage{--ao-logo:url("/pub/api/files/download/aorta-logo.png/6adba5f33ffec94513d7bc95")}
.ao-logo-mark,.ao-logo-dot,.ao-hero::before,.ao-footer-word::before,.ao-cta::after{-webkit-mask:var(--ao-logo) center/contain no-repeat;mask:var(--ao-logo) center/contain no-repeat}

/* header: the beating dot becomes the hexagon */
.ao-logo-dot{width:21px;height:23px;border-radius:0;box-shadow:none;background:var(--ao-lime)}
.ao-logo:hover .ao-logo-dot{animation:aoHexTurn .7s cubic-bezier(.2,.8,.2,1)}
@keyframes aoHexTurn{from{transform:rotate(0)}to{transform:rotate(120deg)}}

/* hero: a big, slowly turning hexagon behind the headline */
.ao-hero::before{content:"";position:absolute;right:calc(var(--ao-gut) - 2vw);top:6%;width:clamp(200px,34vw,560px);aspect-ratio:259/284;background:linear-gradient(140deg,var(--ao-lime) 10%,var(--ao-cyan) 55%,var(--ao-violet) 95%);opacity:.92;pointer-events:none;animation:aoHexSpin 90s linear infinite}
@keyframes aoHexSpin{to{transform:rotate(360deg)}}
@media (max-width:860px){.ao-hero::before{opacity:.32;top:4%;right:-12vw;width:70vw}}

/* footer: hexagon in front of the outlined wordmark */
.ao-footer-word{font-size:clamp(64px,19vw,330px);display:flex;align-items:center;gap:.08em}
.ao-footer-word::before{content:"";flex:0 0 auto;width:.66em;height:.72em;background:var(--ao-lime)}

/* CTA: hexagon watermark next to the AORTA text */
.ao-cta::after{content:"";position:absolute;left:-6vw;top:-8vw;width:30vw;aspect-ratio:259/284;background:rgba(0,0,0,.14);pointer-events:none;transform:rotate(-12deg)}

@media (prefers-reduced-motion:reduce){.ao-hero::before,.ao-logo:hover .ao-logo-dot{animation:none}}