body {
  
  color: white;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #DDDDDD;
}
.row {
  width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 1400px;
/*   width: 100%; */
  padding: 0px 0px 0px 0px;
  text-align: center;
  background-color:#ffffff;
}
#all_letters {
  visibility:hidden;
}
/* high- */
#high_G, #highI2_anaN, #highI2_anaN, #highI1_anaN, #highH1b_anaL, #highH2b_anaL {
  visibility:hidden;
}
#fidF1_anaT, #fidF3_anaT, #fidD1_anaC, #fidD2_anaC, #fidL2_readR, #fidL1_readR, #readR, #fidelityI1_readA, #fidelityI2_readA, #fidT1_readD, #fidT2_readD {
  visibility:hidden;
}

#highI1_theH2, #anaY2_W, #anaT2_H2, #anaT1_H1, #anaI1_O, #anaI2_O, #anaC2_wholeL, #anaC1_wholeL, #anaS1_wholeE, #anaS2_wholeE, #fidL1_storyS, #fidE2_storyT, #fidE1_storyT, #fidelityI1_O, #fidelityI2_O, #fidT1_storyO, #fidT_storyO, #fidT1_storyR, #fidT2_storyR {
  visibility:hidden;
}

// CIOX High Fidelity comes on
tlintro = gsap.timeline({defaults:{duration:2, ease: "expo.out"}});
tlintro
.set(highG2, {x:"-=500", transformOrigin:"center"}, "anim")
.set(high_G, {visibility:"visible"}, "anim")
.set([highH2, highG2, fidT2, fidelityI2], {style:"mix-blend-mode:multiply"}, "anim")
.fromTo(all_letters, {autoAlpha:.2},{duration:2, autoAlpha:1, ease:"linear"}, "anim")
.from([highH1, high_H3], {y:"-=300", stagger:.2}, "anim")
.from(highH2, {x:"-=370"}, "anim")
.from([highI2, highI1], {y:"+=550", stagger:.2}, "anim")

.from([highG2, highG1], {rotation:180, stagger:.2, transformOrigin:"center"}, "anim")
.to(highG2, {x:"+=499", y:"+=.7", transformOrigin:"center"}, "anim")
.from(highG1, {y:"+=550", transformOrigin:"center"}, "anim")

.from([highH1b, highH_3b], {y:"+=600", stagger:.2}, "anim")
.from(highH2b, {x:"-=600"}, "anim")
.from([fidF3, fidF2], {x:"-=600", stagger:.2}, "anim")
.from(fidF1, {y:"+=450", stagger:.2}, "anim")
.from([fidI2, fidI1], {y:"+=440", stagger:.2}, "anim")
.from(fidD1, {duration:1.5, x:"-=750"}, "anim")
.from(fidD2, {y:"+=450"}, "anim")
.from(fidE2, {y:"-=450"}, "anim")
.from(fidE3, {y:"+=450"}, "anim")
.from(fidE4, {scaleX:0, opacity:0, transformOrigin:"center"}, "anim") 
.from(fidE1, {x:"-=950"}, "anim")
.from(fidL2, {y:"-=300", scaleY:0, transformOrigin:"50% 50%"}, "anim")
.from(fidL1, {y:"+=350"}, "anim")
.from([fidelityI1, fidelityI2], {y:"-=450", stagger:.2}, "anim")
.from(fidT1, {y:"+=500"}, "anim")
.from(fidT2, {x:"+=500"}, "anim")
.from(fidY1, {y:"-=500"}, "anim") 
.from(fidY2, {x:"+=400"}, "anim")
.from(HIGH_group, {duration:6, x:"-=50", ease:"sine.inOut"}, "anim+=.5")
.from([FID_group, READY_STORY], {duration:6, x:"+=30", ease:"sine.inOut"}, "anim+=1")
;
// Morph to Analytics Ready
analyticsready = gsap.timeline({defaults:{duration:1, ease: "expo.out"}});
analyticsready
.to([READY_STORY], {duration:5, x:"-=30", ease:"sine.inOut"}, "anim+=1.5") // READY & STORY
.to([READY_STORY], {duration:5, x:"-=30", ease:"sine.inOut"}, "anim+=7") // READY & STORY
.to([HIGH_group, YTICS_group], {duration:5.5, x:"+=30", ease:"sine.inOut"}, "anim") // ANALYTICS & THE WHOLE
.to([HIGH_group, YTICS_group], {duration:5.5, x:"+=30", ease:"sine.inOut"}, "anim+=6") // ANALYTICS & THE WHOLE
// letter 1
.to([highH1, high_H3], {y:"-=350", stagger:.2, ease: "power2.in"}, "anim")
.to(highH2, {x:"-=450", ease: "power2.in"}, "anim")
.from([highH2_anaA, highH1_anaA], {y:"+=550", stagger:.2}, "anim+=.2")
// .from(highH1_anaA, {y:"-=350"}, "anim+=2.3")
// high I
.to(highI2, {fill:"#AEAEAF", morphSVG: highI2_anaN}, "anim+=.3")
.to(highI1, {morphSVG: highI1_anaN}, "anim+=.3")
// high G
.to(high_G, {duration:.5, rotation:-90, transformOrigin:"center", ease: "power2.inOut"}, "anim")
.to(highG2, {x:"-=550", opacity:0, transformOrigin:"center", ease: "power2.in"}, "anim")
.to(highG1, {y:"-=600", transformOrigin:"center", ease: "power2.in"}, "anim")

