/* =========================================================
   Micro-interactions — buttons, processing, modals, inputs, topbar
   Loaded last on purpose: only adds transform/animation touches on
   top of existing rules, never redefines layout/color. Respects the
   existing prefers-reduced-motion reset in base.css (no changes needed
   here — that rule already zeroes out every animation/transition below).
========================================================= */

/* ---------- 1. Buttons: tactile press + refined hover ---------- */
.btn-primary,.btn-secondary,.btn-danger,.btn-upgrade,.btn-connect,.btn-disconnect,
.action-btn-primary-sm,.icon-btn,.row-action-btn,.page-btn,.ask-send,.refer-btn,
.qa-item,.acct-seg-btn,.date-pill,.menu-toggle,.avatar-btn{
  transition:background .15s ease, border-color .15s ease, color .15s ease,
             box-shadow .2s ease, transform .12s cubic-bezier(.34,1.56,.64,1);
}
.suggest-btn,.acct-dd-item,.gsearch-item,.notif-mark-all{
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.btn-primary:hover{box-shadow:0 6px 18px rgba(124,58,237,.38);}
.date-pill:hover{border-color:var(--purple-200); background:var(--purple-50); transform:translateY(-1px);}
.notif-mark-all:hover{opacity:.75;}

.btn-primary:active,.btn-secondary:active,.btn-danger:active,.btn-upgrade:active,
.btn-connect:active,.btn-disconnect:active,.action-btn-primary-sm:active,
.icon-btn:active,.row-action-btn:active,.ask-send:active,.refer-btn:active,
.qa-item:active,.acct-seg-btn:active,.date-pill:active,.menu-toggle:active,
.avatar-btn:active{
  transform:scale(.94);
}
.page-btn:active:not(:disabled){transform:scale(.9);}
.suggest-btn:active,.acct-dd-item:active,.gsearch-item:active,.notif-mark-all:active{
  transform:scale(.98);
}

/* ---------- 2. Processing / loading states ---------- */
/* Staged checklist (website scan/verify/sync, GMB sync, etc.) */
@keyframes procPulseRing{
  0%{box-shadow:0 0 0 0 rgba(124,58,237,.35);}
  70%{box-shadow:0 0 0 7px rgba(124,58,237,0);}
  100%{box-shadow:0 0 0 0 rgba(124,58,237,0);}
}
.proc-step.active .proc-step-ic{animation:procPulseRing 1.6s ease-out infinite;}

@keyframes procPop{
  0%{transform:scale(.4);}
  60%{transform:scale(1.15);}
  100%{transform:scale(1);}
}
.proc-step.done .proc-step-ic{animation:procPop .35s cubic-bezier(.34,1.56,.64,1);}

/* Freshly-inserted loading panels (AI wizard "processing" step, onboarding search) */
.ob-loading-state{animation:viewFadeIn .3s ease;}

/* ---------- 3. Modals: springier entrance + close interaction ---------- */
.modal-overlay .modal{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.modal-close{transition:background .15s ease, transform .18s cubic-bezier(.34,1.56,.64,1);}
.modal-close:hover{transform:rotate(90deg);}
.modal-close:active{transform:rotate(90deg) scale(.88);}

.account-dropdown{transition:opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1);}
.notif-dropdown{transition:opacity .18s ease, transform .22s cubic-bezier(.34,1.56,.64,1);}
.drawer{transition:transform .28s cubic-bezier(.32,.72,0,1);}

/* ---------- 4. Input sections: smoother focus + validation feedback ---------- */
.form-input,.ask-input{transition:border-color .15s ease, box-shadow .15s ease;}

@keyframes inputShake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.form-input.invalid{animation:inputShake .4s ease;}

.switch-track::before{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}

/* ---------- 5. Topbar icons ---------- */
.icon-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-sm);}
.icon-btn:active{transform:translateY(0) scale(.92);}

@keyframes badgePulse{
  0%{box-shadow:0 0 0 0 rgba(220,38,38,.45);}
  70%{box-shadow:0 0 0 6px rgba(220,38,38,0);}
  100%{box-shadow:0 0 0 0 rgba(220,38,38,0);}
}
.dot-badge{animation:badgePulse 2s ease-out infinite;}

