/* Top page section reveal animations. Layout is intentionally untouched. */
body.home.js-section-motion-ready .js-reveal-heading,
body.home.js-section-motion-ready .js-reveal-copy,
body.home.js-section-motion-ready .js-reveal-card,
body.home.js-section-motion-ready .js-reveal-button {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition:
        opacity 0.75s ease,
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.95s ease;
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

body.home.js-section-motion-ready .js-reveal-line {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition:
        opacity 0.5s ease,
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

body.home.js-section-motion-ready .js-motion-from-left {
    transform: translate3d(-42px, 0, 0);
}

body.home .js-section-animated .js-reveal-heading,
body.home .js-section-animated .js-reveal-copy,
body.home .js-section-animated .js-reveal-card,
body.home .js-section-animated .js-reveal-button,
body.home .js-section-animated .js-reveal-line {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
}

body.home.js-section-motion-ready #webinar-section .js-reveal-card,
body.home.js-section-motion-ready #column-section .js-reveal-card {
    transform: translate3d(0, 38px, 0);
}

body.home #hero-section .hero {
    overflow: hidden;
    --hero-scroll: 0;
    --hero-drift: 0;
}

body.home .hero-floating-circles {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

body.home .hero-floating-circles span {
    position: absolute;
    display: block;
    width: var(--circle-size, 120px);
    height: var(--circle-size, 120px);
    border: var(--circle-border, 1px) solid var(--circle-color, rgba(255, 255, 255, 0.34));
    border-radius: 50%;
    opacity: var(--circle-opacity, 0.65);
    transform:
        translate3d(
            calc(var(--hero-scroll, 0) * var(--circle-scroll-x, 0.02px)),
            calc(var(--hero-scroll, 0) * var(--circle-scroll-y, -0.08px)),
            0
        )
        rotate(calc(var(--hero-drift, 0) * var(--circle-rotate, 0.05deg)));
    transform-origin: 52% 48%;
    mix-blend-mode: screen;
    will-change: transform, opacity, border-radius;
}

body.home .hero-floating-circles span::before {
    content: "";
    position: absolute;
    inset: var(--circle-inset, 18%);
    border-radius: inherit;
    border: 1px solid var(--circle-inner, rgba(255, 255, 255, 0.16));
    background: var(--circle-fill, transparent);
    animation: heroCircleDrift var(--circle-duration, 14s) ease-in-out infinite alternate;
    animation-delay: var(--circle-delay, 0s);
}

body.home .hero-floating-circles span:nth-child(1) {
    --circle-size: clamp(180px, 17vw, 300px);
    --circle-color: rgba(40, 167, 225, 0.34);
    --circle-border: 2px;
    --circle-scroll-x: 0.08px;
    --circle-scroll-y: -0.16px;
    --circle-rotate: 0.09deg;
    --circle-duration: 16s;
    top: 8%;
    left: 5%;
}

body.home .hero-floating-circles span:nth-child(2) {
    --circle-size: clamp(72px, 8vw, 132px);
    --circle-color: rgba(230, 0, 18, 0.42);
    --circle-inner: rgba(230, 0, 18, 0.18);
    --circle-scroll-x: -0.18px;
    --circle-scroll-y: 0.11px;
    --circle-rotate: -0.16deg;
    --circle-duration: 12s;
    --circle-delay: -4s;
    top: 16%;
    right: 12%;
}

body.home .hero-floating-circles span:nth-child(3) {
    --circle-size: clamp(230px, 23vw, 420px);
    --circle-color: rgba(255, 255, 255, 0.18);
    --circle-inner: rgba(40, 167, 225, 0.18);
    --circle-scroll-x: -0.09px;
    --circle-scroll-y: -0.23px;
    --circle-rotate: 0.11deg;
    --circle-duration: 20s;
    --circle-delay: -7s;
    bottom: -14%;
    right: -7%;
}

body.home .hero-floating-circles span:nth-child(4) {
    --circle-size: clamp(44px, 5vw, 86px);
    --circle-color: rgba(255, 255, 255, 0.5);
    --circle-fill: rgba(255, 255, 255, 0.08);
    --circle-scroll-x: 0.22px;
    --circle-scroll-y: -0.05px;
    --circle-rotate: -0.22deg;
    --circle-duration: 10s;
    --circle-delay: -2s;
    top: 38%;
    left: 18%;
}

body.home .hero-floating-circles span:nth-child(5) {
    --circle-size: clamp(110px, 11vw, 190px);
    --circle-color: rgba(40, 167, 225, 0.28);
    --circle-scroll-x: 0.14px;
    --circle-scroll-y: 0.18px;
    --circle-rotate: 0.18deg;
    --circle-duration: 18s;
    --circle-delay: -9s;
    bottom: 19%;
    left: 7%;
}

body.home .hero-floating-circles span:nth-child(6) {
    --circle-size: clamp(58px, 6vw, 104px);
    --circle-color: rgba(230, 0, 18, 0.36);
    --circle-scroll-x: -0.24px;
    --circle-scroll-y: -0.12px;
    --circle-rotate: 0.28deg;
    --circle-duration: 13s;
    --circle-delay: -6s;
    bottom: 30%;
    right: 24%;
}

body.home .hero-floating-circles span:nth-child(7) {
    --circle-size: clamp(150px, 14vw, 250px);
    --circle-color: rgba(255, 255, 255, 0.16);
    --circle-border: 10px;
    --circle-scroll-x: 0.05px;
    --circle-scroll-y: -0.3px;
    --circle-rotate: -0.08deg;
    --circle-duration: 22s;
    --circle-delay: -11s;
    top: -8%;
    right: 31%;
}

body.home .hero-floating-circles span:nth-child(8) {
    --circle-size: clamp(34px, 4vw, 62px);
    --circle-color: rgba(40, 167, 225, 0.62);
    --circle-fill: rgba(40, 167, 225, 0.18);
    --circle-scroll-x: -0.32px;
    --circle-scroll-y: 0.2px;
    --circle-rotate: -0.3deg;
    --circle-duration: 11s;
    --circle-delay: -3s;
    top: 64%;
    right: 9%;
}

body.home .hero-floating-circles span:nth-child(9) {
    --circle-size: clamp(90px, 9vw, 160px);
    --circle-color: rgba(255, 255, 255, 0.24);
    --circle-scroll-x: 0.28px;
    --circle-scroll-y: 0.06px;
    --circle-rotate: 0.2deg;
    --circle-duration: 15s;
    --circle-delay: -5s;
    top: 72%;
    left: 30%;
}

body.home .hero-floating-circles span:nth-child(10) {
    --circle-size: clamp(52px, 5vw, 88px);
    --circle-color: rgba(230, 0, 18, 0.46);
    --circle-scroll-x: 0.18px;
    --circle-scroll-y: -0.26px;
    --circle-rotate: 0.34deg;
    --circle-duration: 9s;
    --circle-delay: -1s;
    top: 25%;
    left: 45%;
}

body.home .hero-floating-circles span:nth-child(11) {
    --circle-size: clamp(120px, 12vw, 210px);
    --circle-color: rgba(40, 167, 225, 0.2);
    --circle-border: 6px;
    --circle-scroll-x: -0.14px;
    --circle-scroll-y: 0.28px;
    --circle-rotate: -0.12deg;
    --circle-duration: 19s;
    --circle-delay: -8s;
    bottom: -6%;
    left: 44%;
}

body.home .hero-floating-circles span:nth-child(12) {
    --circle-size: clamp(26px, 3vw, 48px);
    --circle-color: rgba(255, 255, 255, 0.62);
    --circle-fill: rgba(255, 255, 255, 0.18);
    --circle-scroll-x: -0.38px;
    --circle-scroll-y: -0.2px;
    --circle-rotate: 0.42deg;
    --circle-duration: 8s;
    --circle-delay: -6s;
    top: 48%;
    right: 42%;
}

body.home .hero-left-circle-decor {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

body.home .hero-left-circle-decor span {
    position: absolute;
    display: block;
    border-radius: 50%;
    will-change: transform;
}

body.home .hero-left-circle-red {
    top: clamp(96px, 18vh, 172px);
    left: clamp(40px, 8.4vw, 136px);
    width: clamp(54px, 6vw, 94px);
    height: clamp(54px, 6vw, 94px);
    background: #e60012;
    box-shadow: 0 16px 32px rgba(230, 0, 18, 0.2);
    transform:
        translate3d(
            calc(var(--hero-scroll, 0) * -0.045px),
            calc(var(--hero-scroll, 0) * 0.11px),
            0
        )
        scale(calc(1 + min(var(--hero-drift, 0) * 0.00012, 0.08)));
    animation: heroLeftRedFloat 9s ease-in-out infinite alternate;
}

body.home .hero-left-circle-blue {
    bottom: clamp(64px, 12vh, 118px);
    left: clamp(-42px, 3.2vw, 52px);
    width: clamp(174px, 19vw, 310px);
    height: clamp(174px, 19vw, 310px);
    border: clamp(9px, 0.85vw, 14px) solid #009fe3;
    background: transparent;
    box-shadow: 0 18px 42px rgba(0, 159, 227, 0.16);
    transform:
        translate3d(
            calc(var(--hero-scroll, 0) * 0.075px),
            calc(var(--hero-scroll, 0) * -0.08px),
            0
        )
        rotate(calc(var(--hero-drift, 0) * -0.035deg));
    animation: heroLeftBlueFloat 13s ease-in-out infinite alternate;
}

@keyframes heroCircleDrift {
    0% {
        transform: translate3d(-7%, 5%, 0) scale(0.86);
        border-radius: 50%;
        opacity: 0.45;
    }
    44% {
        transform: translate3d(9%, -8%, 0) scale(1.08);
        border-radius: 42% 58% 50% 50%;
        opacity: 0.92;
    }
    100% {
        transform: translate3d(-3%, 11%, 0) scale(0.96);
        border-radius: 57% 43% 48% 52%;
        opacity: 0.62;
    }
}

@keyframes heroLeftRedFloat {
    from {
        margin-top: -8px;
        margin-left: 4px;
    }
    to {
        margin-top: 14px;
        margin-left: -10px;
    }
}

@keyframes heroLeftBlueFloat {
    from {
        border-radius: 50%;
        margin-bottom: 0;
        margin-left: -8px;
    }
    to {
        border-radius: 48% 52% 46% 54%;
        margin-bottom: 18px;
        margin-left: 16px;
    }
}

@media screen and (max-width: 950px) {
    body.home .hero-left-circle-red {
        top: 104px;
        left: 22px;
        width: 54px;
        height: 54px;
    }

    body.home .hero-left-circle-blue {
        bottom: 38px;
        left: -64px;
        width: 178px;
        height: 178px;
        border-width: 10px;
    }
}

@media screen and (max-width: 767px) {
    body.home .hero-floating-circles span:nth-child(n+9) {
        display: none;
    }

    body.home .hero-floating-circles span:nth-child(1) {
        left: -18%;
        top: 10%;
    }

    body.home .hero-floating-circles span:nth-child(3) {
        right: -28%;
        bottom: 4%;
    }

    body.home .hero-floating-circles span:nth-child(7) {
        right: 14%;
        top: -13%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home.js-section-motion-ready .js-reveal-heading,
    body.home.js-section-motion-ready .js-reveal-copy,
    body.home.js-section-motion-ready .js-reveal-card,
    body.home.js-section-motion-ready .js-reveal-button,
    body.home.js-section-motion-ready .js-reveal-line {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }

    body.home .hero-floating-circles span,
    body.home .hero-floating-circles span::before {
        animation: none;
        transform: none;
    }
}