.from([highG2_anaA, highG1_anaA], {y:"-=550", stagger:.2}, "anim+=.4")
// .to(highG2, {fill:"#00BBC4", morphSVG: highG1_anaA, style:"mix-blend-mode:normal"}, "anim")
// .to(highG1, {fill:"#85D3EC", morphSVG: highG2_anaA}, "anim")
// letter 4
.to(highH1b, {morphSVG: highH1b_anaL}, "anim+=.4")
.to(highH2b, {morphSVG: highH2b_anaL}, "anim+=.4")
.to(highH_3b, {y:"+=600"}, "anim+=.4")
// ana Y
.from(anaY1, {scaleY:0, transformOrigin:"50% 0%"}, "anim+=.5")
.from(anaY2, {scaleY:0, transformOrigin:"50% 100%"}, "anim+=.5")
// ana T
.from([anaT1, anaT2], {duration: .3, opacity:0, ease:"linear"}, "anim+=.8")
.from(anaT1, {scaleX:0, transformOrigin:"0% 50%"}, "anim+=1")
.from(anaT2, {x:"-=25", transformOrigin:"center"}, "anim+=1")
// letter 7, I - O
.from([anaI2, anaI1], {duration: .3, opacity:0, ease:"linear"}, "anim+=.6")
.from(anaI2, {y:"+=200"}, "anim+=.6")
.from(anaI1, {y:"-=200"}, "anim+=.6")
// ana C 
.from([anaC1, anaC2], {duration: 1, opacity:0, ease:"linear"}, "anim+=.9")
.from(anaC1, {rotation:45, transformOrigin:"center"}, "anim+=1.3")
.from(anaC1, {y:"-=300", transformOrigin:"center"}, "anim+=.9")
.from(anaC2, {rotation:-45, transformOrigin:"center"}, "anim+=1.3")
.from(anaC2, {x:"+=600", transformOrigin:"center"}, "anim+=.9")
// ana S 
.from([anaS2, anaS1], {duration: .5, autoAlpha:0, ease:"linear"}, "anim+=1.2")
.from(anaS2, {y:"-=20", transformOrigin:"center"}, "anim+=1.4")
.from(anaS1, {y:"+=20", transformOrigin:"center"}, "anim+=1.4")
// FID
.to([fidF1, fidF2, fidF3], {duration: .5, autoAlpha:0, ease:"linear"}, "anim+=.5")
.to(fidF1, {x:"-=200", ease: "power2.in"}, "anim+=.3")
.to([fidF3], {y:"-=30", ease: "power2.in"}, "anim")
.to([fidF2], {y:"+=30", ease: "power2.in"}, "anim")

.to(fidI1, {y:"-=500", ease: "power2.in"}, "anim+=.5")
.to(fidI2, {x:"+=200", autoAlpha:0, ease: "power2.in"}, "anim+=.5")

