/* ============ ILLUSTRATION LAYER ============ */
.illo{width:100%;height:auto;display:block;overflow:visible}
.illo-fig{margin:var(--s-3) 0;background:linear-gradient(140deg,rgba(12,17,32,.9),rgba(6,8,16,.7));border:1px solid rgba(238,243,233,.1);border-radius:20px;padding:1.4rem;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .5s}
.illo-fig::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--ic,#8DF250) 10%, transparent), transparent 70%)}
.illo-fig:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--ic,#8DF250) 45%, transparent);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 40px color-mix(in srgb, var(--ic,#8DF250) 14%, transparent)}
.illo-fig figcaption{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ic,#8DF250);text-align:center;margin-top:.9rem;opacity:.85}

/* diagram inside a pillar card */
.pillar-card .illo{max-width:300px;margin:1rem auto .2rem}
.pillar-card{position:relative}

/* era emblem: floats beside the card heading */
.era-emblem{position:absolute;top:1.1rem;right:1.1rem;width:104px;opacity:.9;pointer-events:none}
.era-emblem .illo{filter:drop-shadow(0 0 18px color-mix(in srgb, var(--ac,#8DF250) 40%, transparent))}
@media (max-width:760px){.era-emblem{position:static;width:120px;margin:0 auto 1rem}}

/* death icon row */
.death-ic{float:left;width:78px;margin:0 1.1rem .6rem 0}
.death-ic .illo{filter:drop-shadow(0 0 16px color-mix(in srgb, var(--ac,#FF5C1A) 45%, transparent))}
@media (max-width:560px){.death-ic{float:none;margin:0 auto .8rem;width:92px}}

/* the world map */
.illo-map{max-width:620px;margin:0 auto}
.illo-map text{font-weight:600}

/* radar */
.illo-radar{max-width:320px;margin:0 auto}

/* spot ornaments — small floating lab objects */
.illo-spot{width:100%;height:auto}
.spot-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.6rem;z-index:3;pointer-events:none;opacity:.4}
.spot-rail > div{width:44px;animation:spotFloat 7s ease-in-out infinite}
.spot-rail > div:nth-child(2){animation-delay:-2.3s}
.spot-rail > div:nth-child(3){animation-delay:-4.6s}
@keyframes spotFloat{50%{transform:translateY(-12px)}}
@media (max-width:1180px){.spot-rail{display:none}}

/* section ornament — centred divider illustration */
.illo-divider{display:flex;align-items:center;gap:1.2rem;margin:var(--s-5) 0}
.illo-divider::before,.illo-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(238,243,233,.22),transparent)}
.illo-divider > div{width:56px;flex:0 0 56px;opacity:.75}

/* lifecycle chart block */
.illo-chart{background:var(--jar);border:1px solid rgba(238,243,233,.12);border-radius:20px;padding:1.4rem 1rem 1rem;margin:var(--s-3) 0}
.illo-chart figcaption{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);text-align:center;margin-top:.6rem}

@media (prefers-reduced-motion:reduce){
  .spot-rail > div{animation:none}
  .illo animate{display:none}
}
html.calm-mode .spot-rail{display:none}