/* Round animated logo "Le Résolu" (the third animated proposal, in a circle).
   4 s loop: letters stamp in, the O draws, the check strikes with a flash and an
   inverted frame.
   Sizes are in em of the badge (--b), so one value scales the whole thing. */
.logo{display:flex;align-items:center;text-decoration:none;color:#1a1608}
.badge{--b:84px;font-size:var(--b);width:1em;height:1em;flex:none;border-radius:50%;position:relative;overflow:hidden;display:grid;place-items:center;isolation:isolate;
  background:#ffd93d;box-shadow:0 0 0 .03em #1a1608,0 .1em .22em -.1em rgba(26,22,8,.55);animation:bdg-bg 4s step-end infinite}
.badge *{animation-iteration-count:infinite;animation-fill-mode:both}
.b-fl{position:absolute;inset:0;background:#fff;opacity:0;z-index:3;animation:bdg-fl 4s step-end infinite}
.b-shake{position:relative;z-index:1;animation:bdg-shake 4s linear infinite}
.b-word{font:800 .205em/1 "Barlow Condensed","Arial Narrow",Impact,sans-serif;letter-spacing:.01em;color:#1a1608;display:flex;align-items:center}
.b-word .ch{display:inline-block;animation:bdg-stamp 4s cubic-bezier(.2,.9,.3,1.3) infinite both}
.b-o{position:relative;display:inline-flex;align-items:center;justify-content:center}
.b-o svg{width:.66em;height:.66em;margin:0 .03em;overflow:visible}
.b-o circle{fill:none;stroke:#1a1608;stroke-width:5.5;stroke-dasharray:100;transform:rotate(-90deg);transform-origin:20px 20px;animation:bdg-ring 4s cubic-bezier(.6,0,.3,1) infinite both}
.b-o path{fill:none;stroke:#d81b67;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:bdg-chk 4s cubic-bezier(.7,0,.2,1) infinite both}

@keyframes bdg-bg{0%{background:#ffd93d}40%{background:#1a1608}44%{background:#ffd93d}95%{background:#1a1608}}
@keyframes bdg-fl{0%{opacity:0}39%{opacity:1}40%{opacity:0}}
@keyframes bdg-shake{0%,40%{transform:none}41%{transform:translate(-.03em,.02em) rotate(-2deg)}42.5%{transform:translate(.022em,-.014em)}44%{transform:translate(-.01em,.006em)}45.5%,100%{transform:none}}
@keyframes bdg-stamp{0%{opacity:0;transform:scale(3.2);filter:blur(.05em)}5%{opacity:1;transform:scale(.9);filter:none}8%,91%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.4)}}
@keyframes bdg-ring{0%,18%{stroke-dashoffset:100}34%,91%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}
@keyframes bdg-chk{0%,35%{stroke-dashoffset:100}39%,91%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:100}}

.top .badge{--b:72px}
@media (max-width:860px){.badge,.top .badge{--b:70px}}
/* no motion: show the finished logo */
@media (prefers-reduced-motion:reduce){
  .badge,.badge *{animation:none!important}
  .b-fl{opacity:0}
}