.to([fidD2, fidD1], {duration: .5, autoAlpha:0, ease:"linear"}, "anim+=1.2")
.to(fidD1, {x:"+=500", ease: "power2.in"}, "anim+=.7")
.to(fidD2, {y:"+=500", transformOrigin:"50% 100%", ease: "power2.in"}, "anim+=.7")
// letter13 E
.to([fidE3, fidE2], {x:"+=105", y:"-=1"}, "anim+=.5")
.to([fidE3, fidE2], {duration: .3, scaleX:1.1, transformOrigin:"0% 50%", stagger:.1, yoyo:true, repeat:1, ease:"sine.inOut"}, "anim+=.5")
.to(fidE4, {x:"+=105", y:"-=1"}, "anim+=.5")
.to(fidE1, {x:"+=105", y:"-=1"}, "anim+=.5")
.to(fidE1, {duration: .5, scaleY:.7, transformOrigin:"50% 50%", yoyo:true, repeat:1, ease:"sine.inOut"}, "anim+=1.5")
// letter14, L - R
.to(fidL2, {fill:"#85D3EC", morphSVG: fidL2_readR}, "anim+=.5")
.to(fidL1, {morphSVG: fidL1_readR}, "anim+=.5")
.from(readR, {duration: .5, autoAlpha:0, ease:"linear"}, "anim+=.5")
.from(readR, {rotation:-180, transformOrigin:"center"}, "anim+=.5")
// letter15, I - A
.to(fidelityI1, {morphSVG: fidelityI1_readA}, "anim+=1.5")
.to(fidelityI2, {fill:"#00BBC4", morphSVG: fidelityI2_readA, style:"mix-blend-mode:normal"}, "anim+=1.5")
// letter16, T - D
// letter12
.to(fidT1, {fill:"#00BBC4", morphSVG: fidT1_readD}, "anim+=.7")
.to(fidT2, {fill:"#85D3EC", morphSVG: fidT2_readD, style:"mix-blend-mode:normal"}, "anim+=.7")
// letter 17, Y - Y
.to(fidY1, {x:"+=41", y:"-=.6"}, "anim+=.6")
.to(fidY1, {duration: .7, rotation:5, transformOrigin:"50% 0%", yoyo:true, repeat:1, ease:"power2.out"}, "anim+=.8")
.to(fidY2, {fill:"#00BBC4", x:"+=41", y:"-=.6"}, "anim+=.6")
.to(fidY2, {duration: .7, scaleY:.9, transformOrigin:"50% 100%", yoyo:true, repeat:1, ease:"power1.out"}, "anim+=.8")
;
// Morph to THE WHOLE STORY
thewholestory = gsap.timeline({defaults:{duration:1, ease: "expo.out"}});
thewholestory
// A - T
.to([highH2_anaA, highH1_anaA], {y:"-=550", stagger:.2, ease: "power2.in"}, "anim+=.5")
.from(the_T2, {y:"+=550"}, "anim+=.8")
.from(the_T1, {x:"-=550"}, "anim+=1")
// .to(highH1, {fill:"#00A5CE", morphSVG: the_T2}, "anim+=1.7")
// .to(highH2, {fill:"#00BBC4", morphSVG: the_T1, style:"mix-blend-mode:multiply"}, "anim+=1.7")
// N - H
.from(theH1, {opacity:0, transformOrigin:"center"}, "anim+=.5")
.to(highI1, {fill:"#85D3EC", morphSVG: highI1_theH2}, "anim+=.5")
.to(highI2, {x:"-=6.5"}, "anim+=.5")
// A - E
.to([highG2_anaA, highG1_anaA], {y:"-=550", stagger:.2, ease: "power2.in"}, "anim+=.4")
.from([theE1, highG1_theE, theE2, highG2_theE], {duration:1, opacity:0, stagger:.2}, "anim+=1")
.from(theE1, {duration:1.5, scaleX:0, transformOrigin:"0% 50%", y:"+=73.422"}, "anim+=1.1")
.from(highG1_theE, {duration:1.5, scaleX:0, transformOrigin:"0% 50%", y:"+=36.733"}, "anim+=1.4")
.from(theE2, {duration:1.5, scaleX:0, transformOrigin:"0% 50%"}, "anim+=1.6")
.from(highG2_theE, {duration:1.5, scaleY:0, transformOrigin:"50% 100%"}, "anim+=1.4")
// .to(highG1, {fill:"#AEAEAF", morphSVG:highG1_theE, style:"mix-blend-mode:multiply"}, "anim+=.4")
// L, Y - W
.to(highH1b, {duration:1.5, opacity:0, scaleY:0, transformOrigin:"50% 100%"}, "anim+=.2")
.to(highH2b, {duration:1.5, opacity:0, scaleX:0, transformOrigin:"0% 50%"}, "anim+=.2")
// .to(highH1b, {y:"+=600", ease:"power2.in"}, "anim+=.2")
// .to(highH2b, {x:"+=900", ease:"power2.in"}, "anim+=.2")
.to(anaY2, {morphSVG:anaY2_W}, "anim+=.2")
.to(anaY1, {x:"-=71.441"}, "anim+=.2")
// T - H
.from(wholeH, {scaleY:0, transformOrigin:"50% 50%"}, "anim+=1")
.to(anaT2, {fill:"#85D3EC", morphSVG:anaT2_H2}, "anim+=1")
.to(anaT1, {morphSVG:anaT1_H1}, "anim+=1")
// I - O
.to(anaI1, {morphSVG:anaI1_O}, "anim+=1.3")
.to(anaI2, {fill:"#00BBC4", morphSVG:anaI2_O}, "anim+=1.3")
// C - L
.to(anaC1, {morphSVG:anaC1_wholeL}, "anim+=1.2")
.to(anaC2, {morphSVG:anaC2_wholeL}, "anim+=1.2")
// S - E
.to(anaS1, {fill:"#AEAEAF", morphSVG:anaS1_wholeE}, "anim+=1.4")
.to(anaS2, {morphSVG:anaS2_wholeE}, "anim+=1.4")
.from(wholeE1, {scaleY:0, transformOrigin:"50% 50%"}, "anim+=1.5")
.from(wholeE2, {scaleX:0, transformOrigin:"0% 50%"}, "anim+=1.5")
// R - S
.to(readR, {scaleY:.95, fill:"#00A5CE", rotation:180, x:"+=5", y:"+=.5", transformOrigin:"50% 50%"}, "anim")
.to(fidL1, {duration: 1, fill:"#AEAEAF", morphSVG: fidL1_storyS}, "anim")
.to(fidL2, {scale:0, transformOrigin:"50% 50%"}, "anim")
// E - T
.to(fidE2, {duration: 1, fill:"#00BBC4", morphSVG: fidE2_storyT}, "anim+=.8")
.to(fidE1, {duration: 1, morphSVG: fidE1_storyT}, "anim+=.8")
.to([fidE3, fidE4], {duration:1, x:"+=100", opacity:0, scaleY:0, transformOrigin:"50% 50%"}, "anim+=.8")
.to(E_E_T, {x:"-=105", transformOrigin:"50% 50%"}, "anim+=.8")
// A - O
.to(fidelityI2, {duration: 1, morphSVG: fidelityI2_O}, "anim+=.2")
.to(fidelityI1, {duration: 1, morphSVG: fidelityI1_O}, "anim+=.2")
// D - R
.to(fidT1, {duration: 1, fill:"#00BBC4", style:"mix-blend-mode:multiply", morphSVG: fidT1_storyR}, "anim+=.5")
.to(fidT2, {duration: 1, fill:"#85D3EC", style:"mix-blend-mode:multiply", morphSVG: fidT2_storyR}, "anim+=.5")
.from(storyR, {scale:0, transformOrigin:"0% 0%"}, "anim+=.5")
;
// THE WHOLE STORY off screen
tloutro = gsap.timeline({defaults:{duration:2, ease: "power3.in"}});
tloutro
.set(highH2, {style:"mix-blend-mode:multiply"}, "anim")
.to(all_letters, {duration:1, autoAlpha:0, ease:"linear"}, "anim+=1")
// T
.to(the_T2, {y:"-=300"}, "anim")  
.to(the_T1, {x:"-=370"}, "anim")
// H
.to(highI1, {x:"+=1000"}, "anim") 
.to([highI2, theH1], {y:"+=550", stagger:.2}, "anim")
// E
.to([theE1, highG1, theE2], {y:"-=550", stagger:.2}, "anim") 
.to(highG2, {x:"+=1000"}, "anim") 
.to(highG2_theE, {x:"+=900"}, "anim")
.to(highG1_theE, {x:"-=600"}, "anim")
// W
.to([anaY1, anaY2], {y:"+=550", stagger:.2}, "anim") 
// H
.to([wholeH, anaT1], {y:"-=550", stagger:.2}, "anim") 
.to(anaT2, {x:"-=550"}, "anim") 
// O
.to([anaI2], {x:"-=850"}, "anim") 
.to([anaI1], {y:"+=550"}, "anim") 
// L
.to([anaC1], {x:"+=550"}, "anim") 
.to([anaC2], {y:"-=550"}, "anim")
// E
.to([wholeE2, anaS1, anaS2], {x:"+=400", stagger:.2}, "anim") 
.to(wholeE1, {y:"+=550"}, "anim")
// S
.to(fidL1, {x:"+=700"}, "anim") 
.to(readR, {x:"-=800"}, "anim") 
// T
.to(fidE1, {y:"+=500"}, "anim") 
.to(fidE2, {x:"+=700"}, "anim")
// O
.to(fidelityI2, {x:"+=700"}, "anim") 
.to(fidelityI1, {x:"-=950"}, "anim")
// R
.to(storyR, {x:"+=500"}, "anim") 
.to(fidT2, {y:"-=500"}, "anim") 
.to(fidT1, {x:"-=1000"}, "anim") 
// Y
.to(fidY1, {y:"+=500"}, "anim") 
.to(fidY2, {y:"-=500"}, "anim")
;
// 
// //HERO ALL TIMELINE delays
      delaysTL = gsap.timeline({repeat:-1});
          delaysTL.add(tlintro, .1) .add(analyticsready, 6) .add(thewholestory, 11) .add(tloutro, 16);

