/* ==========================================================================
   AVYSTA · home
   Animações e adaptações específicas da página principal.
   ========================================================================== */

/* -------------------------------------------------------------- animações */

@keyframes avyDot {
  0%   { offset-distance: 0%;   opacity: 0 }
  8%   { opacity: 1 }
  92%  { opacity: 1 }
  100% { offset-distance: 100%; opacity: 0 }
}

/* "Como funciona": barras que preenchem etapa a etapa, ciclo de 6s */
@keyframes avyS1 { 0% { transform: scaleX(0) } 8%,  100% { transform: scaleX(1) } }
@keyframes avyS2 { 0%, 10% { transform: scaleX(0) } 44%, 100% { transform: scaleX(1) } }
@keyframes avyS3 { 0%, 46% { transform: scaleX(0) } 52%, 100% { transform: scaleX(1) } }
@keyframes avyS4 { 0%, 54% { transform: scaleX(0) } 72%, 100% { transform: scaleX(1) } }
@keyframes avyS5 { 0%, 74% { transform: scaleX(0) } 88%, 100% { transform: scaleX(1) } }
@keyframes avyS6 { 0%, 90% { transform: scaleX(0) } 94%, 100% { transform: scaleX(1) } }

/* Agente AVYSTA percorrendo as seis etapas, sincronizado com as barras */
@keyframes avyMarker {
  0%   { transform: translateX(0);    opacity: 1 }
  8%   { transform: translateX(7%) }
  10%  { transform: translateX(100%) }
  44%  { transform: translateX(185%) }
  46%  { transform: translateX(200%) }
  52%  { transform: translateX(207%) }
  54%  { transform: translateX(300%) }
  72%  { transform: translateX(331%) }
  74%  { transform: translateX(400%) }
  88%  { transform: translateX(420%) }
  90%  { transform: translateX(500%) }
  94%  { transform: translateX(507%); opacity: 1 }
  97%  { transform: translateX(507%); opacity: 0 }
  100% { transform: translateX(507%); opacity: 0 }
}

@keyframes avyEyeA { 0%, 9% { opacity: 1 } 11%, 43% { opacity: 0 } 45%, 100% { opacity: 1 } }
@keyframes avyEyeB { 0%, 9% { opacity: 0 } 11%, 43% { opacity: 1 } 45%, 100% { opacity: 0 } }

/* Integração: giroscópio, feixes e núcleo */
@keyframes avyRing { 0% { transform: scale(1); opacity: .5 } 100% { transform: scale(1.9); opacity: 0 } }
@keyframes avyFloat {
  0%, 100% { transform: translateY(0) rotateY(28deg) rotateX(8deg) }
  50%      { transform: translateY(-12px) rotateY(22deg) rotateX(4deg) }
}
@keyframes avyGyroA { from { transform: rotateX(70deg) rotateZ(0) } to { transform: rotateX(70deg) rotateZ(360deg) } }
@keyframes avyGyroB { from { transform: rotateY(70deg) rotateX(20deg) rotateZ(0) } to { transform: rotateY(70deg) rotateX(20deg) rotateZ(-360deg) } }
@keyframes avyGyroC { from { transform: rotateX(30deg) rotateY(-40deg) rotateZ(0) } to { transform: rotateX(30deg) rotateY(-40deg) rotateZ(360deg) } }
@keyframes avyCore {
  0%, 100% { box-shadow: 0 0 24px rgba(244,154,74,.35), inset 0 0 20px rgba(244,154,74,.2) }
  50%      { box-shadow: 0 0 40px rgba(244,154,74,.55), inset 0 0 30px rgba(244,154,74,.3) }
}
@keyframes avyPanelRow { 0% { opacity: 0; transform: translateX(12px) } 100% { opacity: 1; transform: none } }
@keyframes avyDash { to { stroke-dashoffset: -40 } }

/* Camadas: torre wireframe */
@keyframes avyShaftPkt { 0% { transform: translateY(0); opacity: 0 } 10% { opacity: 1 } 90% { opacity: 1 } 100% { transform: translateY(300px); opacity: 0 } }
@keyframes avyBeacon { 0% { transform: scale(.4); opacity: .9 } 100% { transform: scale(2.2); opacity: 0 } }
@keyframes avyScanTxt { 0%, 100% { opacity: .35 } 50% { opacity: .9 } }

