/* ==========================================================================
   Raio-x da frente: esqueleto → estrutura → conexões → no ar, conforme a rolagem.
   No computador o palco fica preso na tela e as fases correm com a rolagem;
   no celular cada camada passa pelas fases quando chega na tela.
   ========================================================================== */
.raiox{--rx:var(--verde);--rx-f:rgba(181,204,24,.42);position:relative;background:var(--preto);color:#e9eae3}
.rx-fixo{padding-block:72px}
.rx-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:28px}
.rx-cab h2{color:#fff;max-width:20ch}
.rx-fases{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.rx-fases li{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:40px;color:rgba(255,255,255,.4);transition:all .4s}
.rx-fases li b{font-weight:500;color:inherit}
.rx-fases li.on{color:var(--verde);border-color:var(--rx-f);box-shadow:0 0 18px rgba(181,204,24,.16)}
.rx-fases li.on:last-child{color:#0b0b0a;background:var(--verde);border-color:var(--verde);box-shadow:0 0 22px rgba(181,204,24,.45)}

.rx-palco{position:relative;overflow:hidden;border-radius:14px;padding:28px;border:1px solid var(--linha-e);
  background-color:var(--preto2);
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),radial-gradient(ellipse at 50% 0%,rgba(181,204,24,.08),transparent 60%);
  background-size:32px 32px,32px 32px,100% 100%}
.rx-varre{position:absolute;left:0;right:0;top:-120px;height:120px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,transparent,rgba(181,204,24,.10) 60%,rgba(181,204,24,.45) 98%,transparent);animation:rx-varre 3.4s linear infinite;transition:opacity .6s}
.raiox.pronto .rx-varre{opacity:.25}
@keyframes rx-varre{to{top:100%}}

.rx-camadas{position:relative;z-index:2;display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.rx-camadas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rx-camadas{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* camada: invisível → esqueleto tracejado → corpo → conectada → no ar */
.rx-c{position:relative;padding:18px 18px 20px;border-radius:12px;border:1.5px dashed transparent;min-height:196px;display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1),border-color .6s,background .6s,box-shadow .6s;transition-delay:calc(var(--i) * 70ms)}
.rx-n{font-family:var(--m);font-size:12px;color:var(--rx);letter-spacing:.08em;align-self:flex-start;padding:2px 8px;border:1px solid var(--rx-f);border-radius:4px;transition:all .5s}
.rx-t{font-size:20px;line-height:24px;font-weight:600;color:transparent;-webkit-text-stroke:1px var(--rx);transition:color .6s,-webkit-text-stroke-color .6s;transition-delay:calc(var(--i) * 70ms)}
.rx-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.rx-c li{position:relative;min-height:20px;font-size:14px;line-height:20px;color:var(--mudo-e)}
.rx-c li span{opacity:0;transition:opacity .5s;transition-delay:calc(var(--i) * 70ms + .15s)}
.rx-c li::before{content:"";position:absolute;left:0;top:5px;height:10px;border-radius:5px;width:var(--w,82%);border:1px dashed var(--rx-f);opacity:0;transition:opacity .5s,background .5s,border-color .5s}
.rx-c li:nth-child(2)::before{--w:64%}.rx-c li:nth-child(3)::before{--w:74%}
.rx-ok{position:absolute;right:14px;top:14px;font-style:normal;font-family:var(--m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#0b0b0a;background:var(--verde);padding:3px 8px;border-radius:20px;opacity:0;transform:scale(.6);transition:all .5s cubic-bezier(.2,1.4,.3,1);transition-delay:calc(var(--i) * 90ms)}
/* ligação até a próxima camada */
.rx-liga{position:absolute;z-index:1;opacity:0;transition:opacity .5s;background-image:linear-gradient(90deg,var(--rx-f) 50%,transparent 0);background-size:8px 2px}
.rx-liga s{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde);opacity:0}
.rx-c:last-child .rx-liga{display:none}
/* celular: ligação vertical */
.rx-liga{left:50%;top:100%;width:2px;height:26px;background-image:linear-gradient(180deg,var(--rx-f) 50%,transparent 0);background-size:2px 8px}
.rx-liga s{left:-2.5px;top:0;animation:rx-desce 1.4s linear infinite}
.rx-liga s:nth-child(2){animation-delay:-.47s}.rx-liga s:nth-child(3){animation-delay:-.94s}
@keyframes rx-desce{from{top:-4px}to{top:26px}}
@media (min-width:600px){
  .rx-liga{left:100%;top:50%;width:26px;height:2px;background-image:linear-gradient(90deg,var(--rx-f) 50%,transparent 0);background-size:8px 2px}
  .rx-liga s{top:-2.5px;left:0;animation-name:rx-anda}
  .rx-c:nth-child(2n) .rx-liga{display:none}
}
@media (min-width:1000px){.rx-c:nth-child(2n) .rx-liga{display:block}.rx-c:nth-child(4n) .rx-liga{display:none}}
@keyframes rx-anda{from{left:-4px}to{left:26px}}

/* fase 1 · esqueleto */
:is(.raiox.f1 .rx-c,.rx-c.f1){opacity:1;transform:none;border-color:var(--rx-f);box-shadow:inset 0 0 26px rgba(181,204,24,.05)}
:is(.raiox.f1 .rx-c,.rx-c.f1) li::before{opacity:1}
:is(.raiox.f1 .rx-c,.rx-c.f1) .rx-liga{opacity:1}
/* fase 2 · estrutura */
:is(.raiox.f2 .rx-c,.rx-c.f2){border-style:solid;border-color:rgba(255,255,255,.12);background:linear-gradient(180deg,var(--grafite),#1f1f1d);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
:is(.raiox.f2 .rx-c,.rx-c.f2) .rx-t{color:#fff;-webkit-text-stroke-color:transparent}
:is(.raiox.f2 .rx-c,.rx-c.f2) li::before{border-color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.16),rgba(255,255,255,.07));background-size:200% 100%;animation:rx-brilho 1.4s linear infinite}
@keyframes rx-brilho{to{background-position:-200% 0}}
/* fase 3 · conexões */
:is(.raiox.f3 .rx-c,.rx-c.f3) li::before{opacity:0}
:is(.raiox.f3 .rx-c,.rx-c.f3) li span{opacity:1}
:is(.raiox.f3 .rx-c,.rx-c.f3) .rx-liga{background-image:linear-gradient(90deg,rgba(181,204,24,.6),rgba(181,204,24,.6))}
:is(.raiox.f3 .rx-c,.rx-c.f3) .rx-liga s{opacity:1}
:is(.raiox.f3 .rx-c,.rx-c.f3){border-color:rgba(255,255,255,.22)}
/* fase 4 · no ar */
:is(.raiox.f4 .rx-c,.rx-c.f4){border-color:rgba(181,204,24,.7);box-shadow:0 0 0 1px rgba(181,204,24,.25),0 0 30px -6px rgba(181,204,24,.35)}
:is(.raiox.f4 .rx-c,.rx-c.f4) .rx-ok{opacity:1;transform:none;animation:rx-pulso 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * 140ms)}
:is(.raiox.f4 .rx-c,.rx-c.f4) .rx-n{background:var(--verde);color:#0b0b0a;border-color:var(--verde)}
@keyframes rx-pulso{50%{box-shadow:0 0 0 5px rgba(181,204,24,.18)}}

.rx-status{position:relative;z-index:2;margin-top:22px;display:flex;align-items:center;gap:10px;font-family:var(--m);font-size:13px;letter-spacing:.06em;color:var(--rx)}
.rx-pt{width:9px;height:9px;border-radius:50%;background:var(--rx);box-shadow:0 0 12px var(--rx);animation:t-pisca 1.2s infinite}
.raiox.pronto .rx-status{color:var(--verde)}.raiox.pronto .rx-pt{background:var(--verde);box-shadow:0 0 12px var(--verde)}

/* computador: palco preso enquanto a rolagem conduz as fases */
@media (min-width:1000px) and (min-height:640px){
  .raiox.preso{height:300vh}
  .raiox.preso .rx-fixo{position:sticky;top:80px;min-height:calc(100vh - 80px);display:flex;align-items:center;padding-block:32px}
  .raiox.preso .rx-fixo > .c{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .rx-varre,.rx-liga s,.rx-pt{animation:none!important}
}