// BG Floaters
gsap.set(floater_tri1, {x:"-=50"});
floaters = gsap.timeline({defaults:{ease: "sine.inOut"}});
floaters
.to(floater_tri1, {duration:30, y:"-=400", repeat:-1, yoyo:true}, "anim+=7")
// .to(floater_circ1, {duration:40, y:"+=680", repeat:-1, yoyo:true}, "anim+=4")
.fromTo(floater_rect2, {x:"+=80"},{duration:40, x:"-=700", repeat:-1, yoyo:true}, "anim")
.to(floater_shape1, {duration:40, x:"+=1270", repeat:-1, yoyo:true}, "anim+=4")
.to(floater_rect1, {duration:30, y:"+=600", repeat:-1, yoyo:true}, "anim+=8")
.fromTo(floater_circ2, {x:"+=100"},{duration:30, x:"-=500", repeat:-1, yoyo:true}, "anim")
.to(floater_rect4, {duration:30, y:"-=750", repeat:-1, yoyo:true}, "anim")
.to(floater_rect3, {duration:30, x:"-=750", repeat:-1, yoyo:true}, "anim")
.to(floater_rect5, {duration:40, x:"+=750", repeat:-1, yoyo:true}, "anim+=6")
.to(floater_tri2, {duration:30, y:"+=440", repeat:-1, yoyo:true}, "anim+=6")

.to(floater_rect6, {duration:18, x:"+=500", repeat:-1, yoyo:true}, "anim")
.fromTo(floater_rect7, {x:"+=200"},{duration:50, x:"-=1400", repeat:-1, yoyo:true}, "anim+=11")
.to(floater_rect8, {duration:40, y:"+=300", repeat:-1, yoyo:true}, "anim+=4")
.fromTo(floater_rect9, {x:"-=100"},{duration:30, x:"+=500", repeat:-1, yoyo:true, repetDelay:2}, "anim+=12")

;

/* --- controls --- */
// GSDevTools.create({minimal: true});