/* Panacea motion layer — small, quick movements that make the panel and patient pages feel alive.
   Everything here stays under ~0.6s for anything a person waits on, and switches off with "reduce motion" (see base.css). */

/* ---------- buttons: soft lift and press ---------- */
.btn{transition:transform .14s var(--ease),box-shadow .2s var(--ease),background-color .15s,border-color .15s,color .15s}
.btn:not(:disabled):active{transform:scale(.96)}
.btn.primary:not(:disabled):hover{box-shadow:0 8px 20px -10px var(--accent)}

/* ---------- sign-in: orbit rings around the clinic mark, drifting light ---------- */
.auth-brand .mark-wrap{position:relative;width:84px;height:84px}
.orbit{position:absolute;inset:-46px;pointer-events:none}
.orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--brand-ink) 28%,transparent);animation:orbit 18s linear infinite}
.orbit i:nth-child(2){inset:-26px;border-style:dashed;opacity:.6;animation-duration:30s;animation-direction:reverse}
.orbit i:nth-child(3){inset:-58px;opacity:.35;animation-duration:44s}
.orbit i::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#F3D27A;box-shadow:0 0 10px #F3D27A}
.orbit i:nth-child(2)::after{background:var(--brand-ink);box-shadow:0 0 8px var(--brand-ink);top:auto;bottom:-4px}
.orbit i:nth-child(3)::after{width:5px;height:5px}
@keyframes orbit{to{transform:rotate(360deg)}}
.auth-brand .big-ico{position:relative;animation:pop .6s var(--ease) both,float 6s 1s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.auth-brand::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;bottom:-180px;inset-inline-start:-120px;background:radial-gradient(circle,rgb(243 210 122 / .18),transparent 65%);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{to{transform:translate(60px,-40px) scale(1.15)}}

/* ---------- sliding highlight behind the active menu item ---------- */
.nav.has-ind{position:relative}
.nav-ind{position:absolute;top:0;left:0;border-radius:11px;background:var(--accent-soft);pointer-events:none;z-index:0;opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.nav.has-ind button{position:relative;z-index:1}
.nav.has-ind button.on{background:transparent}

/* ---------- home ---------- */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255 / .16) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 1.6s .35s var(--ease) both;pointer-events:none}
[dir="rtl"] .hero::after{animation-name:sheen-rtl}
@keyframes sheen{to{transform:translateX(120%)}}
@keyframes sheen-rtl{from{transform:translateX(120%)}to{transform:translateX(-120%)}}
.hero h2 .wave{display:inline-block;transform-origin:70% 70%;animation:wave 1.6s .5s ease-in-out both}
@keyframes wave{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-4deg)}}
.hstat{transition:transform .18s var(--ease),background-color .15s}
.hstat .v{font-variant-numeric:tabular-nums}
.tl.now .dot{animation:nowdot 2s infinite}
@keyframes nowdot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
.timeline .tl{animation:rise .4s var(--ease) both}
.timeline .tl:nth-child(2){animation-delay:.06s}.timeline .tl:nth-child(3){animation-delay:.12s}.timeline .tl:nth-child(4){animation-delay:.18s}.timeline .tl:nth-child(5){animation-delay:.24s}
.alerts .alert{animation:rise .4s var(--ease) both}
.alerts .alert:nth-child(2){animation-delay:.05s}.alerts .alert:nth-child(3){animation-delay:.1s}.alerts .alert:nth-child(4){animation-delay:.15s}.alerts .alert:nth-child(5){animation-delay:.2s}
.allgood .ico{animation:pop .5s .2s var(--ease) both}

/* ---------- schedule: "now" line, rows that react when their status changes ---------- */
.nowline{position:relative;height:0;border-top:2px solid var(--danger);margin:0 16px;z-index:1;animation:fade .5s both}
.nowline span{position:absolute;top:-11px;inset-inline-start:-6px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums}
.nowline::after{content:"";position:absolute;top:-6px;inset-inline-end:-5px;width:10px;height:10px;border-radius:50%;background:var(--danger);animation:nowdot-r 1.8s infinite}
@keyframes nowdot-r{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--danger) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.list > .row{animation:rise .35s var(--ease) both}
.row.just{animation:flash 1.4s var(--ease) both}
.row.just .pill{animation:pillpop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes flash{0%{background:color-mix(in srgb,var(--accent) 22%,transparent)}100%{background:transparent}}
@keyframes pillpop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.row.just .pill.st-done::before,.row.just .pill.st-arrived::before{content:"✓ ";display:inline-block;animation:pop .4s .1s both}
.risk.r-high{animation:riskglow 2.6s ease-in-out infinite}
@keyframes riskglow{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 18%,transparent)}}
.xpanel.brief dl > *{animation:rise .35s var(--ease) both}
.xpanel.brief dl > :nth-child(n+3){animation-delay:.05s}.xpanel.brief dl > :nth-child(n+5){animation-delay:.1s}.xpanel.brief dl > :nth-child(n+7){animation-delay:.15s}.xpanel.brief dl > :nth-child(n+9){animation-delay:.2s}

