/* Componente animado opcional: cancela mental.
   Carregar apenas nos cursos que usam este bloco. */

.aprendizado__imagem--cancela{min-height:42rem;flex-direction:column;gap:3.2rem}
.cancela-mental__cta{white-space:nowrap}
.cancela-mental{position:relative;width:min(90%,52rem);aspect-ratio:1;border:1px solid rgba(247,205,96,.38);border-radius:var(--raio);overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(255,222,89,.16),rgba(255,222,89,0) 28%),linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cancela-mental:before,.cancela-mental:after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.cancela-mental:before{inset:16%;border:1px solid rgba(255,255,255,.1);animation:cancela-respiro 8s ease-in-out infinite}
.cancela-mental:after{width:68%;height:68%;left:16%;top:16%;background:radial-gradient(circle,rgba(255,222,89,.1),rgba(255,222,89,0) 58%);filter:blur(.2rem)}
.cancela-mental__pensamento{position:absolute;z-index:2;display:inline-flex;max-width:15rem;min-height:3.8rem;padding:.85rem 1.15rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(12,39,59,.74);color:rgba(255,255,255,.82);align-items:center;justify-content:center;font-size:clamp(1.05rem,.9rem + .45vw,1.35rem);font-weight:500;line-height:1.15;text-align:center;box-shadow:0 1.2rem 3rem rgba(0,0,0,.14);opacity:0;filter:blur(.25rem);animation:cancela-pensamento 12s linear infinite}
.cancela-mental__pensamento--um{top:18%;left:4%;animation-delay:0s;--cancela-x:10rem;--cancela-y:8rem}
.cancela-mental__pensamento--dois{top:14%;right:3%;animation-delay:3s;--cancela-x:-10rem;--cancela-y:8.5rem}
.cancela-mental__pensamento--tres{right:6%;bottom:20%;animation-delay:6s;--cancela-x:-9.5rem;--cancela-y:-7.5rem}
.cancela-mental__pensamento--quatro{left:7%;bottom:18%;animation-delay:9s;--cancela-x:10rem;--cancela-y:-7.5rem}
.cancela-mental__anel{position:absolute;z-index:3;inset:31%;border:2px solid rgba(255,222,89,.78);border-radius:50%;box-shadow:0 0 0 0 rgba(255,222,89,.18),0 0 3rem rgba(255,222,89,.2);animation:cancela-anel 2.8s ease-in-out infinite}
.cancela-mental__comando{position:absolute;z-index:4;top:50%;left:50%;display:flex;width:42%;aspect-ratio:1;border-radius:50%;background:var(--cor-amarelo);color:var(--cor-fundo);align-items:center;justify-content:center;font-size:clamp(1.7rem,1.1rem + 1.8vw,2.9rem);font-weight:600;line-height:1;text-align:center;text-transform:uppercase;box-shadow:0 1.8rem 4rem rgba(0,0,0,.24),0 0 0 .9rem rgba(255,222,89,.12);transform:translate(-50%,-50%);animation:cancela-comando 2.8s ease-in-out infinite}
.cancela-mental__legenda{position:absolute;z-index:4;left:50%;bottom:13%;width:min(72%,28rem);color:rgba(255,255,255,.68);font-size:1.15rem;font-weight:600;line-height:1.2;text-align:center;text-transform:uppercase;transform:translateX(-50%)}

@keyframes cancela-pensamento{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
  16%{opacity:.72;transform:translate3d(calc(var(--cancela-x,2.2rem) * .62),calc(var(--cancela-y,1.4rem) * .62),0) scale(.94);filter:blur(.08rem)}
  24.95%{opacity:0;transform:translate3d(calc(var(--cancela-x,2.2rem) * 1.32),calc(var(--cancela-y,1.4rem) * 1.32),0) scale(.68);filter:blur(.65rem)}
  25%,100%{opacity:0;transform:translate3d(0,0,0) scale(1);filter:blur(.35rem)}
}
@keyframes cancela-comando{
  0%,100%{transform:translate(-50%,-50%) scale(.98);box-shadow:0 1.8rem 4rem rgba(0,0,0,.24),0 0 0 .8rem rgba(255,222,89,.1)}
  50%{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 1.8rem 4rem rgba(0,0,0,.24),0 0 0 1.35rem rgba(255,222,89,.2)}
}
@keyframes cancela-anel{
  0%,100%{transform:scale(.92);opacity:.45}
  50%{transform:scale(1.16);opacity:1}
}
@keyframes cancela-respiro{
  0%,100%{transform:scale(.95);opacity:.48}
  50%{transform:scale(1.04);opacity:.9}
}

@media (max-width:767px){
  .aprendizado__imagem--cancela{min-height:34rem;gap:2.6rem}
  .cancela-mental{width:100%}
}

@media (max-width:478px){
  .cancela-mental{border-radius:1.6rem}
  .cancela-mental__pensamento{max-width:12.4rem;min-height:3.3rem;padding:.7rem .9rem;font-size:1rem}
  .cancela-mental__pensamento--um{--cancela-x:7rem;--cancela-y:5.7rem}
  .cancela-mental__pensamento--dois{--cancela-x:-7rem;--cancela-y:6rem}
  .cancela-mental__pensamento--tres{--cancela-x:-6.5rem;--cancela-y:-5.8rem}
  .cancela-mental__pensamento--quatro{--cancela-x:7rem;--cancela-y:-5.6rem}
  .cancela-mental__comando{width:45%;font-size:1.55rem}
  .cancela-mental__legenda{bottom:11%;font-size:.95rem}
  .cancela-mental__cta{font-size:1.42rem;white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .cancela-mental:before,.cancela-mental__pensamento,.cancela-mental__anel,.cancela-mental__comando{animation:none}
  .cancela-mental__pensamento{opacity:1;filter:none;transform:none}
}