/* CELERA: explanatory scenes, isolated from the section's white text rules. */
#desafios-cards, #metodo-cards { scroll-margin-top: 110px; }
#publico .motion-card, #funciona .motion-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 20px 22px;
  overflow: hidden;
  text-align: left;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease);
}
#publico .motion-card h3, #funciona .motion-card h3 { margin-top: 20px; }
#funciona .motion-card > p { text-align: left; }
#funciona .motion-card .passo-sub { text-align: left; }
#funciona .motion-card .passo-saida {
  justify-content: flex-start;
  margin-top: auto;
}
#funciona .motion-card > p:not(.passo-sub):not(.passo-saida) { margin-bottom: 20px; }
#publico .motion-card .painel-corpo { padding-bottom: 2px; }
#publico .card-scene, #funciona .card-scene {
  --scene-blue: #245be4;
  --scene-text: #273c5c;
  --scene-line: #b0c4e1;
  --scene-wash: #edf3fd;
  --scene-paper: #ffffff;
  --scene-dim: #687c99;
  position: relative;
  flex: none;
  margin: 0 -20px;
  padding: 16px 12px 0;
  border-bottom: 1px solid var(--scene-line);
  background-color: #f5f8fd;
  background-image: radial-gradient(circle, #becfe455 .7px, transparent .8px);
  background-size: 12px 12px;
  color: var(--scene-text);
}
:root[data-theme='dark'] :is(#publico, #funciona) .card-scene {
  --scene-blue: #7ba8ff;
  --scene-text: #e0eaff;
  --scene-line: #58779e;
  --scene-wash: #172e51;
  --scene-paper: #101e34;
  --scene-dim: #9fb4d2;
  background-color: #0c182a;
  background-image: radial-gradient(circle, #41658a55 .7px, transparent .8px);
}
.scene-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  color: var(--scene-dim);
  font: 600 9px/1.4 'DM Sans', sans-serif;
  letter-spacing: .13em;
}
.scene-tag i {
  width: 18px;
  height: 3px;
  background: var(--scene-blue);
}
.card-scene > svg { display: block; width: 100%; height: auto; overflow: visible; }
#funciona .card-scene > svg { max-width: 340px; margin-inline: auto; }
.card-scene figcaption {
  min-height: 48px;
  margin: 0 -12px;
  padding: 9px 16px;
  border-top: 1px solid var(--scene-line);
  background: var(--scene-paper);
  color: var(--scene-dim);
  font-size: 10.5px;
  line-height: 1.45;
  text-align: left;
}
.scene-box {
  fill: var(--scene-paper);
  stroke: var(--scene-line);
  stroke-width: 1.2;
}
.scene-line, .scene-ring {
  fill: none;
  stroke: var(--scene-line);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scene-dashed { stroke-dasharray: 3 5; }
.scene-accent-line, .scene-ring { stroke: var(--scene-blue); }
.scene-muted { opacity: .5; }
.scene-label {
  fill: var(--scene-text);
  font: 600 9px 'DM Sans', sans-serif;
  letter-spacing: .05em;
}
.scene-large { font-size: 23px; font-weight: 500; }
.scene-solid { fill: var(--scene-blue); stroke: var(--scene-blue); }
.scene-dot, .scene-bar { fill: var(--scene-blue); }
.scene-white { fill: #fff; }
.scene-on-solid { fill: none; stroke: #fff; stroke-width: 1.7; }
:root[data-theme='dark'] .scene-white { fill: #0c182a; }
:root[data-theme='dark'] .scene-on-solid { stroke: #0c182a; }
.scene-question { stroke-dasharray: 3 3; fill: var(--scene-wash); }
.scene-scan-wash { fill: var(--scene-blue); opacity: .1; }
.scene-motion {
  animation-duration: 6s;
  animation-timing-function: var(--ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.card-scene[data-running='true'] .scene-motion { animation-play-state: running; }
[data-scenes-paused='true'] .card-scene .scene-motion { animation-play-state: paused; }

/* Each loop represents the card's specific idea. Only transforms and opacity move. */
.scene-queue { animation-name: scene-queue; }
.queue-two { --queue-stop: 62px; animation-delay: -.9s; }
.queue-three { --queue-stop: 47px; animation-delay: -1.8s; }
@keyframes scene-queue {
  0%, 8% { transform: translateX(-28px); opacity: 0; }
  20% { opacity: 1; }
  46%, 82% { transform: translateX(var(--queue-stop, 77px)); opacity: 1; }
  95%, 100% { transform: translateX(var(--queue-stop, 77px)); opacity: 0; }
}
.scene-wait { animation-name: scene-wait; transform-origin: 175px 82px; }
@keyframes scene-wait {
  0%, 22%, 100% { transform: scale(.9); opacity: 0; }
  45%, 70% { transform: scale(1.14); opacity: .7; }
  88% { transform: scale(1.25); opacity: 0; }
}
.copy-one { animation-name: scene-copy-left; }
.copy-two { animation-name: scene-copy-right; }
@keyframes scene-copy-left {
  0%, 12% { transform: translate(0,0); opacity: 0; }
  24% { opacity: 1; }
  48%, 78% { transform: translate(-91px,38px); opacity: 1; }
  92%, 100% { transform: translate(-91px,38px); opacity: 0; }
}
@keyframes scene-copy-right {
  0%, 28% { transform: translate(0,0); opacity: 0; }
  38% { opacity: 1; }
  62%, 82% { transform: translate(91px,57px); opacity: 1; }
  95%, 100% { transform: translate(91px,57px); opacity: 0; }
}
.scene-gap { animation-name: scene-gap; }
.gap-two { animation-delay: -3s; }
@keyframes scene-gap {
  0%, 8% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  42%, 65% { transform: translateX(20px); opacity: 1; }
  80%, 100% { transform: translateX(20px); opacity: 0; }
}
.scene-bars { animation-name: scene-bars; transform-origin: 0 124px; }
.bars-two { animation-delay: -2s; }
.bars-three { animation-delay: -4s; }
@keyframes scene-bars {
  0%, 100% { transform: scaleY(.6); opacity: .65; }
  45%, 65% { transform: scaleY(1); opacity: 1; }
}
.scene-scan { animation-name: scene-scan; animation-timing-function: linear; }
@keyframes scene-scan {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  58% { transform: translateX(172px); opacity: 1; }
  75%, 100% { transform: translateX(238px); opacity: 0; }
}
.scene-finding { animation-name: scene-finding; }
@keyframes scene-finding {
  0%, 42% { opacity: 0; }
  55%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
.scene-order { animation-name: scene-order; }
.order-two { animation-delay: .35s; }
.order-three { animation-delay: .7s; }
@keyframes scene-order {
  0%, 10% { transform: translate(-8px,18px); }
  35%, 80% { transform: translate(0,0); opacity: 1; }
  100% { transform: translate(-8px,18px); }
}
.scene-owner { animation-name: scene-owner; }
@keyframes scene-owner { 0%, 30%, 100% { opacity: .2; } 48%, 82% { opacity: 1; } }
.scene-hop { animation-name: scene-hop; animation-timing-function: linear; }
.hop-two { animation-delay: 1.5s; }
.hop-three { animation-delay: 3.5s; }
@keyframes scene-hop {
  0% { transform: translateX(0); opacity: 0; }
  5% { opacity: 1; }
  18% { transform: translateX(15px); opacity: 1; }
  22%, 100% { transform: translateX(15px); opacity: 0; }
}
.scene-approved { animation-name: scene-approved; }
@keyframes scene-approved { 0%, 42%, 98%, 100% { opacity: 0; } 55%, 87% { opacity: 1; } }

.scene-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.5;
}
#publico .scene-controls { color: #fff; }
#funciona .scene-controls { color: var(--muted); }
.scene-controls > span { opacity: .75; }
.scene-toggle {
  color: inherit;
  font: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 8px 0;
  cursor: pointer;
}
.scene-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .scene-toggle:hover { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .card-scene .scene-motion { animation: none; }
  .card-scene .scene-queue { transform: translateX(60px); }
  .card-scene .copy-one { transform: translate(-91px,38px); }
  .card-scene .copy-two { transform: translate(91px,57px); }
  .card-scene .scene-scan, .card-scene .scene-hop { opacity: 0; }
  .scene-toggle { display: none; }
  #publico .motion-card, #funciona .motion-card { transition: opacity 160ms linear; }
}