/* 栄養成分表示用スタイル */

/* プログレスバー基本スタイル */
.nutrition-progress-bar {
  transition: width 0.3s ease;
}

/* ストライプアニメーション */
@keyframes stripe-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 28.28px 0;  /* sqrt(2) * 20px = ストライプの繰り返し幅 */
  }
}

.nutrition-striped {
  position: relative;
  overflow: hidden;
}

.nutrition-striped::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  background-size: 28.28px 28.28px;
  animation: stripe-move 0.8s linear infinite;
}

/* レスポンシブ対応 */
@media (max-width: 640px) {
  .nutrition-card-grid {
    grid-template-columns: 1fr;
  }
}

/* アクセシビリティ: 高コントラストモード対応 */
@media (prefers-contrast: high) {
  .nutrition-progress-bar {
    border: 2px solid currentColor;
  }
  
  .nutrition-striped::after {
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      currentColor 10px,
      currentColor 20px
    );
  }
}

/* アクセシビリティ: モーション軽減 */
@media (prefers-reduced-motion: reduce) {
  .nutrition-striped::after {
    animation: none;
  }
  
  .nutrition-progress-bar {
    transition: none;
  }
}