/* ========================================
   ANIMAÇÕES CSS
======================================== */

/* Training */
.training-animation .reveal-item {
  opacity: 0;
}

.training-animation.animate .reveal-item {
  animation: fadeSlideUpCentered 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.training-animation.animate .reveal-item:nth-child(1) {
  animation-delay: 0ms;
}

.training-animation.animate .reveal-item:nth-child(2) {
  animation-delay: 400ms;
}

.training-animation.animate .reveal-item:nth-child(3) {
  animation-delay: 800ms;
}

@keyframes fadeSlideUpCentered {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 40px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
/* Documents */
.documents-icon {
  opacity: 0;
  transform: translateY(30px);
}

.documents-animation.animate .documents-icon-xls {
  animation: floatIconUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             floatUpDown 3s ease-in-out 0.8s infinite;
  animation-delay: 0ms, 0.8s;
}

.documents-animation.animate .documents-icon-pdf {
  animation: floatIconUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             floatUpDown 3.2s ease-in-out 0.95s infinite;
  animation-delay: 150ms, 0.95s;
}

.documents-animation.animate .documents-icon-docx {
  animation: floatIconUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             floatUpDown 2.8s ease-in-out 1.1s infinite;
  animation-delay: 300ms, 1.1s;
}

.documents-animation.animate .documents-icon-ppt {
  animation: floatIconUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             floatUpDown 3.5s ease-in-out 1.25s infinite;
  animation-delay: 450ms, 1.25s;
}

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

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Events */
.events-animation .card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

.events-animation.animate .card {
  animation: spreadCards 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.events-animation.animate .card-1 {
  animation-name: spread1;
  z-index: 2;
}

.events-animation.animate .card-2 {
  animation-name: spread2;
}

.events-animation.animate .card-3 {
  animation-name: spread3;
  animation-delay: 100ms;
  z-index: 3;
}

.events-animation.animate .card-4 {
  animation-name: spread4;
}

@keyframes spread1 {
  to {
    transform: translate(-255px, -250px);
  }
}

@keyframes spread2 {
  to {
    transform: translate(-170px, -140px);
  }
}

@keyframes spread3 {
  to {
    transform: translate(-250px, -16px);
  }
}

@keyframes spread4 {
  to {
    transform: translate(-170px, 88px);
  }
}

.events-animation .bell {
  position: absolute;
  opacity: 0;
  transform: translateY(14px) scale(0.7);
  filter: blur(2px);
  z-index: 10;
}

.events-animation.animate .bell {
  animation: bellAppear 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1s;
}

.events-animation .bell--top {
  right: 40px;
  top: 0;
}

.events-animation .bell--bottom {
  right: -20px;
  bottom: 82px;
}

@keyframes bellAppear {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Benefits */
.benefit-item {
  opacity: 0.3;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefit-line-1 {
  top: calc(96px * 0 + 48px + 20px);
  height: calc(96px - 40px);
  transform: scaleY(0);
  transform-origin: top;
}

.benefit-line-2 {
  top: calc(96px * 1 + 48px + 20px);
  height: calc(96px - 40px);
  transform: scaleY(0);
  transform-origin: top;
}

.benefit-line-3 {
  top: calc(96px * 2 + 48px + 20px);
  height: calc(96px - 40px);
  transform: scaleY(0);
  transform-origin: top;
}

.benefit-line-4 {
  top: calc(96px * 3 + 48px + 20px);
  height: calc(96px - 40px);
  transform: scaleY(0);
  transform-origin: top;
}

.benefit-line-connector {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.benefits-animation.animate .benefit-item:nth-child(5) {
  animation: activateBenefit1 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0ms;
}

.benefits-animation.animate .benefit-item:nth-child(6) {
  animation: activateBenefit2 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 650ms;
}

.benefits-animation.animate .benefit-item:nth-child(7) {
  animation: activateBenefit3 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1300ms;
}

.benefits-animation.animate .benefit-item:nth-child(8) {
  animation: activateBenefit4 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1950ms;
}

.benefits-animation.animate .benefit-item:nth-child(9) {
  animation: activateBenefit5 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 2600ms;
}

.benefits-animation.animate .benefit-line-1 {
  animation: growAndFillLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0ms;
}

.benefits-animation.animate .benefit-line-2 {
  animation: growAndFillLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 650ms;
}

.benefits-animation.animate .benefit-line-3 {
  animation: growAndFillLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1300ms;
}

.benefits-animation.animate .benefit-line-4 {
  animation: growAndFillLine 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1950ms;
}

@keyframes activateBenefit1 {
  to {
    opacity: 1;
    background-color: #5966A1;
  }
}

@keyframes activateBenefit2 {
  to {
    opacity: 1;
    background-color: #3D4C93;
  }
}

@keyframes activateBenefit3 {
  to {
    opacity: 1;
    background-color: #37458A;
  }
}

@keyframes activateBenefit4 {
  to {
    opacity: 1;
    background-color: #2E3C7E;
  }
}

@keyframes activateBenefit5 {
  to {
    opacity: 1;
    background-color: #273272;
  }
}

@keyframes growAndFillLine {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.contact {
  overflow: hidden;
}

.contact-parallax {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .contact-parallax {
    transform: none !important;
  }
}

/* Contact */
.contact-benefit-item {
  opacity: 0;
  transform: translateY(24px);
}

.contact.animate .contact-benefit-item {
  animation: contactBenefitReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact.animate .contact-benefit-item:nth-child(1) {
  animation-delay: 0ms;
}

.contact.animate .contact-benefit-item:nth-child(2) {
  animation-delay: 180ms;
}

.contact.animate .contact-benefit-item:nth-child(3) {
  animation-delay: 360ms;
}

.contact.animate .contact-benefit-item:nth-child(4) {
  animation-delay: 540ms;
}

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

/* ========================================
   RESPONSIVE MOBILE
======================================== */
@media (max-width: 768px) {
  /* Training Mobile */
  .training-animation {
    min-height: 300px;
    margin-bottom: 64px;
  }

  .training-animation .reveal-item {
    max-width: 200px;
  }

  .training-animation .reveal-item:nth-child(1) {
    margin-left: -80px;
    margin-top: -80px;
  }

  .training-animation .reveal-item:nth-child(2) {
    margin-left: 0;
    margin-top: 0;
  }

  .training-animation .reveal-item:nth-child(3) {
    margin-left: 80px;
    margin-top: 80px;
  }

  /* Documents Mobile */
  .documents-animation {
    max-width: 350px;
  }

  .documents-notebook {
    width: 100% !important;
  }

  .documents-icon {
    width: 12%;
    height: auto;
  }

  .documents-icon-xls {
    top: 6%;
    left: 9.33%;
  }

  .documents-icon-pdf {
    top: -10%;
    left: 16.33%;
  }

  .documents-icon-docx {
    bottom: 28%;
    right: 2.83%;
  }

  .documents-icon-ppt {
    bottom: 15.5%;
    left: 4.33%;
  }

  /* Events Mobile */
  .events-animation .notif__stack {
    width: 100%;
    max-width: 340px;
    height: 450px;
    margin: 0 auto;
    overflow: visible;
  }

  .events-animation .card {
    max-width: 90%;
  }

  .events-animation.animate .card-1 {
    animation-name: spread1Mobile;
  }

  .events-animation.animate .card-2 {
    animation-name: spread2Mobile;
  }

  .events-animation.animate .card-3 {
    animation-name: spread3Mobile;
  }

  .events-animation.animate .card-4 {
    animation-name: spread4Mobile;
  }

  @keyframes spread1Mobile {
    to {
      transform: translate(-185px, -190px);
    }
  }

  @keyframes spread2Mobile {
    to {
      transform: translate(-136px, -120px);
    }
  }

  @keyframes spread3Mobile {
    to {
      transform: translate(-185px, -30px);
    }
  }

  @keyframes spread4Mobile {
    to {
      transform: translate(-140px, 38px);
    }
  }

  .events-animation .bell--top {
    right: 15px;
    top: -5px;
    width: 50px;
  }

  .events-animation .bell--bottom {
    right: -20px;
    bottom: 86px;
    width: 100px;
  }

  /* Benefits Mobile */
  .benefit-line-connector {
    left: 34px;
  }

  .benefit-line-1 {
    top: 46px;
    height: 36px;
  }

  .benefit-line-2 {
    top: 111px;
    height: 41px;
  }

  .benefit-line-3 {
    top: 180px;
    height: 41px;
  }

  .benefit-line-4 {
    top: 250px;
    height: 41px;
  }
}

/* ========================================
   RESPONSIVE TABLET
======================================== */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Events Tablet */
  .events-animation .notif__stack {
    width: 400px;
    height: 480px;
  }

  .events-animation.animate .card-1 {
    animation-name: spread1Tablet;
  }

  .events-animation.animate .card-2 {
    animation-name: spread2Tablet;
  }

  .events-animation.animate .card-3 {
    animation-name: spread3Tablet;
  }

  .events-animation.animate .card-4 {
    animation-name: spread4Tablet;
  }

  @keyframes spread1Tablet {
    to {
      transform: translate(-210px, -210px);
    }
  }

  @keyframes spread2Tablet {
    to {
      transform: translate(-140px, -120px);
    }
  }

  @keyframes spread3Tablet {
    to {
      transform: translate(-200px, -12px);
    }
  }

  @keyframes spread4Tablet {
    to {
      transform: translate(-140px, 74px);
    }
  }
}

/* ========================================
   ACCESSIBILITY
======================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}