/* Assistant panel refresh icon spins like it's actually refreshing */
.assistant-head .wave{transition:transform .25s ease, color .15s ease;}
.assistant-head .wave:hover{transform:rotate(180deg); color:var(--purple-600);}
.assistant-head .wave:active{transform:rotate(180deg) scale(.85);}

.avatar-btn:hover{transform:scale(1.04);}

/* Read/unread state change in the notification list */
.notif-item{transition:background .25s ease;}


/* =========================================================================
   MOTION SYSTEM v2 — "Bloom"
   One motion language for the whole product:
     · entrances  decelerate hard (expo-out) and land softly
     · overlays   arrive with a soft spring, leave fast (exit < enter)
     · feedback   is tactile (press, glint, pop) but never bouncy at rest
     · numbers    count up (js/core/motion.js)
   Only transform / opacity / backdrop-filter are animated (GPU-cheap).
   Reduced-motion: see the block at the very end (durations, delays, loops).
========================================================================= */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* expo-out: entrances, lifts   */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);/* overlays, pops, toggles     */
  --ease-in:cubic-bezier(.7,0,.84,0);        /* exits                       */
  --dur-1:.14s; --dur-2:.24s; --dur-3:.42s; --dur-4:.7s;
  --stagger:55ms;
}

@keyframes viewEnter{from{opacity:0;} to{opacity:1;}}
@keyframes riseIn{from{opacity:0; transform:translateY(14px) scale(.985);} to{opacity:1; transform:none;}}
@keyframes chipPop{0%{transform:scale(.9);} 60%{transform:scale(1.06);} 100%{transform:scale(1);}}
@keyframes floatY{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
@keyframes toastTimer{from{transform:scaleX(1);} to{transform:scaleX(0);}}
@keyframes skeletonSweep{0%{background-position:120% 0;} 100%{background-position:-120% 0;}}
@keyframes navBarIn{from{transform:scaleY(0);} to{transform:scaleY(1);}}

/* ---------- A. Views: page arrives, then its blocks rise in sequence ---------- */
.view.active{animation:viewEnter var(--dur-2) ease backwards;}
/* :where() keeps specificity at 0 so any element with its own animation wins */
:where(.view.active) > :where(:not([class*="grid"])),
:where(.view.active) > [class*="grid"] > *{
  animation:riseIn .6s var(--ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--stagger));
}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(2),:where(.view.active) > [class*="grid"] > *:nth-child(2){--i:1;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(3),:where(.view.active) > [class*="grid"] > *:nth-child(3){--i:2;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(4),:where(.view.active) > [class*="grid"] > *:nth-child(4){--i:3;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(5),:where(.view.active) > [class*="grid"] > *:nth-child(5){--i:4;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(6),:where(.view.active) > [class*="grid"] > *:nth-child(6){--i:5;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(7),:where(.view.active) > [class*="grid"] > *:nth-child(7){--i:6;}
:where(.view.active) > :where(:not([class*="grid"])):nth-child(n+8),:where(.view.active) > [class*="grid"] > *:nth-child(n+8){--i:7;}

/* ---------- B. Overlays: blur-in backdrop, springy panel, quick exit ---------- */
.modal-overlay,.drawer-overlay{
  backdrop-filter:blur(0px);
  transition:opacity var(--dur-2) ease, backdrop-filter var(--dur-3) ease;
}
.modal-overlay.show,.drawer-overlay.show{backdrop-filter:blur(5px);}
.modal{transform:translateY(24px) scale(.95); opacity:0;}
.modal-overlay .modal{transition:transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) ease;}
.modal-overlay.show .modal{opacity:1;}
.modal-overlay:not(.show) .modal{
  transition-duration:.16s; transition-timing-function:var(--ease-in);
}
/* modal content settles in a beat after the panel */
:where(.modal-overlay.show .modal) > *{
  animation:riseIn .5s var(--ease-out) backwards;
  animation-delay:calc(60ms + var(--i,0) * 35ms);
}
:where(.modal-overlay.show .modal) > *:nth-child(2){--i:1;}
:where(.modal-overlay.show .modal) > *:nth-child(3){--i:2;}
:where(.modal-overlay.show .modal) > *:nth-child(4){--i:3;}
:where(.modal-overlay.show .modal) > *:nth-child(n+5){--i:4;}

/* ---------- C. Toast: springs up, icon pops, a hairline shows time left ---------- */
.toast{overflow:hidden;}
.toast::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:currentColor; opacity:.3; transform-origin:left center; transform:scaleX(0);
}
.toast.toast-run::after{transform:scaleX(0); animation:toastTimer var(--toast-ms,2600ms) linear;}
.toast.show .toast-icon svg{animation:procPop .5s var(--ease-spring) .06s backwards;}

/* ---------- D. Signature: primary buttons carry a one-shot light glint ---------- */
.btn-primary,.btn-upgrade,.action-btn-primary-sm{position:relative; overflow:hidden; isolation:isolate;}
.btn-primary::after,.btn-upgrade::after,.action-btn-primary-sm::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform:translateX(-130%);
}
.btn-primary:hover:not(:disabled)::after,.btn-upgrade:hover:not(:disabled)::after,
.action-btn-primary-sm:hover:not(:disabled)::after{
  transform:translateX(130%); transition:transform .75s var(--ease-out);
}

/* ---------- E. Interactive cards lift; chips + tabs answer the finger ---------- */
.action-card,.smai-conn-card,.inv-row-card,.booking-row-card{
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease,
             border-color var(--dur-2) ease, background .2s ease;
}
.action-card:hover,.smai-conn-card:hover{
  transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--purple-200);
}
.action-card:active,.smai-conn-card:active{transform:translateY(-1px) scale(.99);}
.chip,.cs-pill,.ci-filter-chip,.seo-kw-chip,.mkt-tab{
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             transform .16s var(--ease-spring);
}
.chip:active,.cs-pill:active,.ci-filter-chip:active,.mkt-tab:active{transform:scale(.94);}
.chip.active,.cs-pill.active,.ci-filter-chip.active,.mkt-tab.active{animation:chipPop .34s var(--ease-spring);}

/* ---------- F. Sidebar: accent bar grows on the active item, icon nudges ---------- */
.nav-item{transition:background .15s ease, color .15s ease, transform var(--dur-2) var(--ease-out);}
.nav-item:hover{transform:translateX(2px);}
.nav-item::before{
  content:""; position:absolute; left:-6px; top:22%; bottom:22%; width:3px; border-radius:3px;
  background:var(--purple-600); transform:scaleY(0); transform-origin:center;
}
.nav-item.active::before{animation:navBarIn .38s var(--ease-spring) backwards; transform:scaleY(1);}
.nav-item.active svg{transition:transform var(--dur-3) var(--ease-spring);}
.nav-item:hover svg{transform:scale(1.08);}

/* ---------- G. Empty states breathe; skeletons shimmer in brand tint ---------- */
.empty-ic{animation:floatY 3.8s ease-in-out infinite;}
.skeleton,.skeleton-line,.skeleton-block,.skeleton-circle{
  display:block; position:relative; overflow:hidden; color:transparent !important;
  background:linear-gradient(100deg, var(--ink-100) 30%, var(--purple-50) 45%, var(--ink-100) 60%);
  background-size:250% 100%; animation:skeletonSweep 1.5s ease-in-out infinite;
}
.skeleton-line{height:12px; border-radius:6px; margin:8px 0;}
.skeleton-block{height:84px; border-radius:var(--radius-md);}
.skeleton-circle{width:40px; height:40px; border-radius:50%;}

/* ---------- H. Numbers: js/core/motion.js tweens .stat-value; keep digits steady ---------- */
.stat-value,.ci-kpi-value{font-variant-numeric:tabular-nums;}

/* ---------- Reduced motion: no travel, no waiting, no loops ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-delay:0s !important; animation-iteration-count:1 !important;}
  .modal{transform:none;}
  .toast::after,.btn-primary::after,.btn-upgrade::after,.action-btn-primary-sm::after{display:none;}
  .modal-overlay,.drawer-overlay{backdrop-filter:none;}
}