/* Circl motion layer: smooth screen entrances, springy sheets, tactile buttons,
   live message pops, scroll reveals on the front page. Respects "reduce motion". */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo-out: fast start, soft landing */
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* slight overshoot */
  --ease-in:cubic-bezier(.5,0,.75,0);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

/* ---------- glass top bar + tab bar ---------- */
header.top{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);transition:box-shadow .3s,border-color .3s}
html.scrolled header.top{box-shadow:0 6px 24px -12px rgba(15,16,20,.18);border-bottom-color:transparent}
nav.tabs{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px)}
nav.tabs .wrap{position:relative}
nav.tabs .tabpill{position:absolute;top:0;left:0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--ink);transition:transform .45s var(--ease-out),opacity .2s;pointer-events:none;opacity:0}
nav.tabs .tabpill.on{opacity:1}
nav.tabs button svg,nav.tabs .cbtn{transition:transform .35s var(--ease-spring),background-color .25s,color .25s}
nav.tabs button:active svg,nav.tabs button:active .cbtn{transform:scale(.86);transition-duration:.1s}
nav.tabs button[aria-current="page"] svg{animation:tabPop .45s var(--ease-spring)}
nav.tabs button{transition:color .25s}
nav.tabs .badge{animation:badgePop .4s var(--ease-spring)}
@keyframes tabPop{0%{transform:scale(.8)}100%{transform:scale(1)}}
@keyframes badgePop{0%{transform:scale(0)}100%{transform:scale(1)}}

/* ---------- tactile controls ---------- */
.btn{transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-out),opacity .2s,background-color .2s}
.btn:active{transform:scale(.96);transition-duration:.08s}
.tile,.card,.menu button,.moregrid button,.statgrid button,.levelpick button,.checklist button,.chip,.mact,.rpill,.act,.seg button,.status-btn,.link,.who-btn,.back,.sendbtn,.me-btn,.snap>button{
  transition:transform .3s var(--ease-spring),background-color .2s,border-color .2s,box-shadow .3s var(--ease-out),color .2s}
.tile:active,.menu button:active,.moregrid button:active,.statgrid button:active,.levelpick button:active,.checklist button:active,.snap>button:active{transform:scale(.975);transition-duration:.08s}
.chip:active,.mact:active,.rpill:active,.act:active,.status-btn:active,.back:active,.sendbtn:active,.me-btn:active{transform:scale(.93);transition-duration:.08s}
@media (hover:hover){
  .btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(15,16,20,.45)}
  .btn.ghost:not(:disabled):hover,.btn.line:not(:disabled):hover{box-shadow:0 6px 18px -10px rgba(15,16,20,.25)}
  .tile:hover,.menu button:hover,.moregrid button:hover,.statgrid button:hover{transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(15,16,20,.28)}
  .btn:not(:disabled):active,.tile:active{transform:scale(.97)}
}
.chip[aria-pressed="true"]{animation:chipOn .35s var(--ease-spring)}
@keyframes chipOn{0%{transform:scale(.92)}100%{transform:scale(1)}}
.seg button{transition:background-color .25s var(--ease-out),color .25s,box-shadow .25s}
.switch{transition:background-color .25s}
.switch::after{transition:transform .35s var(--ease-spring),width .2s}
.switch:active::after{width:22px}
.switch:checked:active::after{transform:translateX(12px)}
input.in,select.in,textarea.in{transition:border-color .2s,box-shadow .25s var(--ease-out)}
input.in:focus,textarea.in:focus,select.in:focus{box-shadow:0 0 0 4px rgba(15,16,20,.07)}
.link{transition:color .2s,text-underline-offset .2s}
@media (hover:hover){.link:hover{color:var(--ink);text-underline-offset:5px}}

