/* Objects: the six parts of a sale as physical things. Motion runs only while the figure is visible. */
.ob-figure { width: 100%; max-width: 420px; aspect-ratio: 380 / 270; margin: 0 auto; }
.ob-figure svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ob-figure * { animation-play-state: paused !important; }
.ob-figure[data-running] * { animation-play-state: running !important; }
.ob-breathe { animation: ob-breathe 6s ease-in-out infinite; }
.ob-breathe--b { animation-delay: -3s; }
@keyframes ob-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ob-wave { transform-box: fill-box; transform-origin: 50% 50%; animation: ob-wave 1.6s ease-in-out infinite; }
.ob-bar-1 { animation-delay: -.2s; } .ob-bar-2 { animation-delay: -.5s; } .ob-bar-3 { animation-delay: -.8s; } .ob-bar-4 { animation-delay: -1.1s; } .ob-bar-5 { animation-delay: -1.4s; }
@keyframes ob-wave { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(1.15); } }
.ob-row { animation: ob-row 8s cubic-bezier(.22, 1, .36, 1) infinite; opacity: 0; }
.ob-row--2 { animation-delay: .5s; } .ob-row--3 { animation-delay: 1s; }
@keyframes ob-row { 0% { opacity: 0; transform: translateY(6px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.ob-chip { transform-box: fill-box; transform-origin: 50% 50%; animation: ob-chip 8s cubic-bezier(.22, 1, .36, 1) infinite; }
.ob-row--2 .ob-chip { animation-delay: .5s; } .ob-row--3 .ob-chip { animation-delay: 1s; }
@keyframes ob-chip { 0%, 18% { transform: scale(.6); opacity: 0; } 26%, 100% { transform: scale(1); opacity: 1; } }
.ob-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: ob-pin 4.5s ease-in-out infinite; }
@keyframes ob-pin { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.12); } }
.ob-playhead { animation: ob-playhead 7s linear infinite; }
@keyframes ob-playhead { 0% { transform: translateX(0); } 100% { transform: translateX(236px); } }
.ob-note { transform-box: fill-box; transform-origin: 50% 0; animation: ob-note 7s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes ob-note { 0%, 52% { opacity: 0; transform: translateY(14px) scale(.96); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ob-strike { transform-box: fill-box; transform-origin: 0 50%; animation: ob-strike 7s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes ob-strike { 0%, 20% { transform: scaleX(0); } 32%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ob-new { transform-box: fill-box; transform-origin: 0 50%; animation: ob-new 7s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes ob-new { 0%, 32% { opacity: 0; transform: translateY(6px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ob-link { stroke-dashoffset: 0; animation: ob-link 1.2s linear infinite; }
@keyframes ob-link { to { stroke-dashoffset: -18; } }
.ob-source { animation: ob-source 7s ease-in-out infinite; }
@keyframes ob-source { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ob-knob-slide { animation: ob-knob-slide 8s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes ob-knob-slide { 0%, 12% { transform: translateX(0); } 20%, 92% { transform: translateX(24px); } 100% { transform: translateX(0); } }
.ob-switch__on { animation: ob-switch-on 8s linear infinite; }
@keyframes ob-switch-on { 0%, 14% { opacity: 0; } 20%, 92% { opacity: 1; } 100% { opacity: 0; } }
.ob-step__fill, .ob-step__check { animation: ob-step 8s cubic-bezier(.22, 1, .36, 1) infinite; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.ob-step--2 .ob-step__fill, .ob-step--2 .ob-step__check { animation-delay: .7s; } .ob-step--3 .ob-step__fill, .ob-step--3 .ob-step__check { animation-delay: 1.4s; }
@keyframes ob-step { 0%, 26% { opacity: 0; transform: scale(.6); } 34%, 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.ob-receipt { animation: ob-receipt 8s cubic-bezier(.22, 1, .36, 1) infinite; opacity: 0; }
@keyframes ob-receipt { 0%, 58% { opacity: 0; transform: translateY(6px); } 66%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ob-missed { animation: ob-missed 8s linear infinite; }
@keyframes ob-missed { 0%, 22% { opacity: 1; } 30%, 100% { opacity: 0; } }
.ob-answered { animation: ob-answered 8s linear infinite; opacity: 0; }
@keyframes ob-answered { 0%, 26% { opacity: 0; } 34%, 100% { opacity: 1; } }
.ob-draft { animation: ob-source 7s ease-in-out infinite; }
.ob-stamp { transform-box: fill-box; transform-origin: 50% 50%; animation: ob-stamp 8s cubic-bezier(.22, 1, .36, 1) infinite; opacity: 0; }
@keyframes ob-stamp { 0%, 56% { opacity: 0; transform: scale(1.5); } 64%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ob-figure * { animation: none !important; } .ob-row, .ob-note, .ob-new, .ob-step__fill, .ob-step__check, .ob-receipt, .ob-answered, .ob-stamp { opacity: 1 !important; } .ob-missed { opacity: 0 !important; } .ob-knob-slide { transform: translateX(24px) !important; } }
@media (forced-colors: active) { .ob-figure { display: none; } }