/* ============================================================
   infographics.css — SVG Infographics, Animations
   ============================================================ */

/* --- Container --- */
.infographic-container svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* --- SVG Text Labels --- */
.svg-label {
  font-family: 'Heebo', 'Assistant', Arial, sans-serif;
  font-size: 14px;
  fill: #6B5340; /* --text-soft */
  direction: rtl;
  unicode-bidi: embed;
}

.svg-label-sm {
  font-family: 'Heebo', 'Assistant', Arial, sans-serif;
  font-size: 11px;
  fill: #9C8470; /* --text-muted */
}

.svg-label-bold {
  font-family: 'Heebo', 'Assistant', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  fill: #3D2817; /* --text-primary */
}

.svg-title {
  font-family: 'Heebo', Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  fill: #3D2817;
}

/* --- Color Fill Helpers --- */
.svg-accent       { fill: #E07A5F; }
.svg-accent-dark  { fill: #C45A3F; }
.svg-accent-soft  { fill: #F2CC8F; }
.svg-herb         { fill: #81B29A; }
.svg-herb-light   { fill: #C8E0D5; }
.svg-warning      { fill: #E8A33D; }
.svg-warning-light { fill: #FDF3DC; }
.svg-danger       { fill: #B73E3E; }
.svg-danger-light { fill: #FDEAEA; }
.svg-bg-warm      { fill: #F5E9D7; }
.svg-bg-card      { fill: #FFFFFF; }
.svg-muted        { fill: #9C8470; }

/* --- Stroke Helpers --- */
.svg-stroke-accent  { stroke: #E07A5F; fill: none; }
.svg-stroke-herb    { stroke: #81B29A; fill: none; }
.svg-stroke-muted   { stroke: #9C8470; fill: none; }
.svg-stroke-primary { stroke: #3D2817; fill: none; }

/* --- Background rect --- */
.svg-card-bg {
  fill: #FFFFFF;
  rx: 12;
  filter: drop-shadow(0 2px 8px rgba(61, 40, 23, 0.08));
}

/* --- Steam Animation (for hot/cooking icons) --- */
@keyframes steam {
  0%   { transform: translateY(0)   scaleX(1);   opacity: 0.7; }
  40%  { transform: translateY(-8px) scaleX(1.15); opacity: 0.5; }
  80%  { transform: translateY(-16px) scaleX(0.9); opacity: 0.2; }
  100% { transform: translateY(-20px) scaleX(0.8); opacity: 0;   }
}

.steam-path {
  animation: steam 2.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.steam-path:nth-child(2) {
  animation-delay: 0.6s;
}

.steam-path:nth-child(3) {
  animation-delay: 1.2s;
}

/* --- Pulse Dot Animation --- */
@keyframes pulse-dot {
  0%, 100% {
    r: 5;
    opacity: 1;
  }
  50% {
    r: 8;
    opacity: 0.6;
  }
}

.pulse-dot {
  animation: pulse-dot 1.8s ease-in-out infinite;
  transform-origin: center;
}

/* --- Bounce animation (arrow / pointer) --- */
@keyframes bounce-arrow {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-5px); }
}

.bounce-arrow {
  animation: bounce-arrow 1.6s ease-in-out infinite;
}

/* --- Fade-in for infographic on scroll --- */
@keyframes infographic-fadein {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.infographic-container {
  animation: infographic-fadein 0.5s ease both;
}

/* --- Temperature / Scale bar --- */
.svg-scale-track {
  fill: #F5E9D7;
  rx: 6;
}

.svg-scale-fill {
  fill: #E07A5F;
  rx: 6;
}

/* --- Step circle numbers --- */
.svg-step-circle {
  fill: #E07A5F;
}

.svg-step-number {
  font-family: 'Heebo', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
}

/* --- Connector lines between steps --- */
.svg-connector {
  stroke: #F2CC8F;
  stroke-width: 2;
  stroke-dasharray: 4 3;
  fill: none;
}

/* --- Checklist items inside SVG --- */
.svg-check-circle {
  fill: #81B29A;
}

.svg-check-mark {
  stroke: #ffffff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* --- Pie / Donut chart segments --- */
.svg-pie-segment {
  transition: opacity 0.2s ease;
}

.svg-pie-segment:hover {
  opacity: 0.85;
  cursor: pointer;
}

/* --- Tooltip inside SVG (via foreignObject) --- */
.svg-tooltip {
  background: var(--text-primary);
  color: #fff;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* --- Icon container circle --- */
.svg-icon-bg {
  fill: #F5E9D7;
}

.svg-icon-bg-herb {
  fill: #C8E0D5;
}

.svg-icon-bg-accent {
  fill: rgba(224, 122, 95, 0.15);
}

/* --- Responsive: shrink on mobile --- */
@media (max-width: 480px) {
  .svg-label      { font-size: 12px; }
  .svg-label-sm   { font-size: 10px; }
  .svg-title      { font-size: 14px; }
  .svg-step-number { font-size: 11px; }
}