/* OEM page: "What we support" as four illustrated steps built from real product photos. */
.oem-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5, 20px); }
.oem-card {
  position: relative; display: grid; grid-template-rows: auto 1fr;
  background: var(--surface, #fff); border-radius: var(--radius-lg, 16px);
  box-shadow: inset 0 0 0 1px var(--hairline-soft, #e8e8ed);
  transition: transform 0.35s var(--ease-out, ease), box-shadow 0.35s var(--ease-out, ease);
}
.oem-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(10, 99, 196, 0.28), 0 22px 34px -24px rgba(10, 99, 196, 0.55); }
/* Step connector, centred in the gap between cards. */
.oem-card:not(:last-child)::after {
  content: ""; position: absolute; z-index: 2; top: calc(50% - 60px); right: calc(var(--space-5, 20px) / -2 - 13px);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand, #0a63c4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l5 5-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 4px var(--canvas, #fbfbfd), 0 6px 12px -4px rgba(10, 99, 196, 0.6);
}
.oem-scene {
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #f4f8fd 0%, #e9eff7 70%, #e3eaf4 100%);
  border-bottom: 1px solid var(--hairline-soft, #e8e8ed);
}
.oem-scene svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 200; }
.oem-card-text { padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px); display: grid; gap: 8px; align-content: start; }
.oem-num { font: 700 var(--text-xs, 12px) var(--font-mono, monospace); letter-spacing: 0.12em; color: var(--brand, #0a63c4); }
.oem-card h3 { margin: 0; font-size: var(--text-lg, 19px); font-weight: 650; }
.oem-card p { margin: 0; color: var(--ink-soft, #424245); font-size: var(--text-sm, 14px); line-height: 1.55; }
.oem-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.oem-chips li { padding: 3px 10px; border-radius: 999px; background: var(--brand-tint, rgba(10, 99, 196, 0.08)); color: var(--brand-strong, #084a95); font-size: 12px; font-weight: 560; }

/* ---------------------------------------------------------------- paint */
.oem-scene .photo { filter: drop-shadow(0 3px 4px rgba(27, 42, 68, 0.18)); }
.oem-scene .paper { fill: #fff; }
.oem-scene .ink { fill: #2b2f36; }
.oem-scene .line { fill: #dfe4ec; }
.oem-scene .brand { fill: var(--brand, #0a63c4); }
.oem-scene .well { fill: #f2f5f9; }
.oem-scene .floor { fill: rgba(27, 42, 68, 0.1); }
.oem-scene .t-label { font: 700 10px var(--font-sans, sans-serif); fill: #1d2430; letter-spacing: 0.04em; }
.oem-scene .t-tiny { font: 650 6.6px var(--font-sans, sans-serif); fill: #6b7482; letter-spacing: 0.08em; text-transform: uppercase; }
.oem-scene .scan { fill: var(--brand, #0a63c4); }
.oem-scene .scan-glow { fill: rgba(10, 99, 196, 0.12); }
.oem-scene .m-arrow { fill: none; stroke: var(--brand, #0a63c4); stroke-width: 2; stroke-dasharray: 4 5; stroke-linecap: round; }
.oem-scene .m-arrow-head { fill: none; stroke: var(--brand, #0a63c4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.oem-scene .ok { fill: #1f9d55; }
.oem-scene .tick { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oem-scene .t-ok { font: 700 10px var(--font-sans, sans-serif); fill: #fff; letter-spacing: 0.02em; }
.oem-scene .string { fill: none; stroke: #a07a4a; stroke-width: 1.2; }
.oem-scene .kraft { fill: #e2c08e; }
.oem-scene .t-tag { font: 800 7.5px var(--font-sans, sans-serif); fill: #5b3f1d; letter-spacing: 0.1em; }
.oem-scene .t-tag2 { font: 700 7px var(--font-mono, monospace); fill: #7a5a33; }
.oem-scene .stamp { fill: rgba(255, 255, 255, 0.78); stroke: #1f9d55; stroke-width: 2.6; }
.oem-scene .stamp-in { fill: none; stroke: #1f9d55; stroke-width: 1; }
.oem-scene .t-stamp { font: 900 12px var(--font-sans, sans-serif); fill: #1f9d55; letter-spacing: 0.12em; }
.oem-scene .flap { fill: #e9c995; stroke: #c99f63; stroke-width: 1; }
.oem-scene .flap-r { fill: #dcb57c; }
.oem-scene .inside { fill: #8f6b40; }
.oem-scene .face-l { fill: #d8b07a; }
.oem-scene .face-r { fill: #c39257; }
.oem-scene .rim { fill: none; stroke: #f0d6aa; stroke-width: 1.6; stroke-linejoin: round; }
.oem-scene .arrows path { fill: none; stroke: #6d4c25; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oem-scene .tape { fill: rgba(240, 222, 186, 0.75); }
.oem-scene .label { fill: #fff; }
.oem-scene .logo { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.oem-scene .t-brand { font: 800 5.2px var(--font-sans, sans-serif); fill: #0b3b75; letter-spacing: 0.02em; }
.oem-scene .sheet-back { fill: #f3f6fa; stroke: #d9e0ea; }
.oem-scene .t-head { font: 800 8px var(--font-sans, sans-serif); fill: #fff; letter-spacing: 0.14em; }
.oem-scene .t-sku { font: 800 16px var(--font-mono, monospace); fill: #1d2430; }
.oem-scene .fill { fill: var(--brand, #0a63c4); }

/* ------------------------------------------------------------- motion
   Each card plays once when it scrolls into view (.is-in from oem-visual.js)
   and replays on hover. Without motion preference everything is static. */
@media (prefers-reduced-motion: no-preference) {
  .oem-card .m-slip, .oem-card .m-part, .oem-card .m-badge, .oem-card .m-arrow-head,
  .oem-card .s-part, .oem-card .s-tag, .oem-card .s-stamp,
  .oem-card .p-part, .oem-card .p-label,
  .oem-card .d-sheet, .oem-card .d-back, .oem-card .th { opacity: 0; }
  .oem-card .m-scan { opacity: 0; }
  .oem-card .m-arrow { stroke-dashoffset: 60; opacity: 0; }
  .oem-card .fill { transform-box: fill-box; transform-origin: left; transform: scaleX(0); }

  /* 01 matching: request slip lands, scanner reads it, arrow, the part, the badge */
  .oem-card.is-in .m-slip { animation: oem-rise 0.55s ease-out 0s forwards; }
  .oem-card.is-in .m-scan { animation: oem-scan 1.1s ease-in-out 0.4s forwards; }
  .oem-card.is-in .m-arrow { animation: oem-draw 0.5s ease-out 1.4s forwards; }
  .oem-card.is-in .m-arrow-head { animation: oem-fade 0.2s ease-out 1.85s forwards; }
  .oem-card.is-in .m-part { transform-box: fill-box; transform-origin: center; animation: oem-pop-soft 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) 1.85s forwards; }
  .oem-card.is-in .m-badge { transform-box: fill-box; transform-origin: center; animation: oem-pop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 2.35s forwards; }

  /* 02 sample: the part rises onto the stand, the tag swings, the stamp lands */
  .oem-card.is-in .s-part { animation: oem-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.1s forwards; }
  .oem-card.is-in .s-tag { transform-box: view-box; transform-origin: 190px 70px; animation: oem-swing 1.4s ease-out 0.6s forwards; }
  .oem-card.is-in .s-stamp { transform-box: fill-box; transform-origin: center; animation: oem-stamp 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 1.6s forwards; }

  /* 03 packaging: the part drops into the carton, then the brand label is applied */
  .oem-card.is-in .p-part { animation: oem-drop 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) 0.2s forwards; }
  .oem-card.is-in .p-label { transform-box: fill-box; transform-origin: center; animation: oem-apply 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) 1.2s forwards; }

  /* 04 data: sheets settle, the rows fill in, photo thumbnails appear */
  .oem-card.is-in .d-back { animation: oem-fade 0.5s ease-out 0.25s forwards; }
  .oem-card.is-in .d-sheet { animation: oem-rise 0.6s ease-out 0s forwards; }
  .oem-card.is-in .fill { animation: oem-grow 0.55s ease-out forwards; }
  .oem-card.is-in .d1 { animation-delay: 0.7s; } .oem-card.is-in .d2 { animation-delay: 0.95s; } .oem-card.is-in .d3 { animation-delay: 1.2s; }
  .oem-card.is-in .th { transform-box: fill-box; transform-origin: center; animation: oem-pop-soft 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
  .oem-card.is-in .t1 { animation-delay: 1.5s; } .oem-card.is-in .t2 { animation-delay: 1.65s; } .oem-card.is-in .t3 { animation-delay: 1.8s; }
}
@keyframes oem-fade { to { opacity: 1; } }
@keyframes oem-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes oem-scan { 0% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(92px); } 100% { opacity: 0; transform: translateY(0); } }
@keyframes oem-draw { from { opacity: 1; stroke-dashoffset: 60; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes oem-pop-soft { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes oem-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes oem-swing { 0% { opacity: 0; transform: rotate(-38deg); } 20% { opacity: 1; } 45% { transform: rotate(10deg); } 70% { transform: rotate(-5deg); } 100% { opacity: 1; transform: rotate(0); } }
@keyframes oem-stamp { 0% { opacity: 0; transform: scale(2.3); } 70% { opacity: 1; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes oem-drop { 0% { opacity: 0; transform: translateY(-64px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes oem-apply { 0% { opacity: 0; transform: translate(-18px, -10px) rotate(-6deg) scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes oem-grow { to { transform: scaleX(1); } }

@media (max-width: 1100px) {
  .oem-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oem-card:nth-child(2)::after { display: none; }
}
@media (max-width: 620px) {
  .oem-cards { grid-template-columns: minmax(0, 1fr); }
  .oem-card::after { display: none !important; }
}