/* Ceremony (ceremony.js): a shared frame (a number counting up, a word falling in, a line under it,
   tap to skip, a zoom away) with a picture that fits each moment. */
.ceremony{position:absolute;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(circle at 50% 46%,rgba(30,44,74,.74) 0,rgba(8,13,22,.9) 62%);color:#fff;pointer-events:none;-webkit-tap-highlight-color:transparent;overflow:hidden;animation:cerIn .4s ease-out both;}
.ceremony.is-page{position:fixed;}
.ceremony.is-blocking,.ceremony.is-blocking.is-leaving{pointer-events:auto;cursor:pointer;}
.cer-stage{position:relative;display:block;width:240px;height:150px;pointer-events:none;}
.cer-copy{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;}
.cer-number{position:relative;display:flex;align-items:baseline;justify-content:center;gap:4px;}
.cer-count{text-align:center;font:italic 108px/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgba(0,0,0,.8);animation:cerCount .5s .1s cubic-bezier(.2,.9,.25,1.25) both;}
.ceremony.is-long .cer-count{font-size:72px;}
.cer-suffix{font:italic 30px/1 Georgia,'Times New Roman',serif;color:#d8cfb8;text-shadow:0 2px 12px rgba(0,0,0,.8);}
.cer-suffix:empty{display:none;}
.ceremony.is-landed .cer-count{animation:cerLand .45s cubic-bezier(.2,.9,.25,1.4) both;color:#fff6dc;text-shadow:0 0 24px rgba(233,217,166,.75),0 2px 18px rgba(0,0,0,.8);}
.cer-word{position:relative;display:flex;gap:.42em;padding-left:.42em;font:italic 20px/1 Georgia,'Times New Roman',serif;text-shadow:0 1px 8px #000;white-space:pre;}
.cer-word:empty{display:none;}
.cer-word span{display:inline-block;animation:cerLetter .45s calc(.55s + var(--i) * .07s) cubic-bezier(.2,.9,.25,1.3) both;}
.cer-sub{position:relative;padding:5px 14px;border:1px solid rgba(233,217,166,.45);border-radius:999px;font:700 13px/1 system-ui,sans-serif;letter-spacing:.24em;color:#f3e9cf;animation:cerUp .5s 1s ease-out both;}
.cer-note{position:relative;color:#9fd5c2;font:800 15px/1 system-ui,sans-serif;letter-spacing:.06em;text-shadow:0 0 12px rgba(159,213,194,.45);animation:cerUp .5s 1.2s ease-out both;}
.cer-glow{position:absolute;top:50%;left:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;background:radial-gradient(circle,rgba(233,217,166,.28) 0,rgba(233,217,166,0) 65%);animation:cerGlow 2.2s ease-in-out both;}
.ceremony.is-leaving{pointer-events:none;animation:cerOut .55s ease-in forwards;}
.ceremony.is-leaving .cer-copy{animation:cerZoom .55s ease-in forwards;}
.ceremony.is-leaving .cer-stage{animation:cerStageOut .55s ease-in forwards;}
.ceremony.is-waiting,.ceremony.is-waiting *{animation-play-state:paused!important;}
.cer-sparks{position:absolute;top:50%;left:50%;width:0;height:0;}
.cer-sparks i{position:absolute;top:-3px;left:-3px;width:6px;height:6px;border-radius:50%;background:#f3e9cf;box-shadow:0 0 8px #e9d9a6;opacity:0;transform:rotate(var(--a)) translateY(0);}
.ceremony.is-landed .cer-sparks i{animation:cerSpark .8s cubic-bezier(.1,.8,.25,1) forwards;}

/* ring: the first ten words. The ring sits behind the number. */
.is-ring .cer-stage{position:absolute;top:50%;left:50%;width:240px;height:240px;margin:-120px 0 0 -120px;}
.cer-ring{position:absolute;inset:0;width:240px;height:240px;overflow:visible;transform:rotate(-90deg);animation:cerRingSpin 2.2s cubic-bezier(.2,.8,.2,1) both;}
.cer-ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;}
.cer-ring circle.is-draw{stroke:#e9d9a6;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:704;stroke-dashoffset:704;animation:cerDrawTo .95s .15s cubic-bezier(.45,0,.2,1) forwards;}
.is-ring.is-leaving .cer-stage{animation:cerRingOut .55s ease-in forwards;}

/* deck: a flashcard session. Seven cards fan out, then gather and lift as one deck. */
.cer-deck{position:absolute;left:50%;bottom:6px;width:0;height:0;}
.cer-deck i{position:absolute;left:-34px;bottom:0;width:68px;height:96px;border-radius:10px;background:linear-gradient(160deg,#fffdf7,#efe6d2);box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(198,183,144,.5);transform-origin:50% 120%;animation:cerFan 1.5s calc(.1s + (var(--k) + 3) * .04s) cubic-bezier(.2,.8,.2,1) both;}
.cer-deck i:nth-child(odd){background:linear-gradient(160deg,#f6efe0,#e6dcc4);}
.cer-deck i::after{content:"";position:absolute;inset:10px;border-radius:6px;border:1px solid rgba(198,183,144,.45);}
.is-deck.is-landed .cer-deck{animation:cerDeckLift .5s cubic-bezier(.2,.9,.25,1.3) both;}

/* stars: a result. Stars pop in order, then a bar fills to the score. */
.is-stars .cer-stage{height:96px;}
.cer-stars{position:absolute;left:50%;bottom:4px;display:flex;align-items:flex-end;gap:10px;transform:translateX(-50%);}
.cer-stars i{display:block;width:54px;height:54px;color:rgba(255,255,255,.16);animation:cerStarIn .5s calc(.3s + var(--i) * .22s) cubic-bezier(.2,.9,.25,1.5) both;}
.cer-stars i:nth-child(2){width:70px;height:70px;}
.cer-stars svg{width:100%;height:100%;fill:currentColor;stroke:rgba(255,255,255,.25);stroke-width:1;}
.cer-stars i.is-lit{color:#f1d291;filter:drop-shadow(0 0 10px rgba(241,210,145,.7));animation:cerStarIn .5s calc(.3s + var(--i) * .22s) cubic-bezier(.2,.9,.25,1.5) both,cerStarGlow 1.6s calc(1s + var(--i) * .22s) ease-in-out infinite;}
.cer-bar{position:relative;display:block;width:220px;height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.cer-bar i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--score,1) * 100%);border-radius:inherit;background:linear-gradient(90deg,#c6b790,#f1d291);transform-origin:left;animation:cerBar 1s .2s cubic-bezier(.3,.7,.2,1) both;}
.is-stars.is-perfect .cer-bar i{background:linear-gradient(90deg,#f1d291,#fff6dc,#f1d291);}
.is-stars.is-quiet .cer-bar i{background:linear-gradient(90deg,#6f7a91,#a9b4c9);}

/* focus: a review. Target rings close in on the number, with a crosshair. */
.is-focus .cer-stage{position:absolute;top:50%;left:50%;width:240px;height:240px;margin:-120px 0 0 -120px;}
.cer-focus{position:absolute;inset:0;}
.cer-focus i{position:absolute;inset:0;border:2px solid rgba(233,217,166,.55);border-radius:50%;opacity:0;animation:cerFocus .9s calc(var(--i) * .16s) cubic-bezier(.3,.7,.2,1) forwards;}
.cer-focus i:nth-child(2){inset:22px;border-color:rgba(233,217,166,.38);}
.cer-focus i:nth-child(3){inset:44px;border-style:dashed;border-color:rgba(233,217,166,.3);}
.cer-focus b{position:absolute;background:rgba(233,217,166,.4);animation:cerCross .7s .6s ease-out both;}
.cer-focus b.is-cross-h{left:-30px;right:-30px;top:50%;height:1px;}
.cer-focus b.is-cross-v{top:-30px;bottom:-30px;left:50%;width:1px;}
.is-focus.is-landed .cer-focus i:first-child{animation:cerFocus .9s cubic-bezier(.3,.7,.2,1) forwards,cerLock .6s ease-out 1;border-color:#f1d291;}

/* flame: a streak. The flame flickers; the last seven days light one after another. */
.is-flame .cer-stage{height:130px;}
.cer-flame{position:absolute;left:50%;bottom:0;width:90px;height:120px;margin-left:-45px;animation:cerRise .7s cubic-bezier(.2,.9,.25,1.2) both;}
.cer-flame i{position:absolute;left:50%;bottom:0;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;transform-origin:50% 100%;}
.cer-flame .is-outer{width:90px;height:120px;margin-left:-45px;background:radial-gradient(ellipse at 50% 80%,#f7b267 0,#e8743b 45%,rgba(232,116,59,0) 72%);animation:cerFlicker 1.1s ease-in-out infinite;}
.cer-flame .is-inner{width:56px;height:84px;margin-left:-28px;background:radial-gradient(ellipse at 50% 80%,#fff1c8 0,#f6c76a 50%,rgba(246,199,106,0) 75%);animation:cerFlicker .8s .1s ease-in-out infinite reverse;}
.cer-flame .is-core{width:26px;height:40px;margin-left:-13px;background:radial-gradient(ellipse at 50% 75%,#fffdf6 0,#fff1c8 60%,rgba(255,241,200,0) 80%);animation:cerFlicker .6s ease-in-out infinite;}
.cer-days{display:flex;gap:8px;padding-bottom:14px;}
.cer-days i{position:relative;display:block;width:16px;height:16px;border-radius:50%;border:1px solid rgba(233,217,166,.35);animation:cerUp .3s calc(.7s + var(--i) * .1s) ease-out both;}
.cer-days i.is-on{background:#f6c76a;border-color:#f6c76a;box-shadow:0 0 10px rgba(246,199,106,.7);animation:cerUp .3s calc(.7s + var(--i) * .1s) ease-out both,cerDayOn .4s calc(.75s + var(--i) * .1s) cubic-bezier(.2,.9,.25,1.6) both;}
.cer-days small{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:#a8a08f;font:600 9px/1 system-ui,sans-serif;font-style:normal;}

/* trophy: a reached goal. Rays turn behind a cup that rises; confetti bursts. */
.is-trophy .cer-stage{height:150px;}
.cer-rays{position:absolute;top:50%;left:50%;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(241,210,145,.16) 0 8deg,rgba(241,210,145,0) 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%);animation:cerRays 6s linear infinite,cerIn .6s ease-out both;}
.cer-trophy{position:absolute;left:50%;bottom:0;width:110px;height:110px;margin-left:-55px;animation:cerRise .8s .1s cubic-bezier(.2,.9,.25,1.25) both;}
.cer-trophy svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 16px rgba(241,210,145,.55));}
.cer-trophy .is-cup,.cer-trophy .is-stem,.cer-trophy .is-base{fill:#f1d291;}
.cer-trophy .is-base{fill:#c6a05a;}
.cer-trophy .is-handle{fill:none;stroke:#f1d291;stroke-width:3.5;stroke-linecap:round;}
.cer-confetti{position:absolute;left:50%;top:55%;width:0;height:0;}
.cer-confetti i{position:absolute;width:7px;height:11px;border-radius:2px;opacity:0;animation:cerConfetti 1.8s var(--d,.6s) cubic-bezier(.2,.7,.3,1) forwards;}

/* chips: a win at the table. Chips rain down into three stacks. */
.is-chips .cer-stage{height:150px;}
.cer-chips{position:absolute;left:50%;bottom:6px;width:0;height:0;}
.cer-chips i{position:absolute;left:calc(var(--x) - 19px);bottom:calc(var(--h) * 9px);width:38px;height:12px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#f3e9cf 0 30%,#c6b790 31% 56%,#8c7a4f 57% 64%,#e9d9a6 65%);box-shadow:0 3px 0 #7d6c45,0 5px 10px rgba(0,0,0,.4);opacity:0;animation:cerChip .55s var(--d) cubic-bezier(.5,0,.75,0) forwards,cerChipBounce .25s calc(var(--d) + .55s) ease-out;}

/* fold: a game lost. Two cards turn face down and drift away. */
.is-fold .cer-stage{height:130px;}
.cer-fold{position:absolute;left:50%;bottom:0;width:0;height:0;}
.cer-fold i{position:absolute;bottom:0;width:66px;height:94px;border-radius:9px;background:linear-gradient(160deg,#fffdf7,#efe6d2);box-shadow:0 6px 16px rgba(0,0,0,.45);animation:cerFoldCard 1.6s .2s cubic-bezier(.4,0,.2,1) both;}
.cer-fold i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(45deg,#26324a 0 5px,#1d2740 5px 10px);box-shadow:inset 0 0 0 1px rgba(198,183,144,.5);opacity:0;animation:cerBackOn 1.6s .2s steps(1) both;}
.cer-fold .is-left{left:-70px;--tilt:-10deg;--drift:-30px;}
.cer-fold .is-right{left:4px;--tilt:10deg;--drift:30px;animation-delay:.32s;}
.cer-fold .is-right::after{animation-delay:.32s;}

/* Tones for results: warm for a good one, cool and calm for a modest one. */
.ceremony.is-gold .cer-ring circle.is-draw{stroke:#f1d291;}
.ceremony.is-gold .cer-glow{background:radial-gradient(circle,rgba(241,210,145,.36) 0,rgba(241,210,145,0) 65%);}
.ceremony.is-quiet .cer-ring circle.is-draw{stroke:#a9b4c9;}
.ceremony.is-quiet .cer-glow{background:radial-gradient(circle,rgba(169,180,201,.22) 0,rgba(169,180,201,0) 65%);}

@keyframes cerIn{from{opacity:0}to{opacity:1}}
@keyframes cerGlow{0%{transform:scale(.3);opacity:0}45%{opacity:1}70%{transform:scale(1.05)}100%{transform:scale(1);opacity:.8}}
@keyframes cerRingSpin{from{transform:rotate(-200deg) scale(.6);opacity:0}30%{opacity:1}to{transform:rotate(-90deg) scale(1);opacity:1}}
@keyframes cerDrawTo{to{stroke-dashoffset:var(--to,0)}}
@keyframes cerCount{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cerLand{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes cerLetter{from{transform:translateY(-22px) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes cerUp{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes cerSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(-60px) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px) scale(.3)}}
@keyframes cerOut{to{opacity:0}}
@keyframes cerZoom{to{transform:scale(2.2);opacity:0}}
@keyframes cerStageOut{to{transform:translateY(-30px) scale(1.15);opacity:0}}
@keyframes cerRingOut{to{transform:scale(1.8);opacity:0}}
@keyframes cerFan{0%{transform:translateY(60px) rotate(0) scale(.7);opacity:0}15%{opacity:1}45%{transform:translateX(calc(var(--k) * 26px)) rotate(calc(var(--k) * 11deg))}80%{transform:translateX(calc(var(--k) * 26px)) rotate(calc(var(--k) * 11deg))}100%{transform:translateX(calc(var(--k) * 1.5px)) translateY(calc(var(--k) * -1px)) rotate(calc(var(--k) * 1deg));opacity:1}}
@keyframes cerDeckLift{0%{transform:none}40%{transform:translateY(-10px) scale(1.06)}100%{transform:none}}
@keyframes cerStarIn{0%{transform:scale(0) rotate(-60deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes cerStarGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(241,210,145,.6))}50%{filter:drop-shadow(0 0 18px rgba(241,210,145,.95))}}
@keyframes cerBar{from{transform:scaleX(0)}to{transform:none}}
@keyframes cerFocus{0%{transform:scale(2.2);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes cerCross{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
@keyframes cerLock{0%{box-shadow:0 0 0 0 rgba(241,210,145,.7)}100%{box-shadow:0 0 0 18px rgba(241,210,145,0)}}
@keyframes cerRise{from{transform:translateY(40px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes cerFlicker{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.94,1.06) rotate(2deg)}50%{transform:scale(1.04,.96) rotate(-2deg)}75%{transform:scale(.97,1.04) rotate(1deg)}}
@keyframes cerDayOn{from{transform:scale(.3)}to{transform:none}}
@keyframes cerRays{to{transform:rotate(360deg)}}
@keyframes cerConfetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r))}}
@keyframes cerChip{0%{transform:translateY(-420px);opacity:0}10%{opacity:1}100%{transform:none;opacity:1}}
@keyframes cerChipBounce{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:none}}
@keyframes cerFoldCard{0%{transform:translateY(30px) rotate(0);opacity:0}15%{transform:none;opacity:1}45%{transform:rotateY(0) rotate(var(--tilt))}60%{transform:rotateY(90deg) rotate(var(--tilt))}75%{transform:rotateY(0) rotate(var(--tilt))}100%{transform:translate(var(--drift),40px) rotate(calc(var(--tilt) * 2.5));opacity:.35}}
@keyframes cerBackOn{0%,59%{opacity:0}60%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.ceremony,.ceremony *{animation:none!important}.cer-ring circle.is-draw{stroke-dashoffset:var(--to,0)}.cer-sparks,.cer-confetti{display:none}}