/* ═══ Ecom Spectrum — software cover tiles + sliding rows ═══
   Shared by index.html (teaser rows) and portfolio.html (hero rows + slides). */

/* ── sliding rows (top row → left, bottom row → right) ── */
.cover-rows {
  --gap: clamp(12px, 1.4vw, 20px);
  position: relative; overflow: hidden;
  padding: 2vh 0 3vh;
  display: flex; flex-direction: column; gap: var(--gap);
}
.cover-rows::before, .cover-rows::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 2; pointer-events: none;
}
.cover-rows::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.cover-rows::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

.cover-row {
  display: flex; width: max-content; gap: var(--gap);
  will-change: transform;
  animation: row-left var(--dur, 58s) linear infinite;
}
.cover-row.rev { animation-name: row-right; }
@keyframes row-left  { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@keyframes row-right { from { transform: translateX(calc(-50% - var(--gap) / 2)); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .cover-row { animation-duration: 240s; } }

/* ── cover tile ── */
.cover {
  --ac: #f5a623;
  position: relative; flex: none;
  width: clamp(168px, 17vw, 250px); aspect-ratio: 1;
  border-radius: 18px; overflow: hidden;
  /* fixed units on purpose: % padding would resolve against the (huge) marquee row */
  padding: clamp(12px, 1.3vw, 19px);
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none; color: var(--text);
  background:
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--ac) 28%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--ac) 16%, #0a1230), #070d26 55%, #04081a);
  border: 1px solid color-mix(in srgb, var(--ac) 28%, rgba(242,245,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 50px -26px rgba(0,0,0,0.85);
  transition: transform 0.45s cubic-bezier(.2,.6,.2,1), border-color 0.45s, box-shadow 0.45s;
}
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform 0.9s ease;
}
.cover:hover { transform: translateY(-6px) scale(1.02); border-color: color-mix(in srgb, var(--ac) 70%, transparent); box-shadow: 0 34px 70px -22px color-mix(in srgb, var(--ac) 45%, transparent); }
.cover:hover::after { transform: translateX(120%); }

.cover .cv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cover .cv-ico {
  width: clamp(28px, 2.9vw, 42px); aspect-ratio: 1; border-radius: 28%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ac) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ac) 45%, transparent);
}
.cover .cv-ico svg { width: 58%; height: 58%; stroke: var(--ac); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cover .cv-tag { font-size: clamp(8px, 0.6vw, 10px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); text-align: right; white-space: nowrap; }
.cover .cv-art { flex: 1; min-height: 0; margin: clamp(10px, 1.1vw, 16px) 0 clamp(8px, 0.9vw, 14px); color: var(--ac); display: flex; align-items: center; }
.cover .cv-art svg { width: 100%; height: 100%; display: block; }
.cover .cv-name { font-weight: 650; font-size: clamp(13px, 1.15vw, 17px); letter-spacing: -0.015em; line-height: 1.15; }
.cover .cv-sub { font-size: clamp(9px, 0.72vw, 11.5px); color: var(--text-dim); margin-top: 4px; letter-spacing: 0.02em; }

@media (max-width: 600px) {
  .cover-row .cover .cv-sub { display: none; }
  .cover-row .cover .cv-name { font-size: 13px; }
}

/* large variant used inside portfolio slides */
.cover.lg { width: min(44vw, 520px); border-radius: 28px; padding: clamp(22px, 2.8vw, 38px); }
.cover.lg .cv-tag { font-size: 11px; }
.cover.lg .cv-ico { width: clamp(48px, 5vw, 72px); }
.cover.lg .cv-art { margin: clamp(20px, 2.4vw, 34px) 0 clamp(16px, 2vw, 28px); }
.cover.lg .cv-name { font-size: clamp(20px, 2.2vw, 30px); }
.cover.lg .cv-sub { font-size: 13px; margin-top: 6px; }
@media (max-width: 899px) { .cover.lg { width: min(78vw, 420px); } }