.css-animation,
.css-animation .css-animation-wrapper,
.css-animation .css-animation-content {
    width: 100%;
}

.css-animation .css-animation-wrapper {
    height: 100%;
    max-width: 648px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease, display 0.2s allow-discrete;
}

.css-animation .css-animation-wrapper.css-animation-visible {
    display: flex;
    opacity: 1;
}

@starting-style {
    .css-animation .css-animation-wrapper.css-animation-visible {
        opacity: 0;
    }
}

@media (min-width: 1065px) {
    :is(.generic-hero, .hero-section:not(#homepage_hero)) .css-animation {
        width: 47%;
        margin-bottom: 21px;
    }
}
@media (max-width: 1064px) {
    :is(.generic-hero, .hero-section:not(#homepage_hero)) .css-animation {
        width: 100%;
    }
}


/*=== animation option1: Laptop: CBAM dashboard and AI helper ===*/

section.squares-scroll-animation .css-animation { 
    aspect-ratio: 542.39 / 325.25;
}
    
section.squares-scroll-animation .css-animation .css-animation-content-option1 {
    transform: translate(17px, 32px) scale(1.05); 
}

.css-animation .css-animation-content-option1 {
    position: relative;
    line-height: 0;
    font-size: 0;
}

.css-animation .css-animation-content-option1 img {
    width: auto;
    aspect-ratio: 648/426.35;
}

.css-animation .css-animation-content-option1 img:not(:first-child) {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
}

.css-animation .css-animation-content-option1 img:nth-child(1) {
    position: relative;
    z-index: 1;
}

.css-animation .css-animation-content-option1 img:nth-child(2) { 
    animation: option1ShowScale 5s ease-in-out infinite;
    animation-play-state: paused;
    z-index:2;
}

.css-animation .css-animation-content-option1 img:nth-child(3) { 
    animation: option1ShowMoveUp 5s ease-in-out infinite;
    animation-play-state: paused;
    z-index:3;
}

.css-animation .css-animation-content-option1 img:nth-child(4) { 
    animation: option1ShowSlideIn 5s ease-in-out infinite;
    animation-play-state: paused;
    z-index:4;
}

@keyframes option1ShowScale {
    0%,2% { opacity:0; transform:translate(-20px,-20px) scale(.8); }
    15% { opacity:1; transform:translate(0,0) scale(1); }
    95% { opacity:1; transform:translate(0,0) scale(1); }
    100% { opacity:0; transform:translate(-20px,-20px) scale(.8); }
}

@keyframes option1ShowMoveUp {
    0%,14% { opacity:0; transform:translateY(20px); }
    15% { opacity:0; transform:translateY(20px); }
    25% { opacity:1; transform:translateY(0); }
    95% { opacity:1; transform:translateY(0); }
    100% { opacity:0; transform:translateY(20px); }
}

@keyframes option1ShowSlideIn {
    0%,24% { opacity:0; transform:translateX(40px); }
    25% { opacity:0; transform:translateX(40px); }
    35% { opacity:1; transform:translateX(0); }
    95% { opacity:1; transform:translateX(0); }
    100% { opacity:0; transform:translateX(40px); }
}


/*=== animation option2: "Share Data With Your Customer" ===*/

.css-animation .css-animation-content-option2 {
    position: relative;
    line-height: 0;
    font-size: 0;
    aspect-ratio: 677/380;
    width: 100%;
    height: auto;
}

.css-animation .css-animation-content-option2 img {
    width: auto;
}

.css-animation .css-animation-content-option2 img:first-child {
    aspect-ratio: 230.875/329.891;
    z-index: 2;
    position: absolute;
    bottom: -7.2%;
    left: 2.2%;
    height: 108.84%;
    min-height: 108.84%;
}

.css-animation .css-animation-content-option2 img:nth-child(2) {
    aspect-ratio: 91.9844/91.9844;
    z-index: 3;
    position: absolute;
    top: -10.7%;
    left: 15%;
    height: 30.35%;
    opacity: 0;
}

.css-animation .css-animation-content-option2.animate img:nth-child(2) {
    animation: option2FlyInFromTop 5s ease forwards;
}

.css-animation .css-animation-content-option2 img:nth-child(3) {
    aspect-ratio: 83.6406/83.6406;
    z-index: 1;
    position: absolute;
    top: -7.1%;
    left: 15.6%;
    height: 28%;
    opacity: 0;
}

.css-animation .css-animation-content-option2.animate img:nth-child(3) {
    animation: option2FlyInFromTop2 5s ease forwards;
}

.css-animation .css-animation-content-option2 img:nth-child(4) {
    aspect-ratio: 347.406/240.047;
    z-index: 4;
    position: absolute;
    top: 6.4%;
    right: 2.3%;
    height: 79.2%;
    opacity: 0;
}

.css-animation .css-animation-content-option2.animate img:nth-child(4) {
    animation: option2FlyInFromRight 5s ease forwards;
}

.css-animation .css-animation-content-option2 img:nth-child(5) {
    aspect-ratio: 92.7344/92.7344;
    z-index: 5;
    position: absolute;
    top: 0%;
    right: -0.5%;
    height: 30.25%;
    opacity: 0;
}

.css-animation .css-animation-content-option2.animate img:nth-child(5) {
    animation: option2FlyInFromRight2 5s ease forwards;
}

.css-animation .css-animation-content-option2 img:nth-child(6) {
    aspect-ratio: 83.6406/83.6406;
    z-index: 3;
    position: absolute;
    top: 3%;
    right: 0.8%;
    height: 27.6%;
    opacity: 0;
}

.css-animation .css-animation-content-option2.animate img:nth-child(6) {
    animation: option2FlyInFromRight3 5s ease forwards;
}

@keyframes option2FlyInFromBottom {
  0% { opacity: 0; transform: translateY(100%); }
  12%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes option2FlyInFromTop {
  0%, 2% { opacity: 0; transform: translateY(-100%); }
  17%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes option2FlyInFromTop2 {
  0%, 4% { opacity: 0; transform: translateY(-100%); }
  19%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes option2FlyInFromRight {
  0%, 20% { opacity: 0; transform: translateX(50%); }
  35%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option2FlyInFromRight2 {
  0%, 39% { opacity: 0; transform: translateX(100%); }
  54%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option2FlyInFromRight3 {
  0%, 41% { opacity: 0; transform: translateX(100%); }
  56%, 100% { opacity: 1; transform: translateX(0); }
}


/*=== animation option3: "AI Extracted Customer Requests" ===*/

.css-animation .css-animation-content-option3 {
    position: relative;
    line-height: 0;
    font-size: 0;
    aspect-ratio: 669.5/376.594;
    width: 100%;
    height: auto;
}

.css-animation .css-animation-content-option3 img {
    width: auto;
}

.css-animation .css-animation-content-option3 img:first-child {
    aspect-ratio: 393.641/233.891;
    z-index: 1;
    position: absolute;
    top: 6%;
    left: 4%;
    height: 88.4%;
}

.css-animation .css-animation-content-option3 img:nth-child(2) {
    aspect-ratio: 153.594/127.266;
    z-index: 2;
    position: absolute;
    bottom: 2.8%;
    left: -11.4%;
    height: 48.1%;
    opacity: 0;
}

.css-animation .css-animation-content-option3.animate img:nth-child(2) {
    animation: option3SlideInFromLeft 5s ease forwards;
}

.css-animation .css-animation-content-option3 img:nth-child(3) {
    aspect-ratio: 154.016/161.656;
    z-index: 3;
    position: absolute;
    top: 2%;
    right: -3.5%;
    height: 61.1%;
    opacity: 0;
}

.css-animation .css-animation-content-option3.animate img:nth-child(3) {
    animation: option3SlideInFromRight 5s ease forwards;
}

.css-animation .css-animation-content-option3 img:nth-child(4) {
    aspect-ratio: 1/1;
    z-index: 4;
    position: absolute;
    top: 9%;
    right: -8.5%;
    height: 33.15%;
    opacity: 0;
}

.css-animation .css-animation-content-option3.animate img:nth-child(4) {
    animation: option3SlideInFromRight2 5s ease forwards;
}

@keyframes option3SlideInFromLeft {
  0%, 4% { opacity: 0; transform: translateX(-80%); }
  19%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option3SlideInFromRight {
  0%, 22% { opacity: 0; transform: translateX(80%); }
  37%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option3SlideInFromRight2 {
  0%, 22% { opacity: 0; transform: translateX(75%); }
  37%, 100% { opacity: 1; transform: translateX(0); }
}


/*=== animation option4: "Assent deshboard AI filters" ===*/

.css-animation .css-animation-content-option4 {
    position: relative;
    line-height: 0;
    font-size: 0;
    aspect-ratio: 650.953/365.375;
    width: 100%;
    height: auto;
}

.css-animation .css-animation-content-option4 img {
    width: auto;
}

.css-animation .css-animation-content-option4 img:first-child {
    z-index: 2;
    position: absolute;
    top: 6%;
    left: 9%;
    height: 87.6%;
}

.css-animation .css-animation-content-option4 img:nth-child(2) {
    z-index: 3;
    position: absolute;
    bottom: 9%;
    left: -2.5%;
    height: 40.2%;
    opacity: 0;
}

.css-animation .css-animation-content-option4.animate img:nth-child(2) {
    animation: option4FlyInFromLeft 5s ease forwards;
}

.css-animation .css-animation-content-option4 img:nth-child(3) {
    z-index: 1;
    position: absolute;
    left: -2%;
    bottom: 7.8%;
    height: 39%;
    opacity: 0;
}

.css-animation .css-animation-content-option4.animate img:nth-child(3) {
    animation: option4FlyInFromLeft2 5s ease forwards;
}

.css-animation .css-animation-content-option4 img:nth-child(4) {
    z-index: 3;
    position: absolute;
    top: 9.7%;
    right: -13.7%;
    height: 40.2%;
    opacity: 0;
}

.css-animation .css-animation-content-option4.animate img:nth-child(4) {
    animation: option4FlyInFromRight 5s ease forwards;
}

.css-animation .css-animation-content-option4 img:nth-child(5) {
    z-index: 1;
    position: absolute;
    top: 12%;
    right: -13%;
    height: 39%;
    opacity: 0;
}

.css-animation .css-animation-content-option4.animate img:nth-child(5) {
    animation: option4FlyInFromRight2 5s ease forwards;
}

@keyframes option4FlyInFromLeft {
  0%, 6% { opacity: 0; transform: translateX(-100%); }
  21%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option4FlyInFromLeft2 {
  0%, 8% { opacity: 0; transform: translateX(-100%); }
  23%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option4FlyInFromRight {
  0%, 11% { opacity: 0; transform: translateX(100%); }
  26%, 100% { opacity: 1; transform: translateX(0); }
}

@keyframes option4FlyInFromRight2 {
  0%, 13% { opacity: 0; transform: translateX(100%); }
  28%, 100% { opacity: 1; transform: translateX(0); }
}