.bma-motion-body { fill: #F4F8FC; stroke: #8FB1CF; stroke-width: 2; }
.bma-motion-vent { fill: none; stroke: #8FB1CF; stroke-width: 2.4; stroke-linecap: round; }
.bma-motion-panel { fill: #E3EEF8; stroke: #8FB1CF; stroke-width: 1.5; }
.bma-motion-led { fill: #2E9BE0; }
.bma-motion-hose { fill: none; stroke: #5B7FA0; stroke-width: 6; stroke-linecap: round; }
.bma-motion-wheel { fill: #5B7FA0; } .bma-motion-hero { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; overflow: visible; }
.bma-motion-room { fill: #EAF3FB; stroke: #C6DCEE; stroke-width: 2; }
.bma-motion-warm { fill: #F7D9BF; opacity: .9; animation: bma-motion-warm 16s ease-in-out infinite; }
.bma-motion-floor { fill: #D2E3F1; }
.bma-motion-sun { transform-box: fill-box; transform-origin: center; animation: bma-motion-sun 16s ease-in-out infinite; }
.bma-motion-sun circle { fill: #F6A21E; }
.bma-motion-sun path { fill: none; stroke: #F6A21E; stroke-width: 4; stroke-linecap: round; }
.bma-motion-wave { fill: none; stroke: #2E9BE0; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 14; opacity: .75; animation: bma-motion-flow 4s linear infinite; }
.bma-motion-wave-2 { animation-delay: -1.3s; opacity: .55; }
.bma-motion-wave-3 { animation-delay: -2.6s; opacity: .4; }
.bma-motion-flake { fill: none; stroke: #2E9BE0; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: bma-motion-flake 10s ease-in-out infinite; }
.bma-motion-flake-2 { animation-delay: 2.5s; }
.bma-motion-flake-3 { animation-delay: 5s; }
.bma-motion-flake-4 { animation-delay: 7.5s; }
@keyframes bma-motion-warm {
0% { opacity: .9; }
55% { opacity: .06; }
85% { opacity: .06; }
100% { opacity: .9; }
}
@keyframes bma-motion-sun {
0% { opacity: 1; transform: scale(1); }
55% { opacity: .5; transform: scale(.82); }
85% { opacity: .5; transform: scale(.82); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes bma-motion-flow { to { stroke-dashoffset: -96; } }
@keyframes bma-motion-flake {
0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
15% { opacity: .9; }
85% { opacity: .9; }
100% { opacity: 0; transform: translate(170px, 26px) rotate(120deg); }
} .bma-motion-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.bma-motion-foot { display: block; width: 100%; overflow: hidden; background: transparent; border: 0; margin: 0; padding: 0; }
.bma-motion-foot + .ct-footer, .bma-motion-foot + #footer.ct-footer { margin-top: 0; border-top: 0; }
.bma-motion-strip { position: relative; height: 56px; overflow: hidden; }
.bma-motion-stub, .bma-motion-smooth { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; width: 100%; }
.bma-motion-stub { display: block; background: #F6E1CF; }
.bma-motion-stub path { fill: none; stroke: #D9A57C; stroke-width: 1.6; stroke-linecap: round; }
.bma-motion-smooth { left: -3%; width: 106%; right: auto; background: #CFE5F6; transform-origin: 0 50%; transform: scaleX(0); animation: bma-motion-fsmooth 19s linear infinite; }
.bma-motion-sw { position: absolute; bottom: 8px; left: -3%; width: 72px; height: 30px; margin-left: -36px; opacity: 0; animation: bma-motion-fsh 19s linear infinite; }
.bma-motion-rbv { display: block; width: 100%; height: 100%; overflow: visible; }
.bma-js .bma-motion-foot:not(.is-on) .bma-motion-strip *, .bma-js .bma-motion-foot:not(.is-on) .bma-motion-strip { animation-play-state: paused; }
@keyframes bma-motion-fsh {
0% { opacity: 0; left: -3%; }
4% { opacity: 1; left: -3%; animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
80% { opacity: 1; left: 103%; }
82% { opacity: 0; left: 103%; }
100% { opacity: 0; left: -3%; }
}
@keyframes bma-motion-fsmooth {
0% { opacity: 0; transform: scaleX(0); }
4% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
80% { opacity: 1; transform: scaleX(1); }
90% { opacity: 1; transform: scaleX(1); }
98% { opacity: 0; transform: scaleX(1); }
100% { opacity: 0; transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
.bma-motion-warm, .bma-motion-sun, .bma-motion-wave, .bma-motion-flake, .bma-motion-smooth, .bma-motion-sw { animation: none !important; }
.bma-motion-warm { opacity: .3; }
.bma-motion-sun { opacity: .7; transform: scale(.9); }
.bma-motion-flake { opacity: .8; }
.bma-motion-smooth { opacity: 1; transform: scaleX(.5); }
.bma-motion-sw { opacity: 1; left: 50%; }
}