/* Brief interaction feedback; no looping movement on the timer digits. */
:root{--ease-room:cubic-bezier(.22,1,.36,1)}
button,a{transition:background-color .2s,color .2s,box-shadow .2s,opacity .2s,transform .22s var(--ease-room)}
button:active:not(:disabled){transform:scale(.96)}
@media(hover:hover){.tools-toggle:hover,.music-play:hover,.primary:hover{transform:translateY(-2px)}.scene-choice:hover{transform:translateX(2px)}}
.tools-toggle svg{transition:transform .4s var(--ease-room)}
.tools-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.tool-dock:not([hidden]){animation:dock-in .32s var(--ease-room) both;transform-origin:bottom right}
.tool-dock:not([hidden]) button{animation:control-in .35s var(--ease-room) both}
.tool-dock button:nth-child(2){animation-delay:30ms}.tool-dock button:nth-child(3){animation-delay:55ms}.tool-dock button:nth-child(4){animation-delay:80ms}
.drawer:not([hidden]){animation:panel-in .38s var(--ease-room) both}
[data-panel]:not([hidden]){animation:content-in .3s ease-out both}
.timer-expanded{animation:content-in .28s ease-out both}
.timer-expanded .clock-tabs,.timer-expanded .intention,.timer-expanded .session-bottom{animation:content-in .32s ease-out both}
dialog[open]{animation:panel-in .3s var(--ease-room) both}dialog[open]::backdrop{animation:content-in .3s ease-out both}
.topbar,.workspace,.player,#zen-exit:not([hidden]){animation:content-in .6s ease-out both}
.toast:not([hidden]){animation:toast-in .25s ease-out both}
.is-running .status-dot{animation:focus-breath 5s ease-in-out infinite}
@keyframes dock-in{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
@keyframes control-in{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes panel-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes content-in{from{opacity:0}to{opacity:1}}
@keyframes toast-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes focus-breath{0%,100%{opacity:.5}50%{opacity:1}}

/* Image-aligned stages preserve the location of steam, mist and water on crop. */
.session-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#ffe0b799,transparent 75%);opacity:calc(var(--focus-progress,0)*.24);transition:opacity 8s linear;mix-blend-mode:soft-light}
.session-rest .session-light{opacity:.32}
.window-rays{translate:calc(var(--focus-progress,0)*18px) 0;transition:translate 8s linear}
.room-world.motion-off .session-light{display:none}
@media(prefers-reduced-motion:reduce){.session-light{display:none}}
.room-world{overflow:hidden;pointer-events:none;background-image:none!important}
.scene-layer{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity 1.3s ease;contain:paint}
.companion-air{background:url('/assets/companion.webp') center/cover no-repeat}
.mountain-air{background:url('/assets/landscape.webp') center/cover no-repeat}
[data-scene=companion] .companion-air,[data-scene=landscape] .mountain-air{opacity:1}
.picture-stage{--art-width:max(100vw,177.777778svh);position:absolute;width:var(--art-width);height:calc(var(--art-width)*.5625);left:calc((100vw - var(--art-width))*.5);top:50%;transform:translateY(-50%)}
.scene-layer .picture-stage *{animation-play-state:paused}
[data-scene=companion] .companion-air .picture-stage *,[data-scene=landscape] .mountain-air .picture-stage *{animation-play-state:running}
.window-light{position:absolute;inset:0;background:radial-gradient(ellipse at 53% 34%,#fff4cd1c,transparent 43%);animation:window-breath 10s ease-in-out -4s infinite alternate}
.window-rays{position:absolute;inset:0}
.tyndall-rays{position:absolute;inset:0;width:100%;height:100%;stroke:none;overflow:visible}
.sunshaft{transform-origin:59% 12%;animation:shaft-drift 12s ease-in-out -4s infinite alternate}
.window-bloom{position:absolute;left:46%;top:4%;width:23%;height:52%;background:radial-gradient(ellipse at 52% 24%,#fff6cd80,transparent 65%);animation:shaft-haze 12s ease-in-out -5s infinite alternate}
.desk-sunlight{position:absolute;left:13%;top:76%;width:47%;height:23%;border-radius:50%;background:radial-gradient(ellipse,#ffe5a750,transparent 68%);transform:rotate(-12deg);animation:shaft-haze 15s ease-in-out -7s infinite alternate}
.sun-motes .ray-dust{background:#fff7d6;box-shadow:0 0 7px #fff0b6b0,0 1px 2px #9b805150;animation-name:ray-dust-float}
@keyframes shaft-drift{from{opacity:.4;transform:translate(-4px,0) skewX(-.3deg)}to{opacity:.65;transform:translate(5px,0) skewX(.3deg)}}
@keyframes shaft-haze{from{opacity:.24}to{opacity:.56}}
@keyframes ray-dust-float{0%{opacity:0;transform:translate(12px,-15px)}20%,65%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),38px)}}
.leaf-light{position:absolute;left:-8%;top:3%;width:44%;height:77%;background:radial-gradient(ellipse at 12% 60%,#59764d30 0%,transparent 24%),radial-gradient(ellipse at 36% 22%,#66825324,transparent 20%),radial-gradient(ellipse at 3% 27%,#82966330,transparent 22%);animation:leaf-drift 9s ease-in-out -3s infinite alternate;transform-origin:0 90%}
.sun-motes{position:absolute;inset:0}.sun-motes i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fff9df;box-shadow:0 0 6px #fff6c8b0,0 1px 2px #9a815840;opacity:0;animation:mote-float var(--duration) linear var(--delay) infinite}
.tea-steam{position:absolute;left:27.3%;bottom:9.3%;width:6.8%;height:20%;overflow:visible;fill:none;stroke:#fffcf0;stroke-width:3.2;filter:blur(1.7px) drop-shadow(0 1px 1px #ac987344);stroke-linecap:round}
.tea-steam path{opacity:0;transform-origin:50% 100%;animation:steam-rise 5.8s ease-out -2s infinite;stroke-dasharray:125 145}
.tea-steam path:nth-child(2){animation-delay:-4s;animation-duration:6.8s;stroke-width:4.2}.tea-steam path:nth-child(3){animation-delay:-6s;animation-duration:7.4s;stroke-width:2.6}
@keyframes window-breath{from{opacity:.3;transform:translateX(-20px)}to{opacity:.95;transform:translateX(24px)}}
@keyframes leaf-drift{from{opacity:.4;transform:rotate(-3deg) translate(-6px,0)}to{opacity:.9;transform:rotate(3deg) translate(8px,12px)}}
@keyframes mote-float{0%{opacity:0;transform:translate(0,32px)}15%,72%{opacity:.85}100%{opacity:0;transform:translate(var(--drift),-68px)}}
@keyframes steam-rise{0%{opacity:0;stroke-dashoffset:120;transform:translateY(12px) scaleX(.8)}22%{opacity:.75}58%{opacity:.5}100%{opacity:0;stroke-dashoffset:-120;transform:translate(11px,-22px) scaleX(1.2)}}
.valley-mist{position:absolute;left:4%;top:57%;width:73%;height:20%;background:radial-gradient(ellipse at 30% 60%,#e0e9d969,transparent 48%),radial-gradient(ellipse at 65% 50%,#f2eed65c,transparent 42%);animation:mist-drift 18s ease-in-out -7s infinite alternate}
.mist-far{left:32%;top:43%;width:50%;height:29%;animation-duration:26s;animation-delay:-13s}
.water-light{position:absolute;left:0;right:0;top:77%;bottom:0;background:repeating-linear-gradient(178deg,transparent 0 10px,#e9efce38 11px,transparent 13px 21px);mask-image:radial-gradient(ellipse at 55% 15%,#000c,transparent 70%);animation:water-drift 6s ease-in-out -2s infinite alternate}
.water-ripple{position:absolute;left:38%;top:81%;width:12%;height:1.3%;border:1px solid #e9f0d66b;border-radius:50%;animation:water-ring 9s ease-out -3s infinite}
.water-ripple::after{content:'';position:absolute;inset:-55%;border:1px solid #e9f0d63b;border-radius:50%}
@keyframes mist-drift{from{transform:translate(-48px,4px);opacity:.45}to{transform:translate(55px,-12px);opacity:.95}}
@keyframes water-drift{from{transform:translateX(-12px) scaleX(.98);opacity:.45}to{transform:translate(12px,5px) scaleX(1.06);opacity:.95}}
@keyframes water-ring{0%{opacity:0;transform:scale(.3)}20%,45%{opacity:.8}100%{opacity:0;transform:scale(2.2)}}
[data-scene=abstract] .room-world{background-image:radial-gradient(ellipse at 78% 25%,#e6d0b9,transparent 50%),linear-gradient(120deg,#eeeee5,#d7dfd5 65%,#9aaba7)!important}
.abstract-orbit{animation:orbit-float 13s ease-in-out -4s infinite alternate}
.abstract-orbit::after{content:'';position:absolute;inset:-15%;border:1px solid #f8f4de80;border-radius:50%;transform:rotate(25deg) scale(1.1,.9);animation:orbit-halo 32s ease-in-out infinite alternate}
@keyframes orbit-float{from{transform:translate(-5px,-13px) rotate(-35deg)}to{transform:translate(7px,16px) rotate(-23deg)}}
@keyframes orbit-halo{from{transform:rotate(25deg) scale(1.1,.9);opacity:.35}to{transform:rotate(40deg) scale(1.16,.94);opacity:.7}}
.room-world.motion-off .picture-stage{opacity:0}
.room-world.motion-off *,.room-world.motion-off *::after,.room-world.motion-paused *,.room-world.motion-paused *::after{animation-play-state:paused!important}
.room-world.motion-off .abstract-orbit{transform:rotate(-30deg);animation:none}
@media(max-width:760px){.scene-layer{background-position:72% center}.picture-stage{left:calc((100vw - var(--art-width))*.72)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.picture-stage{opacity:0}}