/*
  Hover / tap previews — the four Figma "Hover / …" cells (400×400) and their
  motion. Every animated element's *base* CSS is the Figma end state; the
  keyframes only describe how it arrives, so reduced-motion just shows the
  end state. Timeline per module runs ~1.2s from the moment the cell activates.
*/
.pv__hex { position: absolute; inset: 0; width: 400px; height: 400px; }
.pv { position: absolute; inset: 0; }

/* Skeleton primitives: pill bars by default, explicit radii where Figma set them. */
.sk { position: absolute; display: block; border-radius: 999px; }
.sk-r0 { border-radius: 0; }
.sk-r4 { border-radius: 4px; }
.sk-r8 { border-radius: 8px; }
.sk-white { background: var(--white); }
.sk-stone { background: var(--stone); }
.sk-honey { background: var(--honey); }
.sk-ink { background: var(--ink); }
.sk-mint { background: var(--mint); }
.sk-cream { background: var(--cream); }
.sk-instock { background: var(--instock-bg); }
.sk-low { background: var(--low-bg); }

.pill { position: absolute; display: inline-block; padding: 2px 7px; border-radius: 25px; font-size: 11px; font-weight: 600; line-height: 13px; white-space: nowrap; }
.pill--honey { background: var(--honey); color: var(--ink); }
.pill--instock { background: var(--instock-bg); color: var(--instock-fg); font-size: 10px; padding: 3px 8px; line-height: 12px; }
.pill--stone { background: var(--stone); color: var(--muted); font-size: 10px; padding: 3px 8px; line-height: 12px; }

.pv__caption { position: absolute; left: 0; right: 0; text-align: center; font-size: 15px; font-weight: 600; line-height: 18px; color: var(--ink); animation: rise 0.4s var(--ease) 1.1s both; }
.pv__caption--14 { font-size: 14px; line-height: 17px; }

@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- Inventory · "Stock received" -------------------------------------------
   Table rows settle, the package drops into the stat tile, +1 pops, and the
   count rolls 128 → 129. */
.pv-inv__row { position: absolute; left: 0; width: 400px; height: 20px; animation: row-in 0.35s var(--ease) both; }
.pv-inv__row:nth-child(1 of .pv-inv__row) { animation-delay: 0.1s; }
.pv-inv__row:nth-child(2 of .pv-inv__row) { animation-delay: 0.18s; }
.pv-inv__row:nth-child(3 of .pv-inv__row) { animation-delay: 0.26s; }
.pv-inv__row:nth-child(4 of .pv-inv__row) { animation-delay: 0.34s; }
.pv-inv__pkg { position: absolute; width: 22px; height: 22px; animation: inv-drop 0.5s var(--ease) 0.25s both; }
@keyframes inv-drop { 0% { opacity: 0; transform: translateY(-16px) scale(0.6); } 60% { transform: translateY(2px) scale(1.04); } 100% { opacity: 1; transform: none; } }
.pv-inv__plus { animation: pop 0.4s var(--ease) 0.6s both; }
.pv-inv__count { position: absolute; height: 20px; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 20px; color: var(--ink); }
.pv-inv__count-roll { display: flex; flex-direction: column; transform: translateY(-50%); animation: count-up 0.35s var(--ease) 0.8s both; }
.pv-inv__count-roll span { display: block; height: 20px; }
@keyframes count-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---- Orders · "3 new sales" ---------------------------------------------------
   Each toast lands at the front, then is pushed back by the next one. Final
   positions/opacities are Figma's; --o is the toast's resting opacity. */
