// Synergy Capital — "The Box" brand animation.
// The REAL SC icon IS the box. Its top face (top of the "S") is a lid that
// hinges along the back-left edge — opening up and to the left — revealing a
// solid dark cavity on top (NO ghost duplicate). Services drop in, the lid
// seals, and the mark completes into the full logo (icon | SYNERGY CAPITAL).
// (useTime, clamp, interpolate, animate, Easing are globals from animations.jsx)

const NAVY = '#052045';
const BLUE = '#0080DE';
const BLUE_SOFT = '#79bcf0';
const WHITE = '#ffffff';
const ICON = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMxNy45NSIgaGVpZ2h0PSIzNTkuNTciIHZpZXdCb3g9IjAgMCAzMTcuOTUgMzU5LjU3Ij4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcC0wIj4KPHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDAgMCBMIDMxNy45NDkyMTkgMCBMIDMxNy45NDkyMTkgMzU5LjU3MDMxMiBMIDAgMzU5LjU3MDMxMiBaIE0gMCAwICI+PC9wYXRoPgo8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTApIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJyZ2IoMTAwJSwgMTAwJSwgMTAwJSkiIGZpbGwtb3BhY2l0eT0iMSIgZD0iTSAzOS43MzA0NjkgOTguOTQ5MjE5IEwgOTIuNTIzNDM4IDY4LjQ3MjY1NiBMIDE1OC45NzI2NTYgMzAuMTA1NDY5IEwgMjA0LjY5NTMxMiA1Ni41MDM5MDYgTCAyMjUuNDIxODc1IDY4LjQ3MjY1NiBMIDI0OS4zNDM3NSA4Mi4yODEyNSBMIDE5OS44OTA2MjUgMTEwLjgzNTkzOCBMIDE2MC4wODU5MzggMTMzLjgxMjUgTCAxODUuMjc3MzQ0IDE0OC4zNTkzNzUgTCAyNTEuNzMwNDY5IDEwOS45OTIxODggTCAyNzQuNTM5MDYyIDk2LjgyNDIxOSBMIDMwMC42MTMyODEgODEuNzY5NTMxIEwgMjY2LjMzOTg0NCA2MS45ODQzNzUgTCAyMzguNDYwOTM4IDQ1Ljg5MDYyNSBMIDIwNC42OTUzMTIgMjYuMzk0NTMxIEwgMTU4Ljk3MjY1NiAtMC4wMDM5MDYyNSBMIDc5LjQ4NDM3NSA0NS44OTA2MjUgTCAxMy42NTYyNSA4My44OTQ1MzEgTCAwIDkxLjc4MTI1IEwgMCAxMDguMzM5ODQ0IEwgMjYuMDc0MjE5IDEyMy4zOTQ1MzEgTCA0OC44Nzg5MDYgMTM2LjU1ODU5NCBMIDEwMS4yNjU2MjUgMTY2LjgwODU5NCBMIDExNS4zMjgxMjUgMTc0LjkyNTc4MSBMIDExNS4zMjgxMjUgMzExLjgyNDIxOSBMIDkyLjUyMzQzOCAyOTguNjU2MjUgTCAyNi4wNzQyMTkgMjYwLjI5Njg3NSBMIDI2LjA3NDIxOSAxNTcuNDI1NzgxIEwgNS4zNDM3NSAxNDUuNDYwOTM4IEwgMCAxNDIuMzcxMDk0IEwgMCAyNzUuMzQ3NjU2IEwgNzkuNDg0Mzc1IDMyMS4yNDIxODggTCAxMDMuNTkzNzUgMzM1LjE2MDE1NiBMIDE0NS4zMjAzMTIgMzU5LjI1IEwgMTQ1LjMyMDMxMiAxNjAuMjg1MTU2IFogTSAyOTEuODcxMDk0IDE5MC40Mjk2ODggTCAzMTcuOTQ1MzEyIDE3NS4zNzUgTCAzMTcuOTQ1MzEyIDEwOS4yMzA0NjkgTCAyOTEuODcxMDk0IDEyNC4yODkwNjIgTCAyNDUuOTY0ODQ0IDE1MC43ODkwNjIgTCAxNzIuMDcwMzEyIDE5My40NTMxMjUgTCAxNzIuMDcwMzEyIDM1OS41NzAzMTIgTCAyMDAuNDQxNDA2IDM0My4xOTE0MDYgTCAyMzguNDYwOTM4IDMyMS4yNDIxODggTCAzMTcuOTQ1MzEyIDI3NS4zNDc2NTYgTCAzMTcuOTQ1MzEyIDIwNi41ODIwMzEgTCAyOTEuODcxMDk0IDIyMS42MzY3MTkgTCAyOTEuODcxMDk0IDI2MC4yOTY4NzUgTCAyMjUuNDIxODc1IDI5OC42NTYyNSBMIDIwMC40NDE0MDYgMzEzLjA4MjAzMSBMIDIwMC40NDE0MDYgMjA3Ljc1MzkwNiBMIDI3NC4zMzU5MzggMTY1LjA4OTg0NCBMIDI5MS44NzEwOTQgMTU0Ljk2NDg0NCBMIDI5MS44NzEwOTQgMTkwLjQyOTY4OCAiPjwvcGF0aD4KPC9nPgo8L3N2Zz4=';
const ICON_BLUE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMxNy45NSIgaGVpZ2h0PSIzNTkuNTciIHZpZXdCb3g9IjAgMCAzMTcuOTUgMzU5LjU3Ij4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcC0wIj4KPHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDAgMCBMIDMxNy45NDkyMTkgMCBMIDMxNy45NDkyMTkgMzU5LjU3MDMxMiBMIDAgMzU5LjU3MDMxMiBaIE0gMCAwICI+PC9wYXRoPgo8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTApIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJyZ2IoMjcuNzY5NDclLCA2Mi4yOTQwMDYlLCA4Ni43NDAxMTIlKSIgZmlsbC1vcGFjaXR5PSIxIiBkPSJNIDM5LjczMDQ2OSA5OC45NDkyMTkgTCA5Mi41MjM0MzggNjguNDcyNjU2IEwgMTU4Ljk3MjY1NiAzMC4xMDU0NjkgTCAyMDQuNjk1MzEyIDU2LjUwMzkwNiBMIDIyNS40MjE4NzUgNjguNDcyNjU2IEwgMjQ5LjM0Mzc1IDgyLjI4MTI1IEwgMTk5Ljg5MDYyNSAxMTAuODM1OTM4IEwgMTYwLjA4NTkzOCAxMzMuODEyNSBMIDE4NS4yNzczNDQgMTQ4LjM1OTM3NSBMIDI1MS43MzA0NjkgMTA5Ljk5MjE4OCBMIDI3NC41MzkwNjIgOTYuODI0MjE5IEwgMzAwLjYxMzI4MSA4MS43Njk1MzEgTCAyNjYuMzM5ODQ0IDYxLjk4NDM3NSBMIDIzOC40NjA5MzggNDUuODkwNjI1IEwgMjA0LjY5NTMxMiAyNi4zOTQ1MzEgTCAxNTguOTcyNjU2IC0wLjAwMzkwNjI1IEwgNzkuNDg0Mzc1IDQ1Ljg5MDYyNSBMIDEzLjY1NjI1IDgzLjg5NDUzMSBMIDAgOTEuNzgxMjUgTCAwIDEwOC4zMzk4NDQgTCAyNi4wNzQyMTkgMTIzLjM5NDUzMSBMIDQ4Ljg3ODkwNiAxMzYuNTU4NTk0IEwgMTAxLjI2NTYyNSAxNjYuODA4NTk0IEwgMTE1LjMyODEyNSAxNzQuOTI1NzgxIEwgMTE1LjMyODEyNSAzMTEuODI0MjE5IEwgOTIuNTIzNDM4IDI5OC42NTYyNSBMIDI2LjA3NDIxOSAyNjAuMjk2ODc1IEwgMjYuMDc0MjE5IDE1Ny40MjU3ODEgTCA1LjM0Mzc1IDE0NS40NjA5MzggTCAwIDE0Mi4zNzEwOTQgTCAwIDI3NS4zNDc2NTYgTCA3OS40ODQzNzUgMzIxLjI0MjE4OCBMIDEwMy41OTM3NSAzMzUuMTYwMTU2IEwgMTQ1LjMyMDMxMiAzNTkuMjUgTCAxNDUuMzIwMzEyIDE2MC4yODUxNTYgWiBNIDI5MS44NzEwOTQgMTkwLjQyOTY4OCBMIDMxNy45NDUzMTIgMTc1LjM3NSBMIDMxNy45NDUzMTIgMTA5LjIzMDQ2OSBMIDI5MS44NzEwOTQgMTI0LjI4OTA2MiBMIDI0NS45NjQ4NDQgMTUwLjc4OTA2MiBMIDE3Mi4wNzAzMTIgMTkzLjQ1MzEyNSBMIDE3Mi4wNzAzMTIgMzU5LjU3MDMxMiBMIDIwMC40NDE0MDYgMzQzLjE5MTQwNiBMIDIzOC40NjA5MzggMzIxLjI0MjE4OCBMIDMxNy45NDUzMTIgMjc1LjM0NzY1NiBMIDMxNy45NDUzMTIgMjA2LjU4MjAzMSBMIDI5MS44NzEwOTQgMjIxLjYzNjcxOSBMIDI5MS44NzEwOTQgMjYwLjI5Njg3NSBMIDIyNS40MjE4NzUgMjk4LjY1NjI1IEwgMjAwLjQ0MTQwNiAzMTMuMDgyMDMxIEwgMjAwLjQ0MTQwNiAyMDcuNzUzOTA2IEwgMjc0LjMzNTkzOCAxNjUuMDg5ODQ0IEwgMjkxLjg3MTA5NCAxNTQuOTY0ODQ0IEwgMjkxLjg3MTA5NCAxOTAuNDI5Njg4ICI+PC9wYXRoPgo8L2c+Cjwvc3ZnPg==';
const ICON_LOGOBLUE = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMxNy45NSIgaGVpZ2h0PSIzNTkuNTciIHZpZXdCb3g9IjAgMCAzMTcuOTUgMzU5LjU3Ij4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcC0wIj4KPHBhdGggY2xpcC1ydWxlPSJub256ZXJvIiBkPSJNIDAgMCBMIDMxNy45NDkyMTkgMCBMIDMxNy45NDkyMTkgMzU5LjU3MDMxMiBMIDAgMzU5LjU3MDMxMiBaIE0gMCAwICI+PC9wYXRoPgo8L2NsaXBQYXRoPgo8L2RlZnM+CjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwLTApIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSJyZ2IoMjguMDg1MzI3JSwgNjIuNjYzMjY5JSwgODYuOTM4NDc3JSkiIGZpbGwtb3BhY2l0eT0iMSIgZD0iTSAzOS43MzA0NjkgOTguOTQ5MjE5IEwgOTIuNTIzNDM4IDY4LjQ3MjY1NiBMIDE1OC45NzI2NTYgMzAuMTA1NDY5IEwgMjA0LjY5NTMxMiA1Ni41MDM5MDYgTCAyMjUuNDIxODc1IDY4LjQ3MjY1NiBMIDI0OS4zNDM3NSA4Mi4yODEyNSBMIDE5OS44OTA2MjUgMTEwLjgzNTkzOCBMIDE2MC4wODU5MzggMTMzLjgxMjUgTCAxODUuMjc3MzQ0IDE0OC4zNTkzNzUgTCAyNTEuNzMwNDY5IDEwOS45OTIxODggTCAyNzQuNTM5MDYyIDk2LjgyNDIxOSBMIDMwMC42MTMyODEgODEuNzY5NTMxIEwgMjY2LjMzOTg0NCA2MS45ODQzNzUgTCAyMzguNDYwOTM4IDQ1Ljg5MDYyNSBMIDIwNC42OTUzMTIgMjYuMzk0NTMxIEwgMTU4Ljk3MjY1NiAtMC4wMDM5MDYyNSBMIDc5LjQ4NDM3NSA0NS44OTA2MjUgTCAxMy42NTYyNSA4My44OTQ1MzEgTCAwIDkxLjc4MTI1IEwgMCAxMDguMzM5ODQ0IEwgMjYuMDc0MjE5IDEyMy4zOTQ1MzEgTCA0OC44Nzg5MDYgMTM2LjU1ODU5NCBMIDEwMS4yNjU2MjUgMTY2LjgwODU5NCBMIDExNS4zMjgxMjUgMTc0LjkyNTc4MSBMIDExNS4zMjgxMjUgMzExLjgyNDIxOSBMIDkyLjUyMzQzOCAyOTguNjU2MjUgTCAyNi4wNzQyMTkgMjYwLjI5Njg3NSBMIDI2LjA3NDIxOSAxNTcuNDI1NzgxIEwgNS4zNDM3NSAxNDUuNDYwOTM4IEwgMCAxNDIuMzcxMDk0IEwgMCAyNzUuMzQ3NjU2IEwgNzkuNDg0Mzc1IDMyMS4yNDIxODggTCAxMDMuNTkzNzUgMzM1LjE2MDE1NiBMIDE0NS4zMjAzMTIgMzU5LjI1IEwgMTQ1LjMyMDMxMiAxNjAuMjg1MTU2IFogTSAyOTEuODcxMDk0IDE5MC40Mjk2ODggTCAzMTcuOTQ1MzEyIDE3NS4zNzUgTCAzMTcuOTQ1MzEyIDEwOS4yMzA0NjkgTCAyOTEuODcxMDk0IDEyNC4yODkwNjIgTCAyNDUuOTY0ODQ0IDE1MC43ODkwNjIgTCAxNzIuMDcwMzEyIDE5My40NTMxMjUgTCAxNzIuMDcwMzEyIDM1OS41NzAzMTIgTCAyMDAuNDQxNDA2IDM0My4xOTE0MDYgTCAyMzguNDYwOTM4IDMyMS4yNDIxODggTCAzMTcuOTQ1MzEyIDI3NS4zNDc2NTYgTCAzMTcuOTQ1MzEyIDIwNi41ODIwMzEgTCAyOTEuODcxMDk0IDIyMS42MzY3MTkgTCAyOTEuODcxMDk0IDI2MC4yOTY4NzUgTCAyMjUuNDIxODc1IDI5OC42NTYyNSBMIDIwMC40NDE0MDYgMzEzLjA4MjAzMSBMIDIwMC40NDE0MDYgMjA3Ljc1MzkwNiBMIDI3NC4zMzU5MzggMTY1LjA4OTg0NCBMIDI5MS44NzEwOTQgMTU0Ljk2NDg0NCBMIDI5MS44NzEwOTQgMTkwLjQyOTY4OCAiPjwvcGF0aD4KPC9nPgo8L3N2Zz4=';
const WORDMARK = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjI1NS42NCIgaGVpZ2h0PSI2NC4yNyIgdmlld0JveD0iMCAwIDI1NS42NCA2NC4yNyI+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAtMCI+CjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSA4NSAxMCBMIDI1NS42NDA2MjUgMTAgTCAyNTUuNjQwNjI1IDMzIEwgODUgMzMgWiBNIDg1IDEwICI+PC9wYXRoPgo8L2NsaXBQYXRoPgo8Y2xpcFBhdGggaWQ9ImNsaXAtMSI+CjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSA4NSA0MCBMIDI1NS42NDA2MjUgNDAgTCAyNTUuNjQwNjI1IDU0IEwgODUgNTQgWiBNIDg1IDQwICI+PC9wYXRoPgo8L2NsaXBQYXRoPgo8Y2xpcFBhdGggaWQ9ImNsaXAtMiI+CjxwYXRoIGNsaXAtcnVsZT0ibm9uemVybyIgZD0iTSA2OSAwIEwgNzIgMCBMIDcyIDY0LjI2OTUzMSBMIDY5IDY0LjI2OTUzMSBaIE0gNjkgMCAiPjwvcGF0aD4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcC0wKSI+CjxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0icmdiKDEwMCUsIDEwMCUsIDEwMCUpIiBmaWxsLW9wYWNpdHk9IjEiIGQ9Ik0gOTQuNzI2NTYyIDMyLjg3NSBDIDkzLjAzOTA2MiAzMi44NzUgOTEuNDI1NzgxIDMyLjU4OTg0NCA4OS44ODY3MTkgMzIuMDE1NjI1IEMgODguMzQzNzUgMzEuNDQ1MzEyIDg2LjkxNzk2OSAzMC41NjI1IDg1LjYwOTM3NSAyOS4zNzg5MDYgTCA4Ny45MTc5NjkgMjYuNjI4OTA2IEMgODguOTgwNDY5IDI3LjU0Njg3NSA5MC4wNTA3ODEgMjguMjUgOTEuMTM2NzE5IDI4LjczODI4MSBDIDkyLjIxODc1IDI5LjIyNjU2MiA5My40NDUzMTIgMjkuNDcyNjU2IDk0LjgyMDMxMiAyOS40NzI2NTYgQyA5Ni4wMDc4MTIgMjkuNDcyNjU2IDk2Ljk0OTIxOSAyOS4yMjI2NTYgOTcuNjQ0NTMxIDI4LjcyMjY1NiBDIDk4LjM0Mzc1IDI4LjIyMjY1NiA5OC42OTE0MDYgMjcuNTU0Njg4IDk4LjY5MTQwNiAyNi43MjI2NTYgTCA5OC42OTE0MDYgMjYuNjYwMTU2IEMgOTguNjkxNDA2IDI2LjI2NTYyNSA5OC42MjEwOTQgMjUuOTE3OTY5IDk4LjQ4ODI4MSAyNS42MTcxODggQyA5OC4zNTE1NjIgMjUuMzEyNSA5OC4xMDE1NjIgMjUuMDI3MzQ0IDk3LjczODI4MSAyNC43NTc4MTIgQyA5Ny4zNjcxODggMjQuNDg4MjgxIDk2Ljg3MTA5NCAyNC4yMzgyODEgOTYuMjM0Mzc1IDI0LjAwNzgxMiBDIDk1LjU5Mzc1IDIzLjc3NzM0NCA5NC43NjU2MjUgMjMuNTUwNzgxIDkzLjc0NjA5NCAyMy4zMjAzMTIgQyA5Mi41NzgxMjUgMjMuMDUwNzgxIDkxLjUzOTA2MiAyMi43NDIxODggOTAuNjI4OTA2IDIyLjM5ODQzOCBDIDg5LjcyMjY1NiAyMi4wNTQ2ODggODguOTYwOTM4IDIxLjY0MDYyNSA4OC4zNDM3NSAyMS4xNTIzNDQgQyA4Ny43MzA0NjkgMjAuNjYwMTU2IDg3LjI1NzgxMiAyMC4wNjI1IDg2LjkzMzU5NCAxOS4zNTU0NjkgQyA4Ni42MTMyODEgMTguNjQ4NDM4IDg2LjQ1MzEyNSAxNy43OTI5NjkgODYuNDUzMTI1IDE2Ljc5Njg3NSBMIDg2LjQ1MzEyNSAxNi43MzQzNzUgQyA4Ni40NTMxMjUgMTUuNzk2ODc1IDg2LjY0MDYyNSAxNC45Mzc1IDg3LjAwNzgxMiAxNC4xNTYyNSBDIDg3LjM4MjgxMiAxMy4zNzUgODcuODk0NTMxIDEyLjcxMDkzOCA4OC41NDI5NjkgMTIuMTYwMTU2IEMgODkuMTk1MzEyIDExLjYwOTM3NSA4OS45NzI2NTYgMTEuMTc1NzgxIDkwLjg5MDYyNSAxMC44NjMyODEgQyA5MS44MDA3ODEgMTAuNTUwNzgxIDkyLjgwMDc4MSAxMC4zOTQ1MzEgOTMuODgyODEyIDEwLjM5NDUzMSBDIDk1LjQ4NDM3NSAxMC4zOTQ1MzEgOTYuOTI1NzgxIDEwLjYyODkwNiA5OC4yMDcwMzEgMTEuMDk3NjU2IEMgOTkuNDg4MjgxIDExLjU2NjQwNiAxMDAuNjg3NSAxMi4yNDYwOTQgMTAxLjgxMjUgMTMuMTQwNjI1IEwgOTkuNzUzOTA2IDE2LjA0Njg3NSBDIDk4Ljc1MzkwNiAxNS4zMTY0MDYgOTcuNzY1NjI1IDE0Ljc2MTcxOSA5Ni43ODUxNTYgMTQuMzc1IEMgOTUuODA4NTk0IDEzLjk5MjE4OCA5NC44MjAzMTIgMTMuNzk2ODc1IDkzLjgyMDMxMiAxMy43OTY4NzUgQyA5Mi42OTUzMTIgMTMuNzk2ODc1IDkxLjgyMDMxMiAxNC4wNDY4NzUgOTEuMTk5MjE5IDE0LjU0Njg3NSBDIDkwLjU3NDIxOSAxNS4wNDY4NzUgOTAuMjYxNzE5IDE1LjY2MDE1NiA5MC4yNjE3MTkgMTYuMzkwNjI1IEwgOTAuMjYxNzE5IDE2LjQ1MzEyNSBDIDkwLjI2MTcxOSAxNi44NjcxODggOTAuMzMyMDMxIDE3LjIzODI4MSA5MC40ODA0NjkgMTcuNTYyNSBDIDkwLjYyNSAxNy44ODI4MTIgOTAuODkwNjI1IDE4LjE3NTc4MSA5MS4yNzczNDQgMTguNDMzNTk0IEMgOTEuNjY0MDYyIDE4LjY5NTMxMiA5Mi4xOTUzMTIgMTguOTM3NSA5Mi44NzEwOTQgMTkuMTY3OTY5IEMgOTMuNTU0Njg4IDE5LjM5ODQzOCA5NC40MTQwNjIgMTkuNjM2NzE5IDk1LjQ2MDkzOCAxOS44ODY3MTkgQyA5Ni42MDU0NjkgMjAuMTc5Njg4IDk3LjYyNSAyMC41IDk4LjUwNzgxMiAyMC44NTU0NjkgQyA5OS4zOTQ1MzEgMjEuMjA3MDMxIDEwMC4xMzI4MTIgMjEuNjQwNjI1IDEwMC43MTQ4NDQgMjIuMTQ4NDM4IEMgMTAxLjI5Njg3NSAyMi42NjAxNTYgMTAxLjc0NjA5NCAyMy4yNTM5MDYgMTAyLjA0Njg3NSAyMy45Mjk2ODggQyAxMDIuMzQ3NjU2IDI0LjYwNTQ2OSAxMDIuNSAyNS4zOTA2MjUgMTAyLjUgMjYuMjg1MTU2IEwgMTAyLjUgMjYuMzUxNTYyIEMgMTAyLjUgMjcuMzcxMDk0IDEwMi4zMDg1OTQgMjguMjg1MTU2IDEwMS45MjU3ODEgMjkuMDk3NjU2IEMgMTAxLjU0Mjk2OSAyOS45MTAxNTYgMTAxLjAxMTcxOSAzMC41OTc2NTYgMTAwLjMyODEyNSAzMS4xNTYyNSBDIDk5LjY1MjM0NCAzMS43MTg3NSA5OC44MzIwMzEgMzIuMTQ0NTMxIDk3Ljg3ODkwNiAzMi40Mzc1IEMgOTYuOTIxODc1IDMyLjczMDQ2OSA5NS44NzEwOTQgMzIuODc1IDk0LjcyNjU2MiAzMi44NzUgWiBNIDExNS44MjgxMjUgMjMuOTQ1MzEyIEwgMTA3LjE0ODQzOCAxMC43MDcwMzEgTCAxMTEuNjc1NzgxIDEwLjcwNzAzMSBMIDExNy43OTY4NzUgMjAuMzg2NzE5IEwgMTIzLjk3NjU2MiAxMC43MDcwMzEgTCAxMjguMzc4OTA2IDEwLjcwNzAzMSBMIDExOS42OTkyMTkgMjMuODUxNTYyIEwgMTE5LjY5OTIxOSAzMi41NjI1IEwgMTE1LjgyODEyNSAzMi41NjI1IFogTSAxMzQuMTIxMDk0IDEwLjcwNzAzMSBMIDEzNy42NzU3ODEgMTAuNzA3MDMxIEwgMTQ5LjM1NTQ2OSAyNS44MjAzMTIgTCAxNDkuMzU1NDY5IDEwLjcwNzAzMSBMIDE1My4xNjQwNjIgMTAuNzA3MDMxIEwgMTUzLjE2NDA2MiAzMi41NjI1IEwgMTQ5Ljk1NzAzMSAzMi41NjI1IEwgMTM3LjkyOTY4OCAxNy4wMTU2MjUgTCAxMzcuOTI5Njg4IDMyLjU2MjUgTCAxMzQuMTIxMDk0IDMyLjU2MjUgWiBNIDE2MS4xNTYyNSAxMC43MDcwMzEgTCAxNzcuMzI4MTI1IDEwLjcwNzAzMSBMIDE3Ny4zMjgxMjUgMTQuMTcxODc1IEwgMTY0Ljk2NDg0NCAxNC4xNzE4NzUgTCAxNjQuOTY0ODQ0IDE5Ljc5Mjk2OSBMIDE3NS45MjU3ODEgMTkuNzkyOTY5IEwgMTc1LjkyNTc4MSAyMy4yNTc4MTIgTCAxNjQuOTY0ODQ0IDIzLjI1NzgxMiBMIDE2NC45NjQ4NDQgMjkuMDk3NjU2IEwgMTc3LjQ4NDM3NSAyOS4wOTc2NTYgTCAxNzcuNDg0Mzc1IDMyLjU2MjUgTCAxNjEuMTU2MjUgMzIuNTYyNSBaIE0gMTkzLjg4NjcxOSAyMS41NDI5NjkgQyAxOTUuMjY1NjI1IDIxLjU0Mjk2OSAxOTYuMzY3MTg4IDIxLjIxNDg0NCAxOTcuMTc1NzgxIDIwLjU1MDc4MSBDIDE5Ny45OTIxODggMTkuODk4NDM4IDE5OC4zOTg0MzggMTkuMDAzOTA2IDE5OC4zOTg0MzggMTcuODcxMDk0IEwgMTk4LjM5ODQzOCAxNy44MDg1OTQgQyAxOTguMzk4NDM4IDE2LjYxNzE4OCAxOTguMDAzOTA2IDE1LjcxNDg0NCAxOTcuMjEwOTM4IDE1LjA5NzY1NiBDIDE5Ni40MTc5NjkgMTQuNDgwNDY5IDE5NS4zMDA3ODEgMTQuMTcxODc1IDE5My44NTU0NjkgMTQuMTcxODc1IEwgMTg4LjI1MzkwNiAxNC4xNzE4NzUgTCAxODguMjUzOTA2IDIxLjU0Mjk2OSBaIE0gMTg0LjQ0NTMxMiAxMC43MDcwMzEgTCAxOTQuMTgzNTk0IDEwLjcwNzAzMSBDIDE5NS41NTg1OTQgMTAuNzA3MDMxIDE5Ni43NzczNDQgMTAuODk4NDM4IDE5Ny44Mzk4NDQgMTEuMjg1MTU2IEMgMTk4Ljg5ODQzOCAxMS42Njc5NjkgMTk5Ljc4NTE1NiAxMi4yMDcwMzEgMjAwLjQ5MjE4OCAxMi44OTQ1MzEgQyAyMDEuMDc0MjE5IDEzLjQ5NjA5NCAyMDEuNTIzNDM4IDE0LjE5NTMxMiAyMDEuODM1OTM4IDE0Ljk4NDM3NSBDIDIwMi4xNDg0MzggMTUuNzc3MzQ0IDIwMi4zMDQ2ODggMTYuNjQ4NDM4IDIwMi4zMDQ2ODggMTcuNjA1NDY5IEwgMjAyLjMwNDY4OCAxNy42Njc5NjkgQyAyMDIuMzA0Njg4IDE4LjU2NjQwNiAyMDIuMTcxODc1IDE5LjM3MTA5NCAyMDEuOTEwMTU2IDIwLjA4OTg0NCBDIDIwMS42NTIzNDQgMjAuODA4NTk0IDIwMS4yOTI5NjkgMjEuNDQxNDA2IDIwMC44MzU5MzggMjEuOTkyMTg4IEMgMjAwLjM3ODkwNiAyMi41NDY4NzUgMTk5LjgzMjAzMSAyMy4wMTU2MjUgMTk5LjE5NTMxMiAyMy4zOTg0MzggQyAxOTguNTYyNSAyMy43ODUxNTYgMTk3Ljg1OTM3NSAyNC4wODIwMzEgMTk3LjA4OTg0NCAyNC4yODkwNjIgTCAyMDIuOTg4MjgxIDMyLjU2MjUgTCAxOTguNDYwOTM4IDMyLjU2MjUgTCAxOTMuMDc4MTI1IDI0Ljk0NTMxMiBMIDE4OC4yNTM5MDYgMjQuOTQ1MzEyIEwgMTg4LjI1MzkwNiAzMi41NjI1IEwgMTg0LjQ0NTMxMiAzMi41NjI1IFogTSAyMTkuNzUzOTA2IDMyLjkzNzUgQyAyMTguMDQ2ODc1IDMyLjkzNzUgMjE2LjQ5NjA5NCAzMi42NTIzNDQgMjE1LjEwMTU2MiAzMi4wNzgxMjUgQyAyMTMuNzA3MDMxIDMxLjUwNzgxMiAyMTIuNTE1NjI1IDMwLjcxNDg0NCAyMTEuNTI3MzQ0IDI5LjcwNzAzMSBDIDIxMC41MzUxNTYgMjguNjk1MzEyIDIwOS43NzM0MzggMjcuNTExNzE5IDIwOS4yMzA0NjkgMjYuMTQ0NTMxIEMgMjA4LjY4NzUgMjQuNzg1MTU2IDIwOC40MTc5NjkgMjMuMzAwNzgxIDIwOC40MTc5NjkgMjEuNjk5MjE5IEwgMjA4LjQxNzk2OSAyMS42MzY3MTkgQyAyMDguNDE3OTY5IDIwLjExNzE4OCAyMDguNjk1MzEyIDE4LjY2Nzk2OSAyMDkuMjUzOTA2IDE3LjI5Njg3NSBDIDIwOS44MDg1OTQgMTUuOTIxODc1IDIxMC41ODk4NDQgMTQuNzE4NzUgMjExLjU5Mzc1IDEzLjY4NzUgQyAyMTIuNTk3NjU2IDEyLjY2MDE1NiAyMTMuNzkyOTY5IDExLjgzOTg0NCAyMTUuMTc5Njg4IDExLjIzODI4MSBDIDIxNi41NjI1IDEwLjYzMjgxMiAyMTguMDc4MTI1IDEwLjMzMjAzMSAyMTkuNzIyNjU2IDEwLjMzMjAzMSBDIDIyMC42Nzk2ODggMTAuMzMyMDMxIDIyMS41NDY4NzUgMTAuMzk4NDM4IDIyMi4zMjgxMjUgMTAuNTM1MTU2IEMgMjIzLjEwOTM3NSAxMC42NzE4NzUgMjIzLjgzMjAzMSAxMC44NjMyODEgMjI0LjQ5NjA5NCAxMS4xMTMyODEgQyAyMjUuMTY0MDYyIDExLjM2MzI4MSAyMjUuNzkyOTY5IDExLjY2Nzk2OSAyMjYuMzg2NzE5IDEyLjAzNTE1NiBDIDIyNi45ODA0NjkgMTIuMzk4NDM4IDIyNy41NTg1OTQgMTIuODIwMzEyIDIyOC4xMjEwOTQgMTMuMjk2ODc1IEwgMjI1LjY4MzU5NCAxNi4yMDMxMjUgQyAyMjUuMjY5NTMxIDE1Ljg0NzY1NiAyMjQuODQzNzUgMTUuNTI3MzQ0IDIyNC40MDIzNDQgMTUuMjM0Mzc1IEMgMjIzLjk2ODc1IDE0Ljk0MTQwNiAyMjMuNTExNzE5IDE0LjY5OTIxOSAyMjMuMDMxMjUgMTQuNSBDIDIyMi41NTA3ODEgMTQuMzA0Njg4IDIyMi4wMjczNDQgMTQuMTQ4NDM4IDIyMS40NTMxMjUgMTQuMDMxMjUgQyAyMjAuODgyODEyIDEzLjkxNzk2OSAyMjAuMjUzOTA2IDEzLjg1OTM3NSAyMTkuNTY2NDA2IDEzLjg1OTM3NSBDIDIxOC41NjY0MDYgMTMuODU5Mzc1IDIxNy42MzI4MTIgMTQuMDcwMzEyIDIxNi43Njk1MzEgMTQuNDg0Mzc1IEMgMjE1LjkwNjI1IDE0LjkwMjM0NCAyMTUuMTU2MjUgMTUuNDY0ODQ0IDIxNC41MjM0MzggMTYuMTYwMTU2IEMgMjEzLjg4NjcxOSAxNi44NTkzNzUgMjEzLjM4NjcxOSAxNy42NzU3ODEgMjEzLjAyMzQzOCAxOC42MTcxODggQyAyMTIuNjYwMTU2IDE5LjU1NDY4OCAyMTIuNDc2NTYyIDIwLjU0Njg3NSAyMTIuNDc2NTYyIDIxLjU4OTg0NCBMIDIxMi40NzY1NjIgMjEuNjUyMzQ0IEMgMjEyLjQ3NjU2MiAyMi43NzM0MzggMjEyLjY1NjI1IDIzLjgyMDMxMiAyMTMuMDA3ODEyIDI0Ljc3NzM0NCBDIDIxMy4zNjMyODEgMjUuNzQyMTg4IDIxMy44NjMyODEgMjYuNTYyNSAyMTQuNTE5NTMxIDI3LjI1IEMgMjE1LjE3MTg3NSAyNy45Mzc1IDIxNS45NDkyMTkgMjguNDg0Mzc1IDIxNi44NTU0NjkgMjguODc4OTA2IEMgMjE3Ljc2MTcxOSAyOS4yNzM0MzggMjE4Ljc2OTUzMSAyOS40NzI2NTYgMjE5Ljg5NDUzMSAyOS40NzI2NTYgQyAyMjAuOTI5Njg4IDI5LjQ3MjY1NiAyMjEuOTAyMzQ0IDI5LjMyMDMxMiAyMjIuODAwNzgxIDI5LjAxOTUzMSBDIDIyMy43MDcwMzEgMjguNzEwOTM4IDIyNC40ODgyODEgMjguMzEyNSAyMjUuMTUyMzQ0IDI3LjgwNDY4OCBMIDIyNS4xNTIzNDQgMjMuNjk1MzEyIEwgMjE5LjU2NjQwNiAyMy42OTUzMTIgTCAyMTkuNTY2NDA2IDIwLjM1NTQ2OSBMIDIyOC44NjcxODggMjAuMzU1NDY5IEwgMjI4Ljg2NzE4OCAyOS41MzUxNTYgQyAyMjguMzI4MTI1IDI5Ljk5MjE4OCAyMjcuNzMwNDY5IDMwLjQyOTY4OCAyMjcuMDc0MjE5IDMwLjg0Mzc1IEMgMjI2LjQxNzk2OSAzMS4yNjE3MTkgMjI1LjcxMDkzOCAzMS42MjUgMjI0Ljk0OTIxOSAzMS45Mzc1IEMgMjI0LjE5MTQwNiAzMi4yNSAyMjMuMzc1IDMyLjQ5NjA5NCAyMjIuNSAzMi42NzE4NzUgQyAyMjEuNjI1IDMyLjg0NzY1NiAyMjAuNzEwOTM4IDMyLjkzNzUgMjE5Ljc1MzkwNiAzMi45Mzc1IFogTSAyNDIuNjY0MDYyIDIzLjk0NTMxMiBMIDIzMy45ODQzNzUgMTAuNzA3MDMxIEwgMjM4LjUxMTcxOSAxMC43MDcwMzEgTCAyNDQuNjMyODEyIDIwLjM4NjcxOSBMIDI1MC44MTY0MDYgMTAuNzA3MDMxIEwgMjU1LjIxODc1IDEwLjcwNzAzMSBMIDI0Ni41MzkwNjIgMjMuODUxNTYyIEwgMjQ2LjUzOTA2MiAzMi41NjI1IEwgMjQyLjY2NDA2MiAzMi41NjI1IEwgMjQyLjY2NDA2MiAyMy45NDUzMTIgIj48L3BhdGg+CjwvZz4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMSkiPgo8cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9InJnYigyOC4wODUzMjclLCA2Mi42NjMyNjklLCA4Ni45Mzg0NzclKSIgZmlsbC1vcGFjaXR5PSIxIiBkPSJNIDkyLjAwNzgxMiA1My45Mzc1IEMgOTEuMDg5ODQ0IDUzLjkzNzUgOTAuMjM4MjgxIDUzLjc2OTUzMSA4OS40NjQ4NDQgNTMuNDMzNTk0IEMgODguNjg3NSA1My4xMDE1NjIgODguMDExNzE5IDUyLjY0NDUzMSA4Ny40NDE0MDYgNTIuMDYyNSBDIDg2Ljg3MTA5NCA1MS40ODQzNzUgODYuNDIxODc1IDUwLjgwMDc4MSA4Ni4wOTM3NSA1MC4wMTE3MTkgQyA4NS43Njk1MzEgNDkuMjIyNjU2IDg1LjYwOTM3NSA0OC4zNzg5MDYgODUuNjA5Mzc1IDQ3LjQ4NDM3NSBMIDg1LjYwOTM3NSA0Ny40NDUzMTIgQyA4NS42MDkzNzUgNDYuNTUwNzgxIDg1Ljc2NTYyNSA0NS43MTA5MzggODYuMDg1OTM4IDQ0LjkyOTY4OCBDIDg2LjQwNjI1IDQ0LjE0NDUzMSA4Ni44NTU0NjkgNDMuNDU3MDMxIDg3LjQyOTY4OCA0Mi44NjcxODggQyA4OC4wMDc4MTIgNDIuMjczNDM4IDg4LjY5MTQwNiA0MS44MDg1OTQgODkuNDgwNDY5IDQxLjQ2ODc1IEMgOTAuMjY5NTMxIDQxLjEyODkwNiA5MS4xNDQ1MzEgNDAuOTU3MDMxIDkyLjA5NzY1NiA0MC45NTcwMzEgQyA5Mi42NzE4NzUgNDAuOTU3MDMxIDkzLjE5NTMxMiA0MS4wMDM5MDYgOTMuNjY3OTY5IDQxLjEwMTU2MiBDIDk0LjE0MDYyNSA0MS4xOTUzMTIgOTQuNTc0MjE5IDQxLjMzMjAzMSA5NC45Njg3NSA0MS41MDM5MDYgQyA5NS4zNTkzNzUgNDEuNjc1NzgxIDk1LjcyNjU2MiA0MS44ODI4MTIgOTYuMDU4NTk0IDQyLjEyMTA5NCBDIDk2LjM5NDUzMSA0Mi4zNjMyODEgOTYuNzEwOTM4IDQyLjYyNSA5Ny4wMTE3MTkgNDIuOTEwMTU2IEwgOTUuNTkzNzUgNDQuNTQyOTY5IEMgOTUuMDkzNzUgNDQuMDc4MTI1IDk0LjU1ODU5NCA0My42OTkyMTkgOTQgNDMuNDE0MDYyIEMgOTMuNDM3NSA0My4xMjUgOTIuNzk2ODc1IDQyLjk4NDM3NSA5Mi4wODIwMzEgNDIuOTg0Mzc1IEMgOTEuNDg0Mzc1IDQyLjk4NDM3NSA5MC45Mjk2ODggNDMuMTAxNTYyIDkwLjQyMTg3NSA0My4zMzIwMzEgQyA4OS45MTQwNjIgNDMuNTY2NDA2IDg5LjQ3NjU2MiA0My44ODI4MTIgODkuMTA1NDY5IDQ0LjI4MTI1IEMgODguNzM0Mzc1IDQ0LjY4MzU5NCA4OC40NDkyMTkgNDUuMTUyMzQ0IDg4LjI0MjE4OCA0NS42OTE0MDYgQyA4OC4wMzkwNjIgNDYuMjI2NTYyIDg3LjkzNzUgNDYuODAwNzgxIDg3LjkzNzUgNDcuNDEwMTU2IEwgODcuOTM3NSA0Ny40NDUzMTIgQyA4Ny45Mzc1IDQ4LjA1NDY4OCA4OC4wMzkwNjIgNDguNjMyODEyIDg4LjI0MjE4OCA0OS4xNzU3ODEgQyA4OC40NDkyMTkgNDkuNzIyNjU2IDg4LjczNDM3NSA1MC4xOTUzMTIgODkuMTA1NDY5IDUwLjYwMTU2MiBDIDg5LjQ3NjU2MiA1MS4wMDc4MTIgODkuOTE0MDYyIDUxLjMyODEyNSA5MC40MjE4NzUgNTEuNTYyNSBDIDkwLjkyOTY4OCA1MS43OTI5NjkgOTEuNDg0Mzc1IDUxLjkxMDE1NiA5Mi4wODIwMzEgNTEuOTEwMTU2IEMgOTIuODQzNzUgNTEuOTEwMTU2IDkzLjUwMzkwNiA1MS43NjU2MjUgOTQuMDUwNzgxIDUxLjQ3MjY1NiBDIDk0LjYwMTU2MiA1MS4xNzk2ODggOTUuMTQ0NTMxIDUwLjc4MTI1IDk1LjY4MzU5NCA1MC4yODEyNSBMIDk3LjEwMTU2MiA1MS43MTQ4NDQgQyA5Ni43NzczNDQgNTIuMDU4NTk0IDk2LjQ0MTQwNiA1Mi4zNjcxODggOTYuMDg1OTM4IDUyLjYzNjcxOSBDIDk1LjczNDM3NSA1Mi45MDYyNSA5NS4zNTU0NjkgNTMuMTQwNjI1IDk0Ljk0OTIxOSA1My4zMzU5MzggQyA5NC41NDI5NjkgNTMuNTM1MTU2IDk0LjA5NzY1NiA1My42ODM1OTQgOTMuNjEzMjgxIDUzLjc4NTE1NiBDIDkzLjEyODkwNiA1My44ODY3MTkgOTIuNTkzNzUgNTMuOTM3NSA5Mi4wMDc4MTIgNTMuOTM3NSBaIE0gMTIxLjk3MjY1NiA0OC43MzgyODEgTCAxMTkuODA0Njg4IDQzLjcxODc1IEwgMTE3LjY1MjM0NCA0OC43MzgyODEgWiBNIDExOC44MTY0MDYgNDEuMDgyMDMxIEwgMTIwLjg2MzI4MSA0MS4wODIwMzEgTCAxMjYuMzgyODEyIDUzLjcyMjY1NiBMIDEyNC4wNTQ2ODggNTMuNzIyNjU2IEwgMTIyLjc4MTI1IDUwLjY5MTQwNiBMIDExNi44NDc2NTYgNTAuNjkxNDA2IEwgMTE1LjU1NDY4OCA1My43MjI2NTYgTCAxMTMuMjk2ODc1IDUzLjcyMjY1NiBaIE0gMTQ4LjI3MzQzOCA0Ny42OTkyMTkgQyAxNDkuMTEzMjgxIDQ3LjY5OTIxOSAxNDkuNzczNDM4IDQ3LjQ4ODI4MSAxNTAuMjU3ODEyIDQ3LjA2NjQwNiBDIDE1MC43NDYwOTQgNDYuNjQ4NDM4IDE1MC45ODgyODEgNDYuMTA5Mzc1IDE1MC45ODgyODEgNDUuNDQ5MjE5IEwgMTUwLjk4ODI4MSA0NS40MTQwNjIgQyAxNTAuOTg4MjgxIDQ0LjY2Nzk2OSAxNTAuNzQyMTg4IDQ0LjEwNTQ2OSAxNTAuMjUgNDMuNzMwNDY5IEMgMTQ5Ljc2MTcxOSA0My4zNTE1NjIgMTQ5LjEwMTU2MiA0My4xNjQwNjIgMTQ4LjI3MzQzOCA0My4xNjQwNjIgTCAxNDUuNjk5MjE5IDQzLjE2NDA2MiBMIDE0NS42OTkyMTkgNDcuNjk5MjE5IFogTSAxNDMuNTExNzE5IDQxLjE3MTg3NSBMIDE0OC40NjA5MzggNDEuMTcxODc1IEMgMTQ5LjE4NzUgNDEuMTcxODc1IDE0OS44NTE1NjIgNDEuMjY5NTMxIDE1MC40NDE0MDYgNDEuNDY4NzUgQyAxNTEuMDMxMjUgNDEuNjY0MDYyIDE1MS41MzUxNTYgNDEuOTQ5MjE5IDE1MS45NDUzMTIgNDIuMzIwMzEyIEMgMTUyLjM1OTM3NSA0Mi42OTE0MDYgMTUyLjY3NTc4MSA0My4xMzI4MTIgMTUyLjg5ODQzOCA0My42NDQ1MzEgQyAxNTMuMTE3MTg4IDQ0LjE2MDE1NiAxNTMuMjMwNDY5IDQ0LjczNDM3NSAxNTMuMjMwNDY5IDQ1LjM2NzE4OCBMIDE1My4yMzA0NjkgNDUuNDAyMzQ0IEMgMTUzLjIzMDQ2OSA0Ni4xMDkzNzUgMTUzLjA5NzY1NiA0Ni43MjY1NjIgMTUyLjgzNTkzOCA0Ny4yNTc4MTIgQyAxNTIuNTcwMzEyIDQ3Ljc4OTA2MiAxNTIuMjEwOTM4IDQ4LjIzNDM3NSAxNTEuNzU3ODEyIDQ4LjU5Mzc1IEMgMTUxLjMwMDc4MSA0OC45NTMxMjUgMTUwLjc2NTYyNSA0OS4yMjY1NjIgMTUwLjE1NjI1IDQ5LjQxMDE1NiBDIDE0OS41NDY4NzUgNDkuNTkzNzUgMTQ4Ljg5NDUzMSA0OS42ODc1IDE0OC4xOTUzMTIgNDkuNjg3NSBMIDE0NS42OTkyMTkgNDkuNjg3NSBMIDE0NS42OTkyMTkgNTMuNzIyNjU2IEwgMTQzLjUxMTcxOSA1My43MjI2NTYgWiBNIDE3MC41ODk4NDQgNDEuMTcxODc1IEwgMTcyLjc3NzM0NCA0MS4xNzE4NzUgTCAxNzIuNzc3MzQ0IDUzLjcyMjY1NiBMIDE3MC41ODk4NDQgNTMuNzIyNjU2IFogTSAxOTQuMjEwOTM4IDQzLjIxNDg0NCBMIDE5MC4yMzA0NjkgNDMuMjE0ODQ0IEwgMTkwLjIzMDQ2OSA0MS4xNzE4NzUgTCAyMDAuNDEwMTU2IDQxLjE3MTg3NSBMIDIwMC40MTAxNTYgNDMuMjE0ODQ0IEwgMTk2LjQzMzU5NCA0My4yMTQ4NDQgTCAxOTYuNDMzNTk0IDUzLjcyMjY1NiBMIDE5NC4yMTA5MzggNTMuNzIyNjU2IFogTSAyMjUuMzIwMzEyIDQ4LjczODI4MSBMIDIyMy4xNTIzNDQgNDMuNzE4NzUgTCAyMjEgNDguNzM4MjgxIFogTSAyMjIuMTY0MDYyIDQxLjA4MjAzMSBMIDIyNC4yMTA5MzggNDEuMDgyMDMxIEwgMjI5LjczMDQ2OSA1My43MjI2NTYgTCAyMjcuNDAyMzQ0IDUzLjcyMjY1NiBMIDIyNi4xMjg5MDYgNTAuNjkxNDA2IEwgMjIwLjE5NTMxMiA1MC42OTE0MDYgTCAyMTguOTAyMzQ0IDUzLjcyMjY1NiBMIDIxNi42NDQ1MzEgNTMuNzIyNjU2IFogTSAyNDYuODU5Mzc1IDQxLjE3MTg3NSBMIDI0OS4wNDY4NzUgNDEuMTcxODc1IEwgMjQ5LjA0Njg3NSA1MS43MzA0NjkgTCAyNTUuNjQ0NTMxIDUxLjczMDQ2OSBMIDI1NS42NDQ1MzEgNTMuNzIyNjU2IEwgMjQ2Ljg1OTM3NSA1My43MjI2NTYgTCAyNDYuODU5Mzc1IDQxLjE3MTg3NSAiPjwvcGF0aD4KPC9nPgoKPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtMikiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9InJnYigxMDAlLCAxMDAlLCAxMDAlKSIgZmlsbC1vcGFjaXR5PSIxIiBkPSJNIDY5LjI1MzkwNiAwIEwgNzEuNzQ2MDk0IDAgTCA3MS43NDYwOTQgNjQuMjY5NTMxIEwgNjkuMjUzOTA2IDY0LjI2OTUzMSBMIDY5LjI1MzkwNiAwICI+PC9wYXRoPgo8L2c+Cjwvc3ZnPg==';