/* ---------- screen entrances (added by motion.js only when the screen changes) ---------- */
.m-in{animation:mIn .55s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.m-fade{animation:mFade .4s var(--ease-out) both}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mFade{from{opacity:0}to{opacity:1}}
.m-word{display:inline-block;animation:mWord .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 70ms + 80ms)}
@keyframes mWord{from{opacity:0;transform:translateY(.45em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- messages ---------- */
.cm.m-pop .cm-bub,.cm.m-pop .cm-meta,.cm.m-pop .cm-av{animation:msgIn .45s var(--ease-spring) both;transform-origin:0 100%}
.cm.mine.m-pop .cm-bub{transform-origin:100% 100%}
.bub.m-pop{animation:msgIn .45s var(--ease-spring) both;transform-origin:0 100%}
.bub.mine.m-pop{transform-origin:100% 100%}
@keyframes msgIn{0%{opacity:0;transform:translateY(12px) scale(.86)}100%{opacity:1;transform:none}}
.cm-acts{animation:mIn .3s var(--ease-out) both}
.rxpick button{transition:transform .25s var(--ease-spring)}
.rxpick button:active{transform:scale(1.35)}
.rpills .rpill{animation:chipOn .35s var(--ease-spring)}

/* ---------- sheets ---------- */
.sheet-bg{animation:bgIn .3s ease both;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet{animation:sheetIn .5s var(--ease-out) both;will-change:transform;box-shadow:0 -10px 40px -10px rgba(15,16,20,.25)}
.sheet .grab{transition:background-color .2s,width .3s var(--ease-spring)}
.sheet.dragging .grab{background:var(--muted);width:56px}
@keyframes bgIn{from{opacity:0}to{opacity:1}}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
.sheet-out{position:fixed;inset:0;z-index:41;background:#0F101459;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;transition:opacity .28s ease}
.sheet-out .sheet{animation:none;transition:transform .3s var(--ease-in)}
@media (min-width:700px){
  .sheet-bg{align-items:center}
  .sheet{border-radius:22px;max-height:84vh;animation:sheetPop .45s var(--ease-out) both}
  .sheet-out{align-items:center}
  @keyframes sheetPop{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
}

/* ---------- toasts ---------- */
.toast{animation:toastIn .5s var(--ease-spring) both;box-shadow:0 12px 30px -10px rgba(15,16,20,.45)}
.toast.out{animation:toastOut .3s var(--ease-in) forwards}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,10px) scale(.95)}}

/* ---------- front page ---------- */
.front-rings{position:absolute;left:50%;top:44%;width:min(620px,150vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;opacity:.9}
.front-rings svg{width:100%;height:100%;overflow:visible}
.front-rings circle{fill:none;stroke:var(--line);transform-origin:50% 50%;transform-box:fill-box}
.front-rings .r1{stroke-width:1;animation:ringBreath 9s ease-in-out infinite}
.front-rings .r2{stroke-width:1.2;stroke-dasharray:3 9;animation:ringSpin 60s linear infinite}
.front-rings .r3{stroke-width:1;animation:ringBreath 9s ease-in-out -4.5s infinite}
.front-rings .orb{fill:var(--online);stroke:none;opacity:.7;filter:drop-shadow(0 0 6px rgba(29,168,81,.6))}
.front-rings .orbit{transform-origin:50% 50%;transform-box:view-box;animation:ringSpin 24s linear infinite}
.front-rings .orbit.b{animation-duration:38s;animation-direction:reverse}
@keyframes ringBreath{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.04);opacity:.6}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.front{isolation:isolate}
.front .btn[data-act="start"]{position:relative;overflow:hidden}
.front .btn[data-act="start"]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:shine 4.5s var(--ease-out) 1.6s infinite}
@keyframes shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0) * 60ms)}
.rv.in{opacity:1;transform:none}
.front-more{transition:color .2s}
.front-more{animation:nudge 2.4s ease-in-out 2s infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* loading: soft pulse instead of static text */
.front>p.muted:only-of-type{animation:breathe 1.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:1}}

/* progress bars glide when they change */
.wbar i,.bar i,.prog i{transition:width .8s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  .m-in,.m-word,.m-fade,.rv{opacity:1!important;transform:none!important;filter:none!important}
  .front-rings{display:none}
}

/* ---------- in-app notification banner ---------- */
.ibn{position:fixed;left:0;right:0;top:0;z-index:90;display:flex;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 0;pointer-events:none}
.ibn-card{pointer-events:auto;position:relative;width:100%;max-width:440px;text-align:left;border:1px solid rgba(15,16,20,.06);border-radius:24px;padding:11px 14px 14px;color:var(--ink);
  background:rgba(250,250,252,.86);-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px);
  box-shadow:0 18px 50px -12px rgba(15,16,20,.35),0 2px 6px rgba(15,16,20,.06);touch-action:none;
  transform:translateY(-140%) scale(.96);opacity:.4;transition:transform .55s var(--ease-out),opacity .35s}
.ibn.in .ibn-card{transform:none;opacity:1}
.ibn.gone .ibn-card{opacity:0;transition:transform .3s var(--ease-in),opacity .3s}
.ibn-top{display:flex;align-items:center;gap:7px;font:600 11.5px/1 var(--body);letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.ibn-top img{width:18px;height:18px;border-radius:5px;border:1px solid var(--line)}
.ibn-top time{margin-left:auto;font:500 11.5px var(--body);letter-spacing:0;text-transform:none}
.ibn-main{display:flex;gap:11px;align-items:flex-start}
.ibn-main .av,.ibn-app{width:38px;height:38px;flex:none}
.ibn-app{border-radius:10px;border:1px solid var(--line)}
.ibn-txt{min-width:0;flex:1}
.ibn-txt b{display:block;font-size:15px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibn-txt p{margin:2px 0 0;font-size:14px;line-height:1.35;color:#3B3E48;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ibn-grab{position:absolute;left:50%;bottom:5px;width:34px;height:4px;margin-left:-17px;border-radius:9px;background:rgba(15,16,20,.14)}
.ibn-card:active{transform:scale(.985)}

/* owner setup status */
.setup-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:inline-grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.setup-dot.on{background:var(--online);border-color:var(--online);animation:chipOn .5s var(--ease-spring)}
.setup-card.done{border-color:#BFE6CC;background:linear-gradient(180deg,#F3FBF6,#fff)}