/* Shared closing CTA atmosphere, matched to octaboo.com/contact.html. */
.cta-section > div > .cta-stars-media {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

:root[data-theme="dark"] .cta-section > div {
    background: #0f0f24;
}

.cta-section > div::before {
    inset: auto;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 660px;
    height: 304px;
    background: linear-gradient(
        98deg,
        #00e3f2 5.55%,
        #ff9b00 32.85%,
        #f00 57.49%,
        #bd00ff 86.75%
    );
    opacity: 0.1;
    filter: blur(75px);
    animation: octa-cta-star-float-x 2s linear infinite;
}

.cta-section > div::after {
    display: none;
}

.cta-stars-grid {
    position: absolute;
    inset-block: 20px;
    inset-inline: clamp(24px, 8.35vw, 110px);
    background-image: url("../images/cta/free-trail-shape-3.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cta-star {
    position: absolute;
    width: 17px;
    height: 17px;
    display: block;
    transform-origin: center;
    will-change: transform, opacity;
}

.cta-star img {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

.cta-star-1 {
    inset-block-start: 109px;
    inset-inline-start: calc(50% - 89px);
    animation: octa-cta-star-zoom 3s ease-in-out infinite;
}

.cta-star-2 {
    inset-block-start: 122px;
    inset-inline-end: calc(50% - 91px);
    animation: octa-cta-star-float-y 2s linear infinite;
}

.cta-star-3 {
    inset-block-start: 230px;
    inset-inline-start: calc(50% - 233px);
    animation: octa-cta-star-float-x 2s linear infinite;
}

.cta-star-4 {
    inset-block-start: 230px;
    inset-inline-end: calc(50% - 252px);
    animation: octa-cta-star-zoom 3s ease-in-out infinite;
}

@keyframes octa-cta-star-zoom {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0.7);
    }

    50% {
        opacity: 1;
        transform: rotate(180deg) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) scale(0.7);
    }
}

@keyframes octa-cta-star-float-x {
    0%,
    100% {
        transform: translateX(-30px);
    }

    50% {
        transform: translateX(-10px);
    }
}

@keyframes octa-cta-star-float-x-rtl {
    0%,
    100% {
        transform: translateX(30px);
    }

    50% {
        transform: translateX(10px);
    }
}

@keyframes octa-cta-star-float-y {
    0%,
    100% {
        transform: translateY(-20px);
    }

    50% {
        transform: translateY(-10px);
    }
}

html[dir="rtl"] .cta-star-3 {
    animation-name: octa-cta-star-float-x-rtl;
}

html[dir="rtl"] .cta-section > div::before {
    animation-name: octa-cta-star-float-x-rtl;
}

:root[data-theme="light"] .cta-section > div::before {
    opacity: 0.06;
}

:root[data-theme="light"] .cta-stars-grid {
    opacity: 0.36;
    filter: brightness(0) saturate(100%) invert(29%) sepia(76%) saturate(2034%) hue-rotate(249deg) brightness(89%) contrast(96%);
}

:root[data-theme="light"] .cta-star img {
    filter: brightness(0) saturate(100%) invert(29%) sepia(76%) saturate(2034%) hue-rotate(249deg) brightness(89%) contrast(96%);
}

@media (max-width: 767px) {
    .cta-stars-grid {
        inset-block: 16px;
        inset-inline: 20px;
    }

    .cta-star-1 {
        inset-block-start: 23%;
        inset-inline-start: 27%;
    }

    .cta-star-2 {
        inset-block-start: 26%;
        inset-inline-end: 27%;
    }

    .cta-star-3 {
        inset-block-start: 54%;
        inset-inline-start: 16%;
    }

    .cta-star-4 {
        inset-block-start: 54%;
        inset-inline-end: 16%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-star,
    html[dir="rtl"] .cta-star-3 {
        opacity: 0.72;
        animation: none;
        transform: none;
        will-change: auto;
    }

    .cta-section > div::before {
        animation: none;
        transform: none;
    }
}

html.reduce-motion .cta-star,
html[dir="rtl"].reduce-motion .cta-star-3 {
    opacity: 0.72;
    animation: none;
    transform: none;
    will-change: auto;
}

html.reduce-motion .cta-section > div::before {
    animation: none;
    transform: none;
}

@media (forced-colors: active) {
    .cta-stars-media {
        display: none;
    }
}

@media print {
    .cta-stars-media {
        display: none;
    }
}