/* A demonstração do Cloud usa o relógio já compartilhado pela landing.
   Sem JavaScript, o registro final fica visível; não há relógio CSS paralelo. */
.cloud-feature {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.45fr);
  min-width: 0;
  margin: 0 0 var(--e-6);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--borda);
  border-radius: var(--raio-xg);
  background: var(--fundo-elevado);
  box-shadow: var(--sombra-1);
}
.cloud-copy {
  align-self: center;
  min-width: 0;
  padding: var(--e-10);
}
.cloud-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-6);
  color: var(--texto);
  font: 600 14px/1.4 var(--fonte);
}
.cloud-label img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
}
.cloud-label strong { font-weight: 600; }
.cloud-badge {
  margin-left: var(--e-1);
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--fundo);
  color: var(--texto-2);
  font: 500 11px/1.4 var(--fonte);
}
.cloud-copy h3 {
  max-width: 20ch;
  margin: 0 0 var(--e-4);
  color: var(--texto);
  font: 800 clamp(26px, 2.4vw, 34px)/1.18 var(--fonte-titulo);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cloud-description {
  max-width: 42ch;
  margin: 0;
  color: var(--texto-3);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
}
.cloud-benefits {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-6) 0;
  padding: 0;
  list-style: none;
}
.cloud-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  min-width: 0;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.55;
}
.cloud-benefits svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--link);
  flex: none;
}
.cloud-infrastructure {
  max-width: 46ch;
  margin: 0;
  color: var(--texto-3);
  font-size: 12px;
  line-height: 1.6;
}

/* A superfície é sólida, pois a arte não flutua sobre conteúdo. O espaço
   do pedido e das linhas permanece reservado durante todas as fases. */
.cloud-art.motion-resource-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: auto;
  min-height: 448px;
  padding: var(--e-12) var(--e-10) var(--e-8);
  border-left: 1px solid var(--borda);
  background: var(--fundo);
}
.cloud-art.motion-resource-art::after { content: none; }
.cloud-example {
  position: absolute;
  top: var(--e-4);
  right: var(--e-6);
  color: var(--texto-3);
  font: 400 11px/1.45 var(--fonte);
}
.cloud-flow { width: 100%; max-width: 424px; min-width: 0; }
.cloud-request {
  min-height: 104px;
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--fundo-elevado);
  box-shadow: var(--sombra-2);
}
.cloud-small-label {
  display: block;
  margin-bottom: var(--e-2);
  color: var(--texto-3);
  font: 500 11px/1.4 var(--fonte);
}
.cloud-request p {
  min-height: 44px;
  margin: 0;
  color: var(--texto);
  font: 400 14px/1.55 var(--fonte);
  overflow-wrap: anywhere;
}
.cloud-feature[data-phase="request"] .cloud-request p::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--link);
}
.cloud-path { position: relative; height: var(--e-8); }
.cloud-path::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--borda-forte);
}
.cloud-packet {
  position: absolute;
  top: 2px;
  left: calc(50% - 10px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--borda-forte);
  border-radius: 50%;
  background: var(--fundo-elevado);
  color: var(--link);
  opacity: 0;
}
.cloud-packet svg { width: 12px; height: 12px; }
.cloud-feature[data-phase="saving"] .cloud-packet {
  opacity: 1;
  transform: translateY(calc(var(--cloud-progress, 0) * 8px));
}
.cloud-database {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--fundo-elevado);
  box-shadow: var(--sombra-2);
}
.cloud-database-head {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 56px;
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borda);
  color: var(--texto);
  font: 600 13px/1.4 var(--fonte);
}
.cloud-database-head img { width: 24px; height: 24px; flex: none; }
.cloud-database-head strong { font-weight: 600; }
.cloud-table-label {
  margin-left: auto;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--raio-p);
  background: var(--fundo);
  color: var(--texto-3);
  font: 400 11px/1.4 var(--fonte);
}
.cloud-table-header,
.cloud-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(64px, .7fr);
  gap: var(--e-2);
  align-items: center;
  min-height: 36px;
  padding: var(--e-2) var(--e-4);
  font: 400 12px/1.45 var(--fonte);
  font-variant-numeric: tabular-nums;
}
.cloud-table-header {
  min-height: 32px;
  background: var(--fundo);
  color: var(--texto-3);
  font-size: 11px;
}
.cloud-row { border-top: 1px solid var(--borda); color: var(--texto-2); }
.cloud-row span { min-width: 0; overflow-wrap: anywhere; }
.cloud-row span:first-child { color: var(--texto-3); }
.cloud-new-row {
  position: relative;
  background: var(--odim-energia-suave);
  color: var(--texto);
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3), transform var(--dur-4) var(--curva-suave);
}
.cloud-new-row::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--acao);
}
.cloud-confirmation {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border-top: 1px solid var(--borda);
  color: var(--ok);
  font: 500 11px/1.45 var(--fonte);
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-3), transform var(--dur-4) var(--curva-suave);
}
.cloud-confirmation svg { width: 14px; height: 14px; flex: none; }
.cloud-feature:is([data-phase="request"], [data-phase="saving"]) .cloud-new-row,
.cloud-feature:is([data-phase="request"], [data-phase="saving"]) .cloud-confirmation {
  opacity: 0;
  transform: translateY(6px);
}
.cloud-feature[data-phase="saved"] .cloud-confirmation { transition-delay: var(--dur-2); }

