/* Hero */
.cube {
    animation: cubeFloat 6s ease-in-out infinite;
}

@keyframes cubeFloat {

    0%,
    100% {
        transform: rotateX(-25deg) rotateY(45deg) translateY(0);
    }

    50% {
        transform: rotateX(-25deg) rotateY(45deg) translateY(-10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cube {
        animation: none;
    }
}


/* About */
.aboutBadge {
    animation: aboutBadgeFloat 3.6s ease-in-out infinite;
}

@keyframes aboutBadgeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

@media (prefers-reduced-motion: reduce) {
    .aboutBadge {
        animation: none;
    }
}

/* Services Hero */
.servicesHeroArt {
    --float-amount: -10px;
    --base-transform: translateY(0);
    animation: servicesHeroFloat 7s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

.servicesHeroSwirl {
    animation: servicesHeroSwirl 12s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}

.servicesHeroDots {
    animation: servicesHeroDots 6s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}

@keyframes servicesHeroFloat {

    0%,
    100% {
        transform: var(--base-transform) translateY(0);
    }

    50% {
        transform: var(--base-transform) translateY(var(--float-amount));
    }
}

@keyframes servicesHeroSwirl {

    0%,
    100% {
        transform: var(--base-transform) translate(0, 0) rotate(0deg);
    }

    50% {
        transform: var(--base-transform) translate(14px, -10px) rotate(1.2deg);
    }
}

@keyframes servicesHeroDots {

    0%,
    100% {
        transform: var(--base-transform) translateY(0) scale(1);
    }

    50% {
        transform: var(--base-transform) translateY(var(--float-amount)) scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .servicesHeroArt {
        animation: none;
    }
}

/* Companies */
.companiesSec .companyLogo {
    position: relative;
    overflow: hidden;
    transition: transform 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
    will-change: transform;
}

.companiesSec .companyLogo::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -120%;
    width: 60%;
    height: 180%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: skewX(-12deg);
    transition: opacity 0.45s ease, transform 0.45s ease;
    pointer-events: none;
}

X .companiesSec .companyLogo img {
    position: relative;
    z-index: 1;
    /* filter: grayscale(1) saturate(0.2); */
    opacity: 0.78;
    transform: scale(0.96);
    transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}

.companiesSec .companyLogo:hover {
    transform: translateY(-4px) rotate(-0.6deg);
    box-shadow: 0 18px 30px rgba(22, 28, 45, 0.14);
    background-color: #f6f8ff;
}

.companiesSec .companyLogo:hover::after {
    opacity: 1;
    transform: translateX(300%) skewX(-12deg);
}

.companiesSec .companyLogo:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

@media (hover: none),
(pointer: coarse) {
    .companiesSec .companyLogo img {
        filter: none;
        opacity: 1;
        transform: none;
    }

    .companiesSec .companyLogo:hover img {
        filter: none;
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .companiesSec .companyLogo,
    .companiesSec .companyLogo img,
    .companiesSec .companyLogo::after {
        transition: none;
    }

    .companiesSec .companyLogo:hover,
    .companiesSec .companyLogo:hover img {
        transform: none;
    }
}

/* Companies ticker animation */
.logoItem {
    animation: logoSwap1 12s ease-in-out infinite;
    animation-delay: var(--delay);
}

.logoSlot:nth-child(2) .logoItem {
    animation-name: logoSwap2;
}

.logoSlot:nth-child(3) .logoItem {
    animation-name: logoSwap3;
}

.logoSlot:nth-child(4) .logoItem {
    animation-name: logoSwap4;
}

.logoSlot:nth-child(5) .logoItem {
    animation-name: logoSwap5;
}

@keyframes logoSwap1 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    4% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    25% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    33.333% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }
}

@keyframes logoSwap2 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    2% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    6% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    26% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    33.333% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }
}

@keyframes logoSwap3 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    4% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    8% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    27% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    33.333% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }
}

@keyframes logoSwap4 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    6% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    28% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    33.333% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }
}

@keyframes logoSwap5 {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    8% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(-12px);
    }

    12% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    29% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }

    33.333% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logoItem {
        animation: none;
        opacity: 0;
        transform: translate(-50%, -50%);
    }

    .logoSlot .logoItem:first-child {
        opacity: 1;
    }
}

/* Testimonials */
@keyframes testimonialFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}