.toast {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 10px; opacity: var(--o);
  background: var(--white); border-radius: 10px; box-shadow: 0 6px 14px rgba(15, 59, 43, 0.14); white-space: nowrap;
}
.toast__coin { width: 32px; height: 32px; border-radius: 16px; background: var(--honey); display: grid; place-items: center; font-size: 16px; font-weight: 600; color: var(--ink); flex: none; }
.toast__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.toast__text b { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--ink); }
.toast__text small { font-size: 11px; font-weight: 400; line-height: 13px; color: var(--muted); }
.toast .pill { position: static; margin-left: auto; padding: 2px 7px; line-height: 12px; }
.toast--back  { animation: toast-back 1.2s var(--ease) 0.05s both; }
.toast--mid   { animation: toast-mid 0.9s var(--ease) 0.4s both; }
.toast--front { animation: toast-front 0.45s var(--ease) 0.75s both; }
@keyframes toast-back {
  0%   { opacity: 0;  transform: translate(-20px, 66px); }
  15%  { opacity: 1;  transform: translate(-20px, 26px); }
  45%  { opacity: 0.8; transform: translate(-10px, 12px); }
  75%, 100% { opacity: 0.55; transform: none; }
}
@keyframes toast-mid {
  0%   { opacity: 0; transform: translate(-10px, 54px); }
  22%  { opacity: 1; transform: translate(-10px, 14px); }
  65%, 100% { opacity: 0.8; transform: none; }
}
@keyframes toast-front { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ---- Web Design · "Site is live" ----------------------------------------------
   Browser chrome fades in, the hero block and cards build, then the URL pill
   and Live badge pop. */
.pv-web__chrome { animation: fade 0.3s var(--ease) 0.05s both; }
.pv-web__url { animation: pop 0.35s var(--ease) 0.7s both; }
.pv-web__live { animation: pop 0.35s var(--ease) 0.95s both; }
.pv-web__hero { position: absolute; border-radius: 10px; background: var(--leaf); transform-origin: 50% 100%; animation: hero-in 0.5s var(--ease) 0.3s both; }
@keyframes hero-in { from { opacity: 0; transform: scaleY(0.6); } }
.pv-web__card { position: absolute; width: 106px; height: 40px; border-radius: 8px; background: var(--white); animation: row-in 0.4s var(--ease) both; }
.pv-web__card:nth-child(1 of .pv-web__card) { animation-delay: 0.5s; }
.pv-web__card:nth-child(2 of .pv-web__card) { animation-delay: 0.6s; }
.pv-web__card:nth-child(3 of .pv-web__card) { animation-delay: 0.7s; }

/* ---- Quotes & Invoices · "Quote generated" -----------------------------------
   "New quote" gets pressed, the document slides up under it, rows fill in,
   and a tilted Sent badge pops on. */
.pv-qt__btn {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 0; border-radius: 8px;
  background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 500; line-height: 16px; cursor: default;
  animation: press 0.45s var(--ease) 0.1s both;
}
.pv-qt__btn-dot { width: 24px; height: 24px; border-radius: 12px; background: var(--white); color: var(--ink); display: grid; place-items: center; font-size: 14px; font-weight: 600; }
@keyframes press { 0% { transform: scale(1); } 35% { transform: scale(0.94); filter: brightness(1.25); } 100% { transform: scale(1); } }
.pv-qt__doc { position: absolute; width: 176px; height: 170px; border-radius: 8px; background: var(--white); filter: drop-shadow(0 8px 9px rgba(15, 59, 43, 0.14)); animation: doc-in 0.5s var(--ease) 0.4s both; }
@keyframes doc-in { from { opacity: 0; transform: translateY(24px); } }
.pv-qt__ref { position: absolute; font-size: 11px; font-weight: 600; line-height: 13px; color: var(--ink); }
.pv-qt__row { position: absolute; left: 0; width: 176px; height: 6px; animation: row-in 0.3s var(--ease) both; }
.pv-qt__row .sk { top: 0; }
.pv-qt__row:nth-child(1 of .pv-qt__row) { animation-delay: 0.6s; }
.pv-qt__row:nth-child(2 of .pv-qt__row) { animation-delay: 0.68s; }
.pv-qt__row:nth-child(3 of .pv-qt__row) { animation-delay: 0.76s; }
.pv-qt__row:nth-child(4 of .pv-qt__row) { animation-delay: 0.84s; }
.pv-qt__sent { font-size: 11px; line-height: 14px; padding: 3px 8px; transform: rotate(-4deg); animation: sent-pop 0.4s var(--ease) 1s both; }
@keyframes sent-pop { 0% { opacity: 0; transform: rotate(-4deg) scale(0); } 70% { opacity: 1; transform: rotate(-4deg) scale(1.12); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }

/* Reduced motion: jump straight to every end state. */
@media (prefers-reduced-motion: reduce) {
  .preview * { animation: none !important; transition: none !important; }
}