/* Animações básicas */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOpacity {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gentlePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(55, 194, 226, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(55, 194, 226, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(55, 194, 226, 0);
  }
}

@keyframes changeColor {
  0% {
      fill: #9E77EE;
  }
  100% {
      fill: #57529B;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(55, 194, 226, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 2px 12px rgba(55, 194, 226, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(55, 194, 226, 0);
  }
}

.covered {
    fill:#F3EBFF;  
}

.two-col .left h1,
.two-col .left h2 {
  opacity: 0;
  transform: translateX(-2rem);
}

.two-col .left h2 {
  transform: translateX(-2rem);
}

.grid-3.white-boxes .box {
  opacity: 0;
  transform: translateY(2rem);
}

.slide.active .two-col .left h1 {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.slide.active .two-col .left h2 {
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.slide.active .grid-3.white-boxes .box:nth-child(1) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.8s;
}

.slide.active .grid-3.white-boxes .box:nth-child(2) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 1.1s;
}

.slide.active .grid-3.white-boxes .box:nth-child(3) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 1.4s;
}

.one-col.center h1,
.one-col.center h2 {
  opacity: 0;
  transform: translateX(-2rem);
}

.one-col.center .grid-3.vid-boxes .box {
  opacity: 0;
  transform: translateY(2rem);
}

.one-col.center .disclaimer {
  opacity: 0;
}

.slide.active .one-col.center h1 {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.slide.active .one-col.center h2 {
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.slide.active .one-col.center .grid-3.vid-boxes .box:nth-child(1) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.6s;
}

.slide.active .one-col.center .grid-3.vid-boxes .box:nth-child(2) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.9s;
}

.slide.active .one-col.center .grid-3.vid-boxes .box:nth-child(3) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 1.2s;
}

.slide.active .one-col.center .disclaimer {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 1.5s;
}

.one-col.center .grid-3.vid-boxes .box .overlay {
  opacity: 1;
  transform: none;
}

.two-col-50 .left h1,
.two-col-50 .left h2 {
  opacity: 0;
  transform: translateX(-2rem);
}

.two-col-50 .right .people-boxes .vid {
  opacity: 0;
  transform: translateY(2rem);
}

.two-col-50 .right .people-background {
  opacity: 0;
}

.slide.active .two-col-50 .left h1 {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.slide.active .two-col-50 .left h2 {
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.slide.active .two-col-50 .right .people-boxes .vid:nth-child(1) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.6s;
}

.slide.active .two-col-50 .right .people-boxes .vid:nth-child(2) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 0.9s;
}

.slide.active .two-col-50 .right .people-boxes .vid:nth-child(3) {
  animation: fadeInUp 0.8s ease-out forwards;
  animation-delay: 1.2s;
}

.two-col-50 .right .people-boxes .vid h2,
.two-col-50 .right .people-boxes .vid p {
  opacity: 1;
  transform: none;
}

