/* A stationary invitation, relative finger movement, then a quiet reveal. */
.moment-scene{--touch-x:50%;--light-x:50%;--light-y:47.5%;--image-drift:0px}
.moment-choices{padding:10px 15px 14px}
.moment-choice{display:flex;flex-direction:column;gap:0;min-height:126px;padding:12px 17px 11px;overflow:visible;border-color:color-mix(in srgb,var(--gold) 38%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 8%,var(--ink-deep)),var(--ink-deep));isolation:isolate}
.moment-choice::before{inset:5px;opacity:.4}
.moment-choice::after{display:none}
.moment-choice .moment-word{font-family:var(--sans);font-size:1rem;line-height:1.6;text-align:center;letter-spacing:.025em}
.moment-choice .moment-touch{font-size:.8125rem;line-height:1.65;text-align:center;color:var(--muted);margin:0}
.moment-track{position:relative;display:block;width:100%;height:52px;min-height:52px;pointer-events:none}
.moment-rail{position:absolute;left:14px;right:14px;top:50%;height:1px;background:color-mix(in srgb,var(--gold) 35%,transparent)}
.moment-rail::before,.moment-rail::after{content:"";position:absolute;width:4px;height:4px;top:-1.5px;border-radius:50%;background:var(--gold);opacity:.6}
.moment-rail::before{left:0}.moment-rail::after{right:0}
.moment-trail{position:absolute;left:14px;right:14px;top:calc(50% - 1px);height:3px;background:linear-gradient(90deg,transparent,var(--gold));clip-path:inset(0 calc(100% - var(--touch-x)) 0 0);opacity:0;transition:opacity .2s}
.moment-orb{position:absolute;left:calc(14px + (100% - 28px)*var(--touch-ratio,.5));top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 38% 32%,#fffdf2 0%,var(--gold) 65%,color-mix(in srgb,var(--gold) 70%,var(--ink-deep)));box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 9%,transparent),0 0 22px color-mix(in srgb,var(--gold) 32%,transparent);transition:box-shadow .25s,opacity .2s}
.moment-orb::before{content:"";position:absolute;inset:-10px;border:1px solid color-mix(in srgb,var(--gold) 44%,transparent);border-radius:50%;transition:transform .25s}
.moment-light{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;opacity:0;transition:opacity .4s}
.moment-light i{position:absolute;left:var(--light-x);top:var(--light-y);border-radius:50%;transform:translate(-50%,-50%)}
.moment-halo{width:240px;height:240px;background:radial-gradient(circle,#ffedc44f 0%,#fff1d61c 33%,transparent 69%);mix-blend-mode:screen}
.moment-ripple{width:112px;height:112px;border:1px solid #fff5d890;box-shadow:0 0 0 20px #fff0ce0a,0 0 0 43px #fff0ce08;opacity:.7}
.moment-focus{width:9px;height:9px;background:#fff4d9;box-shadow:0 0 18px #fff0cd,0 0 43px #fff0cdaa}
.moment-scene .art-window img{transition:transform .4s ease-out,filter .45s ease}
.is-holding .art-window img,.is-adjusting .art-window img{transform:translateX(var(--image-drift)) scale(1.055);filter:brightness(1.07) saturate(1.04)}
.is-holding .moment-light,.is-adjusting .moment-light,.is-working .moment-light{opacity:1}
.is-holding .moment-trail,.is-adjusting .moment-trail,.is-working .moment-trail{opacity:.9}
.is-holding .moment-ripple{animation:touch-ripple 2.8s ease-out infinite}
.is-held.moment-choice{transform:none;border-color:var(--gold);box-shadow:inset 0 0 30px color-mix(in srgb,var(--gold) 9%,transparent),0 0 18px color-mix(in srgb,var(--gold) 10%,transparent)}
.is-held .moment-orb,.is-adjusting .moment-orb{animation:none;box-shadow:0 0 0 10px color-mix(in srgb,var(--gold) 15%,transparent),0 0 28px color-mix(in srgb,var(--gold) 50%,transparent)}
.is-held .moment-orb::before{transform:scale(1.12)}
.is-outside .moment-light,.is-outside .moment-trail{opacity:.15}
.is-outside .moment-choice{border-style:dashed;border-color:var(--muted);box-shadow:none}
.is-outside .moment-orb{opacity:.4;box-shadow:none}
.is-outside .moment-ripple{animation-play-state:paused}
.is-working .moment-light i{transition:left .6s ease-in-out,top .6s ease-in-out}
.is-working .art-window img{transform:scale(1.035);filter:brightness(1.07)}
.is-working .moment-halo{animation:light-gather 1.8s ease-in-out infinite}
.is-working .moment-ripple{animation:light-settle 1.8s ease-in-out infinite}
.is-working .moment-focus{animation:light-core 1.8s ease-in-out infinite}
.is-working .moment-orb{animation:orb-settle 1.8s ease-in-out infinite}
.is-revealed .moment-choices{visibility:hidden}
.is-revealed .moment-light{opacity:0}
.moment-reveal{z-index:3;background:linear-gradient(155deg,color-mix(in srgb,var(--ink-deep) 93%,transparent),color-mix(in srgb,var(--bg) 88%,transparent));border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:inset 0 0 0 6px #ffffff03,0 14px 35px #0003;gap:19px;animation:moment-unfold .65s cubic-bezier(.2,.75,.25,1) both}
.moment-reveal .hexagram-lines{padding:14px 0;gap:5px;width:46px}
.moment-reveal-title{font-size:1.5rem;letter-spacing:.04em}
.moment-reveal>p:last-child{color:var(--muted);font-size:.875rem;line-height:1.8}
.moment-feedback{min-height:40px;line-height:1.8}
@keyframes touch-ripple{0%{transform:translate(-50%,-50%) scale(.6);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.65);opacity:0}}
@keyframes light-gather{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(.64);opacity:1}}
@keyframes light-settle{0%,100%{transform:translate(-50%,-50%) scale(1.2);opacity:.35}55%{transform:translate(-50%,-50%) scale(.3);opacity:.9}}
@keyframes light-core{50%{box-shadow:0 0 25px #fff0cd,0 0 65px #fff0cdaa;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes orb-settle{0%,100%{transform:translate(-50%,-50%);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.18);opacity:1}}
@keyframes moment-unfold{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:359px){.moment-choices{padding:9px 11px 12px}.moment-choice{padding-left:17px;padding-right:17px}.moment-choice .moment-word{font-size:.9375rem}.moment-choice .moment-touch{font-size:.8125rem}}
@media(max-height:700px) and (max-width:600px){.moment-scene .art-window{height:185px}.moment-choice{min-height:119px;padding-top:10px;padding-bottom:9px}.moment-track{height:48px;min-height:48px}}
@media(prefers-reduced-motion:reduce){.moment-light,.moment-light i,.moment-orb,.moment-choice,.moment-scene .art-window img,.moment-reveal{animation:none!important;transition:none!important}.is-holding .art-window img,.is-adjusting .art-window img,.is-working .art-window img{transform:none;filter:none}.is-holding .moment-ripple,.is-working .moment-ripple{opacity:.6}}