/* ==========================================================================
   MedSync flagship animation layer — phone mockup + demo modal
   --------------------------------------------------------------------------
   - Every new identifier uses the `mxp-` prefix.
   - Existing keyframes (hx-*, rxFadeUp, bn-pulse, …) are referenced
     but NEVER redefined. (Legacy floaty / notifLoop / pulseRing from the
     old phone build no longer exist in index.html.)
   - All motion uses transform / opacity only (plus discrete state styles).
   - Under prefers-reduced-motion everything here goes static.
   - Loaded AFTER index.html's own <style>; wins by cascade order.
   ========================================================================== */

/* ================= 1. PHONE 3D TILT STAGE + GLARE ================= */
.mxp-tilt-stage{perspective:1400px}
.mxp-tilt-stage .phone{transform-style:preserve-3d}
/* JS drives .phone transform per-frame; kill the legacy .3s transition
   while flagship tilt is active so lerping stays butter-smooth. */
.phone.mxp-tilt-on{transition:none;will-change:transform}
.mxp-glare{position:absolute;inset:0;border-radius:44px;pointer-events:none;z-index:6;
  background:radial-gradient(440px circle at var(--mxp-gx,50%) var(--mxp-gy,28%),
    rgba(255,255,255,.30),rgba(255,255,255,0) 56%);
  opacity:0;transition:opacity .4s ease}
.mxp-tilt-stage:hover .mxp-glare{opacity:1}

/* ================= 2. REMINDER BANNER CHOREOGRAPHY =================
   QA-FIX: the old notifLoop keyframe no longer exists in index.html, so
   only the self-contained mxp-notif-pop drives the banner settle "pop" on
   the independent `scale` property. */
.phone-notif{animation:mxp-notif-pop 9s ease-in-out infinite}
@keyframes mxp-notif-pop{
  0%,12%{scale:.90}
  16%,38%{scale:1}
  43%,100%{scale:.90}
}
/* light sheen sweep while the banner is visible */
.phone-notif::before{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%);
  transform:translateX(-130%);opacity:0;animation:mxp-sheen 9s ease-in-out infinite}
@keyframes mxp-sheen{
  0%,15%{transform:translateX(-130%);opacity:0}
  19%{opacity:1}
  31%{transform:translateX(130%);opacity:0}
  32%,100%{transform:translateX(130%);opacity:0}
}
/* progress line injected by JS; drains across the banner's visible window */
.mxp-notif-bar{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:99px;
  background:rgba(10,26,47,.08);overflow:hidden;pointer-events:none}
.mxp-notif-bar-fill{height:100%;border-radius:inherit;transform-origin:left center;
  background:linear-gradient(90deg,var(--blue,#2E6BF0),var(--teal,#0EA5A4));
  animation:mxp-notif-drain 9s linear infinite}
@keyframes mxp-notif-drain{
  0%,13%{transform:scaleX(1)}
  40%{transform:scaleX(0)}
  41%,100%{transform:scaleX(0)}
}

/* ================= 3. ADHERENCE RING ================= */
.ring-wrap #ringFg{transition:stroke-dashoffset 1s cubic-bezier(.22,.61,.21,1)}
.ring.mxp-ring-bump{animation:mxp-ring-bump .5s ease-out;transform-origin:center;transform-box:fill-box}
@keyframes mxp-ring-bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.09)}
  100%{transform:scale(1)}
}
.mxp-ring-glow #ringFg{filter:drop-shadow(0 0 6px rgba(14,165,164,.55))}

