/* ===== 3D Icon System ===== */
.icon-3d {
  --icon-size: 56px;
  width: var(--icon-size);
  height: var(--icon-size);
  position: relative;
  transform-style: preserve-3d;
  perspective: 200px;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.icon-3d::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 15%;
  width: 70%;
  height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
}
.icon-3d svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 2px 4px rgba(168, 85, 247, 0.15));
}
.icon-3d .face-top { fill: url(#grad-top); }
.icon-3d .face-left { fill: url(#grad-left); }
.icon-3d .face-right { fill: url(#grad-right); }
.icon-3d .face-front { fill: url(#grad-front); }
.icon-3d .accent { fill: var(--accent-2); }
.icon-3d .accent-warm { fill: var(--truck); }
.icon-3d .glow { filter: drop-shadow(0 0 6px var(--glow)); }

/* Supply chain — larger */
.chain-step .icon-3d {
  --icon-size: 72px;
  animation: iconFloat 4s ease-in-out infinite;
}
.chain-step:nth-child(1) .icon-3d { animation-delay: 0s; }
.chain-step:nth-child(3) .icon-3d { animation-delay: 0.5s; }
.chain-step:nth-child(5) .icon-3d { animation-delay: 1s; }
.chain-step:nth-child(7) .icon-3d { animation-delay: 1.5s; }
.chain-step.active .icon-3d { animation-name: iconFloatActive; }
.chain-step.pending .icon-3d {
  opacity: 0.35;
  animation: none;
  filter: grayscale(0.6);
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotateX(8deg) rotateY(-12deg); }
  50% { transform: translateY(-6px) rotateX(12deg) rotateY(-8deg); }
}
@keyframes iconFloatActive {
  0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(-15deg) scale(1.05); }
  50% { transform: translateY(-8px) rotateX(14deg) rotateY(-10deg) scale(1.08); }
}

/* Truck wheel spin */
.icon-truck .wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelSpin 3s linear infinite;
}
.icon-truck .wheel-back { animation-duration: 3s; }
.icon-truck .wheel-front { animation-duration: 3s; }
.chain-step.active .icon-truck .wheel-back,
.chain-step.active .icon-truck .wheel-front { animation-duration: 0.8s; }
.skill-card .icon-truck .wheel-back,
.skill-card .icon-truck .wheel-front { animation-duration: 2s; }
@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}

/* Radar sweep */
.icon-radar .sweep {
  transform-origin: 32px 32px;
  animation: radarSweep 3s linear infinite;
}
@keyframes radarSweep {
  to { transform: rotate(360deg); }
}

/* Document lines typing */
.icon-doc .line-1 { animation: docLine 2s ease-in-out infinite; }
.icon-doc .line-2 { animation: docLine 2s ease-in-out 0.3s infinite; }
.icon-doc .line-3 { animation: docLine 2s ease-in-out 0.6s infinite; }
@keyframes docLine {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Chart bars grow */
.icon-chart .bar-1 { animation: barGrow 2s ease-in-out infinite; transform-origin: bottom; }
.icon-chart .bar-2 { animation: barGrow 2s ease-in-out 0.2s infinite; transform-origin: bottom; }
.icon-chart .bar-3 { animation: barGrow 2s ease-in-out 0.4s infinite; transform-origin: bottom; }
@keyframes barGrow {
  0%, 100% { transform: scaleY(0.7); }
  50% { transform: scaleY(1); }
}

/* Server blink */
.icon-server .led {
  animation: ledBlink 1.5s step-end infinite;
}
.icon-server .led:nth-child(2) { animation-delay: 0.5s; }
.icon-server .led:nth-child(3) { animation-delay: 1s; }
@keyframes ledBlink {
  50% { opacity: 0.2; }
}

/* Map pin bounce */
.icon-pin .pin-head {
  animation: pinBounce 2s ease-in-out infinite;
  transform-origin: 32px 22px;
}
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Checkmark draw */
.icon-check .check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: checkDraw 2s ease-in-out infinite;
}
.chain-step.active .icon-check .check-path,
.chain-step:not(.pending) .icon-check .check-path {
  stroke-dashoffset: 0;
  animation: checkPulse 2s ease-in-out infinite;
}
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes checkPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.8)); }
}

/* Route path animate */
.icon-route .route-line {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: routeDraw 3s ease-in-out infinite;
}
@keyframes routeDraw {
  0% { stroke-dashoffset: 60; }
  50%, 100% { stroke-dashoffset: 0; }
}

/* Warehouse shelf scan */
.icon-shelf .scan-line {
  animation: shelfScan 2.5s ease-in-out infinite;
}
@keyframes shelfScan {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(18px); opacity: 1; }
}

/* Skill cards */
.skill-card .icon-3d {
  --icon-size: 52px;
  margin-bottom: 1.25rem;
}

/* Project cards */
.project-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.project-visual .icon-3d {
  --icon-size: 88px;
  animation: iconFloat 5s ease-in-out infinite;
}
.project-card:hover .project-visual .icon-3d {
  animation: iconFloatActive 3s ease-in-out infinite;
}

/* Contact icons */
.contact-link .icon-3d {
  --icon-size: 36px;
}
.contact-link:hover .icon-3d {
  animation: iconFloatActive 2s ease-in-out infinite;
}

/* Shared SVG gradients — defined once per icon via inline defs */