/* Implantação: cabo que conecta construtora e AVYSTA */
@keyframes avyCab {
  0%        { width: 0; opacity: 1 }
  38%, 90%  { width: calc(50% - 151px); opacity: 1 }
  100%      { width: calc(50% - 151px); opacity: 0 }
}
@keyframes avyLink {
  0%, 36%  { transform: translate(-50%, -50%) scale(.3); opacity: 0 }
  42%      { transform: translate(-50%, -50%) scale(1.25); opacity: 1 }
  48%, 90% { transform: translate(-50%, -50%) scale(1); opacity: 1 }
  100%     { transform: translate(-50%, -50%) scale(1); opacity: 0 }
}
@keyframes avyLinkRing {
  0%, 40%   { transform: translate(-50%, -50%) scale(.6); opacity: 0 }
  42%       { opacity: .8 }
  70%, 100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0 }
}
@keyframes avyPkt {
  0%, 44%   { left: 150px; opacity: 0 }
  48%       { opacity: 1 }
  86%       { left: calc(100% - 180px); opacity: 1 }
  90%, 100% { left: calc(100% - 180px); opacity: 0 }
}
@keyframes avyPktBack {
  0%, 50%   { left: calc(100% - 158px); opacity: 0 }
  54%       { opacity: 1 }
  88%       { left: 150px; opacity: 1 }
  92%, 100% { left: 150px; opacity: 0 }
}
@keyframes avyLbl {
  0%, 44%  { opacity: 0; transform: translate(-50%, 8px) scale(.94); filter: blur(3px) }
  49%      { opacity: 1; transform: translate(-50%, -1px) scale(1.02); filter: blur(0) }
  53%, 90% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0) }
  100%     { opacity: 0; transform: translate(-50%, 0) scale(1) }
}
@keyframes avyLblDot { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes avyFloat3 { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }

/* ------------------------------------------------------------------- FAQ */

.rfaq { min-height: 64px; }
.rfaq:hover > div:first-child { opacity: .75; }

/* Em coluna única, o bloco do título tem min-height de 420px (reservado para a
   marca d'água no desktop) e sobra um vazio enorme antes da 1ª pergunta.
   Zera a altura e esconde a marca decorativa. */
@media (max-width: 1100px) {
  #faq > div:first-child { min-height: 0 !important; }
  #faq > div:first-child > img { display: none !important; }
}

/* --------------------------------------------------- painel 360 (herói) */

@media (max-width: 1100px) {
  .rpanel { left: 0 !important; right: 0 !important; }
}

@media (max-width: 640px) {
  /* coluna de texto do herói: os dois CTAs ficam da mesma largura e o
     espaço morto antes do painel some */
  header#top > div:first-child { padding-bottom: 32px !important; }
  header#top > div:first-child > div:last-child { width: 100%; }
  header#top > div:first-child > div:last-child > a {
    width: 100% !important;
    justify-content: center;
    min-height: 52px;
  }

  header#top > div:last-of-type { min-height: 0 !important; }
  .rpanel { position: relative !important; top: 0 !important; height: 560px !important; }
  .rside { display: none !important; }
  .rkpi { grid-template-columns: 1fr 1fr !important; }
  .rkpi3 { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------- integração 3D (#erp) */

/* A cena tem 1312px de largura de projeto. js/home.js calcula o zoom exato
   para caber no container (fluido, sem breakpoint chutado) e só liga a
   rolagem horizontal quando nem a escala mínima legível cabe na tela. */
.rdiagw { overflow: hidden; }

.rdiagw.is-scrollable {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.rdiagw.is-scrollable::-webkit-scrollbar { display: none; }

.rdiagw.is-scrollable + .rdiaghint {
  display: block;
  margin-top: 16px;
  font: 500 10px 'Geist Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  text-align: center;
}

.rdiaghint { display: none; }

/* No celular a cena de 1312px viraria uma tira minúscula com rolagem lateral.
   Em vez disso mostramos um diagrama vertical limpo (ERP → AVYSTA → tempo real). */
.rerpm { display: none; }

@media (max-width: 760px) {
  .rdiagw, .rdiaghint { display: none !important; }
  .rerpm { display: block; max-width: 460px; margin: 6px auto 0; }
  .rerpm__step, .rerpm__core, .rerpm__panel {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
  }
  .rerpm__step { padding: 16px 18px; }
  .rerpm__lbl { font: 500 10px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
  .rerpm__erps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .rerpm__erps img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: rgba(20,20,26,.9); border: 1px solid rgba(255,255,255,.08); padding: 9px; box-sizing: border-box; }
  .rerpm__pipe { display: flex; align-items: center; justify-content: center; position: relative; height: 34px; }
  .rerpm__pipe::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(rgba(244,154,74,.6), rgba(244,154,74,.12)); }
  .rerpm__pipe span { position: relative; font: 500 9px 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #F49A4A; background: #0B0B0C; padding: 3px 9px; border: 1px solid rgba(244,154,74,.4); border-radius: 999px; }
  .rerpm__core { padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
  .rerpm__core img { width: 30px; height: auto; flex: none; }
  .rerpm__core > div { flex: 1; min-width: 0; }
  .rerpm__core b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
  .rerpm__core > div span { font-size: 12.5px; color: rgba(255,255,255,.5); }
  .rerpm__live { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 500 10px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #3ED37A; }
  .rerpm__live i { width: 7px; height: 7px; border-radius: 50%; background: #3ED37A; animation: avyBlink 1.6s ease-in-out infinite; }
  .rerpm__panel { padding: 14px 14px 16px; }
  .rerpm__panelhead { display: flex; justify-content: space-between; align-items: center; font: 500 10px 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: #F9C08A; margin-bottom: 10px; }
  .rerpm__on { color: #3ED37A; }
  .rerpm__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 8px; }
  .rerpm__row span { font-size: 14px; font-weight: 500; color: #fff; }
  .rerpm__row em { font: 500 10px 'Geist Mono', monospace; letter-spacing: .06em; color: rgba(255,255,255,.4); font-style: normal; white-space: nowrap; }
  .rerpm__row:first-of-type { background: rgba(244,154,74,.14); border-color: rgba(244,154,74,.5); }
  .rerpm__row:first-of-type em { color: #F9C08A; }
  .rerpm__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font: 500 10px 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #3ED37A; }
}

/* ------------------------------------------------- camadas (torre 3D) */

/* svh evita o salto causado pela barra de endereço no celular */
#camadas { height: calc(100svh + 280svh) !important; }
.rstick { height: 100svh !important; }

@media (max-width: 1100px) {
  .rlay {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }
  .rstick { height: auto !important; min-height: 100svh; }
  .rstage { height: clamp(240px, 34svh, 320px) !important; }
  .rscene { transform: translateY(0) scale(.5) rotateX(60deg) rotateZ(-38deg) !important; }
  .rtag { display: none !important; }
}

/* No celular, fim do scroll-jack: a torre 3D e o HUD saem e as oito camadas
   viram uma lista vertical legível (gerada em js/home.js a partir de STEPS). */
.rcammob { display: none; }

@media (max-width: 760px) {
  #camadas { height: auto !important; }
  .rstick {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: clamp(44px, 11vw, 72px);
  }
  .rlay { display: none !important; }
  .rcammob { display: block; max-width: 620px; margin: 8px auto 0; padding: 0 18px; }
}

/* ------------------------------------------------------ mobilidade (app) */

/* Abaixo da largura de projeto a foto passa a ser ancorada pela direita da
   própria coluna: no protótipo ela vazava para fora da tela. */
@media (max-width: 1439px) {
  .rmob img[alt="Engenheira com tablet no canteiro"] {
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 1100px) {
  .rmob { height: 640px !important; margin-top: 24px; }
  .rmob img[alt="Engenheira com tablet no canteiro"] {
    left: auto !important;
    right: 0 !important;
    height: 100% !important;
    max-height: none !important;
  }
  .rmob > div:nth-of-type(1) { bottom: 0 !important; width: 210px !important; }
  .rmob > div:nth-of-type(2) { right: 0 !important; bottom: 24px !important; }
}

@media (max-width: 640px) {
  .rmob { height: 480px !important; }
  .rmob > div:nth-of-type(1) { width: 160px !important; }
  .rmob > div:nth-of-type(2) { display: none !important; }
}

/* ----------------------------------------------------------- implantação */

@media (max-width: 900px) { .rplug { zoom: .72 } }
@media (max-width: 640px) { .rplug { zoom: .58 } .r7d { white-space: normal !important; } }
@media (max-width: 1100px) { .r7d { white-space: normal !important; } }

/* ------------------------------------------------------- quem está atrás */

@media (max-width: 640px) {
  .rteam { min-height: 0 !important; }
  .rteamimg {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-position: 50% 30% !important;
    display: block;
  }
  .rteamgrad { display: none !important; }
  .rteam .rg3 { gap: 20px !important; padding: 24px 22px 26px !important; }

  /* cartão da parceria SIECON: empilha em vez de espremer o título em
     quatro linhas ao lado do logo */
  #quem > .rg > div:last-child > div:last-child {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------- CTA */

@media (max-width: 1100px) {
  .rcta { min-height: 0 !important; }
  .rcta img[alt="Engenheiro AVYSTA"] { display: none; }
}

/* ----------------------------------------------------- tela de requisições
   Os cartões já se reorganizam sozinhos (auto-fit). Só a régua de status
   precisa rolar: são nove etapas e no produto ela também rola. */

.rtabs {
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.rtabs::-webkit-scrollbar { display: none; }
.rtabs > span { flex: none; }

/* ------------------------------------------- padrão de grades de células
   Estatísticas, passos e condições no desktop são células lado a lado, com
   régua vertical (border-right) e recuos assimétricos. No mobile isso deixa
   uma régua vertical solta e itens desalinhados. Aqui viram UMA lista
   vertical uniforme: sem borda vertical, tudo alinhado à esquerda, com
   divisória horizontal e o mesmo respiro entre itens. É o padrão único
   aplicado a todas as seções que usam .rcells. */
@media (max-width: 900px) {
  .rcells {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    flex-direction: column !important;
  }
  .rcells > * { border: 0 !important; padding: 24px 0 !important; }
  .rcells > * + * { border-top: 1px solid rgba(11, 11, 12, .12) !important; }
  .rcells > *:first-child { padding-top: 0 !important; }
  .rcells > *:last-child { padding-bottom: 0 !important; }
  /* recuos internos (ex.: descrição alinhada sob o título) não fazem sentido
     empilhado */
  .rcells > * [style*="padding-left:36px"] { padding-left: 0 !important; }
}

/* card do case: no mobile empilha texto e botão em vez de espremer lado a
   lado (o botão "Ver o case" invadia o título) */
@media (max-width: 760px) {
  .rcase { grid-template-columns: 1fr !important; }
  .rcase > div:last-child { justify-self: start; }
}