/* Practical Guide: animated action points. Green = start doing, red = stop doing. */
#r-body{--go:#3DD68C;--go-bg:rgba(61,214,140,.075);--go-bd:rgba(61,214,140,.38);--stop:#FF6B63;--stop-bg:rgba(255,107,99,.075);--stop-bd:rgba(255,107,99,.42);--badge-fg:#04140C}
html.light #r-body{--go:#14854F;--go-bg:rgba(20,133,79,.08);--go-bd:rgba(20,133,79,.42);--stop:#C23A32;--stop-bg:rgba(194,58,50,.07);--stop-bd:rgba(194,58,50,.42);--badge-fg:#fff}
#r-body .ga-go{--c:var(--go);--cb:var(--go-bg);--cd:var(--go-bd)}
#r-body .ga-stop{--c:var(--stop);--cb:var(--stop-bg);--cd:var(--stop-bd)}

/* entrance */
#r-body .ga-p{opacity:0}
#r-body .ga-in{animation:gaUp .7s cubic-bezier(.2,.9,.3,1.15) var(--d,0s) both}
#r-body .ga-in.ga-stop{animation:gaSlam .75s cubic-bezier(.2,.8,.3,1) var(--d,0s) both}
@keyframes gaUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gaSlam{0%{opacity:0;transform:translateX(-26px)}50%{opacity:1;transform:translateX(6px)}68%{transform:translateX(-4px)}84%{transform:translateX(2px)}100%{opacity:1;transform:none}}

/* rows and cards */
#r-body .g-row.ga-go,#r-body .g-row.ga-stop,#r-body .g-card.ga-go,#r-body .g-card.ga-stop{background:var(--cb);border-color:var(--cd);border-left:3px solid var(--c)}
#r-body .g-card.ga-go .g-lab,#r-body .g-card.ga-stop .g-lab{color:var(--c)}
#r-body .ga-go .g-ico,#r-body .ga-stop .g-ico{position:relative;color:var(--c);border-color:var(--cd);background:var(--cb)}
#r-body .ga-go .g-ico::after,#r-body .ga-stop .g-ico::after{content:"+";position:absolute;top:-7px;right:-7px;width:17px;height:17px;border-radius:50%;background:var(--c);color:var(--badge-fg);font:700 13px/17px var(--body);text-align:center;transform:scale(0)}
#r-body .ga-stop .g-ico::after{content:"\00d7";font-size:15px}
#r-body .ga-in .g-ico::after{animation:gaBadge .5s cubic-bezier(.2,1.8,.4,1) calc(var(--d,0s) + .45s) both}
@keyframes gaBadge{from{transform:scale(0)}to{transform:scale(1)}}
#r-body .ga-tag{display:inline-block;margin-left:10px;padding:2px 8px 1px;border:1px solid var(--cd);border-radius:999px;font:600 10.5px/1.5 var(--body);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--c);vertical-align:3px;white-space:nowrap}
#r-body .g-lab .ga-tag{margin-left:auto;vertical-align:0}

/* ticks */
#r-body .g-tick.ga-go i,#r-body .g-tick.ga-stop i{border-color:var(--c)}
#r-body .g-tick.ga-go i::before,#r-body .g-tick.ga-stop i::before{content:"+";color:var(--c);font:600 16px/1 var(--body);margin-top:-1px}
#r-body .g-tick.ga-stop i::before{content:"\00d7";font-size:19px;margin-top:-2px}
#r-body .g-tick input:checked+i::before{display:none}
#r-body .g-tick.ga-go input:checked+i,#r-body .g-tick.ga-stop input:checked+i{background:var(--c);border-color:var(--c)}
#r-body .g-tick input:checked+i{animation:gaTickPop .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes gaTickPop{0%{transform:scale(.7);box-shadow:0 0 0 0 var(--cd,rgba(255,255,255,.4))}60%{transform:scale(1.18)}100%{transform:scale(1);box-shadow:0 0 0 14px transparent}}
#r-body .g-tick.ga-in i{animation:gaRing 1.1s ease-out var(--d,0s) both}
#r-body .g-tick.ga-in input:checked+i{animation:none}
@keyframes gaRing{0%{box-shadow:0 0 0 0 var(--cd)}100%{box-shadow:0 0 0 12px transparent}}

