/* Base icon styles & animations (dtf/static/dtf/css/components/icons.css) */
.dtf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: inherit;
  flex-shrink: 0;
}
.dtf-icon svg {
  width: 100%;
  height: 100%;
}

@media (pointer: coarse) {
  .dtf-icon[role="button"],
  button .dtf-icon {
    padding: 2px;
  }
}

/* 1. check-draw */
.dtf-icon-check .icon-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.dtf-icon-check.dtf-icon-animate .icon-path {
  animation: check-draw 0.35s ease-out forwards;
}
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* 2. scan-line */
.dtf-icon-scan.dtf-icon-animate .scan-line {
  animation: scan-line 0.9s linear 1;
}
@keyframes scan-line {
  0%   { transform: translateY(2px); opacity: 0.6; }
  100% { transform: translateY(20px); opacity: 0.2; }
}

/* 3. soft-glow */
.dtf-icon-bulb.dtf-icon-animate {
  animation: soft-glow 0.23s ease-out 1;
}
.dtf-icon-telegram.dtf-icon-animate {
  animation: soft-glow 0.36s ease-out 1;
}
@keyframes soft-glow {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  55%  { filter: drop-shadow(0 0 7px var(--dtf-accent, #3b82f6)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

/* 4. upload-bounce */
.dtf-icon-upload.dtf-icon-animate {
  animation: upload-bounce 0.54s cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes upload-bounce {
  0%, 100% { transform: translateY(0); }
  45%  { transform: translateY(-6px); }
  70%  { transform: translateY(0); }
}

/* 5. truck-slide */
.dtf-icon-truck.dtf-icon-animate {
  animation: truck-slide 0.56s ease-out 1;
}
@keyframes truck-slide {
  0%, 100% { transform: translateX(0); opacity: 1; }
  60% { transform: translateX(-8px); opacity: 0.8; }
}

/* 6. pulse-ring */
.dtf-icon-shield.dtf-icon-animate {
  position: relative;
}
.dtf-icon-shield.dtf-icon-animate::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--dtf-success, #22c55e);
  border-radius: 50%;
  animation: pulse-ring 0.6s ease-out forwards;
  opacity: 0;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 7. shimmer */
.dtf-icon-calculator.dtf-icon-animate {
  position: relative;
  overflow: hidden;
}
.dtf-icon-calculator.dtf-icon-animate::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: icon-shimmer 1.5s ease-out;
}
@keyframes icon-shimmer {
  to { left: 150%; }
}

/* Reduced Motion Fallbacks */
@media (prefers-reduced-motion: reduce) {
  .dtf-icon-check.dtf-icon-animate .icon-path {
    animation: none;
    stroke-dashoffset: 0;
  }
  .dtf-icon-scan .scan-line { animation: none; opacity: 0.3; }
  .dtf-icon-bulb.dtf-icon-animate,
  .dtf-icon-telegram.dtf-icon-animate { animation: none; }
  .dtf-icon-upload.dtf-icon-animate { animation: none; }
  .dtf-icon-truck.dtf-icon-animate { animation: none; opacity: 1; }
  .dtf-icon-shield.dtf-icon-animate::after { display: none; }
  .dtf-icon-calculator.dtf-icon-animate::after { display: none; }
}