/* Motion layer for the interactive live concept. */
.live-demo-heading > div,
.live-demo-heading > aside,
.live-demo-controls,
.live-demo-organizer,
.live-demo-public,
.live-demo-explanation {
    animation: live-demo-enter 620ms cubic-bezier(.2, .8, .2, 1) both;
}

.live-demo-heading > aside { animation-delay: 80ms; }
.live-demo-controls { animation-delay: 120ms; }
.live-demo-organizer { animation-delay: 190ms; }
.live-demo-public { animation-delay: 260ms; }
.live-demo-explanation { animation-delay: 310ms; }

.live-demo-status-dot {
    animation: live-demo-status 2.4s ease-in-out infinite;
}

.live-demo-podium article,
.live-demo-table-wrap tbody tr,
.live-demo-public-results li {
    animation: live-demo-row 380ms cubic-bezier(.2, .8, .2, 1) var(--live-row-delay, 0ms) both;
}

.live-demo-workspace[data-visibility="public"] .live-demo-public > header > b {
    border-color: rgba(103, 180, 131, .66);
    color: var(--green);
    animation: live-demo-public 1.9s ease-in-out infinite;
}

.live-demo-workspace[data-visibility="delayed"] .live-demo-public > header > b {
    border-color: rgba(255, 100, 25, .6);
    color: #ff8246;
}

.live-demo-workspace.is-just-saved .live-demo-form-status {
    animation: live-demo-message 520ms ease-out;
}

@keyframes live-demo-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes live-demo-row {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

@keyframes live-demo-status {
    0%, 100% { box-shadow: 0 0 0 3px rgba(98, 189, 130, .1), 0 0 7px rgba(98, 189, 130, .26); }
    50% { box-shadow: 0 0 0 7px rgba(98, 189, 130, .14), 0 0 14px rgba(98, 189, 130, .48); }
}

@keyframes live-demo-public {
    0%, 100% { box-shadow: 0 0 0 0 rgba(103, 180, 131, 0); }
    50% { box-shadow: 0 0 0 5px rgba(103, 180, 131, .09); }
}

@keyframes live-demo-message {
    0% { color: #ff8246; transform: translateY(-3px); }
    100% { color: var(--text-muted); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .live-demo-heading > div,
    .live-demo-heading > aside,
    .live-demo-controls,
    .live-demo-organizer,
    .live-demo-public,
    .live-demo-explanation,
    .live-demo-status-dot,
    .live-demo-podium article,
    .live-demo-table-wrap tbody tr,
    .live-demo-public-results li,
    .live-demo-workspace[data-visibility="public"] .live-demo-public > header > b,
    .live-demo-workspace.is-just-saved .live-demo-form-status {
        animation: none !important;
    }
}