/* ═══════════════════════════════════════════════════════════════
   $PADRE — Live Roadmap Section
   Six growing candles · current stage highlighted live
   ═══════════════════════════════════════════════════════════════ */

/* ─── SECTION SHELL ─── */
.roadmap-section {
  background: var(--bg-void);
  border-top: 1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
  position: relative;
  overflow: hidden;
}

.roadmap-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.roadmap-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 80px 24px 90px;
}

/* ─── LIVE BADGE ─── */
.roadmap-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.7);
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 2px;
  padding: 5px 14px;
  margin-bottom: 20px;
}
.roadmap-live-dot {
  width: 6px; height: 6px;
  background: #4CAF50;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(76,175,80,0.4);} 50%{opacity:.7;box-shadow:0 0 0 4px rgba(76,175,80,0);} }

/* ─── MC STATUS BAR ─── */
.roadmap-mc-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.roadmap-mc-item {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.roadmap-mc-item strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-primary);
  text-shadow: 0 0 12px rgba(201,168,76,0.3);
}
.roadmap-mc-divider { color: var(--gold-deep); font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   CANDLE TRACK
   ══════════════════════════════════════════════════════════ */
.roadmap-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  position: relative;
  padding-bottom: 24px;
}

/* Connecting progress line behind the candles */
.roadmap-track::before {
  content: '';
  position: absolute;
  bottom: 16px;
  left: calc(8.33% + 20px);
  right: calc(8.33% + 20px);
  height: 2px;
  background: var(--bg-border);
  z-index: 0;
}

.roadmap-progress-line {
  position: absolute;
  bottom: 16px;
  left: calc(8.33% + 20px);
  height: 2px;
  background: linear-gradient(to right, var(--gold-deep), var(--gold-primary));
  z-index: 1;
  width: 0%;
  transition: width 1.8s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 0 8px rgba(201,168,76,0.4);
}

/* ─── INDIVIDUAL STAGE ─── */
.rm-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  /* Default: locked / future */
  --rm-flame-tip:   rgba(60,60,60,0.6);
  --rm-flame-mid:   rgba(40,40,40,0.5);
  --rm-flame-base:  rgba(30,30,30,0.4);
  --rm-flame-core:  rgba(80,80,80,0.6);
  --rm-glow:        rgba(80,80,80,0.08);
  --rm-wax:         #2A2A2A;
  --rm-wax-dark:    #1A1A1A;
  --rm-accent:      rgba(80,80,80,0.4);
  --rm-text:        var(--text-dim);
  --rm-label:       var(--text-dim);
}

/* ── DONE (passed) stages ── */
.rm-stage.is-done {
  --rm-accent: var(--gold-dark);
  --rm-text:   var(--text-secondary);
  --rm-label:  var(--gold-primary);
}

/* ── ACTIVE (current) stage ── */
.rm-stage.is-active {
  --rm-accent: var(--gold-primary);
  --rm-text:   var(--text-white);
  --rm-label:  var(--gold-bright);
}

