/* Ramo logo animation. Plays once, about 1.55 s. Pure CSS on inline SVG.
   Markup: assets/snippets/logo-lockup-animated.html */
.ramo-trunk, .ramo-branch { stroke-dasharray: 100 101; stroke-dashoffset: 100; }
.ramo-trunk  { animation: ramo-grow .5s .2s cubic-bezier(.3,.7,.3,1) forwards; }
.ramo-branch { animation: ramo-grow .5s .7s cubic-bezier(.3,.7,.3,1) forwards; }
.ramo-dot  { transform-box: fill-box; transform-origin: center;
             transform: scale(0); animation: ramo-pop .25s ease-out forwards; }
.ramo-dot.top { animation-delay: .65s; }
.ramo-leaf { transform-origin: 0 0; transform: scale(0);
             animation: ramo-bloom .35s 1.15s ease-out forwards; }
.ramo-word { opacity: 0; animation: ramo-fade .5s 1.05s ease-out forwards; }

@keyframes ramo-grow  { to { stroke-dashoffset: 0; } }
@keyframes ramo-pop   { 60% { transform: scale(1.18); } to { transform: scale(1); } }
@keyframes ramo-bloom { 65% { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes ramo-fade  { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ramo-trunk, .ramo-branch, .ramo-dot, .ramo-leaf, .ramo-word {
    animation: none; stroke-dashoffset: 0; transform: none; opacity: 1;
  }
}