/* ---------- report: tiles one after another, value card glow ---------- */
.tiles > .tile{animation:rise .45s var(--ease) both}
.tiles > .tile:nth-child(2){animation-delay:.04s}.tiles > .tile:nth-child(3){animation-delay:.08s}.tiles > .tile:nth-child(4){animation-delay:.12s}.tiles > .tile:nth-child(5){animation-delay:.16s}.tiles > .tile:nth-child(6){animation-delay:.2s}.tiles > .tile:nth-child(7){animation-delay:.24s}.tiles > .tile:nth-child(8){animation-delay:.28s}.tiles > .tile:nth-child(n+9){animation-delay:.32s}
.valuecard{position:relative;overflow:hidden}
.valuecard::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;top:-140px;inset-inline-end:-80px;background:radial-gradient(circle,rgb(255 255 255 / .22),transparent 65%);animation:drift 10s ease-in-out infinite alternate;pointer-events:none}
.chart line{animation:fade .6s both}

/* ---------- toast ---------- */
.toast{animation:toastin .38s cubic-bezier(.2,1.2,.4,1) both}
@keyframes toastin{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- Hafez: the card unfolds, then the verses appear one by one ---------- */
.falcard{transform-origin:50% 0;animation:unfold .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes unfold{from{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(16px)}to{opacity:1;transform:none}}
.beit{animation:rise .5s var(--ease) both}
.beit:nth-child(1){animation-delay:0.12s}.beit:nth-child(2){animation-delay:0.23s}.beit:nth-child(3){animation-delay:0.34s}.beit:nth-child(4){animation-delay:0.45s}.beit:nth-child(5){animation-delay:0.56s}.beit:nth-child(6){animation-delay:0.67s}.beit:nth-child(7){animation-delay:0.78s}.beit:nth-child(8){animation-delay:0.89s}.beit:nth-child(9){animation-delay:1.00s}.beit:nth-child(10){animation-delay:1.11s}.beit:nth-child(11){animation-delay:1.22s}.beit:nth-child(12){animation-delay:1.33s}.beit:nth-child(13){animation-delay:1.44s}.beit:nth-child(14){animation-delay:1.55s}.beit:nth-child(15){animation-delay:1.66s}.beit:nth-child(16){animation-delay:1.77s}
.falh{animation:fade .5s both}

/* ---------- patient page: queue dots ---------- */
.qdots{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:4px 0}
.qdots i{width:12px;height:12px;border-radius:50%;background:color-mix(in srgb,var(--accent) 35%,var(--surface));animation:qbob 2.4s ease-in-out infinite}
.qdots i:nth-child(2){animation-delay:.15s}.qdots i:nth-child(3){animation-delay:.3s}.qdots i:nth-child(4){animation-delay:.45s}.qdots i:nth-child(5){animation-delay:.6s}.qdots i:nth-child(6){animation-delay:.75s}
.qdots .more{font-size:12px;color:var(--muted)}
.qdots .you{background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;border-radius:999px;padding:2px 10px;box-shadow:0 0 0 0 var(--accent);animation:pulse 1.8s infinite}
@keyframes qbob{50%{transform:translateY(-4px)}}
.live-g > div{animation:pop .45s var(--ease) both}.live-g > div:nth-child(2){animation-delay:.08s}.live-g > div:nth-child(3){animation-delay:.16s}
main.card > *{animation:rise .5s var(--ease) both}
main.card > :nth-child(2){animation-delay:.05s}main.card > :nth-child(3){animation-delay:.1s}main.card > :nth-child(4){animation-delay:.15s}main.card > :nth-child(5){animation-delay:.2s}main.card > :nth-child(n+6){animation-delay:.25s}

/* quiet refreshes (every minute) must not replay entrance animations */
main.quiet .list > .row:not(.just),main.quiet .timeline .tl,main.quiet .alerts .alert,main.quiet .tiles > .tile,main.quiet .nowline,main.quiet .hero h2 .wave,main.quiet .allgood .ico,main.quiet .spark .ln{animation:none}
main.quiet .spark .ln{stroke-dashoffset:0}
main.quiet .hero::after{display:none}

/* ---------- patient chat: messages slide in from their own side ---------- */
.m.bot{animation-name:fromend}
.m.me,.m.user{animation-name:fromstart}
@keyframes fromend{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fromstart{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none}}
[dir="rtl"] .m.bot{animation-name:fromend-rtl}[dir="rtl"] .m.me,[dir="rtl"] .m.user{animation-name:fromstart-rtl}
@keyframes fromend-rtl{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fromstart-rtl{from{opacity:0;transform:translateX(-14px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- sign-in: medicines ride the orbits, aurora light, floating medical glyphs ---------- */
.orbit i::after{width:14px;height:14px;margin-left:-7px;top:-7px;border-radius:0;background:#F3D27A;box-shadow:none;filter:drop-shadow(0 0 6px #F3D27A);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7z' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7z' rx='2'/%3E%3C/svg%3E") center/contain no-repeat}
.orbit i:nth-child(2)::after{width:18px;height:9px;margin-left:-9px;top:auto;bottom:-5px;background:var(--brand-ink);filter:drop-shadow(0 0 5px var(--brand-ink));-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='7' width='22' height='10' rx='5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='7' width='22' height='10' rx='5'/%3E%3C/svg%3E");box-shadow:none}
.orbit i:nth-child(3)::after{width:12px;height:12px;margin-left:-6px;top:-6px;background:#FDA4AF;filter:drop-shadow(0 0 6px #F43F5E);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E");animation:medbeat 1.4s infinite}
@keyframes medbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.15)}}
.auth-brand{isolation:isolate}
.auth-brand > .aurora,.auth-brand > .medfloat{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora{background:radial-gradient(40% 50% at 20% 30%,color-mix(in srgb,var(--brand-ink) 18%,transparent),transparent 70%),radial-gradient(35% 45% at 80% 70%,rgb(243 210 122 / .22),transparent 70%),radial-gradient(30% 40% at 60% 20%,rgb(94 234 212 / .18),transparent 70%);filter:blur(10px);animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,3%) scale(1.08)}100%{transform:translate(3%,-3%) scale(1.04)}}
.medfloat i{position:absolute;bottom:-40px;width:22px;height:22px;background:var(--brand-ink);opacity:0;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;animation:medrise 14s linear infinite}
.medfloat .mg-cross{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7z' rx='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v7h7v6h-7v7H9v-7H2V9h7z' rx='2'/%3E%3C/svg%3E")}
.medfloat .mg-pill{width:28px;height:14px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='7' width='22' height='10' rx='5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='7' width='22' height='10' rx='5'/%3E%3C/svg%3E")}
.medfloat .mg-heart{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.2-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.8-8 11-8 11z'/%3E%3C/svg%3E")}
.medfloat i:nth-child(1){left:8%;animation-delay:0s}.medfloat i:nth-child(2){left:22%;animation-delay:-4s;animation-duration:17s}.medfloat i:nth-child(3){left:38%;animation-delay:-9s;transform:scale(.8)}
.medfloat i:nth-child(4){left:55%;animation-delay:-2s;animation-duration:19s}.medfloat i:nth-child(5){left:70%;animation-delay:-11s}.medfloat i:nth-child(6){left:84%;animation-delay:-6s;animation-duration:15s}.medfloat i:nth-child(7){left:94%;animation-delay:-13s;animation-duration:18s}
@keyframes medrise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.16}85%{opacity:.12}100%{transform:translateY(-110vh) rotate(220deg);opacity:0}}

/* ---------- busy bar and button ripple ---------- */
#busybar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;pointer-events:none;opacity:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--accent),#F3D27A,var(--accent));background-size:200% 100%;transition:opacity .3s}
[dir=rtl] #busybar{transform-origin:right}
#busybar.on{opacity:1;animation:busy 1.6s cubic-bezier(.2,.7,.3,1) forwards,busyshine 1.2s linear infinite}
#busybar.done{opacity:0;transform:scaleX(1);transition:opacity .4s .1s,transform .2s}
@keyframes busy{from{transform:scaleX(.05)}to{transform:scaleX(.85)}}
@keyframes busyshine{to{background-position:-200% 0}}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);pointer-events:none;animation:ripple .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.aurora,.medfloat,.orbit i::after{animation:none!important}.medfloat{display:none}}