@media (max-width: 1080px) {
  .cloud-copy { padding: var(--e-8); }
  .cloud-art.motion-resource-art { padding-inline: var(--e-6); }
}
@media (max-width: 960px) {
  .cloud-feature { grid-template-columns: minmax(0, 1fr); }
  .cloud-copy h3 { max-width: 28ch; font-size: 28px; }
  .cloud-description { max-width: 62ch; }
  .cloud-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-infrastructure { max-width: 68ch; }
  .cloud-art.motion-resource-art {
    min-height: 424px;
    border-left: 0;
    border-top: 1px solid var(--borda);
  }
  .cloud-flow { max-width: 448px; }
}
@media (max-width: 560px) {
  .cloud-feature { margin-bottom: var(--e-4); }
  .cloud-copy { padding: var(--e-6); }
  .cloud-label { margin-bottom: var(--e-5); }
  .cloud-copy h3 { font-size: 26px; }
  .cloud-description { font-size: 14px; }
  .cloud-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); margin-block: var(--e-5); }
  .cloud-art.motion-resource-art { min-height: 0; padding: var(--e-12) var(--e-4) var(--e-6); }
  .cloud-example { right: var(--e-4); }
  .cloud-request { padding: var(--e-3) var(--e-4); }
  .cloud-request p { min-height: 64px; font-size: 13px; }
  .cloud-database-head { padding-inline: var(--e-3); font-size: 12px; }
  .cloud-database-head img { width: 20px; height: 20px; }
  .cloud-table-header, .cloud-row { padding-inline: var(--e-3); grid-template-columns: 22px minmax(0, 1fr) minmax(52px, .7fr); font-size: 11px; }
  .cloud-table-header { font-size: 10px; }
  .cloud-confirmation { padding-inline: var(--e-3); }
}

/* Ambos os controles de acessibilidade deixam o exemplo pronto, sem uma
   linha desaparecida por um estado que o relógio deixou antes de pausar. */
body[data-motion-off] .cloud-feature .cloud-new-row,
body[data-motion-off] .cloud-feature .cloud-confirmation {
  opacity: 1;
  transform: none;
  transition: none;
}
body[data-motion-off] .cloud-feature .cloud-packet,
body[data-motion-off] .cloud-feature .cloud-request p::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cloud-feature .cloud-new-row, .cloud-feature .cloud-confirmation {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cloud-feature .cloud-packet, .cloud-feature .cloud-request p::after { display: none; }
}