/* Site da Massai Tech · camada de movimento
   Referências: sites do ano no Awwwards (tipografia cinética, cursor próprio,
   rolagem horizontal fixa, texto que acende com a rolagem).
   Tudo aqui desliga com prefers-reduced-motion. Cores sempre em rgb(). */

/* ---------- Barra de progresso da leitura ---------- */
.progresso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--vermelho), var(--vermelho-vivo)); box-shadow: 0 0 18px rgba(251, 4, 12, .8); pointer-events: none; }

/* ---------- Grão de filme sobre a página ---------- */
.mov body::after {
  content: ""; position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grao 1.2s steps(6) infinite;
}
@keyframes grao { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); } }

/* ---------- Cursor próprio ---------- */
.com-cursor, .com-cursor a, .com-cursor button, .com-cursor summary, .com-cursor label { cursor: none; }
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; }
.cursor-ponto, .cursor-anel { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none; will-change: transform; }
.cursor-ponto { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--vermelho-vivo); }
.cursor-anel {
  width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 1.5px solid rgba(251, 4, 12, .7);
  display: grid; place-items: center; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  mix-blend-mode: normal;
}
.cursor-texto { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--branco); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.sobre .cursor-anel { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(251, 4, 12, .14); border-color: var(--vermelho-vivo); }
.cursor.rotulo-on .cursor-anel { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--vermelho-vivo); border-color: var(--vermelho-vivo); }
.cursor.rotulo-on .cursor-texto { opacity: 1; }
.cursor.rotulo-on .cursor-ponto { opacity: 0; }
.cursor.some .cursor-ponto, .cursor.some .cursor-anel { opacity: 0; }

/* ---------- Títulos que sobem palavra por palavra ---------- */
.pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pal > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 45ms); }
.partido.acende .pal > span { transform: none; }
.partido { opacity: 1 !important; }

/* ---------- Botão magnético ---------- */
.botao, .topo-menu-cta { translate: var(--mx, 0) var(--my, 0); transition: translate .5s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.magnetico { transition: translate .12s linear, transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }

/* ---------- Luz que segue o mouse nos cartões ---------- */
.tem-luz { position: relative; isolation: isolate; }
.luz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(251, 4, 12, .22), transparent 60%); }
.tem-luz:hover .luz { opacity: 1; }
.bloco-vermelho .luz { background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, .25), transparent 60%); }
.dados .luz { background: radial-gradient(380px circle at var(--lx, 50%) var(--ly, 50%), rgba(251, 4, 12, .1), transparent 60%); }

/* ---------- Intranet de exemplo: entra abrindo e inclina com o mouse ---------- */
.mov .app { transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease), clip-path 1.4s var(--ease), scale 1.4s var(--ease), box-shadow .6s; }
.mov .app.fechada { clip-path: inset(12% 10% 12% 10% round 40px); scale: .94; }
.mov .app.aberta { clip-path: inset(0 0 0 0 round 22px); scale: 1; }

/* ---------- Avisos ao vivo na abertura ---------- */
.pauta { position: relative; }
.aviso-vivo {
  position: absolute; left: -2.2rem; bottom: -1.6rem; z-index: 3; display: flex; align-items: center; gap: .7rem;
  max-width: 300px; padding: .75rem 1rem .75rem .8rem; border-radius: 14px; background: rgba(20, 14, 15, .92); border: 1px solid rgba(251, 4, 12, .45);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04); backdrop-filter: blur(10px);
  font-size: .8rem; line-height: 1.35; color: var(--gelo);
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.aviso-vivo.mostra { opacity: 1; transform: none; }
.aviso-vivo b { color: var(--branco); font-weight: 600; }
.aviso-vivo small { display: block; margin-top: .15rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.aviso-icone { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--vermelho-vivo); color: var(--branco); font-size: .8rem; font-weight: 700; }

