/* ===========================================================
   Micro-interactions layer — Dental Hub Hi-Fi
   Overrides/augments base styles. Safe to include after main css.
   =========================================================== */

/* ---- tokens ---- */
:root{
  --mi-ease: cubic-bezier(.2,.7,.25,1);
  --mi-ease-out: cubic-bezier(.16,1,.3,1);
  --mi-fast: 160ms;
  --mi-base: 240ms;
  --mi-slow: 420ms;
}

/* ---- buttons ---- */
.btn{
  transition:
    background var(--mi-fast) var(--mi-ease),
    color var(--mi-fast) var(--mi-ease),
    border-color var(--mi-fast) var(--mi-ease),
    transform var(--mi-fast) var(--mi-ease),
    box-shadow var(--mi-fast) var(--mi-ease);
  will-change: transform;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); transition-duration: 80ms; }
.btn.primary:hover{ box-shadow: 0 6px 18px -6px rgba(11,42,91,.45); }
.btn.accent:hover{ box-shadow: 0 6px 18px -6px rgba(184,140,65,.55); }

/* ripple-ish focus */
.btn:focus-visible{ outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---- product card ---- */
.pcard{
  transition:
    border-color var(--mi-fast) var(--mi-ease),
    transform var(--mi-base) var(--mi-ease-out),
    box-shadow var(--mi-base) var(--mi-ease-out);
}
.pcard:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(11,42,91,.18);
  border-color: var(--navy-100);
}
.pcard .imgwrap{ transition: background var(--mi-fast) var(--mi-ease); }
.pcard .imgwrap .ph-img{ transition: transform 500ms var(--mi-ease-out); }
.pcard:hover .imgwrap .ph-img{ transform: scale(1.06); }

/* quick actions on hover (add to cart reveal) */
.pcard .quick-add{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:9px 12px; background:var(--navy); color:#fff;
  border-radius:var(--r-sm); font-size:12px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:6px;
  opacity:0; transform: translateY(6px);
  transition: opacity var(--mi-base) var(--mi-ease), transform var(--mi-base) var(--mi-ease-out);
  pointer-events:none; cursor:pointer;
  box-shadow: 0 6px 14px -6px rgba(11,42,91,.4);
}
.pcard:hover .quick-add{ opacity:1; transform: translateY(0); pointer-events:auto; }
.pcard .quick-add:hover{ background: var(--navy-700); }
.pcard .quick-add.added{ background: var(--good); }
.pcard .quick-add.added::before{ content:""; }

/* ---- favorite heart ---- */
.pcard .fav, .fav-btn{
  transition: transform var(--mi-fast) var(--mi-ease), background var(--mi-fast) var(--mi-ease), color var(--mi-fast) var(--mi-ease), border-color var(--mi-fast) var(--mi-ease);
  cursor:pointer;
}
.pcard .fav:hover, .fav-btn:hover{
  transform: scale(1.08);
  border-color: var(--bad);
  color: var(--bad);
}
.pcard .fav.on, .fav-btn.on{
  color:#fff; background: var(--bad); border-color: var(--bad);
  animation: heartPop 420ms var(--mi-ease-out);
}
.pcard .fav.on svg, .fav-btn.on svg{ fill: currentColor; stroke: currentColor; }

@keyframes heartPop{
  0%  { transform: scale(1); }
  35% { transform: scale(1.35); }
  60% { transform: scale(.92); }
  100%{ transform: scale(1); }
}

/* floating +1 when favorited */
.fav-pulse{
  position:absolute; pointer-events:none;
  font-size:11px; font-weight:700; color:var(--bad);
  animation: favFly 700ms var(--mi-ease-out) forwards;
}
@keyframes favFly{
  from { transform: translate(0,0); opacity:1 }
  to   { transform: translate(0,-28px); opacity:0 }
}

/* ---- category tile hover ---- */
.cat-tile{
  transition: transform var(--mi-fast) var(--mi-ease), background var(--mi-fast) var(--mi-ease), border-color var(--mi-fast) var(--mi-ease), box-shadow var(--mi-base) var(--mi-ease);
  cursor: pointer;
}
.cat-tile:hover{
  transform: translateY(-2px);
  background: var(--paper);
  border-color: var(--navy-100);
  box-shadow: 0 8px 22px -10px rgba(11,42,91,.2);
}
.cat-tile:hover .cat-ic{ color: var(--navy); transform: scale(1.08); }
.cat-tile .cat-ic{ transition: transform var(--mi-fast) var(--mi-ease), color var(--mi-fast) var(--mi-ease); }

/* ---- subnav hover ---- */
.subnav a{ transition: color var(--mi-fast) var(--mi-ease), background var(--mi-fast) var(--mi-ease); position:relative; }
.subnav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px;
  background: var(--navy); border-radius:2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--mi-base) var(--mi-ease-out);
}
.subnav a:hover::after, .subnav a.active::after{ transform: scaleX(1); }

