/* ink.css — background wash, breathing ring, reveals (dark-tuned) */

.ink-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(130% 130% at 50% -10%, var(--paper-2) 30%, var(--paper) 100%);
}
.ink-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; }
.ink-blob-1 {
  width: 48vmax; height: 48vmax; top: -18vmax; left: -12vmax;
  background: radial-gradient(circle, rgba(74, 107, 122, 0.22), transparent 70%);
  animation: drift-1 40s ease-in-out infinite alternate;
}
.ink-blob-2 {
  width: 40vmax; height: 40vmax; bottom: -16vmax; right: -10vmax;
  background: radial-gradient(circle, rgba(147, 167, 154, 0.16), transparent 70%);
  animation: drift-2 46s ease-in-out infinite alternate;
}
@keyframes drift-1 { to { transform: translate(6vmax, 5vmax) scale(1.1); } }
@keyframes drift-2 { to { transform: translate(-5vmax, -4vmax) scale(1.14); } }

.paper-grain {
  position: absolute; inset: 0; opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 0.5px, transparent 0.5px);
  background-size: 4px 4px;
}
[data-theme="light"] .paper-grain {
  opacity: 0.4;
  background-image: radial-gradient(rgba(43, 43, 40, 0.05) 0.5px, transparent 0.5px);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .ink-blob-1, .ink-blob-2 { animation: none; } }

/* ── breathing ring ── */
.breathing-ring { position: relative; width: 240px; height: 240px; margin: 4px auto 14px; display: grid; place-items: center; }
.breathing-ring::before {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(147,167,154,0.12), rgba(74,107,122,0.05));
  animation: breathe 7s var(--ease) infinite;
}
@keyframes breathe { 0%,100% { transform: scale(0.94); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .breathing-ring::before { animation: none; } }

.ring-svg { width: 220px; height: 220px; transform: rotate(-90deg); position: relative; }
.ring-track { fill: none; stroke: var(--line); stroke-width: 4; }
.ring-progress {
  fill: none; stroke: var(--stone); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 628; stroke-dashoffset: 628;
  transition: stroke-dashoffset 0.9s linear, stroke 0.6s var(--ease);
}
.ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; }

/* ── ink-bloom reveal ── */
@keyframes ink-bloom { 0% { opacity: 0; transform: scale(0.86); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
.reveal-bloom { animation: ink-bloom 0.9s var(--ease); }
@keyframes brush-in { from { opacity: 0; letter-spacing: 0.25em; filter: blur(3px); } to { opacity: 1; letter-spacing: normal; filter: blur(0); } }
.brush-in { animation: brush-in 0.8s var(--ease); }

/* ── I Ching cast ── */
.cast-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 34px 0; }
.cast-coins { display: flex; gap: 16px; }
.cast-coin {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--sage-line); background: var(--card-2);
  display: grid; place-items: center; font-size: 1.35rem; color: var(--ink-soft);
  box-shadow: var(--shadow);
}
.cast-coin.tossing { animation: coin-toss 0.5s var(--ease); }
@keyframes coin-toss { 0% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-28px) rotateY(540deg); } 100% { transform: translateY(0) rotateY(1080deg); } }
.cast-hexagram { font-size: 4.6rem; line-height: 1; color: var(--ink); opacity: 0; animation: ink-bloom 0.9s var(--ease) forwards; }
.cast-caption { font-family: 'Noto Serif SC', serif; color: var(--ink-soft); font-size: 0.95rem; letter-spacing: 0.06em; }