/* Koi behind the Wellbeing panels (js/koi.js): faint, slow, flowing. */
.wellbeing-screen{position:relative}
.wellbeing-screen>:not(.koi-pond){position:relative;z-index:1}
.koi-pond{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.wellbeing-screen:not(.active) .koi-pond{display:none}
@media(prefers-reduced-motion:reduce){.koi-pond{display:none}}

/* Each fish travels its oval and faces along it; a soft glow keeps it ethereal. */
.koi{position:absolute;top:0;left:0;width:var(--koi-size,220px);height:calc(var(--koi-size,220px) * .4);opacity:.55;offset-rotate:auto;offset-anchor:center;animation:koi-swim var(--swim) linear var(--start) infinite;filter:drop-shadow(0 0 6px rgba(255,250,240,.45));will-change:offset-distance}
@keyframes koi-swim{from{offset-distance:0%}to{offset-distance:100%}}
.koi-art{display:block;width:100%;height:100%;overflow:visible}

/* The swimming wave: the front turns a little one way, the rear the other, the
   tail a beat later and its tip later still, so the tail flows rather than flaps. */
.koi-front,.koi-rear,.koi-tail,.koi-streamer,.koi-fin{transform-box:view-box;animation:koi-wave var(--beat) ease-in-out infinite alternate}
.koi-front{transform-origin:108px 40px;--bend:-2deg}
.koi-rear{transform-origin:108px 40px;--bend:7deg;animation-delay:calc(var(--beat) * -.18)}
.koi-tail{transform-origin:64px 40px;--bend:14deg;animation-delay:calc(var(--beat) * -.5)}
/* Each tail streamer sways from its root, a beat after the one before (delays set in koi.js). */
.koi-streamer{--bend:9deg;animation-duration:calc(var(--beat) * 1.4)}
.koi-fin-up{transform-origin:148px 32px;--bend:-13deg;animation-duration:calc(var(--beat) * 1.6)}
.koi-fin-down{transform-origin:148px 48px;--bend:13deg;animation-duration:calc(var(--beat) * 1.6)}
@keyframes koi-wave{from{transform:rotate(calc(var(--bend) * -1))}to{transform:rotate(var(--bend))}}

/* The panels let a little through, so the koi glimmer beneath them like fish
   under the surface while the text keeps its contrast. */
.wellbeing-screen .wellbeing-feature{background-color:rgba(52,75,58,.74)}
.wellbeing-screen .wellbeing-practice,.wellbeing-screen .wellbeing-advice{background-color:rgba(247,239,231,.7)}