.hero {
    position: relative;
    isolation: isolate;
    min-height: max(620px, calc(100svh - 15rem));
    overflow: hidden;
    overflow-anchor: none;
    border-radius: var(--main-border-radius);
    color: var(--clr-tertiary);
    background: var(--clr-secondary);
    box-shadow: 0 1.6rem 4rem rgba(11, 21, 28, .14);
}

.hero-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-flow svg {
    position: absolute;
    left: -10%;
    top: -10%;
    width: 120%;
    height: 120%;
    overflow: visible;
}

.hero-flow__waves {
    transform-box: fill-box;
    transform-origin: center;
    filter: url(#hero-flow-soften);
    will-change: transform;
    animation: hero-waves-drift 11s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.hero-flow__wave--light {
    fill: url(#hero-flow-light);
    opacity: .76;
}

.hero-flow__wave--dark {
    fill: url(#hero-flow-dark);
    opacity: .9;
}

.hero-flow__wave--echo {
    fill: url(#hero-flow-echo);
    opacity: .34;
}

@keyframes hero-waves-drift {
    0% { transform: translate3d(-4.5%, -3%, 0) rotate(-.7deg) scale(1.035); }
    48% { transform: translate3d(4%, 3.5%, 0) rotate(.45deg) scale(1.075); }
    100% { transform: translate3d(-1.5%, 7%, 0) rotate(-.25deg) scale(1.045); }
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(22, 43, 54, .5) 0%, rgba(22, 43, 54, .08) 57%, transparent 72%);
}

.hero__content {
    position: relative;
    z-index: 8;
    width: min(54%, 48rem);
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(3.2rem, 7vw, 7.5rem) 0 clamp(3.2rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5.6rem);
}

.hero__title {
    margin: 0;
    font-size: clamp(3.4rem, 6.25vw, 7rem);
    line-height: .92;
    letter-spacing: 2px;
    text-wrap: balance;
    font-weight: 700;
}

.hero__title > span {
    display: block;
    opacity: 0;
    transform: translateY(.65em);
    animation: copy-in .82s var(--copy-delay, .08s) cubic-bezier(.16, 1, .3, 1) forwards;
}

.hero__title > span:nth-child(2) { --copy-delay: .16s; }
.hero__title > span:nth-child(3) { --copy-delay: .24s; }

.hero__title em {
    color: var(--clr-primary);
    font-style: normal;
}

.hero__intro {
    font-size: 1.3em; 
    line-height: 1.4em;
    margin-top: 1.2em;
    opacity: 0;
    transform: translateY(1rem);
    animation: fade-up .72s .5s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

.hero-art {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-art::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -18%;
    right: -10%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(69, 100, 116, .2) 0 28%, rgba(69, 100, 116, .09) 48%, transparent 72%);
}

.hero-art__field {
    --blob-x: 0px;
    --blob-y: 0px;
    position: absolute;
    z-index: 1;
    right: -20px;
    bottom: -20px;
    width: auto;
    height: 80%;
    max-width: 80%;
    aspect-ratio: 707.5 / 599.29;
    transform: translate3d(var(--blob-x), var(--blob-y), 0);
    transform-origin: 100% 100%;
    animation: field-arrive 1.18s .1s cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform;
}

.hero-art__field::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 13% 3% 2% 8%;
    border-radius: 48% 52% 42% 58%;
    background: radial-gradient(ellipse at 58% 56%, rgba(5, 15, 21, .34) 0 18%, rgba(5, 15, 21, .16) 42%, transparent 73%);
    transform: translate3d(-1.1rem, 1.35rem, 0);
}

.hero-art__blob {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.blob-orbs {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    animation: blob-color-drift 9.5s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

@keyframes field-arrive {
    from {
        opacity: 1;
        transform: translate3d(var(--blob-x), var(--blob-y), 0) scale(.04);
    }
    to {
        opacity: 1;
        transform: translate3d(var(--blob-x), var(--blob-y), 0) scale(1);
    }
}

@keyframes blob-color-drift {
    0% { transform: translate3d(-8%, -6%, 0) rotate(-2deg) scale(1.08); }
    50% { transform: translate3d(7%, 4%, 0) rotate(1.4deg) scale(1.12); }
    100% { transform: translate3d(-2%, 9%, 0) rotate(-.6deg) scale(1.07); }
}

@supports (-webkit-touch-callout: none) {
    .hero-flow__waves {
        transform: none;
        filter: none;
        will-change: opacity;
        animation: safari-flow-breathe 7s ease-in-out infinite alternate;
    }

    .blob-orbs {
        transform: none;
        will-change: opacity;
        animation: safari-blob-breathe 6s ease-in-out infinite alternate;
    }

    .hero-art__field,
    .hero-art__brandmark,
    .hero-art__zebra {
        will-change: auto;
    }
}

@keyframes safari-flow-breathe {
    from { opacity: .72; }
    to { opacity: 1; }
}

@keyframes safari-blob-breathe {
    from { opacity: .76; }
    to { opacity: 1; }
}

.hero-art__brandmark {
    --logo-x: 0px;
    --logo-y: 0px;
    position: absolute;
    z-index: 2;
    right: 15px;
    bottom: 7%;
    width: calc(100% - 30px);
    opacity: 0;
    transform: translate3d(var(--logo-x), var(--logo-y), 0);
    animation: brandmark-arrive .92s .56s cubic-bezier(.16, 1, .3, 1) forwards;
    will-change: transform;
}

.hero-art__brandmark img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

@keyframes brandmark-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

.hero-art__zebra {
    --zebra-x: 0px;
    --zebra-y: 0px;
    position: absolute;
    z-index: 3;
    right: clamp(3rem, 10vw, 10.5rem);
    bottom: -90%;
    height: 188%;
    opacity: 0;
    transform: translate3d(var(--zebra-x), var(--zebra-y), 0);
    transform-origin: 50% 22%;
    animation: zebra-arrive 1.08s .82s cubic-bezier(.16, 1, .3, 1) forwards;
    will-change: transform;
}

.hero-art__zebra::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 8%;
    top: 18%;
    width: 74%;
    height: 68%;
    background: radial-gradient(ellipse at center, rgba(4, 13, 19, .44) 0 16%, rgba(4, 13, 19, .2) 43%, transparent 72%);
    transform: translate3d(-7%, 4%, 0);
}

.hero-art__zebra img {
    position: relative;
    z-index: 1;
    display: block;
    width: auto;
    height: 100%;
}

@keyframes zebra-arrive {
    from {
        opacity: 0;
        transform: translate3d(calc(var(--zebra-x) + 10rem), calc(var(--zebra-y) + 2rem), 0) scale(.91);
    }
    to {
        opacity: 1;
        transform: translate3d(var(--zebra-x), var(--zebra-y), 0) scale(1);
    }
}

.hero .button {
    min-height: 3.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    border-radius: 999px;
    text-decoration: none;
}

.hero .button--primary {
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-top: clamp(1.6rem, 3vw, 2.5rem);
    padding: .72rem 1.35rem .78rem 1.55rem;
    color: var(--white);
    background: var(--clr-primary);
    opacity: 0;
    transform: translateY(1rem);
    animation: fade-up .7s .62s cubic-bezier(.16, 1, .3, 1) forwards;
    transition: color 220ms ease, box-shadow 240ms ease;
}

.hero .button--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--clr-tertiary);
    transform: translateY(105%);
    transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
}

.hero .button--primary > * { position: relative; z-index: 1; }

.hero .button--primary:is(:hover, :focus-visible) {
    color: var(--blue-dark);
    box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .23);
}

.hero .button--primary:is(:hover, :focus-visible)::before { transform: translateY(0); }
.hero .button--primary > span:last-child { font-size: 1.2em; }

.hero .scroll-cue {
    position: absolute;
    right: clamp(1.3rem, 3vw, 3rem);
    bottom: clamp(1.3rem, 2.5vw, 2.4rem);
    z-index: 9;
    width: 3.65rem;
    height: 3.65rem;
    display: grid;
    place-items: center;
    color: var(--clr-primary);
    border: 1px solid rgba(254, 239, 232, .62);
    border-radius: 50%;
    font-size: 1.65rem;
    text-decoration: none;
    transition: color 200ms ease, background 200ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.hero .scroll-cue:is(:hover, :focus-visible) {
    color: var(--clr-secondary);
    background: var(--clr-tertiary);
    transform: translateY(4px);
}

@media (max-width: 1120px) 
{
    .hero__content { width: 58%; padding-left: clamp(1.5rem, 4vw, 3.5rem); }
    .hero__title { font-size: clamp(3.25rem, 6.5vw, 5.35rem); }
    .hero-art__zebra { right: 9%; }
}

@media (max-width: 820px) 
{
    .hero { min-height: max(660px, calc(100svh - 11rem)); }
    .hero::after { background: linear-gradient(180deg, rgba(5, 13, 18, .28) 0%, transparent 58%); }

    .hero__content {
        width: 100%;
        min-height: auto;
        padding: clamp(2.6rem, 8vw, 4.5rem) clamp(1.4rem, 6vw, 3rem) 0;
    }

    .hero__title { max-width: 11ch; font-size: clamp(3.4rem, 10vw, 5.25rem); }
    .hero__intro { max-width: 34rem; margin-top: 1.5rem; }
    .hero .button--primary { margin-top: 1.5rem; }

    .hero-art__zebra {
        right: 13%;
        bottom: -43%;
        height: 90%;
    }

    .hero .scroll-cue { right: 1.15rem; bottom: 1.15rem; }
}

@media (max-width: 540px) 
{
    .hero__title {
        max-width: none;
        font-size: clamp(2.45rem, 11.2vw, 3.5rem);
    }

    .hero__title > span:nth-child(2) em { display: block; }
    .hero__intro { max-width: 28rem; font-size: .95rem; line-height: 1.45; }

    .hero-art__zebra {
        right: 8%;
        bottom: -40%;
        height: 88%;
    }

    .hero .scroll-cue { width: 3.2rem; height: 3.2rem; }
}

@media (orientation: portrait) 
{
    .hero-art__field {
        width: 80%;
        height: auto;
        max-height: 80%;
    }
}

@media (orientation: landscape) 
{
    .hero-art__brandmark {
        top: 50%;
        left: 91%;
        right: auto;
        bottom: auto;
        width: auto;
        height: 90%;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        transform: translate(calc(-50% + var(--logo-x)), calc(-50% + var(--logo-y)));
    }

    .hero-art__brandmark img {
        width: 100%;
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) 
{
    .hero,
    .hero *,
    .hero::before,
    .hero::after,
    .hero *::before,
    .hero *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}