const SERVICES = [
  'IPS Review',
  'Portfolio Management',
  'Board Presentations',
  'Compliance Reporting',
];

// ── Timeline (seconds) ───────────────────────────────────────────────
const T = {
  enterEnd: 1.0,
  lidOpenStart: 1.05,
  lidOpenEnd: 2.15,
  dropStart: 2.25,
  dropGap: 1.56,
  dropDur: 2.24,
  lidCloseStart: 9.35,
  lidCloseEnd: 10.1,
  iconFadeStart: 10.35,
  iconFadeEnd: 10.95,
  logoStart: 10.5,
  logoEnd: 11.2,
  // "CAPITAL" morphs letter-by-letter into "RESERVE" before the tagline
  capMorphStart: 11.75,
  // tagline prints out left→right (10% faster), pausing 0.5s between sentences
  tag1Start: 12.95, tag1End: 13.52,   // "More than reserve management."
  tag2Start: 14.02, tag2End: 14.37,  // "Reserve structure." (after 0.5s pause)
};

// Icon layout (px). Native aspect 317.95 : 359.57.
const W = 318;
const Hh = 360;

// Top-face rhombus, as fractions of the icon box (from the SVG geometry):
//   apex (top)=0.50,0.00  · right=1.00,0.256 · front=0.50,0.511 · left=0.00,0.256
const TOP_CLIP = 'polygon(50% 0%, 100% 25.6%, 50% 51.1%, 0% 25.6%)';
const OPEN_CX = 0.50 * W;
const OPEN_CY = 0.256 * Hh;

