/* ============================================================
   PRISM — Signature breathing character animation
   Calm, premium, natural. Respects prefers-reduced-motion (base.css
   already freezes all animation durations for that case).
   ============================================================ */
.prism-breather {
  position: relative;
  width: var(--breather-size, 380px);
  height: var(--breather-size, 380px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.breather-aura {
  position: absolute; inset: -6%;
  border-radius: 50%;
  background: var(--gradient-glow);
  animation: breather-aura-pulse var(--breath-cycle) ease-in-out infinite;
  filter: blur(2px);
}
.prism-breather--cosmic .breather-aura {
  background: radial-gradient(closest-side, rgba(167,139,250,0.45), rgba(167,139,250,0));
}

@keyframes breather-aura-pulse {
  0%, 6% { transform: scale(1); opacity: 0.55; }
  42%, 55% { transform: scale(1.09); opacity: 0.85; }
  92%, 100% { transform: scale(1); opacity: 0.55; }
}

.breather-figure { position: relative; z-index: 2; width: 78%; height: 78%; }

.breather-torso { animation: breather-torso-breathe var(--breath-cycle) var(--ease-in-out-soft) infinite; }
@keyframes breather-torso-breathe {
  0%, 6% { transform: scale(1, 1) translateY(0); }
  42%, 55% { transform: scale(1.045, 1.065) translateY(-6px); }
  92%, 100% { transform: scale(1, 1) translateY(0); }
}

.breather-chest-highlight { animation: breather-chest-glow var(--breath-cycle) var(--ease-in-out-soft) infinite; }
@keyframes breather-chest-glow {
  0%, 6% { opacity: 0.10; }
  42%, 55% { opacity: 0.30; }
  92%, 100% { opacity: 0.10; }
}

.breather-head { animation: breather-head-lift var(--breath-cycle) var(--ease-in-out-soft) infinite; transform-origin: 200px 280px; }
@keyframes breather-head-lift {
  0%, 6% { transform: translateY(0); }
  42%, 55% { transform: translateY(-3px); }
  92%, 100% { transform: translateY(0); }
}

.breather-arm--left { animation: breather-arm-left var(--breath-cycle) var(--ease-in-out-soft) infinite; transform-origin: 150px 210px; }
.breather-arm--right { animation: breather-arm-right var(--breath-cycle) var(--ease-in-out-soft) infinite; transform-origin: 250px 210px; }
@keyframes breather-arm-left { 0%,6%{transform:rotate(0deg);} 42%,55%{transform:rotate(-1.6deg);} 92%,100%{transform:rotate(0deg);} }
@keyframes breather-arm-right { 0%,6%{transform:rotate(0deg);} 42%,55%{transform:rotate(1.6deg);} 92%,100%{transform:rotate(0deg);} }

/* Particles: soft floating light synced loosely to breath */
.breather-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.breather-particles span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.9), rgba(167,139,250,0));
  width: 10px; height: 10px;
  animation: particle-float 7.2s ease-in-out infinite;
}
.prism-breather--cosmic .breather-particles span {
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0));
}
.breather-particles span:nth-child(1) { top: 12%; left: 18%; width: 7px; height: 7px; animation-delay: 0s; animation-duration: 8s; }
.breather-particles span:nth-child(2) { top: 22%; left: 78%; width: 9px; height: 9px; animation-delay: 0.6s; animation-duration: 6.6s; }
.breather-particles span:nth-child(3) { top: 68%; left: 10%; width: 6px; height: 6px; animation-delay: 1.2s; animation-duration: 9s; }
.breather-particles span:nth-child(4) { top: 78%; left: 84%; width: 8px; height: 8px; animation-delay: 1.8s; animation-duration: 7.4s; }
.breather-particles span:nth-child(5) { top: 6%; left: 52%; width: 5px; height: 5px; animation-delay: 2.4s; animation-duration: 6.2s; }
.breather-particles span:nth-child(6) { top: 88%; left: 46%; width: 7px; height: 7px; animation-delay: 3s; animation-duration: 8.4s; }
.breather-particles span:nth-child(7) { top: 40%; left: 4%; width: 5px; height: 5px; animation-delay: 3.6s; animation-duration: 7s; }
.breather-particles span:nth-child(8) { top: 46%; left: 92%; width: 6px; height: 6px; animation-delay: 4.2s; animation-duration: 8.8s; }

@keyframes particle-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
  50% { transform: translate(6px, -14px) scale(1.3); opacity: 0.85; }
}

/* Breath captions */
.breather-caption { position: absolute; bottom: -8px; left: 0; right: 0; text-align: center; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prism-indigo-dark); }
.prism-breather--cosmic .breather-caption { color: var(--text-on-dark); }
.breather-caption span { position: absolute; left: 0; right: 0; opacity: 0; }
.breather-caption-inhale { animation: caption-inhale var(--breath-cycle) linear infinite; }
.breather-caption-exhale { animation: caption-exhale var(--breath-cycle) linear infinite; }
@keyframes caption-inhale {
  0%, 4% { opacity: 0; }
  12%, 36% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
@keyframes caption-exhale {
  0%, 52% { opacity: 0; }
  60%, 84% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@media (max-width: 520px) {
  .prism-breather { width: min(var(--breather-size, 380px), 78vw); height: min(var(--breather-size, 380px), 78vw); }
}