/* One deliberate gesture, then stillness. Shared by the React and studio entries. */
:where(.mavaro-section-scene) {
  position: relative;
  width: 280px;
  max-width: 100%;
  aspect-ratio: 28 / 13;
  color: #415643;
  isolation: isolate;
}
.mavaro-sketch-artwork {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mavaro-sketch-control {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #415643;
  opacity: .58;
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease;
}
.mavaro-sketch-control:hover {
  background: rgba(65, 86, 67, .055);
  opacity: 1;
}
.mavaro-sketch-control:focus-visible {
  outline: 1px solid #415643;
  outline-offset: -7px;
  opacity: 1;
}
.mavaro-sketch-control[hidden] { display: none; }
.mavaro-sketch-control svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mavaro-sketch-founder-point,
.mavaro-sketch-promotion-shoot,
.mavaro-sketch-accounting-file,
.mavaro-sketch-receipts {
  transform-origin: 99px 57px;
}
[data-section-scene] .mavaro-sketch-founder-point { animation-name: mavaroSketchFounderPoint; }
[data-section-scene] .mavaro-sketch-founder-mark { animation-name: mavaroSketchFounderMark; }
[data-section-scene] .mavaro-sketch-promotion-shoot { animation-name: mavaroSketchPromotionShoot; }
[data-section-scene] .mavaro-sketch-garnish { animation-name: mavaroSketchGarnish; }
[data-section-scene] .mavaro-sketch-camera-focus { animation-name: mavaroSketchCameraFocus; }
[data-section-scene] .mavaro-sketch-accounting-file { animation-name: mavaroSketchAccountingFile; }
[data-section-scene] .mavaro-sketch-receipts { animation-name: mavaroSketchReceipts; }
[data-section-scene] [class^="mavaro-sketch-"]:not(.mavaro-sketch-artwork):not(.mavaro-sketch-control) {
  animation-duration: 4.6s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-play-state: paused;
}
[data-section-scene][data-motion="running"] [class^="mavaro-sketch-"]:not(.mavaro-sketch-artwork):not(.mavaro-sketch-control) { animation-play-state: running; }
[data-section-scene][data-motion="complete"] [class^="mavaro-sketch-"]:not(.mavaro-sketch-artwork):not(.mavaro-sketch-control) {
  animation-delay: -4.6s;
  animation-play-state: paused;
}
@keyframes mavaroSketchFounderPoint {
  0%, 10% { transform: rotate(-24deg); }
  36% { transform: rotate(6deg); }
  47% { transform: rotate(2deg); }
  57% { transform: rotate(6deg); }
  70%, 100% { transform: rotate(2deg); }
}
@keyframes mavaroSketchFounderMark {
  0%, 37% { opacity: 0; }
  47%, 60% { opacity: .6; }
  78%, 100% { opacity: 0; }
}
@keyframes mavaroSketchPromotionShoot {
  0%, 7% { transform: rotate(0deg); }
  17% { transform: rotate(-5deg); }
  26% { transform: rotate(0deg); }
  51%, 61% { transform: rotate(-61deg); }
  66% { transform: rotate(-64deg); }
  74%, 100% { transform: rotate(-61deg); }
}
@keyframes mavaroSketchGarnish {
  0%, 7% { transform: translate(0, 0); }
  22%, 100% { transform: translate(2px, -1px); }
}
@keyframes mavaroSketchCameraFocus {
  0%, 60% { opacity: 0; }
  66%, 72% { opacity: .7; }
  83%, 100% { opacity: 0; }
}
@keyframes mavaroSketchAccountingFile {
  0%, 12% { transform: rotate(-19deg); }
  47%, 62% { transform: rotate(15deg); }
  83%, 100% { transform: rotate(-10deg); }
}
@keyframes mavaroSketchReceipts {
  0%, 12% { transform: rotate(-19deg); }
  47%, 100% { transform: rotate(15deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-section-scene] [class^="mavaro-sketch-"]:not(.mavaro-sketch-artwork):not(.mavaro-sketch-control) {
    animation-delay: -4.6s;
    animation-play-state: paused;
  }
  .mavaro-sketch-control { display: none; }
}