function ServiceLabel({ text, index, t, mode }) {
  const start = T.dropStart + index * T.dropGap;
  const p = clamp((t - start) / T.dropDur, 0, 1);
  if (t < start || p >= 1) return null;

  const appear = clamp(p / 0.12, 0, 1);

  let x, y, scale, opacity, halo;

  if (mode === 'halo') {
    // Option B — word materializes ABOVE the box, hovers there long enough to
    // read (carried by a soft halo), then drops straight down into the opening.
    const yAbove = -150;   // resting position above the cube (a touch lower)
    const hover = clamp(p / 0.5, 0, 1);            // rise + hold above the box
    const drop = clamp((p - 0.62) / 0.38, 0, 1);   // descent into the opening
    const teDrop = Easing.easeInCubic(drop);

    x = 0;
    y = yAbove * (1 - 0.12 * Easing.easeOutCubic(hover)) + teDrop * (yAbove * -1 + 60);
    scale = (1.15 + 0.05 * Easing.easeOutCubic(hover)) - teDrop * 0.66;
    opacity = Math.min(appear, 1 - teDrop);
    halo = 1 - teDrop;
  } else {
    // Option A — alternating side entry that arcs from horizontal into the
    // opening (even words from the left, odd from the right).
    const dir = (index % 2 === 0) ? -1 : 1;
    const xStart = dir * 500;
    const yStart = -64;
    const glide = clamp(p / 0.64, 0, 1);
    const gX = Easing.easeOutCubic(glide);
    const gY = Easing.easeInCubic(glide);
    const sink = clamp((p - 0.6) / 0.4, 0, 1);
    const teSink = Easing.easeInCubic(sink);
    x = xStart * (1 - gX);
    y = yStart * (1 - gY) + teSink * 66;
    const arc = Easing.easeInOutCubic(glide);
    scale = (2.4 - 1.4 * arc) - teSink * 0.5;
    opacity = Math.min(appear, 1 - teSink);
    halo = 0;
  }

  return (
    <div style={{
      position: 'absolute',
      left: OPEN_CX, top: OPEN_CY,
      transform: `translate(-50%, calc(-50% + ${y}px)) translateX(${x}px) scale(${scale})`,
      opacity,
      whiteSpace: 'nowrap',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '14px 26px',
      background: 'transparent',
      textShadow: '0 1px 2px rgba(3,18,40,0.9), 0 2px 12px rgba(3,18,40,0.85), 0 0 26px rgba(3,18,40,0.7)',
      fontFamily: 'var(--font-display, Poppins, sans-serif)',
      fontWeight: 600,
      fontSize: 35,
      color: WHITE,
    }}>
      {halo > 0 && (
        <div style={{
          position: 'absolute', left: '50%', top: '50%',
          width: 420, height: 200,
          transform: 'translate(-50%, -50%)',
          background: 'radial-gradient(ellipse at center, rgba(3,18,40,0.92) 0%, rgba(3,18,40,0.72) 38%, rgba(3,18,40,0) 72%)',
          filter: 'blur(6px)',
          opacity: halo,
          pointerEvents: 'none', zIndex: -1,
        }} />
      )}
      {text}
    </div>
  );
}

