/* ============================================================
   Мандала: тънки линии в цвета на текста.
   --mw      дебелина на линиите в пиксели (1)
   --m-dur   колко трае изрисуването на един пръстен (2.6s), --m-step закъснението между пръстените (220ms)
   --m-w     ширина на блока „Мандала“ (до 680 px), --m-o прозрачност
   Дебелината се пази еднаква с --u (единици на рисунката за 1 пиксел; слага я скриптът),
   без non-scaling-stroke: така в Chrome уголемените линии се изрисуват докрай.
   ============================================================ */
.pfx-mandala { display: block; overflow: visible; pointer-events: none; width: 100%; height: auto; max-width: none; }
.pfx-mandala path, .pfx-mandala circle { fill: none; stroke: currentColor; stroke-width: calc(var(--mw, 1) * var(--u, 1)); stroke-linecap: round; stroke-linejoin: round; }
.pfx-mandala .m-ring { transform-box: view-box; transform-origin: 0 0; opacity: 0; transition: opacity 1.2s ease calc(var(--i) * var(--m-step, 220ms)); }
.pfx-mandala .m-ring path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--m-dur, 2.6s) var(--ease-io, cubic-bezier(.76, 0, .24, 1)) calc(var(--i) * var(--m-step, 220ms)); }
.pfx-mandala .m-dots circle { fill: currentColor; stroke: none; }
.pfx-mandala .m-dash path { stroke-dasharray: .004 .012 !important; stroke-dashoffset: 0 !important; stroke-opacity: .8; }
.pfx-mandala[data-open] .m-ring { opacity: 1; }
.pfx-mandala[data-open] .m-ring path { stroke-dashoffset: 0; }
.pfx-mandala[data-vis] .m-cw { animation: pfx-m-spin 120s linear infinite; }
.pfx-mandala[data-vis] .m-ccw { animation: pfx-m-spin 160s linear infinite reverse; }
.pfx-mandala[data-vis] .m-slow { animation: pfx-m-spin 240s linear infinite; }
.pfx-mandala[data-vis] .m-breath { animation: pfx-m-breath 10s cubic-bezier(.45, 0, .55, 1) infinite; }
.pfx-mandala .m-breath { transform-box: view-box; transform-origin: 0 0; }
@keyframes pfx-m-spin { to { transform: rotate(360deg); } }
@keyframes pfx-m-breath { 0%, 100% { transform: scale(.96); } 40%, 50% { transform: scale(1.03); } }
/* без JavaScript мандалата просто стои изрисувана */
html:not([data-js]) .pfx-mandala .m-ring { opacity: 1; }
html:not([data-js]) .pfx-mandala .m-ring path { stroke-dashoffset: 0; }

/* блокът „Мандала“ в WPBakery */
.pfx.pfx-mandala-box { position: relative; display: grid; place-items: center; width: min(100%, var(--m-w, 680px)); margin-inline: auto; opacity: var(--m-o, 1); }
.pfx.pfx-mandala-box > * { grid-area: 1 / 1; }
.pfx.pfx-mandala-box.al-left { margin-inline: 0 auto; }
.pfx.pfx-mandala-box.al-right { margin-inline: auto 0; }
.pfx-mandala-box.no-spin .pfx-mandala .m-ring { animation: none !important; }
.pfx-mandala-box.no-breathe .pfx-mandala .m-breath { animation: none !important; }
.pfx-mandala-box.no-draw .pfx-mandala .m-ring { opacity: 1; transition: none; }
.pfx-mandala-box.no-draw .pfx-mandala .m-ring path { stroke-dashoffset: 0; transition: none; }
.pfx-mandala-box.has-breath .pfx-br { width: 46%; }

/* ---------- „дишане“: кръгът се разширява и свива, точката отмерва един дъх (10 с) ---------- */
.pfx-br { position: relative; display: grid; place-items: center; width: min(100%, 540px); aspect-ratio: 1; justify-self: center; pointer-events: none; overflow: clip; overflow-clip-margin: 24px; }
.pfx-br > * { grid-area: 1 / 1; }
.pfx-br .br-track { width: 100%; height: 100%; overflow: visible; }
.pfx-br .br-track circle { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
.pfx-br .br-orbit { position: relative; width: 100%; height: 100%; animation: pfx-br-orbit 10s linear infinite; }
.pfx-br .br-orbit i { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 16px currentColor; }
.pfx-br .br-core { width: 64%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); box-shadow: 0 0 100px color-mix(in srgb, currentColor 24%, transparent), inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); animation: pfx-br-core 10s cubic-bezier(.45, 0, .55, 1) infinite; }
.pfx-br .br-ring { width: 64%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; opacity: 0; animation: pfx-br-ring 10s cubic-bezier(.2, .6, .3, 1) infinite; animation-delay: calc(var(--k, 0) * .45s); }
.pfx-br .br-say { position: relative; display: grid; place-items: center; font-size: clamp(22px, 2.4vw, 36px); font-weight: 200; font-style: italic; letter-spacing: -.02em; }
.pfx-br .br-say > span { grid-area: 1 / 1; opacity: 0; }
.pfx-br .br-in { animation: pfx-br-in 10s linear infinite; }
.pfx-br .br-out { animation: pfx-br-out 10s linear infinite; }
@keyframes pfx-br-orbit { to { transform: rotate(360deg); } }
@keyframes pfx-br-core { 0%, 100% { transform: scale(.56); } 40%, 50% { transform: scale(1); } }
@keyframes pfx-br-ring { 0%, 50% { transform: scale(1); opacity: 0; } 54% { opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes pfx-br-in { 0% { opacity: 0; filter: blur(6px); } 6%, 36% { opacity: 1; filter: blur(0); } 44%, 100% { opacity: 0; filter: blur(6px); } }
@keyframes pfx-br-out { 0%, 48% { opacity: 0; filter: blur(6px); } 56%, 92% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(6px); } }
/* дишането спира, когато не се вижда (скриптът слага data-vis) */
.pfx-br:not([data-vis]) *, .pfx-br:not([data-vis]) { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .pfx-mandala .m-ring, .pfx-mandala .m-breath { animation: none !important; }
  .pfx-mandala .m-ring { opacity: 1; transition: none; }
  .pfx-mandala .m-ring path { stroke-dashoffset: 0; transition: none; }
  .pfx-br *, .pfx-br { animation: none !important; }
  .pfx-br .br-core { transform: scale(.8); }
  .pfx-br .br-in { opacity: 1; }
}