/* v363 (draft for Jimmy): the in-meditation breath guide is an original fine-line gold mandala
   (inline SVG in sit/index.html): layered lotus petal rings, a dotted ring and a glowing centre.
   Soft luminous palette: champagne gold, a gentle rose-gold outer ring, ivory inner petals and a
   faint pearl / lavender-blush halo, still clearly gold on black. breath-guide.js scales the orb
   and sets --bloom (0 exhale low .. 1 inhale peak): the outer rings open, turn and brighten as it
   blooms. A very slow turn and an occasional light sweep; both stop for reduced motion.
   Kept in its own file because the glow is a deliberate exception to the flat "no glow" rule
   used elsewhere on /sit. Loaded after sit.css and overrides its v337 .breath-guide block. */
.breath-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin: 1rem auto 0.6rem;
  pointer-events: none;
}
.breath-guide[hidden] { display: none; }
.breath-guide-orb {
  --bloom: 0;
  position: relative;
  display: block;
  width: 156px;
  height: 156px;
  border-radius: 50%;
  background: none;
  border: 0;
  transform: scale(0.5);
  transform-origin: center;
  will-change: transform;
}
/* Warm halo behind the mandala: champagne into blush, brighter as it blooms. */
.breath-guide-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 160, 0.42) 0%, rgba(246, 206, 170, 0.2) 38%, rgba(236, 200, 222, 0.08) 58%, rgba(236, 200, 222, 0) 72%);
  opacity: calc(0.55 + var(--bloom) * 0.45);
  pointer-events: none;
}
.breath-guide-orb .mandala {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(255, 220, 140, 0.75)) drop-shadow(0 0 14px rgba(255, 205, 120, 0.45)) drop-shadow(0 0 28px rgba(240, 190, 200, 0.22));
}
.mandala g, .mandala circle { transform-box: view-box; transform-origin: 0 0; }
.mandala .md-spin { animation: dd-mandala-turn 180s linear infinite; }
.mandala .md-outer {
  transform: rotate(calc(var(--bloom) * 11.25deg)) scale(calc(0.8 + var(--bloom) * 0.2));
  opacity: calc(0.4 + var(--bloom) * 0.6);
}
.mandala .md-mid {
  transform: rotate(calc(var(--bloom) * -7.5deg)) scale(calc(0.88 + var(--bloom) * 0.12));
  opacity: calc(0.62 + var(--bloom) * 0.38);
}
.mandala .md-inner { transform: scale(calc(0.94 + var(--bloom) * 0.06)); }
.mandala .md-dots { opacity: calc(0.5 + var(--bloom) * 0.5); }
.mandala .mv { fill: none; stroke-width: 0.4; stroke-opacity: 0.55; }
.mandala .md-core { transform: scale(calc(0.9 + var(--bloom) * 0.25)); }
@keyframes dd-mandala-turn { to { transform: rotate(360deg); } }
/* An occasional soft light sweep through the gold, clipped to the mandala's circle. */
.breath-guide-orb::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(255, 250, 236, 0) 40%, rgba(255, 250, 236, 0.32) 50%, rgba(255, 250, 236, 0) 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  animation: dd-breath-shine 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes dd-breath-shine {
  0%, 60% { background-position: 100% 0; }
  88%, 100% { background-position: 0% 0; }
}
.breath-guide-word {
  min-height: 1.3em;
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #ffe2a3;
  text-shadow: 0 0 14px rgba(255, 213, 107, 0.6), 0 0 22px rgba(240, 196, 210, 0.25), 0 0 2px rgba(0, 0, 0, 0.9);
  transition: opacity 0.8s ease;
}
.breath-guide[data-phase="rest"] .breath-guide-word { opacity: 0; }
/* Reduced motion: breath-guide.js keeps the mandala still and only fades it (data-still); no turn, no sweep. */
.breath-guide[data-still] .breath-guide-orb { --bloom: 1; transform: none !important; transition: opacity 1.2s ease; }
.breath-guide[data-still] .breath-guide-orb::after { animation: none; display: none; }
.breath-guide[data-still] .mandala .md-spin { animation: none; }
.breath-guide[data-still][data-phase="rest"] .breath-guide-orb,
.breath-guide[data-still][data-phase="out"] .breath-guide-orb { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .breath-guide-orb::after { animation: none; display: none; }
  .mandala .md-spin { animation: none; }
}