/* ==========================================================================
PSLPerfAnim.jsx — @role
Home-page Performance-System rings illustration (Identity/Architecture/Capacity). Scroll-triggered: rings float, capacity cover rises, connector draws, PSL badge emerges. CSS keyframes + IntersectionObserver.
========================================================================== */
// ============================================================
// PSLPerfAnim — the stacked-ring "Performance System" hero
// animation (Identity base → Architecture → Capacity top).
//
// The SVG + its CSS are lifted verbatim from the standalone
// hero-animation file the brand supplied, then wrapped so it can
// link to the three domain cards:
// • hovering / clicking a ring calls onEnter/onLeave/onSelect
// with a ring index (0 = identity, 1 = architecture, 2 = capacity)
// • the `activeIndex` prop highlights the matching ring (and dims
// the others) when a card is hovered on the right.
//
// Rendered via dangerouslySetInnerHTML so the authored animation
// keeps perfect fidelity; interactivity is wired in a useEffect.
// ============================================================
const PSL_ANIM_CSS = `
.psl-perf-anim{
--psl-navy:#0D0F2B; --psl-blue-dark:#2424A8; --psl-violet-deep:#5615CD;
--psl-teal-deep:#0FB388; --psl-blue:#2563EB; --psl-line-strong:#CBD2DE;
--psl-sans:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
width:100%; max-width:780px; aspect-ratio:700 / 540; margin:0 auto; position:relative;
}
.psl-perf-anim svg{ width:100%; height:100%; display:block; overflow:visible; }
.psl-pos{transform-box:fill-box;transform-origin:center}
.psl-ring{transform-box:fill-box;transform-origin:center}
.psl-ring .face{stroke-width:1;fill-rule:evenodd;fill-opacity:.78}
.psl-ring .wall{stroke-width:1;stroke-linejoin:round;fill-opacity:.82}
.psl-ring .inner-wall{stroke-width:.6;stroke-linejoin:round;stroke-opacity:.35;fill-opacity:.88}
.psl-ring--cap .face, .psl-ring--cap .wall { fill:url(#pslGCapDark); stroke:#2424A8 }
.psl-ring--cap .inner-wall{ fill:url(#pslGCapInner); stroke:#1818A0 }
.psl-ring--arch .face, .psl-ring--arch .wall { fill:url(#pslGArchDark); stroke:var(--psl-teal-deep) }
.psl-ring--arch .inner-wall{ fill:url(#pslGArchInner); stroke:var(--psl-teal-deep) }
.psl-ring--id .face, .psl-ring--id .wall { fill:url(#pslGIdDark); stroke:var(--psl-violet-deep) }
.psl-ring--id .inner-wall{ fill:url(#pslGIdInner); stroke:var(--psl-violet-deep) }
.psl-cap-cover-face{fill:url(#pslGCapDark);fill-opacity:.85;stroke:#2424A8;stroke-width:1}
.psl-rim-label{font-family:var(--psl-sans);fill:#ffffff;dominant-baseline:middle}
.psl-rim-label.lg{font-size:18px;font-weight:600;letter-spacing:6.5px}
.psl-rim-label.md{font-size:16px;font-weight:600;letter-spacing:4.5px}
.psl-rim-label.sm{font-size:14px;font-weight:700;letter-spacing:3.5px}
.psl-rim-label tspan{opacity:0}
.psl-cover-rim-text{font-family:var(--psl-sans);font-size:17px;font-weight:700;fill:#ffffff;letter-spacing:3px;dominant-baseline:middle}
.psl-cover-rim-text .tm{font-size:12px}
.psl-connector{ stroke:var(--psl-line-strong); stroke-width:1.2; fill:none; stroke-dasharray:100; stroke-dashoffset:100; }
.psl-perf-anim.is-in .psl-connector{ animation: pslDrawConnector 2.5s cubic-bezier(.4,0,.2,1) .8s forwards; }
@keyframes pslDrawConnector { to { stroke-dashoffset:0 } }
.psl-arrow{opacity:0}
.psl-arrow-left { offset-path: path('M 240,410 L 190,295 L 150,160'); offset-rotate: auto }
.psl-arrow-right { offset-path: path('M 460,410 L 510,295 L 550,160'); offset-rotate: auto }
@keyframes pslTravelUp { from { offset-distance:0% } to { offset-distance:100% } }
.psl-badge-group{transform-box:fill-box;transform-origin:center}
.psl-badge-bg{fill:#ffffff}
.psl-ring--id, .psl-ring--arch,
.psl-ring--cap .face, .psl-ring--cap .inner-wall,
.psl-arrow, .psl-badge-group{ opacity:0 }
.psl-ring--cap .wall { opacity:1 }
.psl-cap-cover-face, .psl-cover-rim-text{ opacity:0 }
.psl-perf-anim.is-in .psl-ring--cap{ animation: pslFloatAll 4s ease-in-out 0s infinite }
.psl-perf-anim.is-in .psl-cap-cover-face{ animation: pslCoverFaceLife 2.6s ease 0s forwards, pslFloatAll 4s ease-in-out 0s infinite; }
@keyframes pslCoverFaceLife { 0%{opacity:0} 15%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
.psl-perf-anim.is-in .psl-cover-rim-text{ animation: pslCoverTextLife 2.4s ease 0s forwards, pslFloatAll 4s ease-in-out 0s infinite; }
@keyframes pslCoverTextLife { 0%{opacity:0} 17%{opacity:1} 62%{opacity:1} 100%{opacity:0} }
.psl-perf-anim.is-in .psl-ring--cap .face { animation: pslFadeIn .45s ease 2.1s forwards }
.psl-perf-anim.is-in .psl-ring--cap .inner-wall { animation: pslFadeIn .45s ease 2.1s forwards }
.psl-perf-anim.is-in .psl-pos--cap{
animation: pslCoverBounceIn .55s cubic-bezier(.34,1.4,.64,1) 0s forwards,
pslCoverRise 2.5s cubic-bezier(.4,0,.2,1) .8s forwards;
}
@keyframes pslCoverBounceIn {
0% { opacity:0; transform: translateY(280px) scale(0.78) }
65% { opacity:1; transform: translateY(280px) scale(1.06) }
100% { opacity:1; transform: translateY(280px) scale(1) }
}
@keyframes pslCoverRise { from { transform: translateY(280px) scale(1) } to { transform: translateY(0) scale(1) } }
.psl-perf-anim.is-in .psl-ring--id{ animation: pslFadeIn .45s ease 1.0s forwards, pslFloatAll 4s ease-in-out 0s infinite; }
.psl-perf-anim.is-in .psl-ring--arch{ animation: pslFadeIn .45s ease 1.8s forwards, pslFloatAll 4s ease-in-out 0s infinite; }
.psl-rim-label{opacity:1}
.psl-perf-anim.is-in .psl-badge-group { animation: pslBadgeEmerge .8s cubic-bezier(.2,.8,.25,1) 2.8s forwards, pslBadgeBreath 4s ease-in-out 3.6s infinite; }
@keyframes pslBadgeEmerge { 0%{opacity:0;transform:scale(.6)} 65%{opacity:1;transform:scale(1.05)} 100%{opacity:1;transform:scale(1)} }
@keyframes pslBadgeBreath { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.03)} }
.psl-perf-anim.is-in .psl-arrow.p1{ animation: pslFadeIn .4s ease 3.5s forwards, pslTravelUp 6s linear 3.5s infinite }
.psl-perf-anim.is-in .psl-arrow.p2{ animation: pslFadeIn .4s ease 3.5s forwards, pslTravelUp 6s linear 1.5s infinite }
.psl-perf-anim.is-in .psl-arrow.p3{ animation: pslFadeIn .4s ease 3.5s forwards, pslTravelUp 6s linear -0.5s infinite }
@keyframes pslFloatAll { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes pslFadeIn { to { opacity:1 } }
/* ---- Card → ring link ----
The graphic itself is NOT mouse-reactive (no hover, no cursor change).
When a card on the right is clicked, React sets data-active and the
matching ring glows softly in its own colour. Nothing else. */
.psl-ring{ transition: filter .28s ease; }
.psl-perf-anim[data-active="identity"] .psl-ring--id { filter: drop-shadow(0 0 16px rgba(137,54,255,0.65)); }
.psl-perf-anim[data-active="architecture"] .psl-ring--arch{ filter: drop-shadow(0 0 16px rgba(46,224,176,0.65)); }
.psl-perf-anim[data-active="capacity"] .psl-ring--cap { filter: drop-shadow(0 0 16px rgba(79,79,255,0.7)); }
@media (prefers-reduced-motion: reduce){
.psl-perf-anim *, .psl-perf-anim *::before, .psl-perf-anim *::after{
animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important;
}
.psl-rim-label tspan{ opacity:1 !important }
.psl-connector{ stroke-dashoffset:0 !important }
}
`;
const PSL_ANIM_SVG = `
`;
function ensurePerfAnimStyles() {
if (typeof document === 'undefined') return;
if (document.getElementById('__psl-perf-anim-style')) return;
const s = document.createElement('style');
s.id = '__psl-perf-anim-style';
s.textContent = PSL_ANIM_CSS;
document.head.appendChild(s);
}
// ring index ↔ data-ring string
const RING_IDS = ['identity', 'architecture', 'capacity'];
const PSLPerfAnim = ({ activeIndex = null, onPlay }) => {
const rootRef = React.useRef(null);
const onPlayRef = React.useRef(onPlay);
onPlayRef.current = onPlay;
ensurePerfAnimStyles();
React.useEffect(() => {
const root = rootRef.current;
if (!root) return;
const svg = root.querySelector('svg');
if (!svg) return;
// --- Build per-character tspans for the typewriter rim labels ---
svg.querySelectorAll('.psl-rim-label').forEach((label) => {
const textPath = label.querySelector('textPath');
if (!textPath) return;
const text = label.getAttribute('data-text') || textPath.textContent.trim();
label.setAttribute('data-text', text);
textPath.textContent = '';
for (let i = 0; i < text.length; i++) {
const ts = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
ts.textContent = text[i];
ts.style.opacity = '0';
textPath.appendChild(ts);
}
});
const timers = [];
const runTypewriter = (label, perCharDelay) => {
if (!label) return;
label.querySelectorAll('tspan').forEach((ts, i) => {
timers.push(setTimeout(() => { ts.style.opacity = '1'; }, i * perCharDelay));
});
};
let fired = false;
const trigger = () => {
if (fired) return;
fired = true;
root.classList.add('is-in');
if (onPlayRef.current) onPlayRef.current();
timers.push(setTimeout(() => runTypewriter(svg.querySelector('.psl-lbl-id'), 80), 1000));
timers.push(setTimeout(() => runTypewriter(svg.querySelector('.psl-lbl-arch'), 70), 1800));
timers.push(setTimeout(() => runTypewriter(svg.querySelector('.psl-lbl-cap'), 80), 2100));
};
let io;
if ('IntersectionObserver' in window) {
io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { trigger(); io.unobserve(e.target); } });
}, { threshold: 0.05, rootMargin: '0px 0px 100px 0px' });
io.observe(root);
} else {
trigger();
}
return () => {
timers.forEach(clearTimeout);
if (io) io.disconnect();
};
}, []);
const dataActive = activeIndex != null ? RING_IDS[activeIndex] : undefined;
return (
);
};
Object.assign(window, { PSLPerfAnim });