/*
 * Intelecta - animations.css
 * Animaciones y preferencias de movimiento.
 */


/* =========================================================
   RUTAS DE LOS ELEMENTOS
   ========================================================= */

.diagram-path {animation:
        diagram-orbit-rotation
        28s
        linear
        infinite;}

.diagram-path--one {animation-delay: 0s;}

.diagram-path--two {animation-delay: -5.6s;}

.diagram-path--three {animation-delay: -11.2s;}

.diagram-path--four {animation-delay: -16.8s;}

.diagram-path--five {animation-delay: -22.4s;}



/* =========================================================
   NODOS
   ========================================================= */

.diagram-node {animation:
        diagram-node-counter-rotation
        28s
        linear
        infinite;}

.diagram-path--one .diagram-node {animation-delay: 0s;}

.diagram-path--two .diagram-node {animation-delay: -5.6s;}

.diagram-path--three .diagram-node {animation-delay: -11.2s;}

.diagram-path--four .diagram-node {animation-delay: -16.8s;}

.diagram-path--five .diagram-node {animation-delay: -22.4s;}



/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes diagram-orbit-rotation {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes diagram-node-counter-rotation {

    from {
        rotate: 0deg;
    }

    to {
        rotate: -360deg;
    }

}



/* =========================================================
   CAPTION
   ========================================================= */

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



/* =========================================================
   WHATSAPP FLOTANTE
   ========================================================= */

.whatsapp-float {animation: whatsapp-float-pulse 3s ease-in-out infinite;}

.whatsapp-float::before {animation: whatsapp-glow 3s ease-in-out infinite;}



/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes whatsapp-float-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }
}

@keyframes whatsapp-glow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.16);
        opacity: 0.7;
    }
}



/* =========================================================
   ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.whatsapp-float,
    .whatsapp-float::before {
        animation: none;
    }
}



/* =========================================================
   FORMULARIO DE CONTACTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.diagram-path,
    .diagram-node {
        animation: none !important;
    }
}



/* =========================================================
   CLIENTES / TRUST SECTION
   ========================================================= */

.clients-line--1 {animation: clients-line-float 22s ease-in-out infinite;}

.clients-line--2 {animation: clients-line-float 28s ease-in-out infinite reverse;}

.clients-particle {animation: clients-particle-float 8s ease-in-out infinite;}

.clients-particle--1 {animation-delay: -1s;}

.clients-particle--2 {animation-delay: -4s;}

.clients-particle--3 {animation-delay: -2.5s;}

.clients-particle--4 {animation-delay: -6s;}

.clients-particle--5 {animation-delay: -3s;}

@keyframes clients-particle-float {
    0%, 100% {
        transform: translate3d(0,0,0);
        opacity: 0.35;
    }
    50% {
        transform: translate3d(10px,-14px,0);
        opacity: 0.8;
    }
}

@keyframes clients-line-float {
    0%, 100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }
    50% {
        transform: translate3d(14px,10px,0) rotate(2deg);
    }
}

@media (prefers-reduced-motion: reduce) {
.clients-slider-track,
    .clients-particle,
    .clients-line {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   VISUAL
   ========================================================= */

.capability-visual-accent {animation:
        capability-accent-breathe
        6s
        ease-in-out
        infinite;}



/* =========================================================
   RED NEURONAL / SINAPSIS
   ========================================================= */

.neural-orbit {animation:
        neural-orbit-motion
        24s
        ease-in-out
        infinite;}

.neural-orbit--2 {animation-direction:
        reverse;animation-duration:
        30s;}

.neural-dot {animation:
        neural-synapse
        5s
        ease-in-out
        infinite;}

.neural-dot--2 {animation-delay: -1.4s;}

.neural-dot--3 {animation-delay: -2.5s;}

.neural-dot--4 {animation-delay: -.8s;}

.neural-dot--5 {animation-delay: -3.1s;}

.neural-dot--6 {animation-delay: -1.8s;}

.neural-dot--7 {animation-delay: -3.8s;}

.neural-dot--8 {animation-delay: -2.2s;}



/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes neural-synapse {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(.75);

        opacity:
            .28;
    }

    45% {
        transform:
            translate3d(
                10px,
                -8px,
                0
            )
            scale(1.35);

        opacity:
            1;
    }

    65% {
        transform:
            translate3d(
                18px,
                3px,
                0
            )
            scale(.9);

        opacity:
            .55;
    }

}

@keyframes neural-float {

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

    50% {
        transform:
            translate3d(
                9px,
                -13px,
                0
            );
    }

}

@keyframes neural-orbit-motion {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(
                12px,
                10px,
                0
            )
            rotate(4deg);
    }

}

@keyframes capability-accent-breathe {

    0%,
    100% {
        transform:
            scale(.9);

        opacity:
            .45;
    }

    50% {
        transform:
            scale(1.12);

        opacity:
            .8;
    }

}

@keyframes capability-orbit-drift {

    0%,
    100% {
        transform:
            rotate(17deg)
            translate3d(
                0,
                0,
                0
            );
    }

    50% {
        transform:
            rotate(20deg)
            translate3d(
                5px,
                -8px,
                0
            );
    }

}



/* =========================================================
   CAPACIDADES - DARK MODE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.neural-dot,
    .neural-orbit,
    .capabilities-main-orbit,
    .capabilities-main-dot,
    .capability-visual-accent {
        animation:
            none !important;
    }.capability-experience-item {
        transition:
            none !important;
    }.capabilities-track {
        transition:
            none !important;
    }
}



/* =========================================================
   VISUAL AREA
   ========================================================= */

.sap-ecosystem-visual::before {animation:
        sap-glow-breathe
        5s
        ease-in-out
        infinite;}



/* =========================================================
   CONNECTION SVG
   ========================================================= */

.sap-connection-orbit {animation:
        sap-orbit-rotate
        34s
        linear
        infinite;}

.sap-connection-orbit--secondary {animation-duration: 45s;animation-direction: reverse;}



/* =========================================================
   SAP CORE
   ========================================================= */

.sap-core {animation:
        sap-core-float
        5.5s
        ease-in-out
        infinite;}



/* =========================================================
   PARTICLES
   ========================================================= */

.sap-flow-dot--1 {animation:
        sap-dot-one
        7s
        ease-in-out
        infinite;}

.sap-flow-dot--2 {animation:
        sap-dot-two
        9s
        ease-in-out
        infinite;}

.sap-flow-dot--3 {animation:
        sap-dot-three
        8s
        ease-in-out
        infinite;}



/* =========================================================
   SECTION BACKGROUND
   ========================================================= */

.sap-bg-dot {animation:
        sap-bg-neural
        6s
        ease-in-out
        infinite;}

.sap-bg-dot--2 {animation-delay: -1.5s;}

.sap-bg-dot--3 {animation-delay: -3s;}

.sap-bg-dot--4 {animation-delay: -4s;}

.sap-bg-dot--5 {animation-delay: -2s;}