/* ================= 4. DOSE CHECKBOX MICRO-ANIMATION ================= */
.med .box svg path{stroke-dasharray:14;stroke-dashoffset:0}
.med .box.mxp-pop{animation:mxp-pop .38s cubic-bezier(.34,1.56,.64,1)}
.med .box.mxp-pop svg path{stroke-dashoffset:14;animation:mxp-tick .28s .06s ease-out forwards}
@keyframes mxp-pop{
  0%{transform:scale(.55)}
  55%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
@keyframes mxp-tick{to{stroke-dashoffset:0}}

/* ================= 5. LIVE DOT — softer premium pulse ================= */
.live-dot{box-shadow:0 0 0 3px rgba(52,211,153,.20)}
.live-dot::after{animation:mxp-live 2.8s ease-in-out infinite}
.live-dot::before{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid #34D399;animation:mxp-live 2.8s ease-in-out 1.4s infinite;pointer-events:none}
@keyframes mxp-live{
  0%,100%{transform:scale(.65);opacity:.75}
  50%{transform:scale(1.32);opacity:.12}
}

/* ================= 6. DEMO MODAL ================= */
/* extra backdrop blur that fades in (opacity-only, no backdrop-filter animation) */
.rx-modal.mxp-modal::before{content:'';position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;transition:opacity .45s ease}
.rx-modal.mxp-modal.rx-open::before{opacity:1}
/* springy card entrance — plays on top of the base transform transition */
.rx-modal.mxp-modal.rx-open .rx-modal-card{animation:mxp-modal-in .6s cubic-bezier(.3,1.35,.4,1)}
@keyframes mxp-modal-in{
  0%{transform:translateY(30px) scale(.93);opacity:0}
  55%{transform:translateY(-5px) scale(1.015);opacity:1}
  75%{transform:translateY(2px) scale(.998);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}
}
/* form focus glow + label accent polish */
.rx-modal .rx-field input,.rx-modal .rx-field select,.rx-modal .rx-field textarea{
  transition:border-color .25s ease,box-shadow .25s ease}
.rx-modal .rx-field input:focus,.rx-modal .rx-field select:focus,.rx-modal .rx-field textarea:focus{
  border-color:var(--teal,#0EA5A4);box-shadow:0 0 0 4px rgba(14,165,164,.16)}
.rx-modal .rx-field label{transition:color .25s ease,transform .25s ease}
.rx-modal .rx-field:focus-within label{color:var(--teal,#0EA5A4);transform:translateY(-1px)}
/* success: tick draw + pop */
#rxDemoSuccess .rx-big.mxp-go{animation:mxp-pop .5s cubic-bezier(.34,1.56,.64,1)}
#rxDemoSuccess .rx-big.mxp-go svg path{stroke-dasharray:26;stroke-dashoffset:26;
  animation:mxp-tick .45s .15s ease-out forwards}
/* confetti-lite burst (spans injected by JS) */
.mxp-confetti-stage{position:relative}
.mxp-confetti{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;
  pointer-events:none;opacity:0;z-index:5}
.mxp-confetti.mxp-burst{animation:mxp-burst .9s cubic-bezier(.16,.84,.44,1) forwards}
@keyframes mxp-burst{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:1}
  100%{transform:translate(calc(-50% + var(--mxp-cx,0px)),calc(-50% + var(--mxp-cy,-60px))) scale(.2) rotate(220deg);opacity:0}
}

/* ================= REDUCED MOTION: everything static ================= */
@media (prefers-reduced-motion:reduce){
  .mxp-glare,
  .mxp-notif-bar-fill,
  .phone-notif::before,
  .live-dot::before,
  .mxp-confetti,
  .med .box.mxp-pop,.med .box.mxp-pop svg path,
  .ring.mxp-ring-bump,
  #rxDemoSuccess .rx-big.mxp-go,#rxDemoSuccess .rx-big.mxp-go svg path,
  .rx-modal.mxp-modal.rx-open .rx-modal-card{animation:none!important}
  .phone.mxp-tilt-on,.mxp-glare,.rx-modal.mxp-modal::before,
  .rx-modal .rx-field input,.rx-modal .rx-field select,.rx-modal .rx-field textarea,
  .rx-modal .rx-field label{transition:none!important}
  .phone-notif{animation:none;transform:none;opacity:1}
  .phone-float{animation:none}
  .live-dot::after{animation:none}
  .mxp-glare{opacity:0}
}