/* ============================================================
   AK Traders — custom utilities + keyframes that Tailwind
   utilities can't express (blueprint textures, marquee, pulse,
   value-flash, segmented stock bar). Loaded after the CDN.
   Fonts arrive via a <link> in the head.
   ============================================================ */

::selection { background: #d8e2ff; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* isometric blueprint texture for dark panels */
.iso-grid {
  background-image:
    repeating-linear-gradient(30deg, rgba(173,198,255,.06) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(150deg, rgba(173,198,255,.06) 0 1px, transparent 1px 26px);
}
/* product-shot placeholder texture for light media wells */
.iso-media {
  background-color: #e5efff;
  background-image:
    repeating-linear-gradient(30deg, rgba(15,28,44,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(150deg, rgba(15,28,44,.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(15,28,44,.05) 0 1px, transparent 1px 22px);
}

/* live indicator dot */
.live-dot { width: 8px; height: 8px; border-radius: 9999px; background: #2ee06a; box-shadow: 0 0 0 0 rgba(46,224,106,.6); animation: akpulse 1.8s infinite; }
.live-dot--sm { width: 7px; height: 7px; }
@keyframes akpulse { 0% { box-shadow: 0 0 0 0 rgba(46,224,106,.55); } 70% { box-shadow: 0 0 0 7px rgba(46,224,106,0); } 100% { box-shadow: 0 0 0 0 rgba(46,224,106,0); } }

/* ticker marquee */
.marquee { overflow: hidden; }
.marquee__track { display: flex; white-space: nowrap; animation: akmarquee linear infinite; will-change: transform; }
@keyframes akmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* value flash on live change */
.flash { display: inline-block; border-radius: 2px; padding: 0 2px; margin: 0 -2px; }
.flash.is-up   { animation: akflup .7s ease-out; }
.flash.is-down { animation: akfldn .7s ease-out; }
@keyframes akflup { from { background: rgba(27,122,62,.32); } to { background: transparent; } }
@keyframes akfldn { from { background: rgba(186,26,26,.26); } to { background: transparent; } }

/* segmented stock bar */
.seg { display: flex; gap: 2px; }
.seg__u { flex: 1; height: 9px; border-radius: 1px; background: #dbe9ff; min-width: 2px; }
.seg--high .seg__u.on { background: #1b7a3e; }
.seg--mid  .seg__u.on { background: #b87800; }
.seg--low  .seg__u.on { background: #ba1a1a; }

/* toast */
.toast-in { animation: aktoast .2s ease-out; }
@keyframes aktoast { from { transform: translate(-50%, 12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* card-wall grid (display toggled by JS so it never fights `hidden`) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 18px; }

/* press affordance for primary buttons (isometric edge) */
.btn-press:active { transform: translateY(2px); }

/* cart drawer slide */
.drawer { transition: transform .22s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .live-dot, .marquee__track, .flash { animation: none !important; }
}