/* ============================================================
   ASTRON — SEÇÃO 6: MECANISMO · interação dos pilares

   INDEX atual:
     #pilar-esq -> ordem + headline
     #pilar-dir -> descrição

   Tipografia do painel = seção TIME.
   Apoio = mesmo reveal linha a linha de data-reveal="lines".
   ============================================================ */

.painel-pilar {
  position: fixed;
  z-index: 6;
  color: #16171b;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .20s ease, visibility 0s linear .55s;
}

/* Durante o closeup o canvas principal sobe acima do canvas de
   asteroides foreground (#campo-frente z4). O painel continua em z6. */
#stage.pilar-foco {
  z-index: 5;
}

#pilar-esq,
#pilar-dir {
  left: 55.5vw;
  right: auto;
  width: min(720px, 42vw);
  text-align: left;
  transition: opacity .20s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear .55s;
}

#pilar-esq {
  top: 46%;
  transform: translate3d(24px, -50%, 0);
}

/* O JS mede o bottom real da headline e põe o apoio 22px abaixo,
   igual ao margin-top da .time__lead. */
#pilar-dir {
  top: 58%;
  transform: translate3d(24px, 0, 0);
}

.painel-pilar.vivo,
.painel-pilar.saindo {
  visibility: visible;
  transition-delay: 0s;
}

#pilar-esq.vivo {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  pointer-events: auto;
}

#pilar-dir.vivo {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

#pilar-esq.saindo {
  opacity: 1;
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
}

#pilar-dir.saindo {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
}

.painel-pilar .pp-ord {
  display: inline-flex;
  align-items: center;
  width: fit-content;

  padding: 7px 12px 6px;
  margin: 0 0 14px;

  background: #8CFF00;
  color: #16171b;
  border-radius: 0;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;

  /* Estado-base blindado: quando .vivo/.saindo caem, a tarja não
     reaparece nem por um frame durante o fade do painel-pai. */
  opacity: 0;
  visibility: hidden;
}

/* Headline: mesma escala do Time, mas obrigatoriamente UMA LINHA. */
.painel-pilar .pp-tit {
  margin: 0;
  opacity: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  text-wrap: nowrap;
  color: #16171b;
}

.painel-pilar .pp-tit .pp-accent {
  color: #000000;
  /* exatamente o verde de "astronômicos" */
}

/* Apoio em tópicos: mesma tipografia do Time, preto e com hierarquia
   visual de entregáveis. O container não anima; cada item tem seu
   próprio stagger. */
.painel-pilar .pp-txt {
  margin: 0;
  opacity: 1;
  width: 100%;
  max-width: 620px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;

  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: #16171b;
}

.painel-pilar .pp-topic {
  --i: 0;
  --n: 1;

  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;

  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.painel-pilar .pp-topic__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #5FA800;
}

.painel-pilar .pp-topic__label {
  display: block;
  min-width: 0;
}

/* Ordem + headline */
.painel-pilar.vivo .pp-ord {
  visibility: visible;
  animation: astron-sobe-in .45s cubic-bezier(.22, 1, .36, 1) .08s both;
}

.painel-pilar.vivo .pp-tit {
  animation: astron-glitch-in .62s steps(1, end) .10s forwards;
}

/* Tópicos: mesmo idioma de reveal, mas cada entregável sobe como uma
   unidade. 90ms de stagger mantém a sequência ágil mesmo no Pilar 3. */
.painel-pilar.vivo .pp-topic {
  animation: pp-topic-in .55s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: calc(180ms + var(--i, 0) * 90ms);
}

@keyframes pp-topic-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

.painel-pilar.saindo .pp-tit {
  opacity: 1;
  animation: astron-glitch-out .42s steps(1, end) forwards;
}

.painel-pilar.saindo .pp-ord {
  opacity: 1;
  visibility: visible;
  animation: pp-ord-out .36s cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes pp-ord-out {
  0% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  99% {
    opacity: 0;
    visibility: visible;
    transform: translateY(.5em);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5em);
  }
}

/* Blindagem adicional contra recomposição entre a remoção de .saindo
   e o término do fade do painel pai. */
.painel-pilar:not(.vivo):not(.saindo) .pp-ord {
  opacity: 0;
  visibility: hidden;
}

.painel-pilar.saindo .pp-topic {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  animation: pp-topic-out .36s cubic-bezier(.4, 0, 1, 1) forwards;
  animation-delay: calc((var(--n, 1) - var(--i, 0) - 1) * 55ms);
}

@keyframes pp-topic-out {
  to {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    filter: blur(4px);
  }
}


/* ============================================================
   TOOLTIP DE HOVER DOS PILARES
   Mesmo idioma glass do menu: branco translúcido, blur, borda sutil
   e pill 100% arredondada. A posição segue o ponteiro via JS.
   ============================================================ */
.pilar-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 7px;
  border-radius: 999px;

  background: rgba(248, 247, 242, .78);
  border: 1px solid rgba(17, 17, 17, .10);
  color: #16171b;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .14);

  opacity: 0;
  visibility: hidden;
  filter: blur(5px);
  transform: scale(.92);
  transform-origin: 12px 50%;
  pointer-events: none;
  will-change: left, top, opacity, transform, filter;

  transition:
    opacity .18s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1),
    filter .24s ease,
    visibility 0s linear .26s;
}

.pilar-tooltip.vivo {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  transform: scale(1);
  transition-delay: 0s;
}

.pilar-tooltip__num {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #8CFF00;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pilar-tooltip__nome {
  white-space: nowrap;
  color: #16171b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .pilar-tooltip {
    background: rgba(248, 247, 242, .96)
  }
}


#pilar-dica {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 6;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7d7e84;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

#pilar-dica.vivo {
  opacity: 1
}

#pilar-dica b {
  color: #5FA800;
  font-weight: 600
}

@media (max-height:800px) {
  .painel-pilar .pp-tit {
    font-size: 50px
  }

  .painel-pilar .pp-txt {
    font-size: 18px
  }

  #pilar-esq {
    top: 45%
  }
}

@media (max-width:900px) {

  #pilar-esq,
  #pilar-dir {
    left: 53vw;
    width: 44vw;
  }
}

@media (max-width:768px) {

  #pilar-esq,
  #pilar-dir {
    left: 51vw;
    width: 47vw;
  }

  .painel-pilar .pp-tit {
    font-size: 36px
  }

  .painel-pilar .pp-txt {
    font-size: 16px;
    line-height: 1.4;
    max-width: 45vw;
    gap: 8px
  }

  .painel-pilar .pp-topic {
    gap: 9px
  }

  .painel-pilar .pp-topic__dot {
    width: 6px;
    height: 6px;
    flex-basis: 6px
  }

  .painel-pilar .pp-ord {
    margin-bottom: 10px
  }
}