/* Componente animado opcional: metodo em camadas.
   Carregar apenas nos cursos que usam este bloco. */

.metodo-camadas{position:relative;width:min(90vw,48rem);aspect-ratio:1;margin:auto;border-radius:50%;background:radial-gradient(circle,rgba(255,222,89,.16) 0,rgba(255,222,89,.06) 18%,rgba(255,222,89,0) 58%)}
.metodo-camadas__circulo{display:block;position:absolute;inset:50% auto auto 50%;border:1px solid rgba(255,222,89,.55);border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.82)}
.metodo-camadas__circulo strong{position:absolute;top:0;left:50%;padding:.5rem 1.1rem;border:1px solid rgba(255,222,89,.42);border-radius:999px;background:var(--cor-fundo);color:var(--cor-amarelo);font-size:clamp(1.15rem,1.05rem + .22vw,1.4rem);font-weight:600;line-height:1.2;letter-spacing:.03em;transform:translate(-50%,-50%)}
.metodo-camadas__circulo--reconhecer{width:28%;aspect-ratio:1;border-color:var(--cor-amarelo);background:rgba(255,222,89,.08);animation:metodo-camadas-reconhecer 10s ease-in-out infinite both}
.metodo-camadas__circulo--entender{width:52%;aspect-ratio:1;animation:metodo-camadas-entender 10s ease-in-out infinite both}
.metodo-camadas__circulo--acalmar{width:76%;aspect-ratio:1;animation:metodo-camadas-acalmar 10s ease-in-out infinite both}
.metodo-camadas__circulo--praticar{width:100%;aspect-ratio:1;animation:metodo-camadas-praticar 10s ease-in-out infinite both}
@keyframes metodo-camadas-reconhecer{0%{opacity:0;box-shadow:none;filter:blur(4px);transform:translate(-50%,-50%) scale(.82)}6%{opacity:1;box-shadow:0 0 1.5rem .5rem rgba(255,222,89,.55),0 0 4rem 1.4rem rgba(255,222,89,.24);filter:blur(0);transform:translate(-50%,-50%) scale(1.04)}12%,78%{opacity:1;box-shadow:0 0 1.2rem .25rem rgba(255,222,89,.28);filter:blur(0);transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;box-shadow:none;filter:blur(3px);transform:translate(-50%,-50%) scale(1.04)}}
@keyframes metodo-camadas-entender{0%,12%{opacity:0;box-shadow:none;filter:blur(4px);transform:translate(-50%,-50%) scale(.82)}18%{opacity:1;box-shadow:0 0 1.5rem .5rem rgba(255,222,89,.55),0 0 4rem 1.4rem rgba(255,222,89,.24);filter:blur(0);transform:translate(-50%,-50%) scale(1.04)}24%,78%{opacity:1;box-shadow:0 0 1.2rem .25rem rgba(255,222,89,.28);filter:blur(0);transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;box-shadow:none;filter:blur(3px);transform:translate(-50%,-50%) scale(1.04)}}
@keyframes metodo-camadas-acalmar{0%,24%{opacity:0;box-shadow:none;filter:blur(4px);transform:translate(-50%,-50%) scale(.82)}30%{opacity:1;box-shadow:0 0 1.5rem .5rem rgba(255,222,89,.55),0 0 4rem 1.4rem rgba(255,222,89,.24);filter:blur(0);transform:translate(-50%,-50%) scale(1.04)}36%,78%{opacity:1;box-shadow:0 0 1.2rem .25rem rgba(255,222,89,.28);filter:blur(0);transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;box-shadow:none;filter:blur(3px);transform:translate(-50%,-50%) scale(1.04)}}
@keyframes metodo-camadas-praticar{0%,36%{opacity:0;box-shadow:none;filter:blur(4px);transform:translate(-50%,-50%) scale(.82)}42%{opacity:1;box-shadow:0 0 1.5rem .5rem rgba(255,222,89,.55),0 0 4rem 1.4rem rgba(255,222,89,.24);filter:blur(0);transform:translate(-50%,-50%) scale(1.04)}48%,78%{opacity:1;box-shadow:0 0 1.2rem .25rem rgba(255,222,89,.28);filter:blur(0);transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;box-shadow:none;filter:blur(3px);transform:translate(-50%,-50%) scale(1.04)}}

@media (prefers-reduced-motion:reduce){
  .metodo-camadas__circulo{opacity:1;transform:translate(-50%,-50%);animation:none}
}