/* Little Smiles delight layer (live site wide). Colours: logo #86CB31 #D258D3 #EE108E #F6BE42 #4ED7DE #F2671E, kit yellow #F7D252. */
body.ls-fun img[src*="spade-base"]{animation:lsfFloat 1.5s ease-out both}
@keyframes lsfFloat{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body.ls-fun .lsf-card{transition:transform 250ms ease,box-shadow 250ms ease}
body.ls-fun .lsf-card:hover,body.ls-fun .lsf-card:focus-within{transform:translateY(-6px);box-shadow:0 14px 30px rgba(76,74,65,.14)}
body.ls-fun .lsf-logo{position:relative}
body.ls-fun .lsf-hand{position:absolute;pointer-events:none;visibility:hidden;clip-path:inset(0 75% 0 0);transform-origin:12% 96%}
body.ls-fun .lsf-waving .lsf-hand{visibility:visible;animation:lsfWave 600ms ease-in-out}
body.ls-fun .lsf-waving .lsf-rest{clip-path:inset(0 0 0 25%)}
@keyframes lsfWave{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(8deg)}}
.lsf-burst{position:fixed;width:0;height:0;pointer-events:none;z-index:99999}
.lsf-burst span{position:absolute;left:0;top:0;display:block;line-height:0;will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  body.ls-fun img[src*="spade-base"]{animation:none}
  body.ls-fun .lsf-card{transition:box-shadow 250ms ease}
  body.ls-fun .lsf-card:hover,body.ls-fun .lsf-card:focus-within{transform:none}
  body.ls-fun .lsf-waving .lsf-hand{animation:none;visibility:hidden}
  body.ls-fun .lsf-waving .lsf-rest{clip-path:none}
}