/* 
==========================================================================
   MINDI GLOBAL | Animations - Circular Ecosystem Redesign
========================================================================== 
*/

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* Initial Load Sequence (Controlled by JS .js-loaded) */
body.js-loaded .global-header { animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; opacity: 0; }
body.js-loaded .hero-line:nth-child(1) { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; opacity: 0; }
body.js-loaded .hero-line:nth-child(2) { animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; opacity: 0; }
body.js-loaded .hero-divider { animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; opacity: 0; }
body.js-loaded .positioning-statement { animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards; opacity: 0; }
body.js-loaded .global-footer { animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards; opacity: 0; }

body.js-loaded .ecosystem-connections { animation: fadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards; opacity: 0; }

body.js-loaded .company-node-wrapper {
    animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay) forwards; opacity: 0;
}