.sap-bg-dot--6 {animation-delay: -5s;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes sap-core-float {

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

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

}

@keyframes sap-glow-breathe {

    0%,
    100% {
        opacity: .55;

        transform: scale(.92);
    }

    50% {
        opacity: 1;

        transform: scale(1.08);
    }

}

@keyframes sap-orbit-rotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes sap-bg-neural {

    0%,
    100% {
        opacity: .25;

        transform:
            translate3d(0,0,0)
            scale(.75);
    }

    50% {
        opacity: .85;

        transform:
            translate3d(
                8px,
                -12px,
                0
            )
            scale(1.4);
    }

}

@keyframes sap-dot-one {

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

    50% {
        transform:
            translate(
                40px,
                25px
            );
    }

}

@keyframes sap-dot-two {

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

    50% {
        transform:
            translate(
                -35px,
                20px
            );
    }

}

@keyframes sap-dot-three {

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

    50% {
        transform:
            translate(
                30px,
                -30px
            );
    }

}



/* =========================================================
   SAP - DARK
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.sap-core,
    .sap-connection-orbit,
    .sap-flow-dot,
    .sap-bg-dot,
    .sap-ecosystem-visual::before {
        animation: none !important;
    }.sap-node,
    .sap-technology-list--new li,
    .sap-button-arrow {
        transition: none !important;
    }
}



/* =========================================================
   FONDO SUTIL
   ========================================================= */

.testimonials-bg-line {animation: tsFloatLine 14s ease-in-out infinite alternate;}

.testimonials-bg-line--2 {animation-duration: 18s;}

.testimonials-bg-line--3 {animation-duration: 16s;}

.testimonials-bg-dot {animation: tsPulseDot 6s ease-in-out infinite;}

.testimonials-bg-dot--2 {animation-delay: 0.8s;}

.testimonials-bg-dot--3 {animation-delay: 1.5s;}

.testimonials-bg-dot--4 {animation-delay: 1.1s;}

.testimonials-bg-dot--5 {animation-delay: 2s;}

.testimonials-bg-grid {animation: tsGridMove 10s ease-in-out infinite alternate;}

.testimonials-bg-grid--2 {animation-delay: 1.4s;}

@keyframes tsFloatLine {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(12px, -10px, 0);
    }
}

@keyframes tsPulseDot {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }
    50% {
        transform: translate3d(0, -6px, 0) scale(1.12);
        opacity: 1;
    }
}

@keyframes tsGridMove {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(8px, -8px, 0);
    }
}



/* =========================================================
   FIN TESTIMONIOS
   ========================================================= */

.think-orbit {animation: thinkOrbitFloat 13s ease-in-out infinite;}

.think-orbit--2 {animation-delay: -4s;}

.think-dot {animation: thinkDotMove 9s ease-in-out infinite;}

.think-dot--2 {animation-delay: -1.6s;}

.think-dot--3 {animation-delay: -3.2s;}

.think-dot--4 {animation-delay: -4.5s;}

.think-grid {animation: thinkGridFloat 10s ease-in-out infinite;}

.think-grid--2 {animation-delay: -3s;}



/* =========================================================
   INTELECTA THINK - BRAIN VISUAL
   ========================================================= */

.think-brain {animation:
        thinkBrainFloat
        8s
        ease-in-out
        infinite;}



/* =========================================================
   ÓRBITAS
   ========================================================= */

.think-brain__orbit--outer {animation:
        thinkBrainOrbit
        30s
        linear
        infinite;}

.think-brain__orbit--inner {animation:
        thinkBrainOrbitReverse
        37s
        linear
        infinite;}



/* =========================================================
   NODOS CON PULSO
   ========================================================= */

.think-brain__pulse {animation:
        thinkBrainPulse
        3s
        ease-in-out
        infinite;}

.think-brain__pulse--2 {animation-delay: -.7s;}

.think-brain__pulse--3 {animation-delay: -1.4s;}

.think-brain__pulse--4 {animation-delay: -2.1s;}



/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes thinkBrainFloat {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }


    50% {
        transform:
            translate3d(
                -6px,
                9px,
                0
            )
            rotate(.7deg);
    }

}

@keyframes thinkBrainOrbit {

    from {
        transform:
            rotate(0deg);
    }


    to {
        transform:
            rotate(360deg);
    }

}

@keyframes thinkBrainOrbitReverse {

    from {
        transform:
            rotate(360deg);
    }


    to {
        transform:
            rotate(0deg);
    }

}

@keyframes thinkBrainPulse {

    0%,
    100% {
        opacity: .55;

        transform:
            scale(.75);
    }


    50% {
        opacity: 1;

        transform:
            scale(1.35);
    }

}

@keyframes thinkOrbitFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, 10px, 0) scale(1.02);
    }
}

@keyframes thinkDotMove {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
    }
    50% {
        transform: translate3d(10px, -8px, 0) scale(1.15);
        opacity: 1;
    }
}

@keyframes thinkGridFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.34;
    }
    50% {
        transform: translate3d(0, 8px, 0);
        opacity: 0.54;
    }
}

@keyframes thinkBrainFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, 8px, 0) rotate(1deg);
    }
}

@keyframes thinkNodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}



/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.control-tower-showcase__media img {animation:
        controlTowerBackgroundFloat
        16s
        ease-in-out
        infinite;}



/* =========================================================
   VALUES
   ========================================================= */

.control-tower-showcase__values::before {animation:
        controlTowerProgressPulse
        4s
        ease-in-out
        infinite;}



/* =========================================================
   OPTIONAL TECHNOLOGY NODES Ready for BTP / S4HANA / SAP Services
   ========================================================= */

.control-tower-tech-node {animation:
        controlTowerNodeFloat
        6s
        ease-in-out
        infinite;}

.control-tower-tech-node--btp {animation-delay: -.5s;}

.control-tower-tech-node--s4 {animation-delay: -2s;}

.control-tower-tech-node--services {animation-delay: -3.2s;}



/* =========================================================
   OPTIONAL LINES / DOTS
   ========================================================= */