/* ---- icon-btn (topbar) ---- */
.icon-btn{ transition: background var(--mi-fast) var(--mi-ease), color var(--mi-fast) var(--mi-ease); cursor:pointer; }
.icon-btn:hover{ background: var(--paper-2); color: var(--navy); }
.icon-btn .count{ transition: transform var(--mi-base) var(--mi-ease-out), background var(--mi-fast) var(--mi-ease); }
.icon-btn .count.bump{ animation: badgeBump 500ms var(--mi-ease-out); }
@keyframes badgeBump{
  0%  { transform: scale(1); }
  30% { transform: scale(1.45); background: var(--good); }
  100%{ transform: scale(1); }
}

/* ---- quantity stepper ---- */
.qty-step{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--paper); }
.qty-step button{ width:30px; height:30px; border:0; background:transparent; cursor:pointer; font-size:16px; color:var(--ink-soft); transition: background var(--mi-fast) var(--mi-ease), color var(--mi-fast) var(--mi-ease); }
.qty-step button:hover{ background:var(--paper-2); color:var(--navy); }
.qty-step .val{ min-width:32px; text-align:center; font-weight:600; font-size:13px; padding:0 6px; transition: transform var(--mi-fast) var(--mi-ease-out); }
.qty-step .val.bump{ animation: qtyBump 320ms var(--mi-ease-out); }
@keyframes qtyBump{
  0%  { transform: translateY(0); opacity:1 }
  50% { transform: translateY(-5px); opacity:.3 }
  51% { transform: translateY(5px); opacity:.3 }
  100%{ transform: translateY(0); opacity:1 }
}

/* ---- toast ---- */
.toast-host{
  position:fixed; top:72px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width:260px; max-width:340px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow: 0 14px 34px -14px rgba(11,42,91,.35), 0 4px 10px -4px rgba(11,42,91,.12);
  padding:12px 14px; display:flex; gap:10px; align-items:flex-start;
  transform: translateX(20px); opacity:0;
  animation: toastIn 260ms var(--mi-ease-out) forwards;
  font-size:13px;
}
.toast.leaving{ animation: toastOut 200ms var(--mi-ease) forwards; }
.toast .t-ic{ width:28px; height:28px; flex-shrink:0; border-radius:999px; display:flex; align-items:center; justify-content:center; background: var(--good); color:#fff; font-size:14px; }
.toast.err .t-ic{ background: var(--bad); }
.toast.info .t-ic{ background: var(--navy); }
.toast .t-body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.toast .t-title{ font-weight:600; font-size:13px; color:var(--ink); }
.toast .t-sub{ font-size:11.5px; color:var(--ink-soft); line-height:1.35; }
.toast .t-x{ color:var(--ink-faint); cursor:pointer; font-size:16px; line-height:1; padding:2px 4px; }
.toast .t-x:hover{ color:var(--ink); }

@keyframes toastIn{ to { transform: translateX(0); opacity:1 } }
@keyframes toastOut{ to { transform: translateX(20px); opacity:0 } }

/* ---- fly-to-cart particle ---- */
.fly-ghost{
  position:fixed; z-index:9998; pointer-events:none;
  width:48px; height:48px; border-radius:var(--r-sm); overflow:hidden;
  box-shadow: 0 14px 30px -10px rgba(11,42,91,.45);
  border:1px solid var(--line); background:var(--paper);
  transition: transform 680ms var(--mi-ease-out), opacity 680ms var(--mi-ease-out), width 680ms var(--mi-ease-out), height 680ms var(--mi-ease-out);
}
.fly-ghost img{ width:100%; height:100%; object-fit:cover; }

/* ---- scroll reveal ---- */
.reveal{ opacity:0; transform: translateY(14px); transition: opacity 520ms var(--mi-ease-out), transform 520ms var(--mi-ease-out); will-change: opacity, transform; }
.reveal.in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  *{ animation-duration: 0s !important; transition-duration: 0s !important; }
}

/* ---- skeleton shimmer for images that haven't loaded ---- */
.ph-img{ background: linear-gradient(90deg, rgba(11,42,91,.04) 0%, rgba(11,42,91,.09) 50%, rgba(11,42,91,.04) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.ph-img.loaded{ animation:none; background:var(--paper-2); }
@keyframes shimmer{
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ---- pager button hover ---- */
.pager button{ transition: background var(--mi-fast) var(--mi-ease), color var(--mi-fast) var(--mi-ease), border-color var(--mi-fast) var(--mi-ease); }
.pager button:hover:not(.active){ background: var(--paper-2); border-color: var(--navy-100); color: var(--navy); }

/* ---- page fade on switch ---- */
.page.active{ animation: pageIn 280ms var(--mi-ease-out); }
@keyframes pageIn{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }