/* Hypersquare Details / Tiers CTA metaballs
   CSS/SVG animation only. JS only randomizes complete offscreen-to-offscreen passes. */

.hs-ready-cta[data-hs-metaballs] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #7000ec !important;
}

.hs-ready-cta[data-hs-metaballs]::before,
.hs-ready-cta[data-hs-metaballs]::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.hs-ready-cta[data-hs-metaballs] > :not(.hs-ready-cta__metaballs) {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.hs-ready-cta__metaballs {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.hs-metaball-rise {
    --hs-pass-duration: 16s;
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
    animation-duration: var(--hs-pass-duration);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

.hs-pass-steady { animation-name: hs-pass-steady; }
.hs-pass-soft-slow-early { animation-name: hs-pass-soft-slow-early; }
.hs-pass-soft-slow-mid { animation-name: hs-pass-soft-slow-mid; }
.hs-pass-soft-slow-late { animation-name: hs-pass-soft-slow-late; }
.hs-pass-float-a { animation-name: hs-pass-float-a; }
.hs-pass-float-b { animation-name: hs-pass-float-b; }

@keyframes hs-pass-steady {
    0% { transform: translateY(680px); }
    100% { transform: translateY(-370px); }
}

@keyframes hs-pass-soft-slow-early {
    0% { transform: translateY(680px); }
    18% { transform: translateY(555px); }
    34% { transform: translateY(475px); }
    52% { transform: translateY(290px); }
    74% { transform: translateY(60px); }
    100% { transform: translateY(-370px); }
}

@keyframes hs-pass-soft-slow-mid {
    0% { transform: translateY(680px); }
    22% { transform: translateY(450px); }
    42% { transform: translateY(300px); }
    58% { transform: translateY(230px); }
    76% { transform: translateY(35px); }
    100% { transform: translateY(-370px); }
}

@keyframes hs-pass-soft-slow-late {
    0% { transform: translateY(680px); }
    26% { transform: translateY(405px); }
    50% { transform: translateY(150px); }
    68% { transform: translateY(60px); }
    82% { transform: translateY(10px); }
    100% { transform: translateY(-370px); }
}

@keyframes hs-pass-float-a {
    0% { transform: translateY(680px); }
    20% { transform: translateY(470px); }
    36% { transform: translateY(350px); }
    54% { transform: translateY(300px); }
    70% { transform: translateY(180px); }
    84% { transform: translateY(30px); }
    100% { transform: translateY(-370px); }
}

@keyframes hs-pass-float-b {
    0% { transform: translateY(680px); }
    18% { transform: translateY(500px); }
    32% { transform: translateY(425px); }
    48% { transform: translateY(265px); }
    62% { transform: translateY(195px); }
    78% { transform: translateY(35px); }
    100% { transform: translateY(-370px); }
}

.hs-metaball-lane,
.hs-metaball-drift,
.hs-metaball-wander,
.hs-metaball-body {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.hs-metaball-lane {
    transform: translateX(var(--hs-lane-shift, 0px));
}

.hs-metaball-drift {
    --hs-drift-a: -90px;
    --hs-drift-b: 90px;
    --hs-drift-duration: 9s;
    --hs-drift-delay: 0s;
    animation: hs-metaball-drift var(--hs-drift-duration) ease-in-out infinite alternate var(--hs-drift-delay);
}

.hs-metaball-wander {
    --hs-wander-a: 35px;
    --hs-wander-b: -55px;
    --hs-wander-c: 20px;
    --hs-wander-duration: 13s;
    --hs-wander-delay: 0s;
    animation: hs-metaball-wander var(--hs-wander-duration) ease-in-out infinite var(--hs-wander-delay);
}

@keyframes hs-metaball-drift {
    from { transform: translateX(var(--hs-drift-a)); }
    to { transform: translateX(var(--hs-drift-b)); }
}

@keyframes hs-metaball-wander {
    0% { transform: translateX(0); }
    27% { transform: translateX(var(--hs-wander-a)); }
    58% { transform: translateX(var(--hs-wander-b)); }
    82% { transform: translateX(var(--hs-wander-c)); }
    100% { transform: translateX(0); }
}

.hs-metaball-body {
    animation: hs-metaball-pulse var(--hs-pulse-duration, 5s) ease-in-out infinite;
}

@keyframes hs-metaball-pulse {
    50% { transform: scale(1.025, .99); }
}

@media (prefers-reduced-motion: reduce) {
    .hs-ready-cta[data-hs-metaballs] .hs-metaball-rise,
    .hs-ready-cta[data-hs-metaballs] .hs-metaball-drift,
    .hs-ready-cta[data-hs-metaballs] .hs-metaball-wander,
    .hs-ready-cta[data-hs-metaballs] .hs-metaball-body {
        animation: none !important;
    }
}