/* Shipment product cards: oil, sugar, and wheat flour. */

.cpi-cargo-card {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.cpi-cargo-scene {
  position: relative;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
}

.cpi-cargo-photo {
  display: block;
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: center;
}

.cpi-cargo--oil .cpi-cargo-scene {
  background: linear-gradient(180deg, #fff4c2 0%, #f0c14a 42%, #d4890b 100%);
}

.cpi-cargo-wave {
  position: absolute;
  left: -30%;
  bottom: -8px;
  width: 160%;
  height: 36px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 45%;
  animation: cpi-oil-wave 3.4s ease-in-out infinite;
}

.cpi-cargo-wave--back {
  bottom: 6px;
  height: 28px;
  opacity: 0.55;
  animation-duration: 4.6s;
  animation-direction: reverse;
}

.cpi-cargo-shine {
  position: absolute;
  top: 8px;
  left: -40%;
  width: 30%;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  filter: blur(1px);
  animation: cpi-oil-shine 5s linear infinite;
}

@keyframes cpi-oil-wave {
  0%, 100% { transform: translateX(0) translateY(4px); }
  50% { transform: translateX(-8%) translateY(0); }
}

@keyframes cpi-oil-shine {
  0% { transform: translateX(0); }
  100% { transform: translateX(420%); }
}

.cpi-cargo--sugar .cpi-cargo-scene {
  background:
    radial-gradient(circle at 20% 30%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 70% 60%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, #f7fbff 0%, #d7e4f5 100%);
}

.cpi-cargo-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  animation: cpi-sugar-spark 2.4s ease-in-out infinite;
}

.cpi-cargo-spark--1 { top: 18%; left: 12%; }
.cpi-cargo-spark--2 { top: 46%; left: 28%; animation-delay: 0.3s; }
.cpi-cargo-spark--3 { top: 22%; left: 48%; animation-delay: 0.7s; }
.cpi-cargo-spark--4 { top: 58%; left: 62%; animation-delay: 0.2s; }
.cpi-cargo-spark--5 { top: 30%; left: 78%; animation-delay: 1s; }
.cpi-cargo-spark--6 { top: 68%; left: 40%; animation-delay: 0.5s; }
.cpi-cargo-spark--7 { top: 14%; left: 88%; animation-delay: 1.3s; }

@keyframes cpi-sugar-spark {
  0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.35) rotate(18deg); }
}

.cpi-cargo--wheat .cpi-cargo-scene {
  background: linear-gradient(180deg, #f3dfb0 0%, #e2b15a 55%, #c4893a 100%);
}

.cpi-cargo-grain {
  position: absolute;
  width: 7px;
  height: 12px;
  border-radius: 40% 40% 50% 50%;
  background: #8a5a1e;
  opacity: 0.85;
  animation: cpi-wheat-fall 3.8s linear infinite;
}

.cpi-cargo-grain--1 { left: 10%; animation-delay: 0s; }
.cpi-cargo-grain--2 { left: 26%; animation-delay: 0.6s; height: 10px; }
.cpi-cargo-grain--3 { left: 44%; animation-delay: 1.1s; }
.cpi-cargo-grain--4 { left: 60%; animation-delay: 0.3s; height: 11px; }
.cpi-cargo-grain--5 { left: 74%; animation-delay: 1.6s; }
.cpi-cargo-grain--6 { left: 88%; animation-delay: 0.9s; }

@keyframes cpi-wheat-fall {
  0% { top: -16px; transform: rotate(-12deg); }
  100% { top: 92px; transform: rotate(18deg); }
}

.cpi-cargo-name {
  line-height: 1.25;
}

.cpi-cargo-pack-block {
  margin-top: 12px;
  background: rgba(15, 39, 68, 0.04);
  border-radius: 10px;
  padding: 8px 10px;
}

.cpi-cargo-pack {
  margin-top: 2px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #0f2744;
}

.cpi-cargo-amount-block {
  margin-top: 12px;
}

.cpi-cargo-amount {
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: #0f2744;
}

.cpi-cargo-amount--empty {
  font-size: 1rem;
  font-weight: 600;
  color: #64748b;
}

.cpi-cargo-source,
.cpi-cargo-route,
.cpi-cargo-docs,
.cpi-cargo-boxes {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #64748b;
}

.cpi-cargo-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cpi-cargo-metric {
  background: rgba(15, 39, 68, 0.04);
  border-radius: 10px;
  padding: 8px 10px;
}

.cpi-cargo-metric-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.cpi-cargo-metric-value {
  margin-top: 2px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f2744;
}

@media (max-width: 480px) {
  .cpi-cargo-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpi-cargo-wave,
  .cpi-cargo-shine,
  .cpi-cargo-spark,
  .cpi-cargo-grain {
    animation: none;
  }
}