.about-parallax{ background-image:url('../images/officials/IMG_3689.jpg') }

.beyond-cityofdesign{ background-image:url('../images/officials/news/design.jpg'); background-color:#000; }
.beyond-project{ background-image:url('../images/officials/bike-sem-fronteiras.jpg'); background-color:#000;  }
.beyond-chegadinha{ background-image:url('../images/officials/news/chegadinha.jpg'); background-color:#000; }

.dense-fadeInLeft{ visibility: visible; animation-delay: 0.2s; animation-name: fadeInLeft; }

.scarcity-image{  background-image:url('../images/officials/news/rapaz.jpg'); background-color:#000; }

.slider-image-01{  background-image:url('../images/cop30/rumoCop30.png'); background-color:transparent; }
.slider-image-02{  background-image:url('../images/cop30/rumoCop30.png'); background-color:transparent; }
.slider-image-03{  background-image:url('../images/cop30/rumoCop30.png'); background-color:transparent; }

.logo-wuf-symbol{ background-image:url('../images/logos/wuf13-fortaleza/logo-wuf-symbol.svg'); }

.candidature-01{ background-image:url('../images/graphics/MapConnected3.png'); background-color:#fff; }
.candidature-02{ background-image:url('../images/graphics/CearaToFortaleza3.png'); background-color:#fff; }

.sustainability-parallax{ background-image: url('../images/backgrounds/bg-sustainability.jpg'); background-position: 50% 50%; visibility: visible; animation-name: fadeIn; }
.candidature-parallax{ background-image: url('../images/backgrounds/bg-wuf.jpg'); background-position: 50% 50%; visibility: visible; animation-name: fadeIn; }


.sustainability-cycling{ background-image:url('../images/officials/ciclista-ciclovia-1.jpg'); background-color:#000; }
.sustainability-micro{ background-image:url('../images/fotos/microparques.jpg') }


.candidature-centro-eventos{ background-image:url('../images/officials/centro-de-eventos-dia.jpg'); background-color:#000; }
.candidature-culture{ background-image:url('../images/officials/estacao-vila-das-artes.jpg') }
.candidature-iracema-beach{ background-image:url('../images/officials/iracema-beach.jpg'); background-color:#000; }

.animate-container{
      position: relative;
      width: 100vw;
      height: 100vh;
}

.background-animate {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover; /* ajusta o background para preencher a tela */
      z-index: 0;
    }

    .element {
        position: absolute;
        width: 15%;
        height: auto;
        opacity: 0;
        animation: fadeInMove 1s ease-out forwards;
        will-change: transform;
    }

    /* Posições com ordem e delays */
    .element-1 { animation-delay: 0.2s; width: 25%; bottom: 5%; left: 0; z-index: 1; }
    .element-2 { animation-delay: 0.4s; width: 38%; bottom: 55%; left: 45%; z-index: 2; }
    .element-3 { animation-delay: 0.6s; width: 70%; bottom: 0; right: 0; z-index: 3; }
    .element-4 { animation-delay: 0.8s; width: 25%; bottom: 0; right: 0; z-index: 4; }
    .element-5 { animation-delay: 1.0s; width: 35%; bottom: -20%; left: 25%; z-index: 5; }
    .element-6 { animation-delay: 1.2s; width: 25%; bottom: 20%; right: 10%; z-index: 6; }
    .element-7 { animation-delay: 1.4s; width: 35%; top: 10%; left: 5%; z-index: 7; }

    @keyframes fadeInMove {
      from {
        transform: translateY(50px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }


   @keyframes shake {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-0.3%) rotate(0.4deg);
  }
  75% {
    transform: translateY(0.3%) rotate(-0.4deg);
  }
}

.shake {
  animation:
    fadeInMove 1s ease-out forwards,
    shake 0.4s ease-in-out 2s infinite;
}


@media (max-width: 575px) {
    .element-1 { animation-delay: 0.2s; width: 25%; bottom: 8%; left: 0; z-index: 1; }
    .element-2 { animation-delay: 0.4s; width: 40%; bottom: 24%; left: 45%; z-index: 2; }
    .element-3 { animation-delay: 0.6s; width: 74%; bottom: 0; right: -3%; z-index: 3; }
    .element-4 { animation-delay: 0.8s; width: 25%; bottom: 0; right: 0; z-index: 4; }
    .element-5 { animation-delay: 1.0s; width: 35%; bottom: -4%; left: 25%; z-index: 5; }
    .element-6 { animation-delay: 1.2s; width: 30%; bottom: 8%; right: 5%; z-index: 6; }
    .element-7 { animation-delay: 1.4s; width: 100%; top: 10%; left: 0; z-index: 7; padding: 2rem; }
}