/* ============================================================
   ÆŠA · Esoteric Diagrams
   1. The Mandala of the Seven   (values.html  #mandala-seven)
   2. The Hierarchy of Fires     (communion.html #fire-hierarchy)
   ============================================================ */

/* ---------- shared layout ---------- */
.dgm-layout{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
  gap:2.6rem;
  align-items:center;
  margin-top:2.4rem;
}
.dgm-stage svg{ display:block; width:100%; height:auto; }
.dgm-stage{ min-width:0; }

.dgm-panel{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(27,19,12,.92), rgba(10,8,6,.94));
  padding:1.7rem 1.8rem;
  min-height:380px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.8);
}
.dgm-panel::before{
  content:"";
  position:absolute; inset:7px;
  border:1px solid var(--line-2);
  pointer-events:none;
}
.dgm-panel > *{ position:relative; }
.dgm-panel h3{
  font-family:var(--display);
  color:var(--ember-hi);
  letter-spacing:.08em;
  margin:.35rem 0 .25rem;
  font-size:1.45rem;
}
.dgm-kicker{
  font-family:var(--display);
  letter-spacing:.42em;
  text-transform:uppercase;
  font-size:.64rem;
  color:var(--flame);
}
.dgm-meaning{
  font-style:italic;
  color:var(--ash);
  margin:.1rem 0 0;
  font-size:1.12rem;
}
.dgm-rows{ margin:1.15rem 0 0; display:grid; gap:.62rem; }
.dgm-row{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:.9rem;
  align-items:baseline;
  font-size:1.04rem;
  border-top:1px solid var(--line-2);
  padding-top:.6rem;
}
.dgm-k{
  font-family:var(--display);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ember-lo);
}
.dgm-row b{ color:var(--ember); font-weight:600; }
.dgm-foe span:last-child{ color:var(--parch); }
.dgm-note{
  margin:1.15rem 0 0;
  color:var(--smoke);
  font-style:italic;
  font-size:1.02rem;
  line-height:1.55;
}
.dgm-hint{ margin-top:1.2rem; }
.dgm-default{
  display:flex; flex-direction:column; justify-content:center;
  min-height:300px; text-align:center;
}
.dgm-default .dgm-sigil{
  font-size:2rem; color:var(--ember-lo); margin-bottom:.8rem;
  text-shadow:0 0 18px rgba(216,175,90,.4);
}
.dgm-default p{ color:var(--smoke); font-style:italic; margin:.4rem auto; max-width:30ch; }

/* ============================================================
   1 · THE MANDALA OF THE SEVEN
   ============================================================ */
.ms-svg{ overflow:visible; }

/* center sun */
.ms-ray{ stroke:rgba(216,175,90,.5); stroke-width:1.1; }
.ms-sun-label{
  font-family:var(--display);
  font-size:13.5px;
  letter-spacing:.3em;
  text-anchor:middle;
  fill:#2c1d08;
  font-weight:600;
}

/* spokes */
.ms-spoke{
  stroke:var(--ember-lo);
  stroke-width:1.3;
  opacity:.5;
  transition:opacity .35s ease, stroke .35s ease;
}
.ms-spoke.is-lit{
  stroke:var(--ember-hi);
  stroke-width:2;
  opacity:1;
  filter:drop-shadow(0 0 6px rgba(243,212,137,.9)) drop-shadow(0 0 14px rgba(212,118,42,.55));
}
.ms-engaged .ms-spoke:not(.is-lit){ opacity:.12; }