/* Per-stage colour tokens — applied when done or active */
.rm-stage.is-done.rm-s0, .rm-stage.is-active.rm-s0 {
  --rm-flame-tip:  rgba(255,180,60,0.7); --rm-flame-mid: rgba(200,100,20,0.6);
  --rm-flame-base: rgba(150,60,10,0.5);  --rm-flame-core: rgba(255,220,150,0.9);
  --rm-glow: rgba(200,120,40,0.2);       --rm-wax: #8A6A4A; --rm-wax-dark: #5A4030;
}
.rm-stage.is-done.rm-s1, .rm-stage.is-active.rm-s1 {
  --rm-flame-tip:  rgba(255,60,20,0.95); --rm-flame-mid: rgba(220,30,10,0.85);
  --rm-flame-base: rgba(160,20,5,0.75);  --rm-flame-core: rgba(255,200,100,1);
  --rm-glow: rgba(255,60,20,0.25);       --rm-wax: #9A6060; --rm-wax-dark: #6A3030;
}
.rm-stage.is-done.rm-s2, .rm-stage.is-active.rm-s2 {
  --rm-flame-tip:  rgba(80,255,120,0.95); --rm-flame-mid: rgba(40,200,80,0.9);
  --rm-flame-base: rgba(20,140,50,0.85);  --rm-flame-core: rgba(200,255,220,1);
  --rm-glow: rgba(60,220,100,0.25);        --rm-wax: #507060; --rm-wax-dark: #304840;
}
.rm-stage.is-done.rm-s3, .rm-stage.is-active.rm-s3 {
  --rm-flame-tip:  rgba(255,220,60,1);   --rm-flame-mid: rgba(255,180,20,0.95);
  --rm-flame-base: rgba(200,130,0,0.9);  --rm-flame-core: rgba(255,255,200,1);
  --rm-glow: rgba(255,200,40,0.35);      --rm-wax: #B89840; --rm-wax-dark: #806820;
}
.rm-stage.is-done.rm-s4, .rm-stage.is-active.rm-s4 {
  --rm-flame-tip:  rgba(255,240,180,1);  --rm-flame-mid: rgba(255,220,100,0.98);
  --rm-flame-base: rgba(255,180,20,0.95);--rm-flame-core: rgba(255,255,255,1);
  --rm-glow: rgba(255,220,80,0.45);      --rm-wax: #D0B840; --rm-wax-dark: #A08820;
}
.rm-stage.is-done.rm-s5, .rm-stage.is-active.rm-s5 {
  --rm-flame-tip:  rgba(255,255,255,1);  --rm-flame-mid: rgba(240,240,255,1);
  --rm-flame-base: rgba(200,220,255,0.98);--rm-flame-core: rgba(255,255,255,1);
  --rm-glow: rgba(220,230,255,0.5);      --rm-wax: #E8E4FF; --rm-wax-dark: #C0B8F0;
}

/* ─── CANDLE VISUAL ─── */
.rm-candle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

/* Flame — size via inline CSS vars set per stage */
.rm-flame {
  width:  var(--rm-fw, 10px);
  height: var(--rm-fh, 14px);
  background: radial-gradient(ellipse at 50% 80%,
    var(--rm-flame-base) 0%,
    var(--rm-flame-mid)  45%,
    var(--rm-flame-tip)  75%,
    transparent 100%);
  border-radius: 50% 50% 35% 35%;
  position: relative;
  filter: blur(0.5px);
  transition: width 0.8s ease, height 0.8s ease, background 0.8s ease;
}

.rm-stage.is-done .rm-flame,
.rm-stage.is-active .rm-flame {
  animation: rmFlicker var(--rm-speed, 0.2s) ease-in-out infinite alternate;
}
@keyframes rmFlicker {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(-1deg); }
  33%  { transform: scaleX(0.92) scaleY(1.06) rotate(.5deg); }
  66%  { transform: scaleX(1.05) scaleY(.95)  rotate(-.5deg); }
  100% { transform: scaleX(.97)  scaleY(1.03) rotate(1deg); }
}

/* Flame glow halo */
.rm-flame-glow {
  position: absolute;
  bottom: -4px;
  left: 50%; transform: translateX(-50%);
  width:  calc(var(--rm-fw, 10px) * 2.2);
  height: 14px;
  background: radial-gradient(ellipse, var(--rm-glow) 0%, transparent 70%);
  filter: blur(4px);
  border-radius: 50%;
  transition: background 0.8s ease, width 0.8s ease;
}

/* Wick */
.rm-wick {
  width: 2px;
  height: 8px;
  background: linear-gradient(to bottom, #555, #222);
  border-radius: 1px;
}

/* Wax body */
.rm-wax-body {
  width:  var(--rm-cw, 20px);
  height: var(--rm-ch, 40px);
  background: linear-gradient(160deg, var(--rm-wax) 0%, var(--rm-wax-dark) 100%);
  border-radius: 2px 2px 1px 1px;
  position: relative;
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,0.4),
    0 0 var(--rm-glow-size, 4px) var(--rm-glow);
  transition: width 0.8s ease, height 0.8s ease, background 0.8s ease, box-shadow 0.8s ease;
}
.rm-wax-shine {
  position: absolute;
  top: 3px; left: 3px;
  width: 3px; height: 50%;
  background: rgba(255,255,255,0.1);
  border-radius: 1px;
}