.control-tower-tech-dot {animation:
        controlTowerDotPulse
        3s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes controlTowerBackgroundFloat {

    0%,
    100% {
        transform:
            scale(1.015)
            translate3d(
                0,
                0,
                0
            );
    }


    50% {
        transform:
            scale(1.03)
            translate3d(
                -8px,
                -4px,
                0
            );
    }

}

@keyframes controlTowerBackgroundFloatMobile {

    0%,
    100% {
        transform:
            scale(1.02)
            translate3d(
                0,
                0,
                0
            );
    }


    50% {
        transform:
            scale(1.035)
            translate3d(
                -5px,
                -2px,
                0
            );
    }

}

@keyframes controlTowerProgressPulse {

    0%,
    100% {
        opacity: .7;

        transform:
            scaleX(.9);
    }


    50% {
        opacity: 1;

        transform:
            scaleX(1);
    }

}

@keyframes controlTowerNodeFloat {

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


    50% {
        transform:
            translate3d(
                0,
                -8px,
                0
            );
    }

}

@keyframes controlTowerLinePulse {

    0%,
    100% {
        opacity: .2;

        filter:
            brightness(1);
    }


    50% {
        opacity: .75;

        filter:
            brightness(1.35);
    }

}

@keyframes controlTowerDotPulse {

    0%,
    100% {
        transform:
            scale(.85);

        opacity: .55;
    }


    50% {
        transform:
            scale(1.3);

        opacity: 1;
    }

}



/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.control-tower-showcase__media img,
    .control-tower-showcase__button,
    .control-tower-showcase__button-arrow,
    .control-tower-showcase__values::before,
    .control-tower-tech-node,
    .control-tower-tech-line,
    .control-tower-tech-dot {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   PATHS
   ========================================================= */

.control-tower-tech-path {animation:
        controlTowerPathFlow
        14s
        linear
        infinite;}

.control-tower-tech-path--s4 {animation-duration: 17s;}

.control-tower-tech-path--services {animation-duration: 20s;}



/* =========================================================
   DECORATIVE DOTS
   ========================================================= */

.control-tower-tech-dot--1 {animation-delay: -.4s;}

.control-tower-tech-dot--2 {animation-delay: -1.3s;}

.control-tower-tech-dot--3 {animation-delay: -2.1s;}

.control-tower-tech-dot--4 {animation-delay: -2.8s;}



/* =========================================================
   DATA PARTICLES
   ========================================================= */

.control-tower-tech-particles {animation:
        controlTowerParticlesFloat
        8s
        ease-in-out
        infinite;}



/* =========================================================
   ADDITIONAL ANIMATIONS
   ========================================================= */

@keyframes controlTowerPathFlow {

    from {
        stroke-dashoffset: 0;
    }


    to {
        stroke-dashoffset: -130;
    }

}

@keyframes controlTowerParticlesFloat {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity: .35;
    }


    50% {
        transform:
            translate3d(
                -4px,
                8px,
                0
            );

        opacity: .65;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.control-tower-tech-path,
    .control-tower-tech-node,
    .control-tower-tech-dot,
    .control-tower-tech-particles {
        animation: none !important;
    }
}



/* =========================================================
   DECORATIVE BACKGROUND
   ========================================================= */

.about-global::before {animation:
        aboutGlobalOrbit
        18s
        ease-in-out
        infinite;}

.about-global::after {animation:
        aboutGlobalOrbitReverse
        22s
        ease-in-out
        infinite;}



/* =========================================================
   BLUE PLATE BEHIND IMAGE
   ========================================================= */

.about-global__visual-frame::before {animation:
        aboutGlobalPlateFloat
        9s
        ease-in-out
        infinite;}



/* =========================================================
   OUTLINE BEHIND IMAGE
   ========================================================= */

.about-global__visual-frame::after {animation:
        aboutGlobalOutlineFloat
        11s
        ease-in-out
        infinite;}



/* =========================================================
   IMAGE
   ========================================================= */

.about-global__image {animation:
        aboutGlobalImageFloat
        10s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes aboutGlobalOrbit {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(14px, 10px, 0)
            scale(1.03);
    }

}

@keyframes aboutGlobalOrbitReverse {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-16px, -10px, 0)
            scale(1.04);
    }

}

@keyframes aboutGlobalImageFloat {

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

    50% {
        transform:
            translate3d(0, -7px, 0);
    }

}

@keyframes aboutGlobalPlateFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            rotate(-7deg);
    }

    50% {
        transform:
            translate(-50%, calc(-50% - 7px))
            rotate(-5.5deg);
    }

}

@keyframes aboutGlobalOutlineFloat {

    0%,
    100% {
        transform:
            translateX(-5%)
            rotate(-3deg);
    }

    50% {
        transform:
            translate(-2%, -7px)
            rotate(-1deg);
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.about-global::before,
    .about-global::after,
    .about-global__image,
    .about-global__visual-frame::before,
    .about-global__visual-frame::after,
    .about-global__feature,
    .about-global__feature-icon,
    .about-global__counter {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   ORBS / CURVED RINGS
   ========================================================= */

.contact-cta__orb--one {animation:
        contactOrbOne
        18s
        ease-in-out
        infinite;}

.contact-cta__orb--two {animation:
        contactOrbTwo
        22s
        ease-in-out
        infinite;}

.contact-cta__orb--three {animation:
        contactOrbThree
        20s
        ease-in-out
        infinite;}



/* =========================================================
   BACKGROUND LINES
   ========================================================= */

.contact-cta__line {animation:
        contactLinePulse
        7s
        ease-in-out
        infinite;}

.contact-cta__line--one {animation-delay: -1s;}

.contact-cta__line--two {animation-delay: -3.4s;}



/* =========================================================
   GLOWING DOTS
   ========================================================= */

.contact-cta__dot {animation:
        contactDotPulse
        4s
        ease-in-out
        infinite;}

.contact-cta__dot--1 {animation-delay: -.2s;}

.contact-cta__dot--2 {animation-delay: -1.1s;}

.contact-cta__dot--3 {animation-delay: -2s;}

.contact-cta__dot--4 {animation-delay: -2.8s;}

.contact-cta__dot--5 {animation-delay: -3.4s;}



/* =========================================================
   DECORATIVE GRIDS
   ========================================================= */

.contact-cta__grid {animation:
        contactGridFloat
        12s
        ease-in-out
        infinite;}

.contact-cta__grid--two {animation-delay: -5s;}



/* =========================================================
   CARD GLOW
   ========================================================= */

.contact-cta__card-glow {animation:
        contactCardGlow
        7s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes contactOrbOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                18px,
                14px,
                0
            )
            scale(1.035);
    }

}

@keyframes contactOrbTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -20px,
                12px,
                0
            )
            scale(1.04);
    }

}

@keyframes contactOrbThree {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(
                8px,
                -16px,
                0
            )
            rotate(4deg);
    }

}

@keyframes contactLinePulse {

    0%,
    100% {
        opacity: .28;

        filter:
            brightness(1);

        background-position:
            0
            0;
    }

    50% {
        opacity: .78;

        filter:
            brightness(1.25);

        background-position:
            4rem
            0;
    }

}

@keyframes contactDotPulse {

    0%,
    100% {
        opacity: .45;

        transform:
            scale(.75);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.35);
    }

}

@keyframes contactGridFloat {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity: .18;
    }

    50% {
        transform:
            translate3d(
                9px,
                -11px,
                0
            );

        opacity: .34;
    }

}

