/* CPIRD TOT Enneagram — looping motion for the interactive figures (goals, depth, journey, map, spiral) */

/* ---------- shared keyframes + pause rules ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@keyframes ripple{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes pingr{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dashflow{to{stroke-dashoffset:-24}}
.fx-host:not(.in-view) *,.motion-off .fx-host *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.fx-host *{animation:none!important;transition:none!important}}

/* ---------- goals: ripple outward Self → Others → Facilitation, orbiting beads ---------- */
.ring-svg .rip-g circle{fill:none;stroke-width:2;opacity:0;pointer-events:none;
  transform-box:view-box;transform-origin:160px 160px;animation:ringrip 5.2s cubic-bezier(.2,.6,.3,1) infinite}
.ring-svg .rip-g .r2{animation-delay:2.6s}
@keyframes ringrip{0%{transform:scale(1);opacity:.7;stroke:var(--lv-self)}45%{stroke:var(--lv-others)}100%{transform:scale(2.85);opacity:0;stroke:var(--lv-fac)}}
.ring-svg .orb{pointer-events:none;transform-box:view-box;transform-origin:160px 160px;animation:spin 26s linear infinite}
.ring-svg .orb-others{animation-duration:17s;animation-direction:reverse}
.ring-svg .orb-self{animation-duration:10s}
.ring-svg .orb-fac circle{fill:var(--lv-fac)} .ring-svg .orb-others circle{fill:var(--lv-others)} .ring-svg .orb-self circle{fill:var(--lv-self)}
.ring-svg .orb circle{stroke:var(--paper);stroke-width:2}
.goals .fig-tabs button{position:relative;overflow:hidden}
.goals.is-auto .fig-tabs button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--line)}
.goals.is-auto.tick .fig-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--rc);transform-origin:left;animation:fillbar var(--auto-ms,5s) linear forwards}

/* ---------- depth: moving water, rising bubbles, a pulse sinking down the active root ---------- */
.depth svg{overflow:hidden}
.depth .water{animation:drift 4s linear infinite}
@keyframes drift{to{transform:translateX(-100px)}}
.depth .bub{fill:var(--blue);opacity:0;animation:bubble 7s ease-in infinite}
.depth .b2{animation-delay:1.2s} .depth .b3{animation-delay:2.4s} .depth .b4{animation-delay:3.6s} .depth .b5{animation-delay:4.8s} .depth .b6{animation-delay:6s}
@keyframes bubble{0%{transform:translateY(0);opacity:0}15%{opacity:.35}80%{opacity:.2}100%{transform:translateY(-280px);opacity:0}}
.depth .root.is-active .deep{opacity:.95;animation:sink .9s linear infinite}
@keyframes sink{to{stroke-dashoffset:-16}}
.depth .root .q{transform-box:fill-box;transform-origin:center}
.depth .root.is-active .q{animation:qpulse 1.6s ease-in-out infinite}
@keyframes qpulse{50%{transform:scale(1.3)}}
.depth .beh rect{transform-box:fill-box;transform-origin:center;animation:behave 5s ease-in-out infinite}
@keyframes behave{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ---------- journey: a traveller walks the road, stations ping on arrival ---------- */
.journey .track{fill:none;stroke:none}
.journey .trail{fill:none;stroke:#F2B01E;stroke-width:4;stroke-linecap:round;opacity:.85}
.journey .walker .w-glow{fill:#F2B01E;opacity:.3;transform-box:fill-box;transform-origin:center;animation:breathe 1.6s ease-in-out infinite}
.journey .walker .w-dot{fill:#F2B01E;stroke:var(--paper);stroke-width:2}
.journey .walker.later .w-dot,.journey .walker.later .w-glow{fill:var(--gray-2)}
.journey .yr.later{opacity:.55}
.journey .cap.en{font-size:11.5px;opacity:.7}
.journey .st circle.dot{transform-box:fill-box;transform-origin:center}
.journey .ping-ring{fill:none;stroke:#F2B01E;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.journey .st.ping .ping-ring{animation:pingr .9s ease-out}
.journey .st.ping circle.dot{animation:bump .6s ease-out}
@keyframes bump{40%{transform:scale(1.14)}}

/* ---------- Enneagram map: flowing lines, a glint circling the rim, a pulse on the chosen point ---------- */
.ennea .ln{stroke-dasharray:5 7;animation:dashflow 2.4s linear infinite}
.ennea .ln.hot{stroke-dasharray:none;animation:none}
.ennea .rim-glint{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:60 883;opacity:.55;pointer-events:none;
  transform-box:view-box;transform-origin:210px 210px;animation:spin 11s linear infinite}
.ennea .nd circle.nd-pulse{fill:none;stroke:var(--blue);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.ennea .nd.sel circle.nd-pulse{animation:pingr 1.6s ease-out infinite}
.ennea[data-mode="centers"] .wedge.on{animation:wedge 2.4s ease-in-out infinite}
@keyframes wedge{50%{opacity:.42}}

/* ---------- spiral: a comet with a tail, the active phase badge pings ---------- */
.spiral .track{fill:none;stroke:none}
.spiral .comet-tail{fill:none;stroke:#F2B01E;stroke-width:6;stroke-linecap:round;opacity:.75;transition:opacity .4s}
.spiral .comet{transition:opacity .4s}
.spiral .comet .c-glow{fill:#F2B01E;opacity:.3;transform-box:fill-box;transform-origin:center;animation:breathe 1.4s ease-in-out infinite}
.spiral .comet .c-dot{fill:#fff;stroke:#F2B01E;stroke-width:3}
.spiral .gone{opacity:0}
.spiral .core{fill:var(--blue-tint);transform-box:fill-box;transform-origin:center;animation:breathe 5s ease-in-out infinite}
.spiral .ctr.sm{font-size:11px}
.spiral .pn circle.pn-ring{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.spiral .pn.on circle.pn-ring{animation:pingr 1.4s ease-out infinite}
.spiral .pn.on circle:not(.pn-ring){stroke-width:4}