/* Goal cards: one size, white paper or night, one quiet drawing of the plan each. A card plays its drawing once
   when it comes to the front of the deck (data-active="on"). Ported from the design canvas. */

.cd{position:relative;width:300px;height:360px;font-family:var(--s-sans);overflow:hidden;border-radius:34px;text-align:left}
.cd-paper{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px #e4e4e7}
.cd-night{background:#08080d;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cd-glow{position:absolute;inset:-14%;pointer-events:none;background:radial-gradient(60% 46% at 12% 10%,#1d1840 0%,rgba(29,24,64,0) 72%),radial-gradient(52% 44% at 92% 92%,rgba(255,128,80,.36) 0%,rgba(255,128,80,0) 72%);animation:cd-drift 14s ease-in-out infinite alternate}
@keyframes cd-drift{from{transform:translate(0,0)}to{transform:translate(-5%,4%)}}
.cd-lab{position:absolute;left:26px;right:26px;top:24px;display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-title{position:absolute;left:26px;right:26px;top:48px}
.cd-title b{display:block;font-size:28px;line-height:32px;font-weight:300;letter-spacing:-.03em;white-space:nowrap}
.cd-title i{display:block;margin-top:2px;font-size:15px;line-height:20px;font-style:italic;font-weight:300}
.cd-note{position:absolute;left:26px;top:230px;font-size:13px;line-height:18px;font-weight:500}
.cd-big{position:absolute;left:26px;bottom:24px;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.cd-big b{font-size:64px;line-height:60px;font-weight:300;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.cd-big span{font-size:20px;line-height:24px;font-weight:300;letter-spacing:-.02em}
.cd-big i{font-size:15px;line-height:20px;font-style:italic;font-weight:300;margin-left:2px}
.cd-flare{position:absolute;width:10px;background:linear-gradient(90deg,rgba(255,31,26,0),rgba(255,31,26,.75) 22%,rgba(255,122,20,.65) 32%,rgba(242,217,31,.55) 42%,rgba(64,242,89,.46) 50%,rgba(31,217,242,.55) 58%,rgba(46,97,255,.65) 68%,rgba(148,56,255,.75) 78%,rgba(148,56,255,0));-webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);filter:blur(.8px);mix-blend-mode:screen;animation:cd-breathe 3s ease-in-out infinite}
@keyframes cd-breathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes cd-next{0%,100%{background:rgba(10,10,10,0)}50%{background:rgba(10,10,10,.22)}}
@keyframes cd-focus{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes cd-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cd-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* When the card comes to the front, its drawing plays once: cells fill, bars grow, steps tick off, the figure lands */
[data-active="on"] .cd-big,[data-active="on"] .cd-note{animation:cd-focus .8s ease-out both;animation-delay:.7s}
@media (prefers-reduced-motion:reduce){.cd *{animation:none!important}}

/* Spanish */
.sp-grid{position:absolute;left:26px;right:26px;top:124px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(3,17px);gap:4px}
.sp-grid i{display:block;border-radius:4px;box-shadow:inset 0 0 0 1px #dcdce0}
.sp-grid i[data-c="done"]{background:#0a0a0a;box-shadow:none}
.sp-grid i[data-c="next"]{box-shadow:inset 0 0 0 1.5px #0a0a0a;animation:cd-next 2.4s ease-in-out infinite}
@keyframes sp-fill{from{background:transparent;box-shadow:inset 0 0 0 1px #dcdce0}to{background:#0a0a0a;box-shadow:inset 0 0 0 1px transparent}}
[data-active="on"] .sp-grid i[data-c="done"]{animation:sp-fill .45s ease-out both;animation-delay:calc(.15s + var(--i) * 16ms)}

/* Role */
.rl ol{position:absolute;left:26px;right:26px;top:116px;margin:0;padding:0;list-style:none}
.rl li{position:relative;display:flex;align-items:center;gap:14px;height:31px}
.rl li::before{content:"";position:absolute;left:7px;top:-8px;width:1px;height:15px;background:rgba(255,255,255,.22)}
.rl li:first-child::before{display:none}
.rl li[data-st="done"]+li::before,.rl li[data-st="done"]:not(:first-child)::before{background:rgba(255,255,255,.62)}
.rl-m{position:relative;width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center}
.rl-t{font-size:16px;line-height:20px;font-weight:400;letter-spacing:-.005em;white-space:nowrap}
.rl li[data-st="now"] .rl-t{font-weight:500}
.rl-tick{display:block;width:9px;height:1px;background:rgba(255,255,255,.7)}
.rl svg polyline{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes rl-tickin{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
[data-active="on"].rl li{animation:cd-focus .6s ease-out both;animation-delay:calc(.15s + var(--i) * 90ms)}
[data-active="on"].rl svg polyline{animation:rl-tickin .45s ease-out both;animation-delay:calc(.35s + var(--i) * 90ms)}

/* Books */
.bk-shelf{position:absolute;left:31px;top:120px;height:86px;display:flex;align-items:flex-end;gap:2px}
.bk-shelf i{display:block;flex:none;width:8px;border-radius:1.5px 1.5px 0 0;transform-origin:50% 100%}
.bk-shelf i[data-st="done"]{background:#0a0a0a}
.bk-shelf i[data-st="now"]{box-shadow:inset 0 0 0 1.5px #0a0a0a;transform:rotate(-9deg);transform-origin:0 100%;margin:0 4px 0 2px;animation:cd-next 2.4s ease-in-out infinite}
.bk-shelf i[data-st="todo"]{box-shadow:inset 0 0 0 1px #d4d4d8}
.bk-board{position:absolute;left:24px;right:24px;top:206px;height:1.5px;background:#0a0a0a;transform-origin:0 50%}
[data-active="on"] .bk-shelf i[data-st="done"],[data-active="on"] .bk-shelf i[data-st="todo"]{animation:cd-rise .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.2s + var(--i) * 22ms)}
[data-active="on"] .bk-board{animation:cd-draw .6s cubic-bezier(.2,.8,.2,1) both}

/* Progress */
.mr-bars{position:absolute;left:26px;right:26px;top:122px;height:92px;display:flex;align-items:flex-end;justify-content:space-between}
.mr-bars>i{position:relative;display:block;width:8px;border-radius:2px;transform-origin:50% 100%}
.mr-bars>i[data-st="done"]{background:#fff}
.mr-bars>i[data-st="now"]{box-shadow:inset 0 0 0 1px #fff}
.mr-bars>i[data-st="todo"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
[data-active="on"] .mr-bars>i{animation:cd-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i) * 32ms)}
.mr-bars>i[data-st="race"]{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}

/* Lisbon */
.ls ol{position:absolute;left:26px;right:26px;top:116px;margin:0;padding:0;list-style:none}
.ls li{position:relative;display:flex;align-items:center;gap:14px;height:31px}
.ls li::before{content:"";position:absolute;left:7px;top:-8px;width:1px;height:15px;background:rgba(10,10,10,.16)}
.ls li:first-child::before{display:none}
.ls li[data-st="done"]+li::before,.ls li[data-st="done"]:not(:first-child)::before{background:rgba(10,10,10,.7)}
.ls-m{position:relative;width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center}
.ls-t{font-size:16px;line-height:20px;font-weight:400;letter-spacing:-.005em;white-space:nowrap}
.ls li[data-st="now"] .ls-t{font-weight:500}
.ls-tick{display:block;width:9px;height:1px;background:rgba(10,10,10,.7)}
.ls svg polyline{stroke-dasharray:1;stroke-dashoffset:0}
@keyframes ls-tickin{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
[data-active="on"].ls li{animation:cd-focus .6s ease-out both;animation-delay:calc(.15s + var(--i) * 90ms)}
[data-active="on"].ls svg polyline{animation:ls-tickin .45s ease-out both;animation-delay:calc(.35s + var(--i) * 90ms)}
.ls-now{display:block;width:11px;height:11px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #0a0a0a;animation:cd-next 2.4s ease-in-out infinite}

/* Sleep */
.sl-bars{position:absolute;left:26px;right:26px;top:122px;height:92px;display:flex;align-items:flex-end;justify-content:space-between}
.sl-bars i{display:block;width:8px;border-radius:2px;transform-origin:50% 100%}
.sl-bars i[data-st="late"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.sl-bars i[data-st="ok"]{background:#fff}
.sl-goal{position:absolute;left:22px;right:22px;top:170px;border-top:1px dashed rgba(255,255,255,.6);transform-origin:0 50%}
.sl-goal b{position:absolute;right:4px;top:-19px;font-size:11px;line-height:14px;font-style:normal;font-weight:500;font-variant-numeric:tabular-nums}
[data-active="on"] .sl-bars i{animation:cd-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i) * 36ms)}
[data-active="on"] .sl-goal{animation:cd-draw .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:.5s}

/* Piano */
.pn-keys{position:absolute;left:26px;right:26px;top:120px;height:72px}
.pn-w{position:absolute;top:0;bottom:0;box-sizing:border-box;border:1px solid #0a0a0a;border-left-width:0;border-radius:0 0 3px 3px;background:#fff}
.pn-w:first-child{border-left-width:1px}
.pn-w[data-st="now"]{animation:cd-next 2.4s ease-in-out infinite}
.pn-b{position:absolute;top:0;width:10px;height:44px;border-radius:0 0 2px 2px;background:#0a0a0a;z-index:1}
.pn-ruler{position:absolute;left:26px;right:26px;top:204px;height:8px;background:repeating-linear-gradient(90deg,#d4d4d8 0 1px,transparent 1px calc(100% / 72))}
.pn-ruler i{position:absolute;left:0;top:0;bottom:0;width:52.78%;background:repeating-linear-gradient(90deg,#0a0a0a 0 1px,transparent 1px calc(100% / 38));transform-origin:0 50%}
@keyframes pn-play{0%,100%{background:#fff}40%{background:#0a0a0a}}
[data-active="on"] .pn-w[data-st="now"]{animation:pn-play .5s ease-in-out both,cd-next 2.4s ease-in-out 1.6s infinite;animation-delay:calc(.25s + var(--i) * .28s),1.6s}
[data-active="on"] .pn-ruler i{animation:cd-draw 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.2s}

/* Home */
.hm-bars{position:absolute;left:26px;right:26px;top:122px;height:92px;display:flex;align-items:flex-end;justify-content:space-between}
.hm-bars>i{position:relative;display:block;width:6px;border-radius:2px;transform-origin:50% 100%}
.hm-bars>i[data-st="done"]{background:#fff}
.hm-bars>i[data-st="now"]{box-shadow:inset 0 0 0 1px #fff}
.hm-bars>i[data-st="todo"]{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
[data-active="on"] .hm-bars>i{animation:cd-rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i) * 32ms)}

/* Meditate */
.md-rings{position:absolute;left:102px;top:118px;width:96px;height:96px}
.md-rings i{position:absolute;left:50%;top:50%;box-sizing:border-box;border:1.2px solid #0a0a0a;animation:md-breathe 8s ease-in-out infinite}
.md-rings i:nth-child(1){width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:28px;opacity:.2}
.md-rings i:nth-child(2){width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:21px;opacity:.38;animation-delay:.3s}
.md-rings i:nth-child(3){width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:14px;opacity:.7;animation-delay:.6s}
@keyframes md-breathe{0%,100%{transform:scale(.88)}50%{transform:scale(1.06)}}
@keyframes md-open{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
[data-active="on"] .md-rings{animation:md-open 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:.15s}