/* ============================================================
   KINDLING — warm tactile, ember presence
   TEAL × BURNT-ORANGE ANCHOR
   ============================================================ */

[data-direction="kindling"] {
  --temp-cold: #143E45;
  --temp-cool: #4FB3BD;
  --temp-mid: #FAF6F1;
  --temp-warm: #ED7A3D;
  --temp-hot: #92350F;
}

[data-direction="kindling"] .dir-header {
  border-top-color: var(--ref-ember-500);
  border-top-width: 3px;
}

/* Kindling hero with ember glow */
[data-direction="kindling"] .kindling-hero {
  position: relative;
  padding: var(--sp-7) 0 var(--sp-8);
  overflow: hidden;
}
[data-direction="kindling"] .kindling-hero::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  right: -120px; top: -180px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(244,160,106,.55), rgba(214,84,26,.18) 35%, transparent 65%);
  filter: blur(8px);
  pointer-events: none;
  animation: h-breathe 6s ease-in-out infinite;
}
@keyframes h-breathe {
  0%, 100% { transform: scale(1); opacity: .85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
[data-direction="kindling"] .kindling-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

[data-direction="kindling"] .floor-ceiling {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--ref-n-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-raised);
}
[data-direction="kindling"] .floor-ceiling__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 18px 22px;
  align-items: center;
  border-bottom: 1px solid var(--ref-n-200);
}
[data-direction="kindling"] .floor-ceiling__row:last-child { border-bottom: none; }
[data-direction="kindling"] .floor-ceiling__row--floor { background: var(--ref-teal-50); }
[data-direction="kindling"] .floor-ceiling__row--break { background: var(--ref-ember-50); }
[data-direction="kindling"] .floor-ceiling__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
[data-direction="kindling"] .floor-ceiling__row--floor .floor-ceiling__label { color: var(--ref-teal-700); }
[data-direction="kindling"] .floor-ceiling__row--break .floor-ceiling__label { color: var(--ref-ember-700); }
[data-direction="kindling"] .floor-ceiling__quote {
  font-family: var(--font-display);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}

[data-direction="kindling"] .swatch__chip { border-radius: 6px; }
[data-direction="kindling"] .product-card { border-radius: var(--radius-lg); }

/* Marker */
[data-direction="kindling"] .ember-mark {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4A06A, #D6541A 60%, #4A1A05);
  box-shadow: 0 0 8px -1px rgba(237,122,61,.6);
  vertical-align: middle;
  margin: 0 6px;
  animation: h-pulse 2.4s ease-in-out infinite;
}
@keyframes h-pulse {
  0%, 100% { box-shadow: 0 0 6px -1px rgba(237,122,61,.5); }
  50%      { box-shadow: 0 0 14px 0 rgba(237,122,61,.8); }
}

/* ---------- Kindling motion ---------- */
@keyframes h-ember-glow {
  0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 18px 2px rgba(214,84,26,.45); }
  50%      { transform: scale(1.06); filter: brightness(1.15); box-shadow: 0 0 32px 6px rgba(244,160,106,.65); }
}
@keyframes h-warm-rise {
  0%   { transform: translateY(20px) scale(.94); opacity: 0; }
  100% { transform: translateY(0)    scale(1);   opacity: 1; }
}
@keyframes h-handoff {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(120px); }
  100% { transform: translateX(0); }
}
@keyframes h-thread {
  0%   { stroke-dashoffset: 240; opacity: .3; }
  60%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes h-temp-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

[data-direction="kindling"] .motion-stage--ember .ember {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4A06A, #D6541A 55%, #4A1A05);
  animation: h-ember-glow 2400ms ease-in-out infinite;
}
[data-direction="kindling"] .motion-stage--rise .card {
  width: 140px; padding: 12px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--ref-n-200);
  border-radius: var(--radius-md);
  font-family: var(--font-text); font-size: 12px;
  animation: h-warm-rise 1800ms var(--ease-emph) infinite;
  box-shadow: var(--shadow-2);
}
[data-direction="kindling"] .motion-stage--handoff .pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ref-ember-500);
  animation: h-handoff 3000ms var(--ease-emph) infinite;
}
[data-direction="kindling"] .motion-stage--handoff .lane {
  position: absolute; left: 24px; right: 24px; top: 50%;
  height: 1px; background: var(--ref-n-300);
}
[data-direction="kindling"] .motion-stage--temp {
  background: linear-gradient(120deg, #1A535C, #4FB3BD 30%, #FAF6F1 50%, #ED7A3D 70%, #92350F);
  background-size: 200% 200%;
  animation: h-temp-shift 6s ease-in-out infinite;
}
[data-direction="kindling"] .motion-stage--thread svg path {
  stroke-dasharray: 240;
  animation: h-thread 2400ms var(--ease-standard) infinite;
}

/* Product cards (warm) */
[data-direction="kindling"] .timeline-card {
  position: relative;
}
[data-direction="kindling"] .timeline-card .timeline-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 14px;
  padding: 12px 0 12px 0;
  position: relative;
}
[data-direction="kindling"] .timeline-card .timeline-row::before {
  content: "";
  position: absolute;
  left: 6px; top: 28px; bottom: -12px;
  width: 1px;
  background: var(--ref-n-300);
}
[data-direction="kindling"] .timeline-card .timeline-row:last-child::before { display: none; }
[data-direction="kindling"] .timeline-card .timeline-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--ref-teal-500);
  margin-top: 4px;
  z-index: 1;
}
[data-direction="kindling"] .timeline-card .timeline-dot--ember {
  background: radial-gradient(circle at 35% 35%, #F4A06A, #D6541A 60%);
  border-color: var(--ref-ember-500);
}
[data-direction="kindling"] .timeline-card .timeline-body {
  font-size: 13px;
  line-height: 1.5;
}
[data-direction="kindling"] .timeline-card .timeline-body strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 2px;
}
[data-direction="kindling"] .timeline-card .timeline-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

[data-direction="kindling"] .mastery-bar {
  height: 6px; border-radius: 3px;
  background: var(--ref-n-200); overflow: hidden;
  position: relative;
}
[data-direction="kindling"] .mastery-bar__fill {
  height: 100%;
  background: linear-gradient(to right, var(--ref-teal-500), var(--ref-ember-500));
  border-radius: 3px;
}