@keyframes contactCardGlow {

    0%,
    100% {
        transform:
            scale(.9);

        opacity: .55;
    }

    50% {
        transform:
            scale(1.15);

        opacity: .9;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.contact-cta__orb,
    .contact-cta__line,
    .contact-cta__dot,
    .contact-cta__grid,
    .contact-cta__card-glow,
    .contact-cta__card,
    .contact-cta__office-list a,
    .contact-cta__form-shell {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.products-showcase__arc--one {animation:
        productsArcOne
        24s
        ease-in-out
        infinite;}

.products-showcase__arc--two {animation:
        productsArcTwo
        27s
        ease-in-out
        infinite;}

.products-showcase__node {animation:
        productsNodePulse
        5s
        ease-in-out
        infinite;}

.products-showcase__node--two {animation-delay: -2.3s;}

.products-showcase__dots {animation:
        productsDotsFloat
        14s
        ease-in-out
        infinite;}



/* =========================================================
   SOFT BACKGROUND SHAPE
   ========================================================= */

.product-visual__soft-shape {animation:
        productSoftShape
        10s
        ease-in-out
        infinite;}



/* =========================================================
   RENDISAP VISUAL
   ========================================================= */

.expense-ui--back {animation:
        expenseBackFloat
        8s
        ease-in-out
        infinite;}

.expense-ui--main {animation:
        expenseMainFloat
        9s
        ease-in-out
        infinite;}

.expense-ui__bars span {animation:
        expenseBars
        3s
        ease-in-out
        infinite
        alternate;}

.expense-ui__bars span:nth-child(2) {animation-delay: -.45s;}

.expense-ui__bars span:nth-child(3) {animation-delay: -.9s;}

.expense-ui__bars span:nth-child(4) {animation-delay: -1.35s;}

.expense-ui__receipt {animation:
        expenseReceiptFloat
        7s
        ease-in-out
        infinite;}



/* =========================================================
   PORTALPRO VISUAL COMPANY -> PORTAL -> SUPPLIER
   ========================================================= */

.portal-ui--company {animation:
        portalCompanyFloat
        8s
        ease-in-out
        infinite;}

.portal-ui--supplier {animation:
        portalSupplierFloat
        8.5s
        ease-in-out
        infinite;}



/* =========================================================
   PORTALPRO CENTRAL HUB
   ========================================================= */

.portal-ui__hub {animation:
        portalHubPulse
        4s
        ease-in-out
        infinite;}



/* =========================================================
   PORTALPRO CONNECTIONS
   ========================================================= */

.portal-ui__connection span {animation:
        portalConnectionDot
        3.2s
        ease-in-out
        infinite;}

.portal-ui__connection--right span {animation-delay: -1.6s;}



/* =========================================================
   COTISAP VISUAL
   ========================================================= */

.quote-ui--back {animation:
        quoteBackFloat
        8s
        ease-in-out
        infinite;}

.quote-ui--main {animation:
        quoteMainFloat
        9s
        ease-in-out
        infinite;}

.quote-ui__chart polyline {animation:
        quoteChartDraw
        4.5s
        ease-in-out
        infinite;}

.quote-ui__summary {animation:
        quoteSummaryFloat
        7.5s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes productsArcOne {

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

    50% {
        transform:
            translate3d(
                -12px,
                9px,
                0
            );
    }

}

@keyframes productsArcTwo {

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

    50% {
        transform:
            translate3d(
                13px,
                -8px,
                0
            );
    }

}

@keyframes productsNodePulse {

    0%,
    100% {
        opacity: .45;

        transform:
            scale(.8);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.2);
    }

}

@keyframes productsDotsFloat {

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

    50% {
        transform:
            translate3d(
                -7px,
                7px,
                0
            );
    }

}

@keyframes productSoftShape {

    0%,
    100% {
        transform:
            translateY(-50%)
            scale(.95);
    }

    50% {
        transform:
            translateY(-52%)
            scale(1.04);
    }

}



/* =========================================================
   RENDISAP
   ========================================================= */

@keyframes expenseBackFloat {

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

    50% {
        transform:
            rotate(5deg)
            translateY(-5px);
    }

}

@keyframes expenseMainFloat {

    0%,
    100% {
        transform:
            rotate(-2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-1deg)
            translateY(-7px);
    }

}

@keyframes expenseBars {

    from {
        transform:
            scaleY(.78);
    }

    to {
        transform:
            scaleY(1);
    }

}

@keyframes expenseReceiptFloat {

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

    50% {
        transform:
            rotate(1deg)
            translateY(-5px);
    }

}



/* =========================================================
   PORTALPRO
   ========================================================= */

@keyframes portalCompanyFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(0deg);
    }

}

@keyframes portalSupplierFloat {

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

    50% {
        transform:
            translateY(-5px)
            rotate(0deg);
    }

}

@keyframes portalHubPulse {

    0%,
    100% {
        transform:
            translateY(-50%)
            scale(.95);
    }

    50% {
        transform:
            translateY(-50%)
            scale(1.06);
    }

}

@keyframes portalConnectionDot {

    0% {
        left: 0;

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        left:
            calc(
                100% - .42rem
            );

        opacity: 0;
    }

}



/* =========================================================
   COTISAP
   ========================================================= */

@keyframes quoteBackFloat {

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

    50% {
        transform:
            rotate(5deg)
            translateY(-5px);
    }

}

@keyframes quoteMainFloat {

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

    50% {
        transform:
            rotate(-1deg)
            translateY(-7px);
    }

}

@keyframes quoteChartDraw {

    0% {
        stroke-dashoffset: 240;

        opacity: .45;
    }

    55%,
    100% {
        stroke-dashoffset: 0;

        opacity: 1;
    }

}

@keyframes quoteSummaryFloat {

    0%,
    100% {
        transform:
            rotate(-3deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-1deg)
            translateY(-5px);
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.products-showcase__arc,
    .products-showcase__node,
    .products-showcase__dots,
    .product-visual__soft-shape,
    .expense-ui,
    .expense-ui__receipt,
    .expense-ui__bars span,
    .portal-ui,
    .portal-ui__hub,
    .portal-ui__connection span,
    .quote-ui,
    .quote-ui__summary,
    .quote-ui__chart polyline,
    .product-feature,
    .product-feature__icon,
    .product-feature__link,
    .enterprise-solution,
    .enterprise-solution__icon,
    .enterprise-solution__arrow {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   SOFT SHAPES
   ========================================================= */

.contact-page-section__shape--one {animation:
        contactShapeOne
        17s
        ease-in-out
        infinite;}

.contact-page-section__shape--two {animation:
        contactShapeTwo
        20s
        ease-in-out
        infinite;}



/* =========================================================
   DECORATIVE RINGS
   ========================================================= */

.contact-page-section__line--one {animation:
        contactLineOne
        22s
        ease-in-out
        infinite;}

.contact-page-section__line--two {animation:
        contactLineTwo
        25s
        ease-in-out
        infinite;}



/* =========================================================
   DOT MATRIX
   ========================================================= */

.contact-page-section__dots {animation:
        contactDotsFloat
        13s
        ease-in-out
        infinite;}



/* =========================================================
   CONTACT CARD
   ========================================================= */

.contact-page-card::before {animation:
        contactCardGlow
        8s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes contactShapeOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-12px, 10px, 0)
            scale(1.04);
    }

}

@keyframes contactShapeTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(13px, -9px, 0)
            scale(1.05);
    }

}

@keyframes contactLineOne {

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

    50% {
        transform:
            translate3d(-9px, 8px, 0);
    }

}

@keyframes contactLineTwo {

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

    50% {
        transform:
            translate3d(10px, -7px, 0);
    }

}

