.animacao-divino{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:transparent;
  position:relative;
  font-family:Arial,Helvetica,sans-serif;
}

.card-paginas .animacao-divino{
  width:min(100%,28rem);
  margin-bottom:2.2rem;
  border-radius:18px;
}

.aprendizado__imagem .animacao-divino{
  width:min(100%,60rem);
  min-width:28rem;
  margin:0 auto;
  border-radius:var(--raio,18px);
}

.aprendizado__imagem--animacao{
  width:100%;
}

.animacao-divino .universo{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:transparent;
}

.animacao-divino .divino{
  position:absolute;
  left:50%;
  top:50%;
  width:130px;
  height:130px;
  transform:translate(-50%,-50%);
  z-index:8;
}

.animacao-divino .divino__centro{
  position:absolute;
  inset:22px;
  border-radius:50%;
  background:radial-gradient(circle,#fffdf3 0%,#ffe08a 44%,#d39a21 78%);
  box-shadow:0 0 30px rgba(255,220,120,.95),0 0 80px rgba(255,190,60,.62),0 0 150px rgba(255,190,60,.32);
  animation:divinoPulso 2s infinite ease-in-out;
  z-index:5;
}

.animacao-divino .divino__onda{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,217,120,.65);
  box-shadow:0 0 24px rgba(255,217,120,.22);
  animation:ondaDivina 4.5s infinite ease-out;
}

.animacao-divino .divino__onda--2{animation-delay:1.1s}
.animacao-divino .divino__onda--3{animation-delay:2.2s}
.animacao-divino .divino__onda--4{animation-delay:3.3s}

.animacao-divino .particula{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffd86d 60%,#c48316 100%);
  box-shadow:0 0 16px rgba(255,214,110,.9);
  z-index:9;
  opacity:1;
}

.animacao-divino .particula--1{animation:atrairOrbitar1 9s infinite linear}
.animacao-divino .particula--2{animation:atrairOrbitar2 10s infinite linear}
.animacao-divino .particula--3{animation:atrairOrbitar3 11s infinite linear}
.animacao-divino .particula--4{animation:atrairOrbitar4 9.5s infinite linear}
.animacao-divino .particula--5{animation:atrairOrbitar5 10.5s infinite linear}
.animacao-divino .particula--6{animation:atrairOrbitar6 11.5s infinite linear}
.animacao-divino .particula--7{animation:atrairOrbitar7 9.8s infinite linear}
.animacao-divino .particula--8{animation:atrairOrbitar8 10.8s infinite linear}
.animacao-divino .particula--9{animation:atrairOrbitar9 12s infinite linear}
.animacao-divino .particula--10{animation:atrairOrbitar10 11.2s infinite linear}
.animacao-divino .particula--11{animation:atrairOrbitar11 10.2s infinite linear}
.animacao-divino .particula--12{animation:atrairOrbitar12 12.5s infinite linear}

@keyframes divinoPulso{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

@keyframes ondaDivina{
  0%{transform:scale(.5);opacity:.82}
  100%{transform:scale(3.4);opacity:0}
}

@keyframes atrairOrbitar1{
  0%{transform:translate(-260px,-210px) scale(.8)}
  45%{transform:rotate(0deg) translateX(95px) scale(1)}
  100%{transform:rotate(360deg) translateX(95px) scale(1)}
}

@keyframes atrairOrbitar2{
  0%{transform:translate(220px,-230px) scale(.8)}
  45%{transform:rotate(60deg) translateX(120px) scale(1)}
  100%{transform:rotate(420deg) translateX(120px) scale(1)}
}

@keyframes atrairOrbitar3{
  0%{transform:translate(-290px,10px) scale(.8)}
  45%{transform:rotate(120deg) translateX(78px) scale(1)}
  100%{transform:rotate(480deg) translateX(78px) scale(1)}
}

@keyframes atrairOrbitar4{
  0%{transform:translate(270px,20px) scale(.8)}
  45%{transform:rotate(180deg) translateX(145px) scale(1)}
  100%{transform:rotate(540deg) translateX(145px) scale(1)}
}

@keyframes atrairOrbitar5{
  0%{transform:translate(-210px,250px) scale(.8)}
  45%{transform:rotate(240deg) translateX(105px) scale(1)}
  100%{transform:rotate(600deg) translateX(105px) scale(1)}
}

@keyframes atrairOrbitar6{
  0%{transform:translate(230px,245px) scale(.8)}
  45%{transform:rotate(300deg) translateX(130px) scale(1)}
  100%{transform:rotate(660deg) translateX(130px) scale(1)}
}

@keyframes atrairOrbitar7{
  0%{transform:translate(-40px,-290px) scale(.8)}
  45%{transform:rotate(30deg) translateX(88px) scale(1)}
  100%{transform:rotate(390deg) translateX(88px) scale(1)}
}

@keyframes atrairOrbitar8{
  0%{transform:translate(40px,290px) scale(.8)}
  45%{transform:rotate(210deg) translateX(115px) scale(1)}
  100%{transform:rotate(570deg) translateX(115px) scale(1)}
}

@keyframes atrairOrbitar9{
  0%{transform:translate(-310px,-90px) scale(.8)}
  45%{transform:rotate(90deg) translateX(155px) scale(1)}
  100%{transform:rotate(450deg) translateX(155px) scale(1)}
}

@keyframes atrairOrbitar10{
  0%{transform:translate(310px,-80px) scale(.8)}
  45%{transform:rotate(150deg) translateX(98px) scale(1)}
  100%{transform:rotate(510deg) translateX(98px) scale(1)}
}

@keyframes atrairOrbitar11{
  0%{transform:translate(-300px,150px) scale(.8)}
  45%{transform:rotate(270deg) translateX(135px) scale(1)}
  100%{transform:rotate(630deg) translateX(135px) scale(1)}
}

@keyframes atrairOrbitar12{
  0%{transform:translate(300px,160px) scale(.8)}
  45%{transform:rotate(330deg) translateX(82px) scale(1)}
  100%{transform:rotate(690deg) translateX(82px) scale(1)}
}

@media (max-width:480px){
  .aprendizado__imagem .animacao-divino{
    width:min(100%,34rem);
    min-width:0;
  }

  .animacao-divino .divino{
    width:112px;
    height:112px;
  }

  .animacao-divino .divino__centro{
    inset:18px;
  }

  .animacao-divino .particula{
    width:12px;
    height:12px;
  }
}
