/* COMPROVALOG — Animações do processo (Logística e Condomínios).
   Ilustrações em SVG/HTML, sem vídeo. Ciclo de 14s; pausa fora da tela;
   reinicia ao clicar em "Para Logística" / "Para Condomínios".
   Sem animação (prefers-reduced-motion) mostra o quadro final. */
.scene {
  margin: 0 0 clamp(36px, 5vw, 56px);
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 28px;
  background: #fff;
  border: 1px solid #dfe8f5;
  box-shadow: 0 10px 30px rgba(8, 27, 58, .06);
  font-size: clamp(11px, 1.02vw, 14px);
}
.scene-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 16em; gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.scene-art { display: block; width: 100%; height: auto; border-radius: 22px; }
.scene-side { position: relative; display: flex; flex-direction: column; gap: .6em; }

/* Servidor + pacotes de dados */
.scene-cloud {
  display: flex; align-items: center; gap: .7em;
  padding: .7em .85em; border-radius: 1.1em;
  background: #f4f8ff; border: 1px solid #d6e4f8;
  transition: none;
}
.scene-cloud-icon { flex: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: .8em; background: #0066ff; color: #fff; }
.scene-cloud-icon svg { width: 1.4em; height: 1.4em; }
.scene-cloud strong { display: block; font-size: .92em; font-weight: 800; color: #0a1b3d; line-height: 1.2; }
.scene-cloud small { display: block; font-size: .78em; font-weight: 700; margin-top: .15em; }
.scene-cloud > span:last-child { display: grid; grid-template-areas: "t" "s"; }
.scene-cloud strong { grid-area: t; }
.scene-cloud small { grid-area: s; }
.scene-cloud-wait { color: #7c8798; opacity: 0; }
.scene-cloud-done { color: #15803d; }
.scene-packets { position: relative; height: 2.4em; margin: -.3em 0; }
.scene-packets i { position: absolute; left: 50%; bottom: 0; width: .7em; height: .7em; margin-left: -.35em; border-radius: 50%; background: #0066ff; box-shadow: 0 0 0 .25em rgba(0,102,255,.16); opacity: 0; }
.scene-packets i:nth-child(1) { margin-left: -1.6em; }
.scene-packets i:nth-child(3) { margin-left: .9em; }

/* Celular */
.scene-phone {
  position: relative; flex: 1; min-height: 19em;
  padding: .55em; border-radius: 2em;
  background: linear-gradient(145deg, #2a2f38, #0b0d12);
  box-shadow: 0 14px 30px rgba(8, 27, 58, .18);
}
.scene-phone-top {
  position: absolute; z-index: 2; left: 1.3em; right: 1.3em; top: 1em;
  display: flex; justify-content: space-between; align-items: center;
  font-size: .7em; font-weight: 800; color: #0a1b3d;
}
.scene-phone-island { width: 4.6em; height: 1.3em; border-radius: 999px; background: #0b0d12; }
.scene-screen {
  position: absolute; inset: .55em; padding: 3em 1em 1em;
  border-radius: 1.55em; background: linear-gradient(180deg, #f8fbff, #eef4fd);
  display: flex; flex-direction: column; gap: .55em;
  opacity: 0;
}
.scene-screen strong { font-size: 1em; font-weight: 800; color: #0a1b3d; line-height: 1.25; }
.scene-screen small { font-size: .8em; color: #5b6577; line-height: 1.35; }
.scene-chip { align-self: flex-start; padding: .3em .75em; border-radius: 999px; font-size: .74em; font-weight: 800; }
.scene-chip--blue { background: #e6f0ff; color: #0057db; }
.scene-chip--green { background: #dcfce7; color: #15803d; }
.scene-bar { height: .5em; border-radius: 999px; background: #dde7f5; overflow: hidden; }
.scene-bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: #0066ff; }
.scene-meta { font-weight: 700; color: #0057db !important; }
.scene-photo {
  position: relative; overflow: hidden; flex: 1; min-height: 7em;
  display: grid; place-items: center; align-content: center; gap: .3em;
  border-radius: 1em; background: linear-gradient(160deg, #dbe8fb, #c3d6f3); color: #0a3d91;
}
.scene-photo svg { width: 2.4em; height: 2.4em; }
.scene-photo small { color: #0a3d91; font-weight: 700; }
.scene-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.scene-sign { flex: 1; min-height: 6.5em; display: grid; place-items: center; padding: .6em; border-radius: 1em; background: #fff; border: 1px dashed #b9cbe6; }
.scene-sign svg { width: 100%; height: auto; }
.scene-sign-path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.scene-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.scene-checks li { display: flex; align-items: center; gap: .55em; padding: .5em .7em; border-radius: .8em; background: #fff; font-size: .86em; font-weight: 700; color: #0a1b3d; }
.scene-checks li::before { content: "✓"; display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: .85em; font-weight: 900; }
.scene-sync { font-weight: 700; color: #0057db !important; }
.sc-d { opacity: 1; }

/* Etapas */
.scene-caption { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.scene-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1; }
.scene-steps li {
  display: flex; align-items: center; gap: .55em;
  padding: .55em .8em; border-radius: 999px;
  background: #f3f6fb; color: #5b6577; font-size: .9em; font-weight: 700;
  border: 1px solid transparent;
}
.scene-steps li span { flex: none; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #dfe7f3; color: #0a1b3d; font-size: .82em; font-weight: 800; }
.scene-steps li.is-on, .scene:not(.is-playing) .scene-steps li { background: #eaf2ff; color: #0057db; border-color: #c7dcfb; }
.scene-steps li.is-on span, .scene:not(.is-playing) .scene-steps li span { background: #0066ff; color: #fff; }
.scene-replay {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid #c7dcfb; background: #fff; color: #0057db;
  font: inherit; font-size: .86rem; font-weight: 750; cursor: pointer;
}
.scene-replay::before { content: "↻"; font-size: 1.05em; }
.scene-replay:hover { background: #f0f6ff; }
.scene-replay:focus-visible { outline: 3px solid #81b2ff; outline-offset: 3px; }

/* Estado final (sem animação / antes de tocar) */
.sl-map { opacity: 0; }
.sl-door { opacity: 1; }
.sl-car { transform: translate(600px, 110px); }
.sl-route, .sl-route-bg { stroke-dasharray: 100; stroke-dashoffset: 0; }
.sl-driver { transform: translate(540px, 300px); }
.sl-box-carry { opacity: 0; }
.sl-dest-ring { opacity: 0; }
.sl-gpstag, .sl-recip, .sl-box-recv, .sl-ok { opacity: 1; }
.sl-ok { transform-box: fill-box; transform-origin: center; }

/* Etapas ativas durante a animação (classe controlada pela própria linha do tempo) */
.scene.is-playing .scene-steps li { animation-duration: 14s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: both; }

@media (max-width: 860px) {
  .scene-stage { grid-template-columns: 1fr; }
  .scene-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5em; }
  .scene-packets { display: none; }
  .scene-phone { min-height: 0; height: 12em; border-radius: 1.4em; padding: .4em; }
  .scene-phone-top { display: none; }
  .scene-screen { inset: .4em; padding: 1em; border-radius: 1.1em; }
  .scene-photo, .scene-sign { min-height: 0; }
  .scene { font-size: 12.5px; }
}
@media (max-width: 640px) {
  .scene { border-radius: 22px; padding: 10px; }
  .scene-art { border-radius: 16px; }
  .scene-caption { flex-direction: column; align-items: stretch; }
  .scene-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-steps li { font-size: .82em; padding: .5em .65em; }
  .scene-replay { align-self: center; }
}

@keyframes sl-map { 0% { opacity:0 } 2% { opacity:1 } 36% { opacity:1 } 39% { opacity:0 } 100% { opacity:0 } }
.scene.is-playing .sl-map { animation: sl-map 14s linear infinite both; }
@keyframes sl-door { 0% { opacity:0 } 36% { opacity:0 } 39% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sl-door { animation: sl-door 14s linear infinite both; }
@keyframes sl-route { 0% { stroke-dashoffset:100 } 3% { stroke-dashoffset:100 } 30% { stroke-dashoffset:0 } 100% { stroke-dashoffset:0 } }
.scene--log.is-playing .sl-route { animation: sl-route 14s linear infinite both; }
.scene--log.is-playing .sl-route-bg { animation: sl-route 14s linear infinite both; }
@keyframes sl-car { 0% { transform:translate(70px,300px) } 3% { transform:translate(70px,300px) } 10.1% { transform:translate(260px,300px) } 15% { transform:translate(260px,170px) } 22.9% { transform:translate(470px,170px) } 25.1% { transform:translate(470px,110px) } 30% { transform:translate(600px,110px) } 100% { transform:translate(600px,110px) } }
.scene.is-playing .sl-car { animation: sl-car 14s linear infinite both; }
@keyframes sl-pulse { 0% { transform:scale(.7);opacity:.5 } 50% { transform:scale(1.25);opacity:.1 } 100% { transform:scale(.7);opacity:.5 } }
.scene--log.is-playing .sl-car-pulse { transform-box: fill-box; transform-origin: center; animation: sl-pulse 1.4s ease-in-out infinite; }
@keyframes sl-ring { 0% { opacity:0;transform:scale(.6) } 30% { opacity:0;transform:scale(.6) } 31% { opacity:1;transform:scale(.7) } 36% { opacity:0;transform:scale(2.2) } 100% { opacity:0 } }
.sl-dest-ring { transform-box: fill-box; transform-origin: center; }
.scene.is-playing .sl-dest-ring { animation: sl-ring 14s ease-out infinite both; }
@keyframes sl-gpstag { 0% { opacity:0;transform:translate(565px,72px) } 39% { opacity:0;transform:translate(565px,72px) } 42% { opacity:1;transform:translate(565px,62px) } 97% { opacity:1;transform:translate(565px,62px) } 100% { opacity:0;transform:translate(565px,62px) } }
.sl-gpstag { transform: translate(565px,62px); }
.scene.is-playing .sl-gpstag { animation: sl-gpstag 14s linear infinite both; }
@keyframes sl-driver { 0% { transform:translate(270px,300px);opacity:0 } 39% { transform:translate(270px,300px);opacity:0 } 41% { transform:translate(270px,300px);opacity:1 } 52% { transform:translate(540px,300px);opacity:1 } 97% { transform:translate(540px,300px);opacity:1 } 100% { transform:translate(540px,300px);opacity:0 } }
.scene.is-playing .sl-driver { animation: sl-driver 14s linear infinite both; }
@keyframes sl-walk { 0% { transform:translateY(0) } 41% { transform:translateY(0) } 42.4% { transform:translateY(-4px) } 43.8% { transform:translateY(0px) } 45.2% { transform:translateY(-4px) } 46.6% { transform:translateY(0px) } 48% { transform:translateY(-4px) } 49.4% { transform:translateY(0px) } 50.8% { transform:translateY(-4px) } 52% { transform:translateY(0px) } 100% { transform:translateY(0) } }
.scene.is-playing .sl-walk { animation: sl-walk 14s linear infinite both; }
@keyframes sl-lega { 0% { transform:rotate(0) } 41% { transform:rotate(0) } 42.4% { transform:rotate(14deg) } 43.8% { transform:rotate(-14deg) } 45.2% { transform:rotate(14deg) } 46.6% { transform:rotate(-14deg) } 48% { transform:rotate(14deg) } 49.4% { transform:rotate(-14deg) } 50.8% { transform:rotate(14deg) } 52% { transform:rotate(0) } 100% { transform:rotate(0) } }
@keyframes sl-legb { 0% { transform:rotate(0) } 41% { transform:rotate(0) } 42.4% { transform:rotate(-14deg) } 43.8% { transform:rotate(14deg) } 45.2% { transform:rotate(-14deg) } 46.6% { transform:rotate(14deg) } 48% { transform:rotate(-14deg) } 49.4% { transform:rotate(14deg) } 50.8% { transform:rotate(-14deg) } 52% { transform:rotate(0) } 100% { transform:rotate(0) } }
.sl-leg-a, .sl-leg-b { transform-box: fill-box; transform-origin: 50% 0; }
.scene.is-playing .sl-leg-a { animation: sl-lega 14s linear infinite both; }
.scene.is-playing .sl-leg-b { animation: sl-legb 14s linear infinite both; }
@keyframes sl-carry { 0% { opacity:1 } 70% { opacity:1 } 71% { opacity:0 } 100% { opacity:0 } }
.scene.is-playing .sl-box-carry { animation: sl-carry 14s linear infinite both; }
@keyframes sl-recv { 0% { opacity:0 } 70% { opacity:0 } 71% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sl-box-recv { animation: sl-recv 14s linear infinite both; }
@keyframes sl-recip { 0% { opacity:0 } 43% { opacity:0 } 46% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sl-recip { animation: sl-recip 14s linear infinite both; }
@keyframes sl-ok { 0% { opacity:0;transform:translate(565px,165px) scale(0) } 74% { opacity:0;transform:translate(565px,165px) scale(0) } 76% { opacity:1;transform:translate(565px,165px) scale(1.15) } 78% { opacity:1;transform:translate(565px,165px) scale(1) } 97% { opacity:1;transform:translate(565px,165px) scale(1) } 100% { opacity:0;transform:translate(565px,165px) scale(1) } }
.scene--log .sl-ok { transform-box: view-box; transform-origin: 0 0; transform: translate(565px,165px); }
.scene.is-playing .sl-ok { animation: sl-ok 14s ease-out infinite both; }
@keyframes sc-a { 0% { opacity:0 } 2% { opacity:1 } 36% { opacity:1 } 38% { opacity:0 } 100% { opacity:0 } }
@keyframes sc-b { 0% { opacity:0 } 36% { opacity:0 } 38% { opacity:1 } 54% { opacity:1 } 56% { opacity:0 } 100% { opacity:0 } }
@keyframes sc-c { 0% { opacity:0 } 54% { opacity:0 } 56% { opacity:1 } 74% { opacity:1 } 76% { opacity:0 } 100% { opacity:0 } }
@keyframes sc-d { 0% { opacity:0 } 74% { opacity:0 } 76% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sc-a { animation: sc-a 14s linear infinite both; }
.scene.is-playing .sc-b { animation: sc-b 14s linear infinite both; }
.scene.is-playing .sc-c { animation: sc-c 14s linear infinite both; }
.scene.is-playing .sc-d { animation: sc-d 14s linear infinite both; }
@keyframes sl-progress { 0% { width:0% } 3% { width:0% } 30% { width:100% } 100% { width:100% } }
.scene--log.is-playing .sl-progress { animation: sl-progress 14s linear infinite both; }
@keyframes sc-flash { 0% { opacity:0 } 46% { opacity:0 } 46.6% { opacity:.95 } 48.5% { opacity:0 } 100% { opacity:0 } }
.scene--log.is-playing .scene-flash { animation: sc-flash 14s ease-out infinite both; }
@keyframes sc-sign { 0% { stroke-dashoffset:100 } 56% { stroke-dashoffset:100 } 70% { stroke-dashoffset:0 } 100% { stroke-dashoffset:0 } }
.scene--log.is-playing .scene-sign-path { animation: sc-sign 14s ease-in-out infinite both; }
@keyframes sc-pk0 { 0% { opacity:0;transform:translateY(0) } 78% { opacity:0;transform:translateY(0) } 79% { opacity:1;transform:translateY(0) } 85% { opacity:1;transform:translateY(-2.1em) } 86% { opacity:0;transform:translateY(-2.4em) } 100% { opacity:0 } }
.scene--log.is-playing .scene-packets i:nth-child(1) { animation: sc-pk0 14s linear infinite both; }
@keyframes sc-pk1 { 0% { opacity:0;transform:translateY(0) } 80% { opacity:0;transform:translateY(0) } 81% { opacity:1;transform:translateY(0) } 87% { opacity:1;transform:translateY(-2.1em) } 88% { opacity:0;transform:translateY(-2.4em) } 100% { opacity:0 } }
.scene--log.is-playing .scene-packets i:nth-child(2) { animation: sc-pk1 14s linear infinite both; }
@keyframes sc-pk2 { 0% { opacity:0;transform:translateY(0) } 82% { opacity:0;transform:translateY(0) } 83% { opacity:1;transform:translateY(0) } 89% { opacity:1;transform:translateY(-2.1em) } 90% { opacity:0;transform:translateY(-2.4em) } 100% { opacity:0 } }
.scene--log.is-playing .scene-packets i:nth-child(3) { animation: sc-pk2 14s linear infinite both; }
@keyframes sc-sync { 0% { opacity:1 } 90% { opacity:1 } 91% { opacity:0 } 100% { opacity:0 } }
.scene--log.is-playing .scene-sync { animation: sc-sync 14s linear infinite both; }
@keyframes sc-wait { 0% { opacity:1 } 90% { opacity:1 } 90.5% { opacity:0 } 100% { opacity:0 } }
@keyframes sc-done { 0% { opacity:0 } 90% { opacity:0 } 91% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene--log.is-playing .scene-cloud-wait { animation: sc-wait 14s linear infinite both; }
.scene--log.is-playing .scene-cloud-done { animation: sc-done 14s linear infinite both; }
@keyframes sc-cloud { 0% { border-color:#d6e4f8;background:#f4f8ff } 90% { border-color:#d6e4f8;background:#f4f8ff } 91% { border-color:#86efac;background:#effcf3 } 97% { border-color:#86efac;background:#effcf3 } 100% { border-color:#d6e4f8;background:#f4f8ff } }
.scene--log.is-playing .scene-cloud { animation: sc-cloud 14s linear infinite both; }
@keyframes scene--log-st0 { 0% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 35.99% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 36% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--log .scene-steps li:nth-child(1) { animation-name: scene--log-st0; }
@keyframes scene--log-st0b { 0% { background:#0066ff;color:#fff } 35.99% { background:#0066ff;color:#fff } 36% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--log .scene-steps li:nth-child(1) span { animation: scene--log-st0b 14s linear infinite both; }
@keyframes scene--log-st1 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 35.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 36% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 53.99% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 54% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--log .scene-steps li:nth-child(2) { animation-name: scene--log-st1; }
@keyframes scene--log-st1b { 0% { background:#dfe7f3;color:#0a1b3d } 35.99% { background:#dfe7f3;color:#0a1b3d } 36% { background:#0066ff;color:#fff } 53.99% { background:#0066ff;color:#fff } 54% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--log .scene-steps li:nth-child(2) span { animation: scene--log-st1b 14s linear infinite both; }
@keyframes scene--log-st2 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 53.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 54% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 73.99% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 74% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--log .scene-steps li:nth-child(3) { animation-name: scene--log-st2; }
@keyframes scene--log-st2b { 0% { background:#dfe7f3;color:#0a1b3d } 53.99% { background:#dfe7f3;color:#0a1b3d } 54% { background:#0066ff;color:#fff } 73.99% { background:#0066ff;color:#fff } 74% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--log .scene-steps li:nth-child(3) span { animation: scene--log-st2b 14s linear infinite both; }
@keyframes scene--log-st3 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 73.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 74% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } 100% { background:#eaf2ff;color:#0057db;border-color:#c7dcfb } }
.scene.is-playing.scene--log .scene-steps li:nth-child(4) { animation-name: scene--log-st3; }
@keyframes scene--log-st3b { 0% { background:#dfe7f3;color:#0a1b3d } 73.99% { background:#dfe7f3;color:#0a1b3d } 74% { background:#0066ff;color:#fff } 100% { background:#0066ff;color:#fff } }
.scene.is-playing.scene--log .scene-steps li:nth-child(4) span { animation: scene--log-st3b 14s linear infinite both; }
.scene--condo .scene-cloud-icon { background: #16a34a; }
.scene--condo .scene-photo { background: linear-gradient(160deg, #dcf5e6, #c2ead2); color: #166534; }
.scene--condo .scene-photo small { color: #166534; }
.scene--condo .scene-sync { color: #15803d !important; }
.scene--condo .scene-steps li.is-on, .scene--condo:not(.is-playing) .scene-steps li { background: #eafaf0; color: #15803d; border-color: #bbf0cd; }
.scene--condo:not(.is-playing) .scene-steps li span { background: #16a34a; color: #fff; }
.scene--condo .scene-replay { border-color: #bbf0cd; color: #15803d; }
.scene--condo .scene-replay:hover { background: #f0fbf4; }
.scene-wa { position: relative; padding: .7em .8em 1.3em; border-radius: .2em 1em 1em 1em; background: #dcf8c6; color: #0a1b3d; font-size: .86em; line-height: 1.4; box-shadow: 0 2px 6px rgba(8,27,58,.08); }
.scene-wa b { display: block; font-size: .82em; color: #128c4a; margin-bottom: .2em; }
.scene-wa em { position: absolute; right: .7em; bottom: .3em; font-style: normal; font-size: .8em; color: #34b7f1; font-weight: 800; }
/* estado final (condomínio) */
.sk-courier { opacity: 0; transform: translate(200px, 300px); }
.sk-res { transform: translate(400px, 300px); }
.sk-counterbox, .sk-tag, .sk-flash, .sk-wa, .sk-bell-in, .sk-box-carry { opacity: 0; }
.sk-arc { opacity: 0; }
.sk-win, .sk-box-recv, .sk-ok { opacity: 1; }
.sk-ok { transform: translate(345px, 76px); }
.sk-wa { transform: translate(652px, 112px); }
.sk-bell-in { transform-box: fill-box; transform-origin: 50% 20%; }
.sk-leg-a, .sk-leg-b, .sk-leg-c, .sk-leg-d { transform-box: fill-box; transform-origin: 50% 0; }
.scene--log .scene-sync { opacity: 0; }
@keyframes sk-van { 0% { transform:translateX(-240px) } 13% { transform:translateX(0) } 100% { transform:translateX(0) } }
.scene.is-playing .sk-van { animation: sk-van 14s cubic-bezier(.2,.7,.3,1) infinite both; }
@keyframes sk-courier { 0% { opacity:0;transform:translate(200px,300px) } 14% { opacity:0;transform:translate(200px,300px) } 16% { opacity:1;transform:translate(200px,300px) } 26% { opacity:1;transform:translate(318px,300px) } 30% { opacity:1;transform:translate(318px,300px) } 35% { opacity:1;transform:translate(200px,300px) } 37% { opacity:0;transform:translate(200px,300px) } 100% { opacity:0;transform:translate(200px,300px) } }
.scene.is-playing .sk-courier { animation: sk-courier 14s linear infinite both; }
@keyframes sk-lega { 0% { transform:rotate(0) } 16% { transform:rotate(0) } 17.4% { transform:rotate(14deg) } 18.8% { transform:rotate(-14deg) } 20.2% { transform:rotate(14deg) } 21.6% { transform:rotate(-14deg) } 23.0% { transform:rotate(14deg) } 24.4% { transform:rotate(-14deg) } 25.8% { transform:rotate(14deg) } 26% { transform:rotate(0) } 30% { transform:rotate(0) } 31.4% { transform:rotate(14deg) } 32.8% { transform:rotate(-14deg) } 34.2% { transform:rotate(14deg) } 35% { transform:rotate(0) } 100% { transform:rotate(0) } }
@keyframes sk-legb { 0% { transform:rotate(0) } 16% { transform:rotate(0) } 17.4% { transform:rotate(-14deg) } 18.8% { transform:rotate(14deg) } 20.2% { transform:rotate(-14deg) } 21.6% { transform:rotate(14deg) } 23.0% { transform:rotate(-14deg) } 24.4% { transform:rotate(14deg) } 25.8% { transform:rotate(-14deg) } 26% { transform:rotate(0) } 30% { transform:rotate(0) } 31.4% { transform:rotate(-14deg) } 32.8% { transform:rotate(14deg) } 34.2% { transform:rotate(-14deg) } 35% { transform:rotate(0) } 100% { transform:rotate(0) } }
.scene.is-playing .sk-leg-a { animation: sk-lega 14s linear infinite both; }
.scene.is-playing .sk-leg-b { animation: sk-legb 14s linear infinite both; }
@keyframes sk-carry { 0% { opacity:1 } 28% { opacity:1 } 28.5% { opacity:0 } 100% { opacity:0 } }
.scene.is-playing .sk-box-carry { animation: sk-carry 14s linear infinite both; }
@keyframes sk-cbox { 0% { opacity:0 } 28% { opacity:0 } 28.5% { opacity:1 } 70% { opacity:1 } 70.5% { opacity:0 } 100% { opacity:0 } }
.scene.is-playing .sk-counterbox { animation: sk-cbox 14s linear infinite both; }
@keyframes sk-flash { 0% { opacity:0 } 31% { opacity:0 } 31.6% { opacity:.95 } 33.5% { opacity:0 } 100% { opacity:0 } }
.scene.is-playing .sk-flash { animation: sk-flash 14s ease-out infinite both; }
.scene--condo.is-playing .scene-flash { animation: sk-flash 14s ease-out infinite both; }
@keyframes sk-tag { 0% { opacity:0;transform:translate(398px,200px) } 34% { opacity:0;transform:translate(398px,200px) } 36% { opacity:1;transform:translate(398px,194px) } 70% { opacity:1;transform:translate(398px,194px) } 71% { opacity:0;transform:translate(398px,194px) } 100% { opacity:0 } }
.scene.is-playing .sk-tag { animation: sk-tag 14s linear infinite both; }
@keyframes sk-arc { 0% { opacity:0;stroke-dashoffset:100 } 38% { opacity:0;stroke-dashoffset:100 } 38.5% { opacity:1;stroke-dashoffset:100 } 46% { opacity:1;stroke-dashoffset:0 } 50% { opacity:0;stroke-dashoffset:0 } 100% { opacity:0 } }
.sk-arc { stroke-dasharray: 4 6; }
.scene.is-playing .sk-arc { animation: sk-arc 14s linear infinite both; }
@keyframes sk-wa { 0% { opacity:0;transform:translate(372px,150px) scale(.4) } 38% { opacity:0;transform:translate(372px,150px) scale(.4) } 39.0% { opacity:1;transform:translate(408.8px,118.8px) scale(0.70) } 40.0% { opacity:1;transform:translate(445.0px,95.1px) scale(0.80) } 41.0% { opacity:1;transform:translate(480.8px,79.0px) scale(0.90) } 42.0% { opacity:1;transform:translate(516.0px,70.5px) scale(1.00) } 43.0% { opacity:1;transform:translate(550.8px,69.5px) scale(1.00) } 44.0% { opacity:1;transform:translate(585.0px,76.1px) scale(1.00) } 45.0% { opacity:1;transform:translate(618.8px,90.3px) scale(1.00) } 46.0% { opacity:1;transform:translate(652.0px,112.0px) scale(1.00) } 48% { opacity:1;transform:translate(652px,112px) scale(1.15) } 50% { opacity:0;transform:translate(652px,112px) scale(.6) } 100% { opacity:0;transform:translate(652px,112px) scale(.6) } }
.scene.is-playing .sk-wa { animation: sk-wa 14s linear infinite both; }
@keyframes sk-win { 0% { opacity:0 } 46% { opacity:0 } 47% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sk-win { animation: sk-win 14s linear infinite both; }
@keyframes sk-bell { 0% { opacity:0;transform:rotate(0) } 49% { opacity:0;transform:rotate(0) } 50% { opacity:1;transform:rotate(0) } 51% { opacity:1;transform:rotate(16deg) } 52% { opacity:1;transform:rotate(-16deg) } 53% { opacity:1;transform:rotate(16deg) } 54% { opacity:1;transform:rotate(-16deg) } 55% { opacity:1;transform:rotate(16deg) } 56% { opacity:1;transform:rotate(-16deg) } 57% { opacity:1;transform:rotate(0) } 59% { opacity:0;transform:rotate(0) } 100% { opacity:0;transform:rotate(0) } }
.scene.is-playing .sk-bell-in { animation: sk-bell 14s linear infinite both; }
@keyframes sk-res { 0% { opacity:0;transform:translate(585px,300px) } 53% { opacity:0;transform:translate(585px,300px) } 55% { opacity:1;transform:translate(585px,300px) } 63% { opacity:1;transform:translate(400px,300px) } 97% { opacity:1;transform:translate(400px,300px) } 100% { opacity:0;transform:translate(400px,300px) } }
.scene.is-playing .sk-res { animation: sk-res 14s linear infinite both; }
@keyframes sk-legc { 0% { transform:rotate(0) } 55% { transform:rotate(0) } 56.4% { transform:rotate(14deg) } 57.8% { transform:rotate(-14deg) } 59.2% { transform:rotate(14deg) } 60.6% { transform:rotate(-14deg) } 62.0% { transform:rotate(14deg) } 63% { transform:rotate(0) } 100% { transform:rotate(0) } }
@keyframes sk-legd { 0% { transform:rotate(0) } 55% { transform:rotate(0) } 56.4% { transform:rotate(-14deg) } 57.8% { transform:rotate(14deg) } 59.2% { transform:rotate(-14deg) } 60.6% { transform:rotate(14deg) } 62.0% { transform:rotate(-14deg) } 63% { transform:rotate(0) } 100% { transform:rotate(0) } }
.scene.is-playing .sk-leg-c { animation: sk-legc 14s linear infinite both; }
.scene.is-playing .sk-leg-d { animation: sk-legd 14s linear infinite both; }
@keyframes sk-recv { 0% { opacity:0 } 70% { opacity:0 } 70.5% { opacity:1 } 97% { opacity:1 } 100% { opacity:0 } }
.scene.is-playing .sk-box-recv { animation: sk-recv 14s linear infinite both; }
@keyframes sk-ok { 0% { opacity:0;transform:translate(345px,76px) scale(0) } 74% { opacity:0;transform:translate(345px,76px) scale(0) } 76% { opacity:1;transform:translate(345px,76px) scale(1.15) } 78% { opacity:1;transform:translate(345px,76px) scale(1) } 97% { opacity:1;transform:translate(345px,76px) scale(1) } 100% { opacity:0;transform:translate(345px,76px) scale(1) } }
.scene.is-playing .sk-ok { animation: sk-ok 14s ease-out infinite both; }
.scene--condo.is-playing .scene-sign-path { animation: sc-sign2 14s ease-in-out infinite both; }
@keyframes sc-sign2 { 0% { stroke-dashoffset:100 } 62% { stroke-dashoffset:100 } 72% { stroke-dashoffset:0 } 100% { stroke-dashoffset:0 } }
.scene--condo.is-playing .scene-packets i:nth-child(1) { animation: sc-pk0 14s linear infinite both; }
.scene--condo.is-playing .scene-packets i:nth-child(2) { animation: sc-pk1 14s linear infinite both; }
.scene--condo.is-playing .scene-packets i:nth-child(3) { animation: sc-pk2 14s linear infinite both; }
.scene--condo.is-playing .scene-cloud-wait { animation: sc-wait 14s linear infinite both; }
.scene--condo.is-playing .scene-cloud-done { animation: sc-done 14s linear infinite both; }
.scene--condo.is-playing .scene-cloud { animation: sc-cloud 14s linear infinite both; }
@keyframes sk-sync { 0% { opacity:0 } 90% { opacity:0 } 91% { opacity:1 } 100% { opacity:1 } }
.scene--condo.is-playing .scene-sync { animation: sk-sync 14s linear infinite both; }
@keyframes scene--condo-st0 { 0% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 35.99% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 36% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(1) { animation-name: scene--condo-st0; }
@keyframes scene--condo-st0b { 0% { background:#16a34a;color:#fff } 35.99% { background:#16a34a;color:#fff } 36% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(1) span { animation: scene--condo-st0b 14s linear infinite both; }
@keyframes scene--condo-st1 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 35.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 36% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 53.99% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 54% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(2) { animation-name: scene--condo-st1; }
@keyframes scene--condo-st1b { 0% { background:#dfe7f3;color:#0a1b3d } 35.99% { background:#dfe7f3;color:#0a1b3d } 36% { background:#16a34a;color:#fff } 53.99% { background:#16a34a;color:#fff } 54% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(2) span { animation: scene--condo-st1b 14s linear infinite both; }
@keyframes scene--condo-st2 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 53.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 54% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 73.99% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 74% { background:#f3f6fb;color:#5b6577;border-color:transparent } 100% { background:#f3f6fb;color:#5b6577;border-color:transparent } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(3) { animation-name: scene--condo-st2; }
@keyframes scene--condo-st2b { 0% { background:#dfe7f3;color:#0a1b3d } 53.99% { background:#dfe7f3;color:#0a1b3d } 54% { background:#16a34a;color:#fff } 73.99% { background:#16a34a;color:#fff } 74% { background:#dfe7f3;color:#0a1b3d } 100% { background:#dfe7f3;color:#0a1b3d } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(3) span { animation: scene--condo-st2b 14s linear infinite both; }
@keyframes scene--condo-st3 { 0% { background:#f3f6fb;color:#5b6577;border-color:transparent } 73.99% { background:#f3f6fb;color:#5b6577;border-color:transparent } 74% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } 100% { background:#eafaf0;color:#15803d;border-color:#bbf0cd } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(4) { animation-name: scene--condo-st3; }
@keyframes scene--condo-st3b { 0% { background:#dfe7f3;color:#0a1b3d } 73.99% { background:#dfe7f3;color:#0a1b3d } 74% { background:#16a34a;color:#fff } 100% { background:#16a34a;color:#fff } }
.scene.is-playing.scene--condo .scene-steps li:nth-child(4) span { animation: scene--condo-st3b 14s linear infinite both; }
@media (prefers-reduced-motion: reduce) {
  .scene.is-playing *, .scene.is-playing { animation: none !important; }
  .scene-replay { display: none; }
}
.scene.is-paused, .scene.is-paused * { animation-play-state: paused !important; }

/* ---------- Títulos animados (Para Logística / Para Condomínios) ---------- */
.title-anim { position: relative; }
.title-anim .tw { display: inline-block; opacity: 0; transform: translateY(.42em); filter: blur(6px); }
.title-anim.is-on .tw { animation: tw-in .7s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(var(--i) * 65ms); }
@keyframes tw-in { 0% { opacity: 0; transform: translateY(.42em); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
.title-anim::after {
  content: ""; display: block; height: 4px; width: 84px; margin: .32em auto 0;
  border-radius: 999px; background: linear-gradient(90deg, #0066ff, #38bdf8);
  transform: scaleX(0); transform-origin: center;
}
.title-anim--expedicoes::after { background: linear-gradient(90deg, #16a34a, #4ade80); }
.title-anim.is-on::after { animation: tw-bar .8s cubic-bezier(.2, .75, .2, 1) both; animation-delay: calc(var(--n) * 65ms + .25s); }
@keyframes tw-bar { 0% { transform: scaleX(0); opacity: .4; } 60% { transform: scaleX(1.12); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
.title-anim.is-on .exp-accent .tw { animation-name: tw-in-accent; }
@keyframes tw-in-accent { 0% { opacity: 0; transform: translateY(.42em) scale(.96); filter: blur(6px); } 70% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
.section-title[tabindex="-1"]:focus { outline: none; }

/* Fechamento suave do vídeo ao terminar */
.video-modal.is-closing { animation: video-modal-leave .38s cubic-bezier(.4, 0, .2, 1) both !important; }
.video-modal.is-closing::backdrop { animation: video-backdrop-leave .38s ease both; }
@keyframes video-modal-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(18px) scale(.96); } }
@keyframes video-backdrop-leave { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .title-anim .tw { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .title-anim::after { transform: none; animation: none !important; }
  .video-modal.is-closing, .video-modal.is-closing::backdrop { animation: none !important; }
}