@keyframes contactDotsFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);

        opacity: .18;
    }

    50% {
        transform:
            translate3d(-7px, 7px, 0);

        opacity: .32;
    }

}

@keyframes contactCardGlow {

    0%,
    100% {
        transform:
            scale(.9);

        opacity: .55;
    }

    50% {
        transform:
            scale(1.12);

        opacity: .9;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.contact-page-section__shape,
    .contact-page-section__line,
    .contact-page-section__dots,
    .contact-page-card,
    .contact-page-card::before,
    .contact-page-card__icon,
    .contact-page-card__list a {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   GLOWS
   ========================================================= */

.tower-hero__glow--one {animation:
        towerHeroGlowOne
        14s
        ease-in-out
        infinite;}

.tower-hero__glow--two {animation:
        towerHeroGlowTwo
        18s
        ease-in-out
        infinite;}



/* =========================================================
   BACKGROUND ARCS
   ========================================================= */

.tower-hero__arc--one {animation:
        towerHeroArcOne
        24s
        ease-in-out
        infinite;}

.tower-hero__arc--two {animation:
        towerHeroArcTwo
        28s
        ease-in-out
        infinite;}



/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.tower-hero__grid {animation:
        towerHeroGrid
        16s
        ease-in-out
        infinite;}



/* =========================================================
   PARTICLES
   ========================================================= */

.tower-hero__particle {animation:
        towerHeroParticle
        5s
        ease-in-out
        infinite;}

.tower-hero__particle--2 {animation-delay: -1s;}

.tower-hero__particle--3 {animation-delay: -2s;}

.tower-hero__particle--4 {animation-delay: -3s;}

.tower-hero__particle--5 {animation-delay: -4s;}



/* =========================================================
   TOWER SYSTEM
   ========================================================= */

.tower-system {animation:
        towerSystemFloat
        8s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITS
   ========================================================= */

.tower-system__orbit--outer {animation:
        towerOrbitRotate
        26s
        linear
        infinite;}

.tower-system__orbit--middle {animation:
        towerOrbitRotateReverse
        21s
        linear
        infinite;}

.tower-system__orbit--inner {animation:
        towerOrbitRotate
        15s
        linear
        infinite;}



/* =========================================================
   SCANNER
   ========================================================= */

.tower-system__scanner {animation:
        towerScannerRotate
        8s
        linear
        infinite;}



/* =========================================================
   CORE
   ========================================================= */

.tower-core {animation:
        towerCoreFloat
        6s
        ease-in-out
        infinite;}



/* =========================================================
   CORE GLOW
   ========================================================= */

.tower-core__glow {animation:
        towerCoreGlow
        4s
        ease-in-out
        infinite;}



/* =========================================================
   CORE RINGS
   ========================================================= */

.tower-core__ring--three {animation:
        towerCoreRingRotate
        16s
        linear
        infinite;}

.tower-core__ring--two {animation:
        towerCoreRingRotateReverse
        12s
        linear
        infinite;}

.tower-core__ring--one {animation:
        towerCoreRingPulse
        4.5s
        ease-in-out
        infinite;}



/* =========================================================
   CORE PLATFORM
   ========================================================= */

.tower-core__platform {animation:
        towerPlatformPulse
        4s
        ease-in-out
        infinite;}



/* =========================================================
   NODE POSITIONING
   ========================================================= */

.tower-node--governance {animation:
        towerNodeFloatA
        6.5s
        ease-in-out
        infinite;}

.tower-node--operation {animation:
        towerNodeFloatB
        7s
        ease-in-out
        infinite;}

.tower-node--ecosystem {animation:
        towerNodeFloatB
        7.5s
        ease-in-out
        infinite;}

.tower-node--evolution {animation:
        towerNodeFloatA
        7.2s
        ease-in-out
        infinite;}



/* =========================================================
   SATELLITE POSITIONS
   ========================================================= */

.tower-satellite--users {animation:
        towerSatelliteA
        5.5s
        ease-in-out
        infinite;}

.tower-satellite--cloud {animation:
        towerSatelliteB
        6s
        ease-in-out
        infinite;}

.tower-satellite--security {animation:
        towerSatelliteA
        5.8s
        ease-in-out
        infinite;}

.tower-satellite--analytics {animation:
        towerSatelliteB
        6.3s
        ease-in-out
        infinite;}



/* =========================================================
   CONNECTION SVG
   ========================================================= */

.tower-connection {animation:
        towerConnectionFlow
        4s
        linear
        infinite;}

.tower-connection--two {animation-delay: -1s;}

.tower-connection--three {animation-delay: -2s;}

.tower-connection--four {animation-delay: -3s;}



/* =========================================================
   DATA DOTS
   ========================================================= */

.tower-data-dot {animation:
        towerDataPulse
        3s
        ease-in-out
        infinite;}

.tower-data-dot--2 {animation-delay: -.5s;}

.tower-data-dot--3 {animation-delay: -1s;}

.tower-data-dot--4 {animation-delay: -1.5s;}

.tower-data-dot--5 {animation-delay: -2s;}

.tower-data-dot--6 {animation-delay: -2.5s;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes towerHeroGlowOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -18px,
                12px,
                0
            )
            scale(1.06);
    }

}

@keyframes towerHeroGlowTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                16px,
                -12px,
                0
            )
            scale(1.05);
    }

}

@keyframes towerHeroArcOne {

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

    50% {
        transform:
            translate3d(
                -15px,
                10px,
                0
            );
    }

}

@keyframes towerHeroArcTwo {

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

    50% {
        transform:
            translate3d(
                14px,
                -9px,
                0
            );
    }

}

@keyframes towerHeroGrid {

    0%,
    100% {
        transform:
            rotate(-7deg)
            translate3d(
                0,
                0,
                0
            );

        opacity: .11;
    }

    50% {
        transform:
            rotate(-5deg)
            translate3d(
                -8px,
                8px,
                0
            );

        opacity: .2;
    }

}

@keyframes towerHeroParticle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.75);

        opacity: .35;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.2);

        opacity: 1;
    }

}

@keyframes towerSystemFloat {

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

    50% {
        transform:
            translate3d(
                0,
                -9px,
                0
            );
    }

}

@keyframes towerOrbitRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes towerOrbitRotateReverse {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}

@keyframes towerScannerRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes towerCoreFloat {

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

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-7px);
    }

}

@keyframes towerCoreGlow {

    0%,
    100% {
        transform:
            scale(.9);

        opacity: .55;
    }

    50% {
        transform:
            scale(1.12);

        opacity: 1;
    }

}

@keyframes towerCoreRingRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes towerCoreRingRotateReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes towerCoreRingPulse {

    0%,
    100% {
        transform:
            scale(.95);

        opacity: .78;
    }

    50% {
        transform:
            scale(1.05);

        opacity: 1;
    }

}

@keyframes towerPlatformPulse {

    0%,
    100% {
        transform:
            scale(.97);
    }

    50% {
        transform:
            scale(1.04);
    }

}

@keyframes towerNodeFloatA {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

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

}

