/* ===========================================================================
   showcase.css — animated product carousel that fills the space after the
   architecture diagram. Two marquee rows drift in opposite directions, cards
   gently float (moving together), edges fade to black, hover pauses, each card
   links to its solution. Pure CSS motion (rows cloned by js/showcase.js for a
   seamless loop). Lives on the black band continuing from the architecture.
   =========================================================================== */

.showcase { padding-top: clamp(28px, 4vw, 52px); overflow: hidden; }

.showcase .container { max-width: 760px; }

/* marquee viewport */
.mq {
  margin-top: clamp(40px, 6vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq-row {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  width: max-content;
  will-change: transform;
}
/* Rows are driven by js/showcase.js (transform). It eases the speed to 0 on
   hover for a smooth stop, rather than an abrupt CSS animation pause. */

/* card */
.show-card {
  flex: none;
  width: clamp(258px, 26vw, 320px);
  color: var(--text-on-black);
  animation: showFloat 6s ease-in-out infinite;
  transition: transform 0.35s var(--ease);
}
.show-card:nth-child(2n) { animation-duration: 7s; animation-delay: -1.5s; }
.show-card:nth-child(3n) { animation-duration: 5.4s; animation-delay: -0.8s; }
/* Lift + enlarge lives on the inner window so it never fights the card's float
   animation (both would target `transform`). This makes the hovered card rise
   and grow smoothly while the carousel eases to a stop. */
.show-card:hover .show-win { transform: translateY(-12px) scale(1.045); }

.show-win {
  border: 1px solid var(--line-on-black);
  border-radius: 14px;
  overflow: hidden;
  background: #0f0f12;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.8);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.4s var(--ease);
}
.show-card:hover .show-win { border-color: rgba(201,168,106,.5); box-shadow: 0 30px 60px -26px rgba(0,0,0,.9); }

.show-winbar { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; background: #17171b; border-bottom: 1px solid var(--line-on-black); }
.show-winbar i { width: 8px; height: 8px; border-radius: 50%; background: #2c2c32; }

/* mini mock canvas */
.show-thumb { height: 150px; padding: 16px; display: flex; flex-direction: column; gap: 9px; }

/* shared mini primitives */
.sm-bar { height: 9px; border-radius: 3px; }
.sm-row { display: flex; gap: 7px; }
.sm-cell { flex: 1; height: 34px; border-radius: 7px; }
.sm-line { height: 7px; border-radius: 3px; }
.sm-card { flex: 1; height: 54px; border-radius: 8px; }
.sm-pill { width: 36px; height: 16px; border-radius: 9px; flex: none; }
.sm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sm-cb { display: flex; align-items: center; gap: 8px; }

/* 01 Customer Care — light + blue */
.show-thumb--care { background: #ffffff; }
.show-thumb--care .sm-bar { background: #0A3C6F; }
.show-thumb--care .sm-cell { background: #fff; box-shadow: inset 0 0 0 1px #e3e3e6; }
.show-thumb--care .sm-line { background: #E2D8C2; }

/* 02 Workflow — indigo gradients */
.show-thumb--workflow { background: #101019; }
.show-thumb--workflow .sm-card:nth-child(1) { background: linear-gradient(150deg,#1e5fa8,#0A3C6F); }
.show-thumb--workflow .sm-card:nth-child(2) { background: linear-gradient(150deg,#c9a86a,#9a7d4f); }
.show-thumb--workflow .sm-card:nth-child(3) { background: linear-gradient(150deg,#2e6fb0,#0A3C6F); }
.show-thumb--workflow .sm-line { background: #2a2a36; }

/* 03 CRM — dark + red call rows */
.show-thumb--crm { background: #121214; }
.show-thumb--crm .sm-dot { background: #c9a86a; }
.show-thumb--crm .sm-line { background: #2a2a30; }
.show-thumb--crm .sm-pill { background: #c9a86a; }

/* 04 Studio — gold serif */
.show-thumb--studio { background: radial-gradient(120% 90% at 50% 0%, #14101e, #0a0a12); align-items: center; justify-content: center; gap: 14px; }
.show-thumb--studio .sm-serif {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg,#f4d98a,#c79a3e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.show-thumb--studio .sm-prompt { width: 78%; height: 26px; border-radius: 10px; background: #15131c; border: 1px solid rgba(232,194,106,.25); }

/* 05 Triovision — AR motif */
.show-thumb--trio { background: radial-gradient(120% 90% at 50% 40%, #10202a, #0a0a12); align-items: center; justify-content: center; gap: 12px; position: relative; }
.show-thumb--trio .sm-cube {
  width: 52px; height: 52px; border: 1.5px solid #45d6b4; border-radius: 8px;
  position: relative; transform: rotate(8deg);
  box-shadow: 10px -10px 0 -1.5px rgba(69,214,180,.4);
}
.show-thumb--trio .sm-cube::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid rgba(69,214,180,.5); border-radius: 5px; }
.show-thumb--trio .sm-ar { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #45d6b4; }

/* meta label */
.show-meta { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.show-num { font-size: 12px; font-weight: 700; color: #c9a86a; font-variant-numeric: tabular-nums; }
.show-arrow { margin-left: auto; color: var(--text-2-on-black); transition: transform .25s var(--ease), color .25s var(--ease); }
.show-card:hover .show-arrow { transform: translateX(3px); color: #c9a86a; }
.show-arrow svg { width: 16px; height: 16px; display: block; }

@keyframes showFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .mq-row { animation: none !important; }
  .show-card { animation: none !important; }
  .mq { overflow-x: auto; }
}