/* Ornn animated logo: a gear with an N inside that opens into ORNN ROBOTICS.
   Put the markup from ornn-logo-hover.svg inside <a class="ornn-logo"> and set `color`.
   Opens on hover, keyboard focus, or when the link has the class .is-open. */
.ornn-logo { display: inline-block; color: inherit; line-height: 0; }
.ornn-logo__svg { display: block; height: 100%; width: auto; overflow: visible; }
.ornn-logo__svg g { transform-box: fill-box; transform-origin: center; }

/* closed: the icon */
.ol-cog   { transform: rotate(0deg); transition: transform 1.1s cubic-bezier(.65,0,.2,1); }
.ol-teeth { transition: transform .7s cubic-bezier(.6,0,.3,1), opacity .5s ease; }
.ol-n4    { transform: translate(-2170.5px,0px) scale(0.2674) rotate(45deg); stroke-width: 187.5px;
            transition: transform 1s cubic-bezier(.65,0,.2,1), stroke-width 1s cubic-bezier(.65,0,.2,1); }
.ol-r, .ol-n3 { opacity: 0; transform: translateX(-160px) scale(.6); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.ol-word  { opacity: 0; transform: translateX(-140px); transition: opacity .35s ease, transform .5s cubic-bezier(.2,.8,.2,1); }

/* open: the full name */
.ornn-logo:hover .ol-cog, .ornn-logo:focus-visible .ol-cog, .ornn-logo.is-open .ol-cog { transform: rotate(-360deg); }
.ornn-logo:hover .ol-teeth, .ornn-logo:focus-visible .ol-teeth, .ornn-logo.is-open .ol-teeth { transform: scale(.7); opacity: 0; transition-delay: .25s; }
.ornn-logo:hover .ol-n4, .ornn-logo:focus-visible .ol-n4, .ornn-logo.is-open .ol-n4 { transform: translate(0px,0px) scale(1) rotate(0deg); stroke-width: 0px; }
.ornn-logo:hover .ol-r, .ornn-logo:focus-visible .ol-r, .ornn-logo.is-open .ol-r { opacity: 1; transform: none; transition-delay: .5s; }
.ornn-logo:hover .ol-n3, .ornn-logo:focus-visible .ol-n3, .ornn-logo.is-open .ol-n3 { opacity: 1; transform: none; transition-delay: .6s; }
.ornn-logo:hover .ol-word, .ornn-logo:focus-visible .ol-word, .ornn-logo.is-open .ol-word { opacity: 1; transform: none; transition-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
  .ol-cog, .ol-teeth, .ol-n4, .ol-r, .ol-n3, .ol-word { transition: none; }
}