@keyframes towerNodeFloatB {

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

    50% {
        transform:
            translateY(-7px)
            rotate(-1deg);
    }

}

@keyframes towerSatelliteA {

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

    50% {
        transform:
            translateY(-6px)
            scale(1.04);
    }

}

@keyframes towerSatelliteB {

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

    50% {
        transform:
            translateY(6px)
            scale(.95);
    }

}

@keyframes towerConnectionFlow {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -34;
    }

}

@keyframes towerDataPulse {

    0%,
    100% {
        transform:
            scale(.7);

        opacity: .45;
    }

    50% {
        transform:
            scale(1.3);

        opacity: 1;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.tower-hero__glow,
    .tower-hero__arc,
    .tower-hero__grid,
    .tower-hero__particle,
    .tower-system,
    .tower-system__orbit,
    .tower-system__scanner,
    .tower-core,
    .tower-core__glow,
    .tower-core__ring,
    .tower-core__platform,
    .tower-node,
    .tower-satellite,
    .tower-connection,
    .tower-data-dot,
    .tower-hero__button {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   BACKGROUND GLOWS
   ========================================================= */

.tower-challenge__glow--one {animation:
        towerChallengeGlowOne
        18s
        ease-in-out
        infinite;}

.tower-challenge__glow--two {animation:
        towerChallengeGlowTwo
        21s
        ease-in-out
        infinite;}



/* =========================================================
   BACKGROUND ORBITS
   ========================================================= */

.tower-challenge__orbit--one {animation:
        towerChallengeOrbitOne
        26s
        linear
        infinite;}

.tower-challenge__orbit--two {animation:
        towerChallengeOrbitTwo
        21s
        linear
        infinite;}



/* =========================================================
   BACKGROUND DOTS
   ========================================================= */

.tower-challenge__dot {animation:
        towerChallengeDotPulse
        4s
        ease-in-out
        infinite;}

.tower-challenge__dot--two {animation-delay: -1.4s;}

.tower-challenge__dot--three {animation-delay: -2.7s;}



/* =========================================================
   MAIN FEATURE
   ========================================================= */

.tower-challenge__feature::before {animation:
        towerFeatureGlow
        10s
        ease-in-out
        infinite;}



/* =========================================================
   CLIENT PERSPECTIVE CARD
   ========================================================= */

.tower-challenge__perspective {animation:
        towerPerspectiveFloat
        8s
        ease-in-out
        infinite;}



/* =========================================================
   SIGNAL
   ========================================================= */

.tower-challenge__perspective-signal span {animation:
        towerSignal
        1.8s
        ease-in-out
        infinite
        alternate;}

.tower-challenge__perspective-signal span:nth-child(2) {animation-delay: -.3s;}

.tower-challenge__perspective-signal span:nth-child(3) {animation-delay: -.6s;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes towerChallengeGlowOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-13px, 9px, 0)
            scale(1.05);
    }

}

@keyframes towerChallengeGlowTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(12px, -8px, 0)
            scale(1.04);
    }

}

@keyframes towerChallengeOrbitOne {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes towerChallengeOrbitTwo {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes towerChallengeDotPulse {

    0%,
    100% {
        opacity: .4;

        transform:
            scale(.75);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.3);
    }

}

@keyframes towerFeatureGlow {

    0%,
    100% {
        transform:
            scale(.92);

        opacity: .55;
    }

    50% {
        transform:
            scale(1.08);

        opacity: .9;
    }

}

@keyframes towerArchitectureData {

    0%,
    100% {
        opacity: .35;

        transform:
            scale(.7);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.3);
    }

}

@keyframes towerArchitectureService {

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

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

}

@keyframes towerArchitectureGovernance {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotateX(61deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-7px)
            rotateX(61deg);
    }

}

@keyframes towerArchitectureLandscape {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotateX(61deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-4px)
            rotateX(61deg);
    }

}

@keyframes towerArchitectureSap {

    0%,
    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotateX(61deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateY(-2px)
            rotateX(61deg);
    }

}

@keyframes towerArchitectureLandscapeNode {

    0%,
    100% {
        transform:
            scale(.65);

        opacity: .45;
    }

    50% {
        transform:
            scale(1.15);

        opacity: 1;
    }

}

@keyframes towerArchitectureFlow {

    0% {
        transform:
            translateX(-50%)
            translateY(-8px)
            scale(.65);

        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform:
            translateX(-50%)
            translateY(18px)
            scale(1.15);

        opacity: 0;
    }

}

@keyframes towerPerspectiveFloat {

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

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

}

@keyframes towerSignal {

    from {
        transform:
            scaleY(.65);

        opacity: .45;
    }

    to {
        transform:
            scaleY(1);

        opacity: 1;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.tower-challenge__glow,
    .tower-challenge__orbit,
    .tower-challenge__dot,
    .tower-challenge__feature,
    .tower-challenge__feature::before,
    .tower-architecture__data,
    .tower-architecture__service,
    .tower-architecture__layer,
    .tower-architecture__landscape-nodes span,
    .tower-architecture__flow,
    .tower-challenge__perspective,
    .tower-challenge__perspective-signal span {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   GLOWS
   ========================================================= */

.control-model__glow--one {animation:
        controlModelGlowOne
        18s
        ease-in-out
        infinite;}

.control-model__glow--two {animation:
        controlModelGlowTwo
        21s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITS
   ========================================================= */

.control-model__orbit--one {animation:
        controlModelOrbit
        30s
        linear
        infinite;}

.control-model__orbit--two {animation:
        controlModelOrbitReverse
        24s
        linear
        infinite;}



/* =========================================================
   BACKGROUND DOTS
   ========================================================= */

.control-model__dot {animation:
        controlModelDot
        4s
        ease-in-out
        infinite;}

.control-model__dot--two {animation-delay: -1.4s;}

.control-model__dot--three {animation-delay: -2.8s;}



/* =========================================================
   BACKGROUND ANIMATIONS
   ========================================================= */

@keyframes controlModelGlowOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -14px,
                10px,
                0
            )
            scale(1.05);
    }

}

@keyframes controlModelGlowTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                12px,
                -8px,
                0
            )
            scale(1.04);
    }

}