function Scene({ entryMode = 'arc' }) {
  const t = useTime();

  // entrance
  const enter = animate({ from: 0, to: 1, start: 0, end: T.enterEnd, ease: Easing.easeOutCubic })(t);
  const entranceScale = 0.84 + 0.04 * enter; // settle to 0.88 — leaves headroom for the lid
  const entranceY = (1 - enter) * 28;

  // lid hinge dihedral angle (degrees between lid and the box-top plane).
  // 125° = clearly past vertical, leaning back off the opening.
  let open2 = animate({ from: 0, to: 125, start: T.lidOpenStart, end: T.lidOpenEnd, ease: Easing.easeInOutCubic })(t);
  const close = animate({ from: 0, to: 125, start: T.lidCloseStart, end: T.lidCloseEnd, ease: Easing.easeInOutCubic })(t);
  let openAngle = open2 - close;
  const glow = clamp(openAngle / 125, 0, 1);
  // Dark cavity opacity is FRONT-LOADED: opaque within the first ~10° of the
  // swing so the base's top-of-S is masked immediately — kills the ghost.
  const cavity = clamp(openAngle / 12, 0, 1);

  // idle float
  const float = Math.sin(t * 0.8) * 4;

  // resolve to full logo — the icon morphs (shrinks + recolors to logo blue)
  // into the icon slot of the lockup while the wordmark fades in.
  const logoP = animate({ from: 0, to: 1, start: T.logoStart, end: T.logoEnd, ease: Easing.easeInOutCubic })(t);
  const morph = logoP;
  // tagline prints out left→right, sentence by sentence (same wipe speed)
  const tag1P = animate({ from: 0, to: 1, start: T.tag1Start, end: T.tag1End, ease: Easing.linear })(t);
  const tag2P = animate({ from: 0, to: 1, start: T.tag2Start, end: T.tag2End, ease: Easing.linear })(t);

  // "CAPITAL" → "RESERVE" per-letter morph (same 7-letter count). Staggered
  // left→right, each letter flips + crossfades. Matched to the wordmark blue.
  const CAP_LETTERS = ['C', 'A', 'P', 'I', 'T', 'A', 'L'];
  const RES_LETTERS = ['R', 'E', 'S', 'E', 'R', 'V', 'E'];
  const capLp = (i) => Easing.easeInOutCubic(clamp((t - (T.capMorphStart + i * 0.085)) / 0.5, 0, 1));
  const WORDMARK_BLUE = '#48a0de';

  // lockup geometry (Stage is 1280×720)
  const LOCK_W = 880;
  const LOCK_LEFT = (1280 - LOCK_W) / 2;   // 200
  const LOCK_TOP = 209;                     // wordmark svg top
  const SVG_S = LOCK_W / 255.64;            // px per logo unit
  // icon slot centre within the lockup
  const iconCx = LOCK_LEFT + 27.92 * SVG_S;
  const iconCy = LOCK_TOP + 32.13 * SVG_S;
  // icon group's resting centre = (640, 0.57*720) = (640, 410.4)
  const TARGET_TX = iconCx - 640;
  const TARGET_TY = iconCy - 410.4;
  const TARGET_SCALE = (55.84 * SVG_S) / W; // ≈ 0.604

  const baseTy = entranceY + float;
  const iconTx = TARGET_TX * morph;
  const iconTy = baseTy + (TARGET_TY - baseTy) * morph;
  const iconScale = entranceScale + (TARGET_SCALE - entranceScale) * morph;

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: NAVY, transform: 'scale(1.34)', transformOrigin: '50% 50%' }}>
      {/* flat true-#052045 background (no ambient glow — seamless against WP) */}

      {/* icon group */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '57%',
        width: W, height: Hh,
        marginLeft: -W / 2, marginTop: -Hh / 2,
        perspective: 2600,
        opacity: 1,
        transform: `translate(${iconTx}px, ${iconTy}px) scale(${iconScale})`,
      }}>
        {/* base icon (the box body) */}
        <img src={ICON} alt="Synergy Capital" style={{
          position: 'absolute', inset: 0, width: W, height: Hh,
          filter: 'drop-shadow(0 22px 38px rgba(0,0,0,0.45))',
        }} />

        {/* light-blue icon — crossfades in as the mark morphs into the logo */}
        <img src={ICON_LOGOBLUE} alt="" style={{
          position: 'absolute', inset: 0, width: W, height: Hh,
          opacity: morph,
          filter: 'drop-shadow(0 22px 38px rgba(0,0,0,0.45))',
        }} />

        {/* SOLID dark cavity over the top face — hides the base's top-of-S so
            there is no ghost when the lid swings away */}
        <div style={{
          position: 'absolute', inset: 0, width: W, height: Hh,
          clipPath: TOP_CLIP,
          opacity: cavity,
          background: `radial-gradient(ellipse at 50% 40%, #0a2c52 0%, #041124 62%, #020b18 100%)`,
          boxShadow: 'inset 0 0 34px rgba(0,0,0,0.8)',
        }} />
        {/* luminous rim inside the opening */}
        <div style={{
          position: 'absolute', inset: 0, width: W, height: Hh,
          clipPath: TOP_CLIP,
          opacity: glow,
          background: `radial-gradient(ellipse at 50% 36%, rgba(0,128,222,0.45), transparent 58%)`,
          filter: 'blur(5px)',
          mixBlendMode: 'screen',
        }} />

        {/* hinged lid — top face (the top of the S), hinged along the back-left
            edge (apex→left), opening up & to the left. Two faces so the
            UNDERSIDE (brand blue) shows once it swings past vertical. */}
        <div style={{
          position: 'absolute', inset: 0, width: W, height: Hh,
          transformStyle: 'preserve-3d',
          transformOrigin: '25% 12.8%',
          transform: `rotate3d(-0.865, 0.501, 0, ${openAngle}deg)`,
          filter: glow > 0.02 ? 'drop-shadow(-12px -7px 16px rgba(0,0,0,0.55))' : 'none',
        }}>
          {/* outer face — the white top of the S */}
          <img src={ICON} alt="" style={{
            position: 'absolute', inset: 0, width: W, height: Hh,
            clipPath: TOP_CLIP,
            backfaceVisibility: 'hidden',
          }} />
          {/* outer face recolors to logo blue as the mark morphs */}
          <img src={ICON_LOGOBLUE} alt="" style={{
            position: 'absolute', inset: 0, width: W, height: Hh,
            clipPath: TOP_CLIP,
            backfaceVisibility: 'hidden',
            opacity: morph,
          }} />
          {/* underside — brand blue, mirrored, dimmed (inner surface) */}
          <img src={ICON_BLUE} alt="" style={{
            position: 'absolute', inset: 0, width: W, height: Hh,
            clipPath: TOP_CLIP,
            transform: 'rotateY(180deg)',
            transformOrigin: 'center',
            backfaceVisibility: 'hidden',
            filter: 'brightness(0.82) drop-shadow(0 2px 6px rgba(0,0,0,0.5))',
          }} />
        </div>

        {/* services dropping into the opening */}
        {SERVICES.map((s, i) => (
          <ServiceLabel key={s} text={s} index={i} t={t} mode={entryMode} />
        ))}
      </div>

      {/* end: wordmark fades in beside the morphed icon (icon | SYNERGY ...).
          The image is clipped to hide its baked-in "CAPITAL" (keeping SYNERGY
          + the divider bar); the second line is rendered as live text below so
          it can morph CAPITAL → RESERVE. */}
      <img src={WORDMARK} alt="Synergy Capital" style={{
        position: 'absolute',
        left: LOCK_LEFT, top: LOCK_TOP, width: LOCK_W,
        opacity: morph,
        clipPath: 'polygon(0 0, 100% 0, 100% 56%, 31% 56%, 31% 100%, 0 100%)',
        WebkitClipPath: 'polygon(0 0, 100% 0, 100% 56%, 31% 56%, 31% 100%, 0 100%)',
        pointerEvents: 'none',
      }} />

      {/* second line — live text, morphs CAPITAL letter-by-letter into RESERVE.
          Letters are EDGE-ALIGNED (space-between) so the line spans the full
          width under SYNERGY — first letter under the S, last under the Y. */}
      <div style={{
        position: 'absolute',
        left: LOCK_LEFT + 85.6 * SVG_S,
        top: LOCK_TOP + 38.2 * SVG_S,
        width: (255.64 - 85.6) * SVG_S,
        height: 17 * SVG_S,
        opacity: morph,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        perspective: 800,
        pointerEvents: 'none',
      }}>
        {CAP_LETTERS.map((c, i) => {
          const p = capLp(i);
          const base = {
            fontFamily: 'var(--font-display, Poppins, sans-serif)',
            fontWeight: 500, fontSize: 62, lineHeight: 1, color: WORDMARK_BLUE,
            backfaceVisibility: 'hidden',
          };
          return (
            <div key={i} style={{ position: 'relative', display: 'inline-block', transformStyle: 'preserve-3d' }}>
              <span style={{ ...base, display: 'inline-block', opacity: 1 - p, transform: `rotateX(${p * 90}deg)` }}>{c}</span>
              <span style={{ ...base, position: 'absolute', left: '50%', top: 0, transform: `translateX(-50%) rotateX(${(1 - p) * -90}deg)`, opacity: p }}>{RES_LETTERS[i]}</span>
            </div>
          );
        })}
      </div>
      <div style={{
        position: 'absolute',
        left: LOCK_LEFT, width: LOCK_W, top: LOCK_TOP + (64.27 * SVG_S) + 40,
        fontFamily: 'var(--font-display, Poppins, sans-serif)',
        fontWeight: 600, fontSize: 33, letterSpacing: '0.005em',
        color: WHITE, textAlign: 'center', lineHeight: 1.3,
        opacity: morph,
        pointerEvents: 'none',
      }}>
        <span style={{
          display: 'inline-block', whiteSpace: 'nowrap',
          clipPath: `inset(0 ${(1 - tag1P) * 100}% 0 0)`,
          WebkitClipPath: `inset(0 ${(1 - tag1P) * 100}% 0 0)`,
        }}>
          More than reserve management.
        </span>{' '}
        <span style={{
          display: 'inline-block', whiteSpace: 'nowrap', color: BLUE_SOFT,
          clipPath: `inset(0 ${(1 - tag2P) * 100}% 0 0)`,
          WebkitClipPath: `inset(0 ${(1 - tag2P) * 100}% 0 0)`,
        }}>
          Reserve structure.
        </span>
      </div>
    </div>
  );
}

window.Scene = Scene;