/*
 * Rottads · camada 3D com movimento da landing page (02/10/2026).
 * Somente apresentação: não altera texto, links, formulários, ids nem scripts.
 * Para desfazer: tirar o <link> deste arquivo do index.html.
 */

/* ---------- hero: diagrama em 3D ---------- */
.tracking-flow {
  transform-style: preserve-3d;
  transform: perspective(1500px) rotateX(10deg) rotateY(-13deg);
  animation: l3-sway 11s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes l3-sway {
  from { transform: perspective(1500px) rotateX(12deg) rotateY(-17deg); }
  to   { transform: perspective(1500px) rotateX(7deg)  rotateY(-3deg); }
}
.tracking-flow > * { transform-style: preserve-3d; }
.tracking-flow > svg { transform: translateZ(14px); }
.flow-orbit { transform: translateZ(60px) rotateX(74deg); animation: l3-orbit 18s linear infinite; }
@keyframes l3-orbit {
  from { transform: translateZ(60px) rotateX(74deg) rotateZ(0deg); }
  to   { transform: translateZ(60px) rotateX(74deg) rotateZ(360deg); }
}
.tracking-flow .platform-node {
  transform: translateZ(46px);
  animation: l3-bob 5.6s ease-in-out infinite;
  box-shadow: 0 28px 40px -26px rgba(1, 55, 53, .55);
  transition: box-shadow .3s ease;
}
.tracking-flow .platform-node:nth-child(2n) { transform: translateZ(84px); animation-delay: -1.4s; }
.tracking-flow .platform-node:nth-child(3n) { animation-delay: -2.8s; }
.tracking-flow .flow-out .platform-node { transform: translateZ(70px); }
.tracking-flow .flow-out .platform-node:nth-child(2n) { transform: translateZ(36px); animation-delay: -2.1s; }
@keyframes l3-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -11px; } }
.flow-center { transform-style: preserve-3d; }
.flow-hub {
  transform: translateZ(150px);
  animation: l3-hub 12s ease-in-out infinite alternate, l3-glow 3.4s ease-in-out infinite;
}
@keyframes l3-hub { from { rotate: y -13deg; } to { rotate: y 13deg; } }
@keyframes l3-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2, 248, 167, 0), 0 30px 60px -22px rgba(2, 168, 104, .5); }
  50%      { box-shadow: 0 0 0 14px rgba(2, 248, 167, .13), 0 40px 80px -22px rgba(2, 168, 104, .75); }
}
.flow-label { transform: translateZ(110px); animation: l3-bob 6s ease-in-out infinite; animation-delay: -.8s; }

/* ---------- laptop/painel do hero e seções ---------- */
.product-visual { perspective: 1800px; }
.product-visual .laptop {
  transform-style: preserve-3d;
  transform: rotateX(14deg) rotateY(-20deg) rotateZ(2deg);
  animation: l3-laptop 13s ease-in-out infinite alternate;
}
@keyframes l3-laptop {
  from { transform: rotateX(16deg) rotateY(-25deg) rotateZ(2.5deg); }
  to   { transform: rotateX(9deg)  rotateY(-12deg) rotateZ(.5deg); }
}
.data-visual { perspective: 1600px; }
.data-visual .chart-card, .data-visual .mini-card, .data-visual .floating-note { transform-style: preserve-3d; }
.data-visual .chart-card { transform: rotateX(8deg) rotateY(14deg); animation: l3-card 10s ease-in-out infinite alternate; }
@keyframes l3-card { from { transform: rotateX(10deg) rotateY(18deg); } to { transform: rotateX(5deg) rotateY(8deg); } }
.data-visual .floating-note, .data-visual .mini-card { animation: l3-bob 6.4s ease-in-out infinite; box-shadow: 0 30px 44px -28px rgba(1, 55, 53, .5); }
.attribution-visual { perspective: 1600px; }
.attribution-board { transform: rotateX(8deg) rotateY(-12deg); animation: l3-card 12s ease-in-out infinite alternate; transform-style: preserve-3d; }
.journey-card { animation: l3-bob 6.8s ease-in-out infinite; animation-delay: -2s; }

/* ---------- interações 3D ---------- */
.plan, .result-highlight, .usecase-cards > *, .footer-platforms > *, .faq details {
  transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s ease;
}
.plan:hover, .result-highlight:hover, .usecase-cards > *:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-8px);
  box-shadow: 0 40px 60px -32px rgba(1, 55, 53, .5);
}
.btn-large, .btn { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-large:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.05); }
.btn-large:active { transform: scale(.98); }

