/* CPIRD TOT Enneagram — animated illustrations: hero, safe-space circle, module emblems, skill icons, join backdrop */
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.6}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@keyframes wave{0%,100%{opacity:.15}40%{opacity:1}}
@keyframes flow9{to{stroke-dashoffset:-18}}

/* ---------- pause / play button ---------- */
.motion-btn{position:fixed;right:16px;bottom:16px;z-index:50;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;
  border-radius:999px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:inherit;font-size:13.5px;font-weight:700;color:var(--ink-2);cursor:pointer;box-shadow:0 6px 18px rgba(15,23,42,.08);transition:border-color .15s,color .15s}
.motion-btn:hover{border-color:var(--blue);color:var(--blue-deep)}
.motion-btn svg{flex:none;color:var(--blue)}
.motion-btn .i-play,.motion-btn.is-off .i-pause{display:none}
.motion-btn.is-off .i-play{display:inline}
.motion-btn[hidden]{display:none}

/* ---------- hero banner ---------- */
.hero-art{margin:34px 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--line-2);
  background:radial-gradient(ellipse 60% 90% at 50% 50%,var(--blue-tint),var(--paper) 75%)}
.hero-art svg{display:block;width:100%;height:auto}
.hero-svg .tw{fill:var(--blue);animation:twinkle 4s ease-in-out infinite}
.tw1{animation-delay:-1s!important} .tw2{animation-delay:-2s!important} .tw3{animation-delay:-3s!important}
.hero-svg .link{stroke:var(--blue);stroke-opacity:.25;stroke-width:1;stroke-dasharray:2 6;animation:dashflow 3s linear infinite}
.hero-svg .rip{fill:none;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ripple 6s cubic-bezier(.2,.6,.3,1) infinite}
.hero-svg .rip2{animation-delay:2s} .hero-svg .rip3{animation-delay:4s}
.c-self{stroke:var(--lv-self)} .c-others{stroke:var(--lv-others)} .c-fac{stroke:var(--lv-fac)}
.hero-svg .core{fill:var(--blue-soft);transform-box:fill-box;transform-origin:center;animation:breathe 5s ease-in-out infinite}
.hero-svg .rim{fill:var(--paper);fill-opacity:.55;stroke:var(--ink-2);stroke-opacity:.25;stroke-width:1.5}
.hero-svg .hl{stroke:var(--blue);stroke-width:1.6;stroke-dasharray:240;opacity:.7;animation:drawloop 9s ease-in-out infinite}
.hero-svg .hl1{animation-delay:.35s} .hero-svg .hl2{animation-delay:.7s}
@keyframes drawloop{0%{stroke-dashoffset:240}35%,78%{stroke-dashoffset:0;opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
.hero-svg .hn{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .25s var(--ease-out)}
.hero-svg .hn:hover{transform:scale(1.18)}
.hero-svg .hn-face{fill:var(--paper);stroke:var(--ink-2);stroke-width:1.6;animation:nlit 9s linear infinite}
.hero-svg .hn text{font-size:11px;font-weight:800;fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none;animation:tlit 9s linear infinite}
@keyframes nlit{0%,10%{fill:var(--blue);stroke:var(--blue)}16%,100%{fill:var(--paper);stroke:var(--ink-2)}}
@keyframes tlit{0%,10%{fill:#fff}16%,100%{fill:var(--ink)}}
.hn2 .hn-face,.hn2 text{animation-delay:1s} .hn3 .hn-face,.hn3 text{animation-delay:2s} .hn4 .hn-face,.hn4 text{animation-delay:3s}
.hn5 .hn-face,.hn5 text{animation-delay:4s} .hn6 .hn-face,.hn6 text{animation-delay:5s} .hn7 .hn-face,.hn7 text{animation-delay:6s}
.hn8 .hn-face,.hn8 text{animation-delay:7s} .hn9 .hn-face,.hn9 text{animation-delay:8s}
.hero-svg .hn-burst{fill:none;stroke:var(--blue);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.hero-svg .hn.burst .hn-burst{animation:pingr .8s ease-out}

/* ---------- overview: the facilitator's circle ---------- */
.overview{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px;align-items:center}
.overview-quote{margin:0 0 10px;font-size:clamp(18px,2.2vw,22px);font-weight:700;line-height:1.5;color:var(--ink)}
#overview-svg .space{fill:var(--blue-tint);transform-box:fill-box;transform-origin:center;animation:breathe 6s ease-in-out infinite}
#overview-svg .container{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:4 9;opacity:.55}
.spin{transform-box:fill-box;transform-origin:center;animation:spin 40s linear infinite}
#overview-svg .listen{fill:none;stroke:var(--blue);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ripple 3s ease-out infinite}
.person .p-glow{fill:#F2B01E;opacity:0;transition:opacity .5s}
.person .p-head,.person .p-body{fill:var(--paper);stroke:var(--gray);stroke-width:2;transition:fill .4s,stroke .3s}
.person .spark{opacity:0}
.person .spark line{stroke:var(--lv-fac);stroke-width:2.4;stroke-linecap:round}
.person.pp{cursor:pointer}
.person.asked .p-head,.person.asked .p-body{stroke:var(--blue)}
.person.lit .p-glow{opacity:.22}
.person.lit .p-head{fill:#F2B01E;stroke:var(--lv-fac)}
.person.found .spark{animation:sparkle 1.1s ease-out}
@keyframes sparkle{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.person.fac .p-head,.person.fac .p-body{fill:var(--blue);stroke:var(--blue)}
.overview.all .person.pp .p-glow{opacity:.34}
.qb{transition:transform .8s var(--ease-out),opacity .4s}
.qb circle{fill:#F2B01E}
.qb text{fill:#231A00;font-size:15px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.qb.rest{opacity:0}
@media(max-width:760px){.overview{grid-template-columns:1fr}#overview-svg{max-width:320px;margin:0 auto}}

/* ---------- module emblems ---------- */
.mod-row{grid-template-columns:72px 1fr auto;align-items:start}
.mod-row .idx.mod-art{display:block;width:72px;height:72px;margin-top:-4px}
.mod-art svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .3s var(--ease-out)}
.mod:hover .mod-art svg{transform:scale(1.06)}
.mod-more{margin-left:92px}
.emblem .e-rim,.emblem .e-orbit{fill:none;stroke:var(--line);stroke-width:2}
.emblem .e-ln{stroke:var(--blue-line);stroke-width:1.5}
.emblem .e-n{fill:var(--paper);stroke:var(--blue);stroke-width:2}
.emblem .e-core{fill:var(--blue)} .emblem .e-core.warm{fill:#F2B01E}
.emblem .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out infinite}
.m1 .seq9{animation:seq9 4.5s linear infinite}
@keyframes seq9{0%,10%{fill:var(--blue)}16%,100%{fill:var(--paper)}}
.m1 .q2{animation-delay:.5s} .m1 .q3{animation-delay:1s} .m1 .q4{animation-delay:1.5s} .m1 .q5{animation-delay:2s}
.m1 .q6{animation-delay:2.5s} .m1 .q7{animation-delay:3s} .m1 .q8{animation-delay:3.5s} .m1 .q9{animation-delay:4s}
.emblem .e-wing{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;transform-box:view-box;transform-origin:60px 52px;animation:flapL 2.2s ease-in-out infinite}
.emblem .e-wing.r{animation-name:flapR}
@keyframes flapL{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes flapR{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.emblem .e-flow{fill:none;stroke:var(--c-heart);stroke-width:2.5;stroke-dasharray:3 6;stroke-linecap:round;animation:flow9 1.2s linear infinite}
.emblem .e-flow.rev{animation-direction:reverse}
.emblem .e-n2{fill:var(--paper);stroke:var(--c-heart);stroke-width:2.5}
.emblem .e-main{fill:var(--ink)}
.emblem .e-bub{fill:var(--blue-soft);stroke:var(--blue);stroke-width:2;stroke-linejoin:round}
.emblem .e-typ{fill:var(--blue);animation:typ 1.2s ease-in-out infinite}
.emblem .t2{animation-delay:.15s} .emblem .t3{animation-delay:.3s}
@keyframes typ{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}
.emblem .e-wave{fill:none;stroke:var(--lv-others);stroke-width:2.5;stroke-linecap:round;opacity:.2;animation:wave 1.8s ease-in-out infinite}
.emblem .w2{animation-delay:.25s} .emblem .w1{animation-delay:.5s}
.emblem .e-person .p-head,.emblem .e-person .p-body{fill:var(--paper);stroke:var(--ink-2);stroke-width:2.2}
.emblem .e-person.fac .p-head,.emblem .e-person.fac .p-body{fill:var(--blue);stroke:var(--blue)}
.emblem .e-person .p-glow,.emblem .e-person .spark{display:none}
.emblem .e-spin{transform-box:view-box;transform-origin:60px 60px;animation:spin 5s linear infinite}
.emblem .s2{animation-duration:8s;animation-direction:reverse} .emblem .s3{animation-duration:12s}
.emblem .e-dot.sp{fill:var(--blue)} .emblem .e-dot.so{fill:var(--ok)} .emblem .e-dot.sx{fill:var(--c-heart)}
.emblem .e-coreglow{fill:#F2B01E;opacity:.25;transform-box:fill-box;transform-origin:center;animation:glow5 4s ease-in-out infinite}
@keyframes glow5{0%,100%{opacity:.1;transform:scale(.8)}50%{opacity:.45;transform:scale(1.25)}}
.emblem .e-shield{transform-box:view-box;transform-origin:60px 58px;animation:spin 18s linear infinite}
.emblem .e-open{transform-box:view-box;transform-origin:60px 58px;animation:open5 4s ease-in-out infinite}
@keyframes open5{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
.emblem .e-seg{fill:none;stroke:var(--gray);stroke-width:7;stroke-linecap:round;opacity:.75}
.m6 .e-flow{stroke:var(--blue)}
.emblem .e-spine{stroke:var(--line);stroke-width:2}
.emblem .e-c{stroke:var(--paper);stroke-width:2.5}
.emblem .c-head{fill:var(--c-head)} .emblem .c-heart{fill:var(--c-heart)} .emblem .c-gut{fill:var(--c-gut)}
.m6 .seq3{transform-box:fill-box;transform-origin:center;animation:seq3 3s ease-in-out infinite}
.m6 .q2{animation-delay:1s} .m6 .q3{animation-delay:2s}
@keyframes seq3{0%,30%,100%{transform:scale(1)}15%{transform:scale(1.3)}}
.emblem .e-pan{fill:var(--paper);stroke:var(--ink-2);stroke-width:2;animation:pan 7.5s linear infinite}
@keyframes pan{0%,16%{fill:#F2B01E;stroke:var(--lv-fac)}22%,100%{fill:var(--paper);stroke:var(--ink-2)}}
.emblem .e-ask{stroke:var(--blue);stroke-width:2;stroke-dasharray:3 4;opacity:0;animation:ask 7.5s linear infinite}
@keyframes ask{0%,16%{opacity:1}22%,100%{opacity:0}}
.emblem .e-pring{fill:none;stroke:var(--lv-fac);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:pring 7.5s ease-out infinite}
@keyframes pring{0%{opacity:.8;transform:scale(1)}18%{opacity:0;transform:scale(2)}100%{opacity:0}}
.m7 .q2{animation-delay:1.5s} .m7 .q3{animation-delay:3s} .m7 .q4{animation-delay:4.5s} .m7 .q5{animation-delay:6s}
.emblem .e-badge circle{fill:var(--blue);stroke:var(--paper);stroke-width:3}
.emblem .e-badge text{fill:#fff;font-family:"Inter",sans-serif;font-size:15px;font-weight:800;text-anchor:middle;dominant-baseline:central}
@media (prefers-color-scheme:dark){.emblem .e-badge circle{fill:#2563EB}}
@media(max-width:640px){
  .mod-row{grid-template-columns:56px 1fr}
  .mod-row .idx.mod-art{width:56px;height:56px}
  .mod-more{margin-left:0}
  .mod-more > summary{margin-left:70px}
}

/* ---------- skill icons ---------- */
.skills li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center}
.skills li > span:not(.sk-ico){grid-column:2}
.sk-ico{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--paper);display:grid;place-items:center;transition:background .2s}
.sk-ico svg{width:34px;height:34px;overflow:visible}
.skills li:hover .sk-ico{background:var(--blue-soft)}
.sk-ico .k-ring{fill:none;stroke:var(--blue);stroke-width:2}
.sk-ico .k-fill{fill:var(--blue)}
.sk-ico .k-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-ico .k-q{fill:var(--blue);font-family:"Inter",sans-serif;font-size:26px;font-weight:800;text-anchor:middle;dominant-baseline:central}
.sk-ico .breath{transform-box:fill-box;transform-origin:center;animation:breathe 4s ease-in-out infinite}
.sk-ico .blink{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
.sk-ico .wave{opacity:.2;animation:wave 1.8s ease-in-out infinite}
.sk-ico .w2{animation-delay:.25s} .sk-ico .w3{animation-delay:.5s}
.sk-ico .bob{animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.sk-ico .dash{stroke-dasharray:3 4}
.sk-ico .mirror{animation:mirror 3s ease-in-out infinite}
@keyframes mirror{0%,100%{opacity:.3}50%{opacity:1}}
.sk-ico .spin{animation-duration:12s}

/* ---------- join backdrop ---------- */
.join-art{position:absolute;right:-90px;top:50%;width:380px;height:380px;transform:translateY(-50%);opacity:.32;pointer-events:none;z-index:1}
.join-art svg{display:block;width:100%;height:100%}
.join-art .j-spin{transform-box:view-box;transform-origin:200px 200px;animation:spin 120s linear infinite}
.join-art .j-rim{fill:none;stroke:#8FB4FF;stroke-width:1.5}
.join-art .j-ln{stroke:#8FB4FF;stroke-width:1.2;opacity:.6}
.join-art .j-n{fill:#0E1A2E;stroke:#8FB4FF;stroke-width:2;animation:jn 9s linear infinite}
@keyframes jn{0%,11%{fill:#F2B01E;stroke:#F2B01E}18%,100%{fill:#0E1A2E;stroke:#8FB4FF}}
.join-art .q2{animation-delay:1s} .join-art .q3{animation-delay:2s} .join-art .q4{animation-delay:3s} .join-art .q5{animation-delay:4s}
.join-art .q6{animation-delay:5s} .join-art .q7{animation-delay:6s} .join-art .q8{animation-delay:7s} .join-art .q9{animation-delay:8s}
.join-art .tw{fill:#fff;animation:twinkle 4s ease-in-out infinite}
@media(max-width:640px){.join-art{right:-170px;opacity:.2}}