/* Card 01 art, high-detail pass: a "new customers" line climbs, then store sales notifications land under it.
*/
.art--sales { flex: 1; min-height: 196px; margin: 18px -8px 16px; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; position: relative; }
.art--sales::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 40%, rgba(122, 244, 208, 0.09), transparent 70%); }

/* the chart panel */
.sc { padding: 10px 11px 6px; border-radius: 15px; background: linear-gradient(180deg, rgba(40, 42, 43, 0.7), rgba(28, 30, 31, 0.7));
  box-shadow: inset 0 0.5px 0 rgba(250, 250, 248, 0.14), inset 0 0 0 0.5px rgba(250, 250, 248, 0.07), 0 14px 30px -16px rgba(0, 0, 0, 0.95); }
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sc-t { font-size: 11.5px; font-weight: 500; color: var(--milk); }
.sc-p { font-size: 10.5px; color: rgba(250, 250, 248, 0.42); }
.sc svg { display: block; width: 100%; height: 64px; margin-top: 4px; overflow: visible; }
.sc-grid { stroke: rgba(250, 250, 248, 0.06); stroke-width: 1; }
.sc-line { fill: none; stroke: var(--growth); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(122, 244, 208, 0.45)); }
.sc-dot { fill: var(--growth); }
.sc-halo { fill: rgba(122, 244, 208, 0.22); }

/* the sales notifications */
.so { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 11px 8px 9px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(36, 58, 51, 0.7), rgba(24, 40, 35, 0.7));
  box-shadow: inset 0 0.5px 0 rgba(122, 244, 208, 0.5), inset 0 0 0 0.5px rgba(122, 244, 208, 0.28), 0 0 30px -14px rgba(122, 244, 208, 0.6), 0 10px 24px -14px rgba(0, 0, 0, 0.9); }
.so-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(180deg, #9af8dc, #5fdcb8); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.6), 0 0 14px -4px rgba(122, 244, 208, 0.7); }
.so-ic svg { width: 15px; height: 15px; }
.so-tx { min-width: 0; display: block; }
.so-t { display: block; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--milk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.so-b { display: block; font-size: 11px; line-height: 1.35; color: rgba(250, 250, 248, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-w { font-size: 11px; color: rgba(122, 244, 208, 0.85); }
.sales-note { font-size: 10.5px; color: rgba(250, 250, 248, 0.38); text-align: right; }

/* sequence, played once when the card is in view (script adds .play): the line draws, then orders land, the older one steps back */
.art--sales .sc, .art--sales .so { opacity: 0; transform: translateY(8px) scale(.98); }
.art--sales .sc-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.art--sales .sc-area, .art--sales .sc-dot, .art--sales .sc-halo { opacity: 0; }
.art--sales.play .sc { animation: salesIn .8s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.art--sales.play .sc-line { animation: salesDraw 1.8s cubic-bezier(.45, 0, .2, 1) .5s forwards; }
.art--sales.play .sc-area { animation: salesFade 1s ease 1.4s forwards; }
.art--sales.play .sc-dot { animation: salesFade .4s ease 2.2s forwards; }
.art--sales.play .sc-halo { transform-box: fill-box; transform-origin: center; animation: salesHalo 1.6s ease-out 2.2s forwards; }
.art--sales.play .so--1 { animation: salesIn .8s cubic-bezier(.2, .8, .2, 1) 2.4s forwards, salesBack 1s ease 4.4s forwards; }
.art--sales.play .so--2 { animation: salesIn .8s cubic-bezier(.2, .8, .2, 1) 3.3s forwards; }
@keyframes salesIn { to { opacity: 1; transform: none; } }
@keyframes salesDraw { to { stroke-dashoffset: 0; } }
@keyframes salesFade { to { opacity: 1; } }
@keyframes salesHalo { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes salesBack { from { opacity: 1; transform: none; } to { opacity: .5; transform: scale(.97); } }

@media (prefers-reduced-motion: reduce) {
  .art--sales .sc, .art--sales .so, .art--sales.play .sc, .art--sales.play .so { opacity: 1; transform: none; animation: none; }
  .art--sales .sc-line, .art--sales.play .sc-line { stroke-dashoffset: 0; animation: none; }
  .art--sales .sc-area, .art--sales .sc-dot { opacity: 1; animation: none; }
  .art--sales .so--1 { opacity: .5; }
}
@media (max-width: 860px) {
  .art--sales { min-height: 200px; margin: 14px 0 16px; }
  .sc svg { height: 76px; }
  .sc-t, .so-t { font-size: 13px; } .sc-p, .so-b, .so-w, .sales-note { font-size: 12px; }
  .so { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 10px 12px 10px 10px; } .so-ic { width: 30px; height: 30px; border-radius: 8px; }
}