/* Animações do site. Linguagem baseada em nexunio.com e nexunio.health, aplicada ao vidro e ao metal da RJM. */
:root{--saida:cubic-bezier(.22,1,.36,1)}

/* 1. Topo entra saindo do desfoque, como uma lente focando */
@keyframes foco{
  from{opacity:0;filter:blur(14px);transform:translateY(18px)}
  to{opacity:1;filter:blur(0);transform:none}
}
.plaque,.hero-side{animation:none}
.plaque,.hero h1,.mascote{animation:foco 1s var(--saida) both}
.hero h1{animation-delay:.18s}
.mascote{animation-delay:.34s}

/* 2. Faixa de serviços correndo devagar */
@keyframes corre{to{transform:translateX(-50%)}}
.faixa{overflow:hidden;background:var(--navy);color:#fff;padding-block:13px}
.faixa ul{
  display:flex;width:max-content;gap:0;list-style:none;margin:0;padding:0;
  animation:corre 42s linear infinite;
}
.faixa li{
  font-family:var(--cond);font-weight:500;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;padding-inline:26px;position:relative;
}
.faixa li::after{
  content:"";position:absolute;right:-2px;top:50%;width:5px;height:5px;margin-top:-2px;background:rgba(255,255,255,.45);transform:rotate(45deg);
}

/* 3. Blocos sobem e aparecem ao rolar a página */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--saida),transform .8s var(--saida);transition-delay:var(--d,0ms)}
.rv.ok{opacity:1;transform:none}

/* 4. Frase principal acende palavra por palavra conforme a rolagem */
.acende .w{opacity:.2;transition:opacity .25s linear}
.acende .w.on{opacity:1}

@media(prefers-reduced-motion:reduce){
  .plaque,.hero h1,.mascote,.faixa ul{animation:none}
  .paineis a,.paineis img{transition:none}
  .rv{opacity:1;transform:none;transition:none}
  .acende .w{opacity:1}
  .obra img{transition:none}
}