/* ---------- entrada ---------- */
@keyframes l3-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: l3-up .8s cubic-bezier(.2, .75, .2, 1) backwards; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-copy > *:nth-child(5) { animation-delay: .32s; }
@keyframes l3-reveal { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .section-copy, .product-visual, .data-visual, .attribution-visual, .plans .plan, .results-metrics, .usecase-cards, .faq details, .contact-form {
    animation: l3-reveal linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 26%;
  }
}

/* quem pediu menos movimento: mantém a composição 3D parada, sem animar nada */
@media (prefers-reduced-motion: reduce) {
  .tracking-flow, .flow-orbit, .tracking-flow .platform-node, .flow-hub, .flow-label,
  .product-visual .laptop, .data-visual .chart-card, .data-visual .floating-note, .data-visual .mini-card,
  .attribution-board, .journey-card, .hero-copy > * { animation: none !important; }
  .section-copy, .product-visual, .data-visual, .attribution-visual, .plans .plan, .results-metrics, .usecase-cards, .faq details, .contact-form { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* telas pequenas: 3D mais leve para não cortar nem pesar */
@media (max-width: 900px) {
  .tracking-flow { transform: perspective(1200px) rotateX(6deg) rotateY(-6deg); animation: none; }
  .tracking-flow .platform-node, .tracking-flow .flow-out .platform-node { transform: translateZ(20px); animation: none; }
  .flow-hub { transform: translateZ(60px); animation: l3-glow 3.4s ease-in-out infinite; }
  .flow-label { transform: translateZ(40px); animation: none; }
  .product-visual .laptop { transform: rotateX(6deg) rotateY(-8deg); animation: none; }
  .data-visual .chart-card, .attribution-board { transform: none; animation: none; }
}

/* ---------- hero em VÍDEO (animação 3D renderizada) ----------
   O vídeo ocupa o lugar do diagrama; o diagrama continua no HTML (acessibilidade) mas fica oculto. */
.tracking-flow {
  height: auto !important; aspect-ratio: 16 / 9; display: block !important; position: relative;
  border-radius: 30px; overflow: hidden; background: #013735 url("hero-3d.jpg?v=2") center / cover no-repeat;
  transform: perspective(1500px) rotateY(-5deg) rotateX(2deg); animation: l3-card-sway 12s ease-in-out infinite alternate;
  box-shadow: 0 60px 90px -40px rgba(1, 55, 53, .75), 0 0 0 1px rgba(2, 168, 104, .25), 0 0 80px -10px rgba(2, 248, 167, .35);
}
@keyframes l3-card-sway {
  from { transform: perspective(1500px) rotateY(-7deg) rotateX(3deg); }
  to   { transform: perspective(1500px) rotateY(-1deg) rotateX(1deg); }
}
.tracking-flow > :not(.hero-reel) { display: none !important; }
.hero-reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .tracking-flow { transform: none; animation: none; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .hero-reel { display: none; } .tracking-flow { animation: none !important; } }

/* ---------- "Painel completo" em VÍDEO (animação 3D do painel) ---------- */
.product-visual { position: relative; }
.panel-reel {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 30px; background: #013735;
  box-shadow: 0 60px 90px -40px rgba(1, 55, 53, .75), 0 0 0 1px rgba(2, 168, 104, .25), 0 0 80px -10px rgba(2, 248, 167, .35);
  transform: perspective(1500px) rotateY(4deg) rotateX(1deg); animation: l3-card-sway2 12s ease-in-out infinite alternate;
}
@keyframes l3-card-sway2 {
  from { transform: perspective(1500px) rotateY(6deg) rotateX(2deg); }
  to   { transform: perspective(1500px) rotateY(1deg) rotateX(0deg); }
}
.product-visual > .laptop { display: none !important; }
@media (max-width: 900px) { .panel-reel { transform: none; animation: none; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .panel-reel { animation: none !important; } }

/* link discreto no lugar de botões grandes repetidos (menos insistência, mesmo caminho: planos) */
.link-suave { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: #0b7a57; text-decoration: none; padding: 10px 2px; border-bottom: 2px solid rgba(11, 122, 87, .3); transition: border-color .2s ease, gap .2s ease; align-self: flex-start; }
.link-suave:hover { border-color: #0b7a57; gap: 12px; }
.link-suave:focus-visible { outline: 3px solid #02a868; outline-offset: 3px; border-radius: 6px; }

/* Seção "Fale com a gente" (formulário de contato) removida da página a pedido: fica só escondida,
   para o script da página continuar achando os elementos sem erro. Para trazer de volta, apague esta regra. */
#contato { display: none !important; }