/* "next steps" list */
#r-body .g-acts{display:grid;gap:10px;margin:1.2em 0 1.6em}
#r-body .g-act{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--cd);border-left:3px solid var(--c);border-radius:6px;background:var(--cb);font-size:17px;line-height:1.5;color:var(--ink)}
html.light #r-body .g-act{color:#2A2724}
#r-body .g-act i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--cd);color:var(--c)}
#r-body .g-act svg{width:18px;height:18px}
#r-body .g-act.ga-in svg{animation:gaNudge 1.1s ease-in-out calc(var(--d,0s) + .4s) 2}
@keyframes gaNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* icon animations (once on reveal, again on hover or tap) */
#r-body .g-svg path,#r-body .g-svg circle,#r-body .g-svg rect{transform-box:fill-box;transform-origin:center}
#r-body .ga-ico-on .g-svg{animation:gaPop .6s cubic-bezier(.2,1.6,.4,1) var(--id,0s) both}
#r-body .ga-ico-on [data-ic=clock]{animation:none}
#r-body .ga-ico-on [data-ic=clock] path{transform-box:view-box;transform-origin:12px 12px;animation:gaSpin 1.1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=users]{animation:gaBob .8s ease-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=flag]{transform-origin:20% 90%;animation:gaWave 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=repeat]{animation:gaSpin 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=zap]{animation:gaFlick .8s linear var(--id,0s) both}
#r-body .ga-ico-on [data-ic=bellOff]{transform-origin:50% 12%;animation:gaRing2 .9s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=bellOff] path:last-child{--dl:40;animation:gaDraw .5s ease-out calc(var(--id,0s) + .55s) both}
#r-body .ga-ico-on [data-ic=grid]{animation:none}
#r-body .ga-ico-on [data-ic=grid] rect{animation:gaPop .55s cubic-bezier(.2,1.6,.4,1) var(--id,0s) both}
#r-body .ga-ico-on [data-ic=grid] rect:nth-child(2){animation-delay:calc(var(--id,0s) + .1s)}
#r-body .ga-ico-on [data-ic=grid] rect:nth-child(3){animation-delay:calc(var(--id,0s) + .2s)}
#r-body .ga-ico-on [data-ic=grid] rect:nth-child(4){animation-delay:calc(var(--id,0s) + .3s)}
#r-body .ga-ico-on [data-ic=bars]{animation:none}
#r-body .ga-ico-on [data-ic=bars] path{transform-origin:50% 100%;animation:gaGrowY .8s cubic-bezier(.2,.9,.3,1.2) var(--id,0s) both}
#r-body .ga-ico-on [data-ic=moon]{animation:gaMoon .9s ease-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=sliders]{animation:none}
#r-body .ga-ico-on [data-ic=sliders] path{--dl:200;animation:gaDraw .9s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=heart]{animation:gaBeat 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=scale]{animation:gaTilt 1.1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=eye]{animation:gaBlink 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=signpost]{transform-origin:50% 100%;animation:gaTilt 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=sprout]{transform-origin:50% 100%;animation:gaGrowY .9s cubic-bezier(.2,.9,.3,1.25) var(--id,0s) both}
#r-body .ga-ico-on [data-ic=star]{animation:gaTwinkle .9s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=flask]{transform-origin:50% 100%;animation:gaTilt 1s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=check]{animation:none}
#r-body .ga-ico-on [data-ic=check] path:first-child{--dl:40;animation:gaDraw .6s ease-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=help]{animation:gaTilt .9s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=cal]{animation:gaDrop .7s cubic-bezier(.3,1.5,.5,1) var(--id,0s) both}
#r-body .ga-ico-on [data-ic=home]{animation:gaBounce .8s ease-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=sun]{animation:gaSpin 1.6s ease-in-out var(--id,0s) both}
#r-body .ga-ico-on [data-ic=userPlus]{animation:none}
#r-body .ga-ico-on [data-ic=userPlus] path:last-child{animation:gaPop .6s cubic-bezier(.2,1.8,.4,1) calc(var(--id,0s) + .2s) both}
#r-body .ga-ico-on [data-ic=userPlus] circle,#r-body .ga-ico-on [data-ic=userPlus] path:first-child{animation:gaBob .7s ease-out var(--id,0s) both}

@keyframes gaPop{0%{transform:scale(.4);opacity:.2}100%{transform:scale(1);opacity:1}}
@keyframes gaSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes gaBob{0%{transform:translateY(0)}40%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes gaWave{0%{transform:rotate(0)}30%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@keyframes gaFlick{0%{opacity:1}12%{opacity:.2}24%{opacity:1;transform:scale(1.18)}38%{opacity:.3}52%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes gaRing2{0%,100%{transform:rotate(0)}15%{transform:rotate(16deg)}30%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
@keyframes gaDraw{from{stroke-dasharray:var(--dl) var(--dl);stroke-dashoffset:var(--dl)}to{stroke-dasharray:var(--dl) var(--dl);stroke-dashoffset:0}}
@keyframes gaGrowY{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes gaMoon{from{transform:rotate(-70deg) scale(.6);opacity:.2}to{transform:none;opacity:1}}
@keyframes gaBeat{0%,100%{transform:scale(1)}20%{transform:scale(1.28)}40%{transform:scale(1)}60%{transform:scale(1.2)}}
@keyframes gaTilt{0%{transform:rotate(0)}30%{transform:rotate(-14deg)}60%{transform:rotate(10deg)}100%{transform:rotate(0)}}
@keyframes gaBlink{0%,100%{transform:scaleY(1)}30%,40%{transform:scaleY(.08)}70%{transform:scaleY(1.12)}}
@keyframes gaTwinkle{0%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.3)}100%{transform:rotate(144deg) scale(1)}}
@keyframes gaDrop{0%{transform:translateY(-9px);opacity:0}100%{transform:none;opacity:1}}
@keyframes gaBounce{0%{transform:translateY(0)}35%{transform:translateY(-5px)}60%{transform:translateY(0)}78%{transform:translateY(-2px)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  #r-body .ga-p{opacity:1}
  #r-body .ga-in,#r-body .ga-in *,#r-body .ga-ico-on *,#r-body .ga-ico-on .g-svg,#r-body .g-tick.ga-in i{animation:none!important}
  #r-body .ga-go .g-ico::after,#r-body .ga-stop .g-ico::after{transform:scale(1)}
}