@keyframes controlModelOrbit {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes controlModelOrbitReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes controlModelDot {

    0%,
    100% {
        transform:
            scale(.7);

        opacity: .35;
    }

    50% {
        transform:
            scale(1.25);

        opacity: 1;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.control-model__glow,
    .control-model__orbit,
    .control-model__dot,
    .control-card,
    .control-card__icon,
    .control-model__track,
    .control-model__arrow,
    .control-model__bullet {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   SOFT SHAPES
   ========================================================= */

.tower-faq__shape--one {animation:
        towerFaqShapeOne
        18s
        ease-in-out
        infinite;}

.tower-faq__shape--two {animation:
        towerFaqShapeTwo
        21s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITS
   ========================================================= */

.tower-faq__orbit--one {animation:
        towerFaqOrbitOne
        28s
        linear
        infinite;}

.tower-faq__orbit--two {animation:
        towerFaqOrbitTwo
        24s
        linear
        infinite;}

.tower-faq__orbit--three {animation:
        towerFaqOrbitThree
        32s
        linear
        infinite;}



/* =========================================================
   PARTICLES
   ========================================================= */

.tower-faq__particle {animation:
        towerFaqParticle
        5s
        ease-in-out
        infinite;}

.tower-faq__particle--two {animation-delay: -1.2s;}

.tower-faq__particle--three {animation-delay: -2.4s;}

.tower-faq__particle--four {animation-delay: -3.6s;}



/* =========================================================
   DOT MATRICES
   ========================================================= */

.tower-faq__dots {animation:
        towerFaqDots
        14s
        ease-in-out
        infinite;}

.tower-faq__dots--two {animation-delay: -5s;}



/* =========================================================
   BACKGROUND ANIMATIONS
   ========================================================= */

@keyframes towerFaqShapeOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                12px,
                -10px,
                0
            )
            scale(1.05);
    }

}

@keyframes towerFaqShapeTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -14px,
                11px,
                0
            )
            scale(1.04);
    }

}

@keyframes towerFaqOrbitOne {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes towerFaqOrbitTwo {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes towerFaqOrbitThree {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes towerFaqParticle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.75);

        opacity: .4;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.15);

        opacity: 1;
    }

}

@keyframes towerFaqDots {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity: .12;
    }

    50% {
        transform:
            translate3d(
                7px,
                -7px,
                0
            );

        opacity: .2;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.tower-faq__shape,
    .tower-faq__orbit,
    .tower-faq__particle,
    .tower-faq__dots,
    .tower-faq__item,
    .tower-faq__icon,
    .tower-faq__toggle,
    .tower-faq__toggle span,
    .tower-faq__answer {
        animation: none !important;
        transition: none !important;
    }
}



/* =========================================================
   LARGE ATMOSPHERIC GLOWS
   ========================================================= */

.governance-artifacts__glow--one {animation:
        governanceGlowOne
        18s
        ease-in-out
        infinite;}

.governance-artifacts__glow--two {animation:
        governanceGlowTwo
        21s
        ease-in-out
        infinite;}

.governance-artifacts__glow--three {animation:
        governanceGlowThree
        20s
        ease-in-out
        infinite;}



/* =========================================================
   LARGE SOFT SHAPES
   ========================================================= */

.governance-artifacts__shape--one {animation:
        governanceShapeOne
        19s
        ease-in-out
        infinite;}

.governance-artifacts__shape--two {animation:
        governanceShapeTwo
        22s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITAL LINES
   ========================================================= */

.governance-artifacts__orbit--one {animation:
        governanceOrbitOne
        30s
        linear
        infinite;}

.governance-artifacts__orbit--two {animation:
        governanceOrbitTwo
        34s
        linear
        infinite;}

.governance-artifacts__orbit--three {animation:
        governanceOrbitThree
        25s
        linear
        infinite;}



/* =========================================================
   PARTICLES
   ========================================================= */

.governance-artifacts__particle {animation:
        governanceParticle
        5s
        ease-in-out
        infinite;}

.governance-artifacts__particle--two {animation-delay: -1s;}

.governance-artifacts__particle--three {animation-delay: -2s;}

.governance-artifacts__particle--four {animation-delay: -3s;}

.governance-artifacts__particle--five {animation-delay: -4s;}



/* =========================================================
   DOT MATRIX
   ========================================================= */

.governance-artifacts__dots {animation:
        governanceDots
        15s
        ease-in-out
        infinite;}

.governance-artifacts__dots--two {animation-delay: -6s;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes governanceGlowOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -15px,
                10px,
                0
            )
            scale(1.05);
    }

}

@keyframes governanceGlowTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                13px,
                -10px,
                0
            )
            scale(1.05);
    }

}

@keyframes governanceGlowThree {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(.95);
    }

    50% {
        transform:
            translate3d(
                -10px,
                -8px,
                0
            )
            scale(1.07);
    }

}

@keyframes governanceOrbitOne {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes governanceOrbitTwo {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes governanceOrbitThree {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes governanceParticle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.72);

        opacity: .35;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.18);

        opacity: 1;
    }

}

@keyframes governanceDots {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            );

        opacity: .09;
    }

    50% {
        transform:
            translate3d(
                7px,
                -7px,
                0
            );

        opacity: .15;
    }

}

@keyframes governanceShapeOne {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -14px,
                10px,
                0
            )
            scale(1.05);
    }

}

@keyframes governanceShapeTwo {

    0%,
    100% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                12px,
                -9px,
                0
            )
            scale(1.04);
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.governance-artifacts__glow,
    .governance-artifacts__orbit,
    .governance-artifacts__particle,
    .governance-artifacts__dots,
    .governance-artifacts__shape,
    .governance-artifact,
    .governance-artifact__icon {
        animation:
            none !important;

        transition:
            none !important;
    }
}



/* =========================================================
   AMBIENT GLOWS
   ========================================================= */

.operating-model__glow--one {animation:
        operatingGlowOne
        17s
        ease-in-out
        infinite;}

.operating-model__glow--two {animation:
        operatingGlowTwo
        21s
        ease-in-out
        infinite;}

.operating-model__glow--three {animation:
        operatingGlowThree
        19s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITS
   ========================================================= */

.operating-model__orbit--one {animation:
        operatingOrbitOne
        26s
        linear
        infinite;}

.operating-model__orbit--two {animation:
        operatingOrbitTwo
        22s
        linear
        infinite;}



/* =========================================================
   NODES
   ========================================================= */

.operating-model__node {animation:
        operatingNodeFloat
        5s
        ease-in-out
        infinite;}

.operating-model__node--two {animation-delay: -1.2s;}

.operating-model__node--three {animation-delay: -2.4s;}

.operating-model__node--four {animation-delay: -3.6s;}



/* =========================================================
   WAVES
   ========================================================= */

.operating-model__wave {animation:
        operatingWave
        15s
        ease-in-out
        infinite;}

.operating-model__wave--two {animation-delay: -4s;}

.operating-model__wave--three {animation-delay: -8s;}



/* =========================================================
   DOT MATRICES
   ========================================================= */

.operating-model__dots {animation:
        operatingDots
        14s
        ease-in-out
        infinite;}

.operating-model__dots--two {animation-delay: -6s;}



/* =========================================================
   BACKGROUND ANIMATIONS
   ========================================================= */

@keyframes operatingGlowOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-12px, 9px, 0)
            scale(1.05);
    }

}

@keyframes operatingGlowTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(14px, -8px, 0)
            scale(1.04);
    }

}

@keyframes operatingGlowThree {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);
    }

    50% {
        transform:
            translate3d(-10px, -8px, 0)
            scale(1.06);
    }

}

@keyframes operatingOrbitOne {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes operatingOrbitTwo {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes operatingNodeFloat {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.75);

        opacity: .4;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.2);

        opacity: 1;
    }

}