/* Base disc */
.rm-base {
  width:  calc(var(--rm-cw, 20px) + 10px);
  height: 5px;
  background: linear-gradient(to bottom, var(--rm-accent), rgba(0,0,0,0.3));
  border-radius: 1px;
  opacity: 0.6;
  transition: all 0.8s ease;
}

/* Ground glow */
.rm-ground-glow {
  position: absolute;
  bottom: -6px;
  width: 60px; height: 16px;
  background: radial-gradient(ellipse, var(--rm-glow) 0%, transparent 70%);
  filter: blur(5px);
  transition: background 0.8s ease;
}

/* ─── NODE DOT (on progress line) ─── */
.rm-node {
  position: absolute;
  bottom: -28px;
  left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--bg-border);
  border: 2px solid var(--bg-border);
  border-radius: 50%;
  transition: all 0.5s ease;
  z-index: 3;
}
.rm-stage.is-done  .rm-node { background: var(--gold-dark);    border-color: var(--gold-dark); }
.rm-stage.is-active .rm-node {
  background: var(--gold-primary);
  border-color: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.2), 0 0 12px rgba(201,168,76,0.5);
  animation: nodeRing 1.8s ease-in-out infinite;
}
@keyframes nodeRing {
  0%,100% { box-shadow: 0 0 0 3px rgba(201,168,76,0.15), 0 0 10px rgba(201,168,76,0.4); }
  50%     { box-shadow: 0 0 0 7px rgba(201,168,76,0.05), 0 0 20px rgba(201,168,76,0.6); }
}

/* ─── STAGE INFO BELOW CANDLE ─── */
.rm-info {
  text-align: center;
  padding-top: 28px;
  max-width: 130px;
}

.rm-numeral {
  font-family: var(--font-fraktur);
  font-size: 22px;
  color: var(--rm-label);
  line-height: 1;
  margin-bottom: 4px;
  transition: color 0.5s ease;
}

.rm-name {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-label);
  margin-bottom: 4px;
  transition: color 0.5s ease;
}

.rm-threshold {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 600;
  color: var(--rm-text);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
  transition: color 0.5s ease;
}

.rm-desc {
  font-size: 10.5px;
  color: rgba(255,255,255,0.25);
  line-height: 1.5;
  transition: color 0.5s ease;
}
.rm-stage.is-done .rm-desc,
.rm-stage.is-active .rm-desc { color: var(--text-muted); }

/* Status badge */
.rm-badge {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rm-stage.is-done .rm-badge {
  color: var(--gold-dark);
  border-color: var(--gold-deep);
  background: rgba(201,168,76,0.06);
  opacity: 1;
}
.rm-stage.is-done .rm-badge::before { content: '✓ '; }
.rm-stage.is-active .rm-badge {
  color: var(--gold-primary);
  border-color: var(--gold-dark);
  background: rgba(201,168,76,0.1);
  opacity: 1;
  animation: badgePulse 2s ease-in-out infinite;
}
.rm-stage.is-active .rm-badge::before { content: '● '; }
@keyframes badgePulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 8px rgba(201,168,76,0.3); }
}

/* ─── ACTIVE STAGE EXTRA GLOW on card ─── */
.rm-stage.is-active .rm-candle-wrap::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at 50% 70%, rgba(201,168,76,0.06) 0%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
}

/* Holy stage rays */
.rm-stage.is-active.rm-s5 .rm-candle-wrap::before,
.rm-stage.is-done.rm-s5  .rm-candle-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 30px;
  background: linear-gradient(to top, rgba(255,255,255,0.6), transparent);
  box-shadow: -15px 10px 0 rgba(255,255,255,0.2), 15px 10px 0 rgba(255,255,255,0.2);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .roadmap-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 16px;
    align-items: end;
    padding-bottom: 0;
  }
  .roadmap-track::before,
  .roadmap-progress-line { display: none; }
  .rm-node { display: none; }
  .rm-info { max-width: 100%; }
}
@media (max-width: 560px) {
  .roadmap-track { grid-template-columns: repeat(2, 1fr); }
}