/* Ten little worlds. Decorations live behind the controls and never capture a click. */
.feeling-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:0}
.task-card:is(.atmosphere-calm,.atmosphere-spark,.atmosphere-adventure,.atmosphere-frost,.atmosphere-bloom,.atmosphere-puzzle,.atmosphere-celebration){padding-bottom:66px}
.sample-frost,.task-card.atmosphere-frost{background:#e5f1f6;border-color:#adcbdc}
.sample-bloom,.task-card.atmosphere-bloom{background:#eef2e5;border-color:#bccbac}
.sample-puzzle,.task-card.atmosphere-puzzle{background:#ece8f6;border-color:#c7b8dc}
.sample-celebration,.task-card.atmosphere-celebration{background:#f8e9ed;border-color:#dec0d1}
.badge-frost{color:#3c6578;background:#d2e6ef}.badge-bloom{color:#4c6744;background:#e0eacb}.badge-puzzle{color:#65517e;background:#e2d8f2}.badge-celebration{color:#854f6e;background:#f1d8e3}
/* Sunshine rises above a warm tide; clouds send real rain across the lower edge. */
.task-card.atmosphere-pleasant,.task-card.atmosphere-storm{padding-bottom:66px}
.task-card.atmosphere-pleasant .little-sun{bottom:-6px;right:35px;width:80px;height:80px;animation:day-sun-rise 7s ease-in-out infinite}
.task-card.atmosphere-storm .little-storm{bottom:-6px;right:35px;width:90px;height:82px}
.sunny-mote{animation:day-sun-mote 6s ease-in-out infinite}
.storm-world:before{content:'';position:absolute;inset:auto 0 0;height:52px;background:repeating-linear-gradient(110deg,transparent 0 25px,#858faf33 26px 27px,transparent 28px 44px);animation:day-rain 1.1s linear infinite}
.storm-world:after{content:'';position:absolute;inset:0;background:#dad5f7;opacity:0;animation:day-storm-light 11s ease-out infinite}
.storm-bolt{animation:day-storm-bolt 11s ease-out infinite}.storm-drops path{animation-duration:1s}.storm-cloud{animation:day-cloud 5s ease-in-out infinite}
@keyframes day-sun-rise{0%,100%{transform:translateY(13px) rotate(-12deg)}45%,60%{transform:translateY(-8px) rotate(10deg)}}
@keyframes day-sun-mote{0%,100%{transform:translateY(8px) scale(.6);opacity:.15}50%{transform:translateY(-14px) rotate(15deg) scale(1.15);opacity:.9}}
@keyframes day-rain{to{transform:translate(14px,8px)}}
@keyframes day-cloud{0%,100%{transform:translateX(-5px) rotate(-4deg)}50%{transform:translateX(7px) rotate(4deg)}}
@keyframes day-storm-light{0%,66%,76%,100%{opacity:0}69%{opacity:.22}}
@keyframes day-storm-bolt{0%,65%,78%,100%{opacity:.15;transform:scale(.75)}69%,72%{opacity:1;transform:scale(1.12)}}
/* Slow breathing rings, with a moon in their centre. */
.breathing-orbit{position:absolute;right:36px;bottom:-29px;width:112px;height:112px;display:grid;place-items:center;animation:day-breathe 8s ease-in-out infinite}
.breathing-orbit span{font-size:42px;color:#7b83ad;transform:translateY(-12px)}
.breathing-orbit i{position:absolute;inset:0;border:1px solid #9aa8cc;border-radius:50%;animation:day-ripple 8s ease-out infinite}
.breathing-orbit i:nth-child(2){animation-delay:-2.6s}.breathing-orbit i:nth-child(3){animation-delay:-5.2s}
.scene-floor{position:absolute;inset:auto 0 -19px;height:40px;border-radius:50%;background:#bbc9e52b;animation:day-breathe 8s ease-in-out infinite}
@keyframes day-breathe{0%,100%{transform:scale(.8)}50%{transform:scale(1.13)}}
@keyframes day-ripple{0%{transform:scale(.45);opacity:.8}100%{transform:scale(1.6);opacity:0}}
/* One softly fading flash per eight seconds, beneath text, never a strobe. */
.electric-bolt{position:absolute;right:36px;bottom:0;width:54px;height:65px;animation:day-bolt 8s ease-in-out infinite}
.card-lightning{position:absolute;inset:0;background:linear-gradient(115deg,#eccd8626,#fff2b6aa,#eccd8626);opacity:0;animation:day-flash 8s ease-out infinite}
.electric-ring{position:absolute;bottom:-36px;right:11px;width:100px;height:100px;border:2px solid #cba558;border-radius:50%;animation:day-shockwave 8s ease-out infinite}
.electric-star{position:absolute;bottom:23px;right:117px;color:#a77c38;font-size:23px;animation:day-bolt 8s ease-in-out infinite}
@keyframes day-bolt{0%,30%,100%{transform:translateY(0) rotate(0);opacity:.7}38%{transform:translateY(-8px) rotate(-8deg);opacity:1}43%{transform:translateY(3px) rotate(4deg)}55%{transform:translateY(0)}}
@keyframes day-flash{0%,37%,60%,100%{opacity:0}41%{opacity:.7}}
@keyframes day-shockwave{0%,38%,75%,100%{transform:scale(.3);opacity:0}41%{transform:scale(.4);opacity:.8}65%{transform:scale(2.5);opacity:0}}
.quest-map{position:absolute;width:225px;height:85px;right:15px;bottom:-9px}.quest-path{animation:day-trail 7s linear infinite}
.quest-traveller{position:absolute;bottom:9px;right:185px;font-size:29px;animation:day-quest 9s ease-in-out infinite}
.quest-star{position:absolute;right:19px;bottom:44px;color:#9a7db7;animation:day-breathe 4s ease-in-out infinite}
@keyframes day-trail{to{stroke-dashoffset:-100}}
@keyframes day-quest{0%,10%{transform:translate(0,0) rotate(-15deg)}38%{transform:translate(65px,-18px) rotate(15deg)}70%,85%{transform:translate(145px,-9px) rotate(-10deg)}100%{transform:translate(0,0) rotate(-15deg)}}
/* Frost spreads along the border, then thaws; snow drifts independently. */
.ice-edge{position:absolute;inset:0;border:2px solid #adcfdf;box-shadow:inset 0 -14px 24px #a6d3e56b;clip-path:polygon(0 0,12% 0,12% 80%,88% 80%,88% 0,100% 0,100% 100%,0 100%);animation:day-freeze 9s ease-in-out infinite}
.ice-fern{position:absolute;width:95px;height:95px;bottom:-5px;right:0;transform-origin:bottom right;animation:day-fern 9s ease-in-out infinite}
.snow-crystal{position:absolute;left:calc(8% + var(--i)*13%);bottom:24px;font-size:18px;color:#79a9c2;animation:day-snow 6s linear infinite;animation-delay:calc(var(--i)*-.8s)}
@keyframes day-freeze{0%,100%{opacity:.2;transform:scaleY(.3);transform-origin:bottom}55%,75%{opacity:.9;transform:scaleY(1)}}
@keyframes day-fern{0%,100%{transform:scale(.3);opacity:.2}60%,80%{transform:scale(1);opacity:1}}
@keyframes day-snow{0%{transform:translate(-10px,-34px) rotate(0);opacity:0}30%{opacity:.7}90%{opacity:.7}100%{transform:translate(12px,28px) rotate(80deg);opacity:0}}
.garden-soil{position:absolute;inset:auto -5% -13px;height:28px;border-radius:50%;background:#b8cba570}
.growing-flower{position:absolute;width:50px;height:70px;bottom:-5px;right:calc(13px + var(--i)*47px);transform-origin:50% 100%;animation:day-grow 10s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s)}
.flower-head{transform-origin:35px 36px;animation:day-blossom 10s ease-in-out infinite;animation-delay:inherit}.flower-stem{transform-origin:bottom}
.garden-butterfly{position:absolute;right:92px;bottom:54px;color:#a383bc;font-size:23px;animation:day-butterfly 7s ease-in-out infinite}
@keyframes day-grow{0%,100%{transform:scaleY(.12);opacity:.35}25%{transform:scaleY(.65)}45%,85%{transform:scaleY(1) rotate(-3deg)}65%{transform:scaleY(1) rotate(4deg)}}
@keyframes day-blossom{0%,24%,100%{transform:scale(.08) rotate(-45deg)}50%,85%{transform:scale(1) rotate(0)}}
@keyframes day-butterfly{0%,100%{transform:translate(-40px,8px) rotate(-12deg)}50%{transform:translate(45px,-12px) rotate(12deg)}}
.assembling-puzzle{position:absolute;right:30px;bottom:-2px;width:72px;height:72px;overflow:visible}
.puzzle-piece{transform-box:fill-box;transform-origin:center;animation:day-piece 8s ease-in-out infinite}
.piece-one{--piece-x:-32px;--piece-y:-22px;--piece-turn:-35deg}.piece-two{--piece-x:32px;--piece-y:-22px;--piece-turn:35deg;animation-delay:.4s}.piece-three{--piece-x:-32px;--piece-y:22px;--piece-turn:25deg;animation-delay:.8s}.piece-four{--piece-x:32px;--piece-y:22px;--piece-turn:-25deg;animation-delay:1.2s}
.puzzle-glint{position:absolute;right:115px;bottom:21px;color:#9b7ab4;font-size:24px;animation:day-puzzle-glint 8s ease-in-out infinite}
@keyframes day-piece{0%,10%,100%{transform:translate(var(--piece-x),var(--piece-y)) rotate(var(--piece-turn));opacity:.3}38%,80%{transform:translate(0,0) rotate(0);opacity:1}}
@keyframes day-puzzle-glint{0%,45%,90%,100%{transform:scale(.3);opacity:0}60%,75%{transform:scale(1.2);opacity:1}}
.party-popper{position:absolute;right:28px;bottom:4px;font-size:44px;animation:day-party 6s ease-in-out infinite}
.party-confetti{position:absolute;right:calc(25px + var(--i)*19px);bottom:17px;width:6px;height:11px;border-radius:1px;background:var(--confetti-color);animation:day-confetti 6s ease-out infinite;animation-delay:calc(var(--i)*-.22s)}
@keyframes day-party{0%,100%{transform:rotate(-12deg) scale(.9)}20%{transform:rotate(8deg) scale(1.12)}30%,80%{transform:rotate(0) scale(1)}}
@keyframes day-confetti{0%{transform:translate(22px,15px) rotate(0);opacity:0}20%{opacity:1}55%{transform:translate(-12px,-35px) rotate(130deg);opacity:1}100%{transform:translate(-30px,22px) rotate(240deg);opacity:0}}
/* Samples show the same artwork as the cards, with room to watch it unfold. */
.atmosphere-sample .feeling-scene{inset:35px 0 0}.atmosphere-field .feeling-scene{inset:6px 0 0}
.atmosphere-sample .growing-flower{width:40px;right:calc(4px + var(--i)*30px)}
.atmosphere-sample .quest-map{width:165px}.atmosphere-sample .quest-traveller{right:135px;animation-name:day-quest-small}
@keyframes day-quest-small{0%,100%{transform:translate(0,0) rotate(-15deg)}65%,85%{transform:translate(100px,-9px) rotate(15deg)}}
@media(max-width:700px){.atmosphere-options{grid-template-columns:repeat(2,minmax(0,1fr))}.atmosphere-sample .feeling-scene{inset:5px 0 0}.task-card .growing-flower{width:40px;right:calc(5px + var(--i)*34px)}}
/* Static scenes retain their meaning when motion is paused. */
body[data-motion=off] :is(.card-lightning,.storm-world:after,.electric-ring){opacity:0}
body[data-motion=off] .puzzle-piece{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.feeling-scene,.feeling-scene *,.pleasant-world *,.storm-world *,.storm-world:before,.storm-world:after{animation:none!important}.card-lightning,.electric-ring,.storm-world:after{opacity:0}.puzzle-piece{transform:none;opacity:1}}
@media(min-width:1100px){#atmosphere-dialog{width:1120px}#atmosphere-picker{grid-template-columns:repeat(5,minmax(0,1fr))}#atmosphere-picker .atmosphere-sample{height:115px;margin-bottom:10px}#atmosphere-picker .atmosphere-choice{padding-bottom:12px}#atmosphere-picker .atmosphere-description{margin-top:5px}}
.task-card.atmosphere-calm{background:#e8edf7;border-color:#bcc7df}.task-card.atmosphere-spark{background:#fff1cf;border-color:#d9c79b}.task-card.atmosphere-adventure{background:#e8efdf;border-color:#bdcdb0}
@media(max-width:700px){.atmosphere-sample .quest-traveller{right:auto;left:8px;animation-name:day-quest-mobile}@keyframes day-quest-mobile{0%,100%{transform:translate(0,0) rotate(-15deg)}65%,85%{transform:translate(75px,-9px) rotate(15deg)}}}