/* Wave 8, E16: UI and motion patterns studied in the "rapport" demo (round3/research-r3.md, E16), rebuilt in our own code
   and our own brand: color-blocked pipeline stages, tactile buttons, soft card lift,
   a glass phone tab bar, an active-item marker in the menu, and settle-in entrances (public/js/core.js LS.stagger, LS.countUp).
   Only transform, opacity and colors move. Reduce Motion turns all movement off; colors and contrast are unchanged
   (stage tints sit at 10 to 14 percent behind ink-colored text, so text keeps its AA contrast in every theme). */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.77,0,.175,1);--t-press:140ms;--t-hover:160ms}

/* Buttons answer the press (scale .97), quickly and interruptibly. */
.btn,.iconbtn,.chips button,.vt-chip span,.nav button,.tabbar button{transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,border-color var(--t-hover) ease,color var(--t-hover) ease,box-shadow var(--t-hover) ease}
.btn:active:not(:disabled),.iconbtn:active:not(:disabled),.chips button:active,.tabbar button:active{transform:scale(.97)}

/* Cards that open something lift a little under the pointer (pointer devices only, never on touch). */
@media (hover:hover) and (pointer:fine){
  .tpl,.vt-idea,.crm-deal,.th-card{transition:transform var(--t-hover) var(--ease-out),box-shadow var(--t-hover) ease,border-color var(--t-hover) ease}
  .tpl:hover,.crm-deal:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
}

/* Glass tab bar on phones: the list scrolling under it shows through softly where supported; solid otherwise. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,red 10%,white)){
  .tabbar{background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
}

/* Menu: the active item gets a sky marker that grows in, like a dock indicator. */
.nav button{position:relative}
.nav button::after{content:"";position:absolute;left:-6px;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:4px;background:var(--lake);transform:scaleY(0);opacity:0;transition:transform 200ms var(--ease-out),opacity 200ms ease}
.nav button[aria-current="page"]::after{transform:scaleY(1);opacity:1}

/* Color-blocked pipeline: each stage column gets its own band and a soft tint; each deal card an edge in that color. */
.crm-col.crm-tint{border-top:4px solid var(--sc);background:color-mix(in srgb,var(--sc) 7%,var(--sunk))}
.crm-col.crm-tint .colh{background:color-mix(in srgb,var(--sc) 13%,var(--surface));border-radius:8px;padding:6px 8px;margin-bottom:6px}
.crm-col.crm-tint .crm-deal{box-shadow:inset 3px 0 0 var(--sc)}
.crm-col.crm-tint.over{background:color-mix(in srgb,var(--sc) 16%,var(--sunk))}
@supports not (background:color-mix(in srgb,red 10%,white)){.crm-col.crm-tint,.crm-col.crm-tint .colh{background:var(--sunk)}}

/* KPI tiles: numbers in the display face, a quiet top accent. */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--lake),color-mix(in srgb,var(--lake) 30%,transparent))}

@media (prefers-reduced-motion:reduce){
  .btn,.iconbtn,.chips button,.vt-chip span,.nav button,.tabbar button,.tpl,.vt-idea,.crm-deal,.th-card,.nav button::after{transition:none}
  .btn:active,.iconbtn:active,.chips button:active,.tabbar button:active,.tpl:hover,.crm-deal:hover{transform:none}
}