.two-col-50 .right .people-background {
    opacity: 0;
    transform: none;
    transition: none;
    animation: none;
}
.slide.active .two-col-50 .right .people-background {
    animation: fadeInOpacity 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

.two-col .left ul,
.two-col .left ol,
.two-col .left ul li,
.two-col .left ol li,
.two-col-50 .left li,
.two-col .left .grid-2.white-boxes .box {
  opacity: 0;
}

.two-col .left ul, .two-col .left ol, .two-col-50 .left ul {
  transform: translateX(-1rem);
}

.two-col .left ul li, .two-col .left ol li, .two-col-50 .left ul li {
  transform: translateX(-1rem);
}

.two-col .left .grid-2.white-boxes .box {
  transform: translateY(1rem);
}

.slide.active .two-col .left ul,
.slide.active .two-col .left ol,
.slide.active .two-col-50 .left ul {
  animation: fadeInLeft 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.slide.active .two-col .left ul li,
.slide.active .two-col .left ol li,
.slide.active .two-col-50 .left ul li {
  animation: fadeInLeft 0.4s ease-out forwards;
}

.slide.active .two-col .left li:nth-child(1),
.slide.active .two-col-50 .left li:nth-child(1) {
  animation-delay: 0.5s;
}

.slide.active .two-col .left li:nth-child(2),
.slide.active .two-col-50 .left li:nth-child(2) {
  animation-delay: 0.7s;
}

.slide.active .two-col .left li:nth-child(3),
.slide.active .two-col-50 .left li:nth-child(3) {
  animation-delay: 0.9s;
}

.slide.active .two-col .left li:nth-child(4),
.slide.active .two-col-50 .left li:nth-child(4) {
  animation-delay: 1.1s;
}

.slide.active .two-col .left li:nth-child(5),
.slide.active .two-col-50 .left li:nth-child(5) {
  animation-delay: 1.3s;
}

/* Animação para os boxes */
.slide.active .two-col .left .grid-2.white-boxes .box:nth-child(1) {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 1.1s;
}

.slide.active .two-col .left .grid-2.white-boxes .box:nth-child(2) {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 1.3s;
}

/* ESTADO INICIAL DOS ELEMENTOS */
.two-col .left .meds,
.two-col .left .meds .med,
.two-col .left .highlight {
  opacity: 0;
}

/* POSIÇÕES INICIAIS ESPECÍFICAS */
.two-col .left .meds {
  transform: translateX(-1rem);
}

.two-col .left .meds .med {
  transform: translateY(1rem);
}

.two-col .left .highlight {
  transform: translateY(1rem);
}

/* ANIMAÇÕES QUANDO ACTIVE É ATIVADO */
.slide.active .two-col .left .meds {
  animation: fadeInLeft 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

/* Animação para cada med (um após o outro) */
.slide.active .two-col .left .meds .med:nth-child(1) {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 0.6s;
}

.slide.active .two-col .left .meds .med:nth-child(2) {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 0.8s;
}

/* Animação para o highlight */
.slide.active .two-col .left .highlight {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 1s;
}

/* Estado inicial da referência */
.reference, .disclaimer {
  opacity: 0;
  transform: translateY(1rem);
  will-change: transform, opacity;
}

/* Animação quando a classe active é ativada */
.slide.active .reference, .slide.active .disclaimer {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 1.2s;
}

/* Estado inicial da imagem */
.img-up {
  opacity: 0;
  transform: translateY(1rem);
  will-change: transform, opacity;
}

/* Animação quando a classe active é ativada */
.slide.active .img-up {
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 0.6s;
}

.evidences a.active {
  animation: gentlePulse 0.8s ease-out;
}

/* Estado inicial */
.grid-2-2 .clinical-highlight {
  opacity: 0;
  transform: translateY(1rem);
}

/* Animação quando a classe active é ativada */
.slide.active .grid-2-2 .clinical-highlight {
  animation: fadeInUp 0.6s ease-out forwards;
}

/* Delays progressivos - um após o outro */
.slide.active .grid-2-2 .clinical-highlight:nth-child(1) {
  animation-delay: 0.3s;
}

.slide.active .grid-2-2 .clinical-highlight:nth-child(2) {
  animation-delay: 0.5s;
}

.slide.active .grid-2-2 .clinical-highlight:nth-child(3) {
  animation-delay: 0.7s;
}

.slide.active .grid-2-2 .clinical-highlight:nth-child(4) {
  animation-delay: 0.9s;
}

/* Estado inicial */
.outstanding {
  opacity: 0;
  transform: translateX(-2rem);
  will-change: transform, opacity;
}

/* Animação quando active é ativado */
.slide.active .outstanding {
  animation: fadeInRight 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

/* ANIMAÇÕES PARA H1 E H2 */
.slide-patient-journey .one-col h1 {
  opacity: 0;
  transform: translateX(-2rem);
  animation: fadeInLeft 0.8s ease-out forwards;
}

.slide-patient-journey .one-col h2.gray {
  opacity: 0;
  transform: translateX(-2rem);
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.patient-journeys .journey.active {
  animation: pulse 1s ease-in-out;
}

/* ANIMAÇÕES PARA H1 E H2 */
.grid-map.active ul li {
  opacity: 0;
  transform: translateY(1rem);
  animation: fadeInUp 0.8s ease-out forwards;
}

.new {
    animation: changeColor 0.6s forwards alternate infinite;
}

.slide.slide-since-sleep-2024.active ul li {
  opacity: 0;
  animation: fadeInLeft 0.4s ease-out forwards;
}

.slide.slide-since-sleep-2024.active ul li:nth-child(1) {
  animation-delay: 0.5s;
}

.slide.slide-since-sleep-2024.active ul li:nth-child(2) {
  animation-delay: 0.7s;
}

.slide.slide-since-sleep-2024.active ul li:nth-child(3) {
  animation-delay: 0.9s;
}

.slide.slide-since-sleep-2024.active ul li:nth-child(4) {
  animation-delay: 1.1s;
}

.slide.slide-since-sleep-2024.active ul li:nth-child(51) {
  animation-delay: 1.3s;
}



/* ANIMAÇÕES PARA H1 E H2 */
.slide-patient-journey-1 .one-col h1 {
  opacity: 0;
  transform: translateX(-2rem);
  animation: fadeInLeft 0.8s ease-out forwards;
}

.slide-patient-journey-1 .one-col h2.gray {
  opacity: 0;
  transform: translateX(-2rem);
  animation: fadeInLeft 0.8s ease-out forwards;
  animation-delay: 0.3s;
}


.patient-journeys .journey.active {
  animation: pulse 1s ease-in-out;
}

.slide.active .questions {
  opacity: 0;
}

.slide.active .questions {
  transform: translateY(1rem);
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: 1.2s;
}