/* nodes */
.ms-node{ cursor:pointer; outline:none; transition:opacity .35s ease; }
.ms-engaged .ms-node:not(.is-lit){ opacity:.3; }
.ms-scale{
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .35s ease;
}
.ms-node.is-lit .ms-scale{ transform:scale(1.1); }
.ms-halo{
  fill:none;
  stroke:rgba(216,175,90,.16);
  stroke-width:1;
  transition:stroke .35s ease;
}
.ms-core{
  fill:#150f09;
  stroke:var(--ember-lo);
  stroke-width:1.4;
  transition:stroke .35s ease, filter .35s ease;
}
.ms-glyph{
  stroke:var(--ember);
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .35s ease;
}
.ms-glyph-dot{ fill:var(--ember); stroke:none; transition:fill .35s ease; }
.ms-node.is-lit .ms-core{
  stroke:var(--ember-hi);
  filter:drop-shadow(0 0 8px rgba(243,212,137,.85)) drop-shadow(0 0 20px rgba(212,118,42,.5));
}
.ms-node.is-lit .ms-glyph{ stroke:var(--ember-hi); }
.ms-node.is-lit .ms-glyph-dot{ fill:var(--ember-hi); }
.ms-node.is-lit .ms-halo{ stroke:rgba(243,212,137,.55); }
.ms-node.is-sel .ms-core{ stroke:var(--ember); }
.ms-node.is-sel .ms-halo{ stroke:rgba(243,212,137,.4); }
.ms-node:focus-visible .ms-core{ stroke:var(--ember-hi); stroke-width:2.4; stroke-dasharray:4 3; }
.ms-label{
  fill:var(--ash);
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.14em;
  text-anchor:middle;
  transition:fill .35s ease;
  pointer-events:none;
}
.ms-node.is-lit .ms-label,
.ms-node.is-sel .ms-label{ fill:var(--ember-hi); }

/* ============================================================
   2 · THE HIERARCHY OF FIRES
   ============================================================ */
.fh-tier{ cursor:pointer; outline:none; }
.fh-flame{ transition:filter .4s ease, opacity .4s ease; }
.fh-tier:hover .fh-flame,
.fh-tier:focus-visible .fh-flame,
.fh-tier.is-sel .fh-flame{
  filter:brightness(1.22) drop-shadow(0 0 14px rgba(243,212,137,.45));
}
.fh-tier:focus-visible .fh-flame{ stroke:var(--ember-hi); stroke-width:2; }
.fh-tname{
  font-family:var(--display);
  text-anchor:middle;
  letter-spacing:.18em;
  pointer-events:none;
}
.fh-tcap{
  font-family:var(--serif);
  font-style:italic;
  text-anchor:middle;
  pointer-events:none;
}

/* drifting embers */
.fh-ember{
  fill:var(--ember-hi);
  animation:fh-rise var(--dur,9s) linear infinite;
  animation-delay:var(--delay,0s);
  opacity:0;
}
@keyframes fh-rise{
  0%   { transform:translateY(0);      opacity:0; }
  8%   { opacity:.95; }
  60%  { opacity:.55; }
  100% { transform:translateY(-470px); opacity:0; }
}

/* the sixteen-spark constellation */
.fh-sparks{
  list-style:none;
  margin:1.1rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.42rem 1.1rem;
  counter-reset:spark;
}
.fh-sparks li{
  position:relative;
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.99rem;
  color:var(--smoke);
  opacity:.3;
  transition:opacity .55s ease, color .55s ease;
}
.fh-sparks li::before{
  content:"";
  flex:none;
  width:7px; height:7px;
  border-radius:50%;
  background:#3b2c15;
  transition:background .55s ease, box-shadow .55s ease;
}
.fh-sparks li.lit{ opacity:1; color:var(--parch); }
.fh-sparks li.lit::before{
  background:var(--ember-hi);
  box-shadow:0 0 7px rgba(243,212,137,.95), 0 0 16px rgba(212,118,42,.55);
}
.fh-est{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.5rem; }
.fh-est li{
  display:grid; grid-template-columns:112px 1fr; gap:.8rem;
  font-size:1.02rem; border-top:1px solid var(--line-2); padding-top:.5rem;
}
.fh-est b{
  font-family:var(--display); font-weight:600; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ember);
}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .dgm-layout{ grid-template-columns:1fr; gap:1.8rem; }
  .dgm-stage{ max-width:560px; margin:0 auto; width:100%; }
  .dgm-panel{ min-height:0; }
  .dgm-default{ min-height:0; padding:1rem 0; }
}
@media (max-width:520px){
  .fh-sparks{ grid-template-columns:1fr; }
  .dgm-row, .fh-est li{ grid-template-columns:88px 1fr; }
  .dgm-panel{ padding:1.3rem 1.2rem; }
  /* SVG text scales with the viewBox; enlarge it on small screens */
  .ms-label{ font-size:16px; }
  .ms-sun-label{ font-size:16px; }
  .fh-tname{ font-size:18px; }
  .fh-tcap{ font-size:14px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fh-ember{ animation:none; opacity:0; }
  .ms-scale, .ms-spoke, .ms-node, .fh-flame,
  .fh-sparks li, .fh-sparks li::before{ transition:none; }
  .ms-node.is-lit .ms-scale{ transform:none; }
}