.evolution .pixel-transition {
  --wave-top: #06303b;
  --wave-bottom: #fbf8f1;
  position: relative;
  height: 200px;
  width: 100%;
  overflow: hidden;
  margin-block: -1px;
  background: var(--wave-bottom);
  pointer-events: none;
}

.evolution .pixel-transition[data-top="#fbf8f1"] { --wave-top: #fbf8f1; }
.evolution .pixel-transition[data-top="#f5eedd"] { --wave-top: #f5eedd; }
.evolution .pixel-transition[data-bottom="#06303b"] { --wave-bottom: #06303b; }
.evolution .pixel-transition[data-bottom="#f5eedd"] { --wave-bottom: #f5eedd; }

/* Sem Canvas, uma curva sólida ainda une as duas superfícies. */
.evolution .pixel-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wave-top);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V80C1320 160 1250 20 1120 70S940 165 800 85S610 5 460 90S250 160 130 70S30 60 0 90Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.evolution .pixel-transition.is-rendered::before { display: none; }
.evolution .pixel-transition canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.evolution .wave-motion-toggle { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; pointer-events: auto; cursor: pointer; }
.evolution .wave-motion-toggle:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -6px; }
.evolution .wave-motion-toggle::after { content: attr(aria-label); position: absolute; right: var(--container-pad); bottom: 1rem; padding: .5rem .75rem; border-radius: .35rem; background: var(--c-dark); color: var(--c-sand); font-size: .7rem; opacity: 0; transition: opacity 180ms ease-out; }
.evolution .wave-motion-toggle:hover::after, .evolution .wave-motion-toggle:focus-visible::after { opacity: 1; }
.evolution .pixel-transition + .section { border-top: 0; }
@media (max-width: 47.99rem) { .evolution .pixel-transition { height: 130px; } }