/* morsidi.com: Bio motion ("the wreath grows"). Pairs with js/bio-motion.js.
   Only classes the script adds change anything, so without JS the awards render statically. */

/* inlined laurels replace the background image so stems and leaves can move */
.b2-aw .lau{position:relative}
.b2-aw .lau.bw-inl{background:none!important}
.b2-aw .lau.bw-inl svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px rgba(140,106,46,.25))}
.b2-aw .bw-leaf{transform-box:fill-box;transform-origin:50% 50%}

/* the CSS fade the base stylesheet gives the badges would fight the growth */
.bw-armed .aw-card,.bw-play .aw-card{opacity:1!important;transform:none!important;transition:none!important}

/* feature title rises out of a mask */
.bw-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.bw-wi{display:inline-block}

/* gold glint across the finished wreaths, once */
.b2-aw .lau::after{content:"";position:absolute;inset:-2px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 28%,rgba(255,248,222,.95) 47%,rgba(255,226,150,.55) 53%,transparent 72%) 0 0/100% 320% no-repeat;
  -webkit-mask:url(../images/laurel-gold.svg) center/contain no-repeat;mask:url(../images/laurel-gold.svg) center/contain no-repeat}
.bw-glint .aw-feature .lau::after{animation:bw-glint 1.2s cubic-bezier(.45,0,.55,1) .05s 1 both}
.bw-glint .aw-card .lau::after{animation:bw-glint .9s cubic-bezier(.45,0,.55,1) .45s 1 both}
@keyframes bw-glint{0%{opacity:1;background-position:0 100%}100%{opacity:0;background-position:0 0}}

/* hover: the badge's wreath opens a touch, as if presenting it */
.b2-aw .aw-card .lau{transform-origin:50% 92%;transition:rotate .45s cubic-bezier(.16,1,.3,1),translate .45s cubic-bezier(.16,1,.3,1)}
.b2-aw .aw-card:hover .lau.l{rotate:-7deg;translate:-2px 0}
.b2-aw .aw-card:hover .lau.r{rotate:7deg;translate:2px 0}

/* reduced motion: a gentle fade only */
.bw-fade .b2-aw .aw-feature,.bw-fade .b2-aw .aw-card{opacity:0!important;transform:none!important}
.bw-fade.bw-in .b2-aw .aw-feature,.bw-fade.bw-in .b2-aw .aw-card{opacity:1!important;transition:opacity .6s ease!important}
@media (prefers-reduced-motion:reduce){
  .b2-aw .lau::after{display:none}
  .b2-aw .aw-card:hover .lau.l,.b2-aw .aw-card:hover .lau.r{rotate:0deg;translate:0 0}
}