@keyframes operatingWave {

    0%,
    100% {
        transform:
            translateX(0)
            scaleY(1);
    }

    50% {
        transform:
            translateX(1.5rem)
            scaleY(1.08);
    }

}

@keyframes operatingDots {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);

        opacity: .08;
    }

    50% {
        transform:
            translate3d(7px, -7px, 0);

        opacity: .14;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.operating-model__glow,
    .operating-model__orbit,
    .operating-model__node,
    .operating-model__wave,
    .operating-model__dots,
    .operating-model__card,
    .operating-model__card-icon,
    .operating-model__track,
    .operating-model__arrow,
    .operating-model__bullet {
        animation:
            none !important;

        transition:
            none !important;
    }
}



/* =========================================================
   GLOWS
   ========================================================= */

.alm5-framework__glow--one {animation:
        alm5GlowOne
        18s
        ease-in-out
        infinite;}

.alm5-framework__glow--two {animation:
        alm5GlowTwo
        21s
        ease-in-out
        infinite;}

.alm5-framework__glow--three {animation:
        alm5GlowThree
        19s
        ease-in-out
        infinite;}



/* =========================================================
   ORBITS
   ========================================================= */

.alm5-framework__orbit--one {animation:
        alm5OrbitOne
        28s
        linear
        infinite;}

.alm5-framework__orbit--two {animation:
        alm5OrbitTwo
        24s
        linear
        infinite;}

.alm5-framework__orbit--three {animation:
        alm5OrbitThree
        31s
        linear
        infinite;}



/* =========================================================
   NODES
   ========================================================= */

.alm5-framework__node {animation:
        alm5Node
        5s
        ease-in-out
        infinite;}

.alm5-framework__node--two {animation-delay: -1.2s;}

.alm5-framework__node--three {animation-delay: -2.4s;}

.alm5-framework__node--four {animation-delay: -3.6s;}



/* =========================================================
   DOTS
   ========================================================= */

.alm5-framework__dots {animation:
        alm5Dots
        15s
        ease-in-out
        infinite;}

.alm5-framework__dots--two {animation-delay: -6s;}



/* =========================================================
   LARGE SHAPES
   ========================================================= */

.alm5-framework__shape--one {animation:
        alm5ShapeOne
        20s
        ease-in-out
        infinite;}

.alm5-framework__shape--two {animation:
        alm5ShapeTwo
        23s
        ease-in-out
        infinite;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes alm5GlowOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-15px, 10px, 0)
            scale(1.05);
    }

}

@keyframes alm5GlowTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(13px, -9px, 0)
            scale(1.04);
    }

}

@keyframes alm5GlowThree {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);
    }

    50% {
        transform:
            translate3d(-10px, -8px, 0)
            scale(1.06);
    }

}

@keyframes alm5OrbitOne {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes alm5OrbitTwo {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}

@keyframes alm5OrbitThree {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes alm5Node {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.72);

        opacity: .35;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.2);

        opacity: 1;
    }

}

@keyframes alm5Dots {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);

        opacity: .09;
    }

    50% {
        transform:
            translate3d(7px, -7px, 0);

        opacity: .15;
    }

}

@keyframes alm5ShapeOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-14px, 10px, 0)
            scale(1.05);
    }

}

@keyframes alm5ShapeTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(12px, -9px, 0)
            scale(1.04);
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.alm5-framework__glow,
    .alm5-framework__orbit,
    .alm5-framework__node,
    .alm5-framework__dots,
    .alm5-framework__shape,
    .alm5-framework__card,
    .alm5-framework__card-icon {
        animation:
            none !important;

        transition:
            none !important;
    }
}



/* =========================================================
   BACKGROUND GLOWS
   ========================================================= */

.governed-ecosystem__glow--one {animation:
        governedGlowOne
        18s
        ease-in-out
        infinite;}

.governed-ecosystem__glow--two {animation:
        governedGlowTwo
        21s
        ease-in-out
        infinite;}

.governed-ecosystem__glow--three {animation:
        governedGlowThree
        19s
        ease-in-out
        infinite;}



/* =========================================================
   LARGE BACKGROUND CURVES
   ========================================================= */

.governed-ecosystem__curve--one {animation:
        governedCurveOne
        24s
        ease-in-out
        infinite;}

.governed-ecosystem__curve--two {animation:
        governedCurveTwo
        27s
        ease-in-out
        infinite;}



/* =========================================================
   DOT MATRICES
   ========================================================= */

.governed-ecosystem__dots {animation:
        governedDots
        15s
        ease-in-out
        infinite;}

.governed-ecosystem__dots--two {animation-delay: -6s;}



/* =========================================================
   FLOATING PARTICLES
   ========================================================= */

.governed-ecosystem__particle {animation:
        governedParticle
        5s
        ease-in-out
        infinite;}

.governed-ecosystem__particle--two {animation-delay: -1.3s;}

.governed-ecosystem__particle--three {animation-delay: -2.6s;}

.governed-ecosystem__particle--four {animation-delay: -3.9s;}



/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes governedGlowOne {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-16px, 11px, 0)
            scale(1.06);
    }

}

@keyframes governedGlowTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(14px, -10px, 0)
            scale(1.05);
    }

}

@keyframes governedGlowThree {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(.96);
    }

    50% {
        transform:
            translate3d(-10px, -8px, 0)
            scale(1.07);
    }

}

@keyframes governedCurveOne {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(-6deg)
            translate3d(-14px, -7px, 0);
    }

}

@keyframes governedCurveTwo {

    0%,
    100% {
        transform:
            rotate(8deg)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            rotate(10deg)
            translate3d(11px, 8px, 0);
    }

}

@keyframes governedDots {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);

        opacity: .1;
    }

    50% {
        transform:
            translate3d(8px, -7px, 0);

        opacity: .16;
    }

}

@keyframes governedParticle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.72);

        opacity: .35;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.2);

        opacity: 1;
    }

}

@keyframes governedOrbitOne {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes governedOrbitTwo {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}

@keyframes governedOrbitThree {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}

@keyframes governedHubPulse {

    0%,
    100% {
        transform:
            scale(.92);

        opacity: .35;
    }

    50% {
        transform:
            scale(1.08);

        opacity: .82;
    }

}

@keyframes governedHubCore {

    0%,
    100% {
        transform:
            scale(.9);
    }

    50% {
        transform:
            scale(1.12);
    }

}

@keyframes governedVisualNode {

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

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

}

@keyframes governedSignal {

    0%,
    100% {
        transform:
            scale(.7);

        opacity: .35;
    }

    50% {
        transform:
            scale(1.2);

        opacity: 1;
    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
.governed-ecosystem__glow,
    .governed-ecosystem__curve,
    .governed-ecosystem__dots,
    .governed-ecosystem__particle,
    .governed-ecosystem__orbit,
    .governed-ecosystem__hub-ring,
    .governed-ecosystem__hub-core,
    .governed-ecosystem__visual-node,
    .governed-ecosystem__signal,
    .governed-component,
    .governed-component__icon {
        animation:
            none !important;

        transition:
            none !important;
    }
}