/* =========================================================================
   gold-chain.css — Lotus Medallion Chapter Navigator (§2)
   =========================================================================
   Renders the vertical gold chain with 7 lotus medallions on the left edge.
   Load once per page: <link rel="stylesheet" href="styles/gold-chain.css">
   ========================================================================= */

.gold-chain {
  position: fixed;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

/* ── Vertical chain line ── */
.gold-chain::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(138,115,64,0.25) 4vh,
    #c9a961 50%,
    rgba(138,115,64,0.25) 96vh,
    transparent 100%
  );
  opacity: 0.55;
}

/* ── Top cloud ornament ── */
.gold-chain-cloud {
  width: 40px; height: 40px;
  margin: 1.5vh 0 2vh;
  position: relative; z-index: 2;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23c9a961' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 60 Q14 52 18 44 Q22 36 30 38 Q34 28 44 30 Q54 24 60 32 Q70 30 72 40 Q82 42 80 52 Q84 60 76 64 L26 64 Q18 64 20 60 Z'/><path d='M32 50 Q40 46 48 50'/><path d='M52 50 Q60 46 68 50'/><circle cx='38' cy='54' r='1.5' fill='%23c9a961'/><circle cx='58' cy='54' r='1.5' fill='%23c9a961'/><path d='M44 56 Q50 60 56 56'/></g></svg>");
  filter: drop-shadow(0 0 6px rgba(201,169,97,0.4));
  flex-shrink: 0;
}

/* ── Medallions container ── */
.gold-chain-medallions {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 1vh 0;
  overflow: visible;
}

/* ── Individual lotus node ── */
.gold-chain-node {
  position: relative; z-index: 2;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: filter 500ms cubic-bezier(0.4,0,0.2,1),
              transform 500ms cubic-bezier(0.4,0,0.2,1),
              opacity 500ms;
  pointer-events: auto;
  opacity: 0.38;
}

.gold-chain-node.standard {
  width: 36px; height: 36px;
}

.gold-chain-node.small {
  width: 30px; height: 30px;
}

.gold-chain-node:hover {
  filter: drop-shadow(0 0 8px rgba(201,169,97,0.55));
  transform: scale(1.1);
  opacity: 0.75;
}

/* Active chapter — gold glow + breathing */
.gold-chain-node.active {
  filter: drop-shadow(0 0 14px rgba(230,193,122,0.75));
  transform: scale(1.15);
  opacity: 1;
  animation: chain-breathe 3s ease-in-out infinite;
}

/* Read chapter — subdued */
.gold-chain-node.read {
  filter: drop-shadow(0 0 5px rgba(230,193,122,0.4));
  opacity: 0.65;
}

.gold-chain-node.read.active {
  opacity: 1;
}

/* ── SVG lotus background for standard node ── */
.gold-chain-node.standard {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23c9a961' stroke-width='1.8' stroke-linecap='round'><circle cx='50' cy='50' r='42'/><circle cx='50' cy='50' r='34' stroke='%23e6c17a'/><g transform='translate(50 50)'><g><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(60)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(120)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(180)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(240)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(300)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><circle r='4' fill='%23e6c17a'/></g></g></svg>");
}

.gold-chain-node.small {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23c9a961' stroke-width='2.2' stroke-linecap='round'><circle cx='50' cy='50' r='42'/><circle cx='50' cy='50' r='28' stroke='%23e6c17a' opacity='0.5'/><g transform='translate(50 50)'><g><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><g transform='rotate(60)'><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><g transform='rotate(120)'><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><g transform='rotate(180)'><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><g transform='rotate(240)'><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><g transform='rotate(300)'><path d='M0 -26 Q7 -12 0 0 Q-7 -12 0 -26' fill='%23c9a961' fill-opacity='0.35'/></g><circle r='4' fill='%23c9a961' fill-opacity='0.6'/></g></g></svg>");
}

/* Special node (prologue / epilogue) — visual identical to standard, awaits future differentiation */
.gold-chain-node.special {
  width: 36px; height: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23c9a961' stroke-width='1.8' stroke-linecap='round'><circle cx='50' cy='50' r='42'/><circle cx='50' cy='50' r='34' stroke='%23e6c17a'/><g transform='translate(50 50)'><g><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(60)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(120)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(180)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(240)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><g transform='rotate(300)'><path d='M0 -22 Q8 -14 0 -6 Q-8 -14 0 -22' fill='%23c9a961' fill-opacity='0.5'/></g><circle r='4' fill='%23e6c17a'/></g></g></svg>");
}

/* ── Tooltip ── */
.gold-chain-tooltip {
  position: absolute;
  left: calc(100% + 11px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(26,20,16,0.94);
  border: 1px solid rgba(201,169,97,0.45);
  color: #e6c17a;
  padding: 5px 13px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
  z-index: 56;
}

.gold-chain-node:hover .gold-chain-tooltip {
  opacity: 1;
}

/* ── Bottom tail dot ── */
.gold-chain-tail {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(138,115,64,0.4);
  margin: 1.5vh 0 0;
  flex-shrink: 0;
}

/* ── Keyframes ── */
@keyframes chain-breathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(230,193,122,0.75)); }
  50%      { filter: drop-shadow(0 0 22px rgba(230,193,122,0.95)); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .gold-chain { left: 6px; }
  .gold-chain-node.standard { width: 28px; height: 28px; }
  .gold-chain-node.small { width: 24px; height: 24px; }
  .gold-chain-node.special { width: 28px; height: 28px; }
}