/* ---------- Faixa cinética ---------- */
.faixa-kin { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--preto); border-block: 1px solid var(--linha); }
.faixa-linha { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); width: max-content; will-change: transform; }
.faixa-linha + .faixa-linha { margin-top: .6rem; }
.faixa-linha span { font-size: clamp(3.4rem, 11vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--branco); white-space: nowrap; }
.faixa-linha.contorno span { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .32); }
.faixa-linha.contorno span:nth-of-type(3n+2) { color: var(--vermelho-vivo); -webkit-text-stroke: 0; }
.faixa-linha img { width: clamp(2.2rem, 6vw, 5rem); height: auto; flex: none; animation: gira 9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Manifesto: o texto acende com a rolagem ---------- */
.manifesto { position: relative; background: var(--preto); height: 220vh; }
.manifesto-palco { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; }
.manifesto-palco::before { content: ""; position: absolute; width: 60vw; height: 60vw; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(251, 4, 12, .16), transparent 62%); scale: var(--brilho, .4); pointer-events: none; }
.manifesto-rotulo { position: relative; margin-bottom: 1.6rem; }
.manifesto-texto { position: relative; font-size: clamp(2rem, 5.2vw, 4.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; max-width: 20ch; color: var(--branco); }
.manifesto-texto .m { opacity: .12; transition: opacity .25s linear, color .25s linear; }
.manifesto-texto .m.on { opacity: 1; }
.manifesto-texto em .m.on { color: var(--vermelho-vivo); }
.manifesto-texto em { font-style: normal; }

/* ---------- Gestão: as 6 entregas rolam na horizontal ---------- */
.horiz .horiz-trilho { position: relative; }
.horiz .horiz-palco { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding-top: 74px; width: 100vw; margin-left: calc(50% - 50vw); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.horiz .horiz-palco .secao-topo { margin-bottom: clamp(1.6rem, 3.4vh, 2.8rem); grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: 3rem; }
.horiz .horiz-palco .secao-topo .rotulo { grid-column: 1 / -1; }
.horiz .horiz-palco .secao-topo .titulo { max-width: 16ch; }
.horiz .entregas { display: flex; width: max-content; gap: 1.2rem; will-change: transform; }
.horiz .entrega { width: clamp(300px, 27vw, 390px); min-height: clamp(260px, 36vh, 340px); padding: 2rem; align-content: space-between; grid-template-rows: auto 1fr auto; overflow: hidden; }
.horiz .entrega-num { font-family: "Poppins", sans-serif; font-size: clamp(4.5rem, 8vw, 7rem); font-weight: 800; line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(251, 4, 12, .75); transition: color .4s var(--ease); }
.horiz .entrega:hover .entrega-num, .horiz .entrega.foco .entrega-num { color: var(--vermelho-vivo); }
.horiz .entrega.foco { border-color: rgba(251, 4, 12, .5); background: linear-gradient(160deg, rgba(251, 4, 12, .12), var(--preto-2) 55%); }
.horiz .entrega h3 { font-size: 1.45rem; align-self: end; }
.horiz-rodape { display: none; }
.horiz .horiz-rodape { display: flex; align-items: center; gap: 1.2rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.horiz-barra { flex: 1; height: 2px; background: var(--linha); border-radius: 2px; overflow: hidden; }
.horiz-barra span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--vermelho-vivo); }
.horiz-contador b { color: var(--branco); font-weight: 600; }
.horiz .gestao-acoes { position: relative; z-index: 2; margin-top: clamp(3rem, 9vh, 6rem); padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--linha); }

/* ---------- Rodapé: a assinatura gigante ---------- */
.rodape-gigante { overflow: hidden; margin: 0 0 1rem; padding: .14em clamp(1rem, 2vw, 2rem); font-size: clamp(2.6rem, 14.5vw, 16rem); font-weight: 800; line-height: .9; letter-spacing: -.055em; white-space: nowrap; text-align: center; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); user-select: none; }
.rodape-gigante .l { display: inline-block; transform: translateY(100%); transition: transform 1s var(--ease), color .35s, -webkit-text-stroke-color .35s; transition-delay: calc(var(--i, 0) * 40ms), 0s, 0s; }
.rodape-gigante.acende .l { transform: none; }
.rodape-gigante .l:hover, .rodape-gigante .l.vivo { color: var(--vermelho-vivo); -webkit-text-stroke-color: var(--vermelho-vivo); }
.rodape-gigante .ponto { color: var(--vermelho-vivo); -webkit-text-stroke: 0; }

@media (max-width: 980px) {
  .aviso-vivo { left: .6rem; bottom: -1.4rem; }
  .manifesto { height: 180vh; }
}
@media (max-width: 640px) {
  .aviso-vivo { left: .4rem; right: .4rem; max-width: none; }
  .faixa-linha span { font-size: clamp(2.8rem, 16vw, 4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .mov body::after { animation: none; }
  .pal > span, .rodape-gigante .l { transform: none; transition: none; }
  .mov .app, .mov .app.fechada { clip-path: none; scale: 1; transform: none; }
  .faixa-linha img { animation: none; }
  .manifesto { height: auto; }
  .manifesto-palco { position: relative; height: auto; padding: 6rem 0; }
  .manifesto-texto .m { opacity: 1; }
}