@scroll-timeline my-scroll-timeline {
  scroll-source: auto;
  orientation: block;
}

@keyframes logo_top_ {
	0% {opacity: 0; transform: translate(0,0);filter: blur(0px);} 
	80% {opacity: 1; transform: translate(0,0);filter: blur(0px);} 
	100% {opacity: 0; transform: translate(-50em,-50em);filter: blur(15px);}
}
.logo_top_ {
	view-timeline-name: --logo_top_;
	view-timeline-axis: block;
	animation-timeline: --logo_top_;
	animation-name: logo_top_;
	animation-range: entry 0% cover 80%;
	animation-fill-mode: both;
}

@keyframes crsl_idx {
	0% {transform: translate(0em,0);filter: blur(0px)} 
	20% {transform: translate(0em,0);filter: blur(0px)} 
	100% {transform: translate(30em,0);filter: blur(10px)}
}
.crsl_idx {
	view-timeline-name: --crslidx;
	view-timeline-axis: block;

	animation-timeline: --crslidx;
	animation-name: crsl_idx;

	animation-range: entry 100% cover 100%;
	animation-fill-mode: both;
}

@keyframes img_anim_01 {
	0% {opacity: 0; scale: 25%;filter: blur(0px);} 
	80% {opacity: 1; scale: 100%;filter: blur(0px);} 
	100% {opacity: 0; scale: 200%;filter: blur(5px);}
}
.img_ani {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: img_anim_01;

	animation-range: entry 20% cover 80%;
	animation-fill-mode: both;
	
}

@keyframes img_mn_anim {
	0% {opacity: 0; scale: 50%;filter: blur(0px);} 
	80% {opacity: 1; scale: 100%;filter: blur(0px);} 
	100% {opacity: 0; scale: 200%;filter: blur(5px);}
}
.img_mn_anim {
	view-timeline-name: --img_mn_anim;
	view-timeline-axis: block;

	animation-timeline: --img_mn_anim;
	animation-name: img_mn_anim;

	animation-range: entry 1% cover 120%;
	animation-fill-mode: both;
	
}

@keyframes img_anim_00 {
	0% {opacity: 0; scale: 25%;filter: blur(0px);} 
	80% {opacity: 1; scale: 100%;filter: blur(0px);} 
	100% {opacity: 0; scale: 200%;filter: blur(5px);}
}
.img_anim_00 {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: img_anim_00;

	animation-range: entry 20% cover 60%;
	animation-fill-mode: both;
	
}

/* LINES ANIMATION START */

@keyframes line_anim_01 {
	0% {width: 30%; transform: translate(-50%,-50%) rotate(45deg);} 
	50% {width: 50%; transform: translate(-50em,-50em) rotate(45deg);} 
	100% {width: 10%; transform: translate(-50em,-50em) rotate(45deg);} 
}
.line_anim_01 {
	view-timeline-name: --line_anim_01;
	view-timeline-axis: block;

	animation-timeline: --line_anim_01;
	animation-name: line_anim_01;

	animation-range: entry 10% cover 110%;
	animation-fill-mode: both;
	
}

@keyframes line_anim_02 {
	0% {width: 20%; transform: translate(-300em,-300em) rotate(-320deg);} 
	50% {width: 50%; transform: translate(100em,100em) rotate(-320deg);} 
	100% {width: 10%; transform: translate(50em,50em) rotate-(320deg);} 
}
.line_anim_02 {
	view-timeline-name: --line_anim_02;
	view-timeline-axis: block;

	animation-timeline: --line_anim_02;
	animation-name: line_anim_02;

	animation-range: entry 60% cover 110%;
	animation-fill-mode: both;
	
}

/* LINES ANIMATION ENDS */

@keyframes img_brand {
	0% {transform: translate(20em,0em) scale(1); opacity: 0;filter: blur(20px);} 
	30% {transform: translate(0,0) scale(1); opacity: 1;filter: blur(0px);} 
	80% {transform: translate(0em,0em) scale(1); opacity: 1;filter: blur(0px);} 
	100% {transform: translate(0em,0em) scale(1); opacity: 0;filter: blur(0px);}
}
.img_brand {
	view-timeline-name: --img_brand;
	view-timeline-axis: block;

	animation-timeline: --img_brand;
	animation-name: img_brand;

	animation-range: entry 50% cover 105%;
	animation-fill-mode: both;
}

@keyframes img_prod_brand {
	0% {opacity: 0; scale: 25%;filter: blur(0px);} 
	50% {opacity: 1; scale: 100%;filter: blur(0px);} 
	75% {opacity: 0; scale: 40%;filter: blur(10px);}
	100% {opacity: 0; scale: 0%;filter: blur(15px);}
}
.img_prod_brand {
	view-timeline-name: --img_prod_brand;
	view-timeline-axis: block;

	animation-timeline: --img_prod_brand;
	animation-name: img_prod_brand;

	animation-range: entry 30% cover 105%;
	animation-fill-mode: both;
	
}

@keyframes anim_02 {
	0% {opacity: 1; scale: 25%;filter: blur(0px);} 
	10% {opacity: 1; scale: 100%;filter: blur(0px);} 
	80% {opacity: 1; scale: 100%;filter: blur(0px);} 
	100% {opacity: 0; scale: 0%;filter: blur(100px);}
}
.anim_02 {
	view-timeline-name: --anim_02;
	view-timeline-axis: block;

	animation-timeline: --anim_02;
	animation-name: anim_02;

	animation-range: entry 20% cover 120%;
	animation-fill-mode: both;
	
}

@keyframes txt_up {
	0% {transform: translate(0,-100px) scale(2); opacity: 0; filter: blur(0px);} 
	30% {transform: translate(0,-100px) scale(2); opacity: 0; filter: blur(0px);} 
	50% {transform: translate(0px,0) scale(1); opacity: 1; filter: blur(0px);} 
	90% {transform: translate(0px,0) scale(1); opacity: 1; filter: blur(0px);} 
	100% {transform: translate(0,0) scale(1.5); opacity: 0; filter: blur(20px);}
}
.txt_up {
	view-timeline-name: --txt_up;
	view-timeline-axis: block;

	animation-timeline: --txt_up;
	animation-name: txt_up;

	animation-range: entry 20% cover 100%;
	animation-fill-mode: both;
}

@keyframes txt_r {
	0% {transform: translate(100px,0); opacity: 0;} 
	30% {transform: translate(100px,0); opacity: 0;} 
	50% {transform: translate(0px,0); opacity: 1;} 
	90% {transform: translate(0px,0); opacity: 1;} 
	100% {transform: translate(-100px,0); opacity: 0;}
}
.txt_r {
	view-timeline-name: --txt_r;
	view-timeline-axis: block;

	animation-timeline: --txt_r;
	animation-name: txt_r;

	animation-range: entry 20% cover 90%;
	animation-fill-mode: both;
}
.txt_r_idx {
	view-timeline-name: --txt_r;
	view-timeline-axis: block;

	animation-timeline: --txt_r;
	animation-name: txt_r;

	animation-range: entry 20% cover 60%;
	animation-fill-mode: both;
}
.txt_r_ {
	view-timeline-name: --txt_r;
	view-timeline-axis: block;

	animation-timeline: --txt_r;
	animation-name: txt_r;

	animation-range: entry 20% cover 70%;
	animation-fill-mode: both;
}
.txt_r_btn {
	view-timeline-name: --txt_r;
	view-timeline-axis: block;

	animation-timeline: --txt_r;
	animation-name: txt_r;

	animation-range: entry -20% cover 70%;
	animation-fill-mode: both;
}

@keyframes right_fade {
	0% {transform: translate(20em,0) scale(1); opacity: 0;} 
	30% {transform: translate(0,0) scale(1); opacity: 1;} 
	70% {transform: translate(0,0) scale(1); opacity: 1;} 
	100% {transform: translate(-20em,0) scale(0); opacity: 0;}
}
.right_fade {
	view-timeline-name: --right_fade;
	view-timeline-axis: block;

	animation-timeline: --right_fade;
	animation-name: right_fade;

	animation-range: entry 50% cover 100%;
	animation-fill-mode: both;
}

@keyframes img_misvis {
	0% {opacity: 0; transform: translate(0,-100px);filter: blur(0px);} 
	20% {opacity: 1; transform: translate(0,0);filter: blur(0px);} 
	80% {opacity: 1; transform: translate(0,0);filter: blur(0px);} 
	100% {opacity: 0; transform: translate(0,0);filter: blur(15px);}
}
.img_misvis {
	view-timeline-name: --img_misvis;
	view-timeline-axis: block;

	animation-timeline: --img_misvis;
	animation-name: img_misvis;

	animation-range: entry 10% cover 90%;
	animation-fill-mode: both;
	
}
.img_misvis_ {
	view-timeline-name: --img_misvis;
	view-timeline-axis: block;

	animation-timeline: --img_misvis;
	animation-name: img_misvis;

	animation-range: entry 20% cover 90%;
	animation-fill-mode: both;
	
}
.img_misvis__ {
	view-timeline-name: --img_misvis;
	view-timeline-axis: block;

	animation-timeline: --img_misvis;
	animation-name: img_misvis;

	animation-range: entry 30% cover 90%;
	animation-fill-mode: both;
	
}

@keyframes mv_obj_00 {
	0% {opacity: 0; transform: translate(-10em,30em) scale(5) rotate(0deg);} 
	50% {opacity: 0.1; transform: translate(10em,-10em) scale(15) rotate(180deg);} 
	100% {opacity: 0; transform: translate(30em,-20em) scale(20) rotate(360deg);}
}
.mv_obj_00 {
	view-timeline-name: --mv_obj_00;
	view-timeline-axis: block;

	animation-timeline: --mv_obj_00;
	animation-name: mv_obj_00;

	animation-range: entry 10% cover 60%;
	animation-fill-mode: both;
}

@keyframes mv_obj_01 {
	0% {opacity: 0; transform: translate(40em,50em) scale(5) rotate(0deg);} 
	50% {opacity: 0.02; transform: translate(-10em,-10em) scale(10) rotate(-180deg);} 
	100% {opacity: 0; transform: translate(-30em,-20em) scale(15) rotate(-360deg);}
}
.mv_obj_01 {
	view-timeline-name: --mv_obj_01;
	view-timeline-axis: block;

	animation-timeline: --mv_obj_01;
	animation-name: mv_obj_01;

	animation-range: entry 10% cover 95%;
	animation-fill-mode: both;
}

@keyframes mv_obj_02 {
	0% {opacity: 0; transform: translate(-10em,30em) scale(5);} 
	50% {opacity: 0.1; transform: translate(10em,-10em) scale(15);} 
	100% {opacity: 0; transform: translate(30em,-20em) scale(20);}
}
.mv_obj_02 {
	view-timeline-name: --mv_obj_02;
	view-timeline-axis: block;

	animation-timeline: --mv_obj_02;
	animation-name: mv_obj_02;

	animation-range: entry 10% cover 60%;
	animation-fill-mode: both;
}

@keyframes mv_obj_03 {
	0% {opacity: 0; transform: translate(40em,50em) scale(5);} 
	50% {opacity: 0.1; transform: translate(-10em,-10em) scale(10);} 
	100% {opacity: 0; transform: translate(-30em,-20em) scale(15);}
}
.mv_obj_03 {
	view-timeline-name: --mv_obj_03;
	view-timeline-axis: block;

	animation-timeline: --mv_obj_03;
	animation-name: mv_obj_03;

	animation-range: entry 10% cover 95%;
	animation-fill-mode: both;
}

@keyframes ttlmv_01 {
	0% {opacity: 0; scale: 0%; letter-spacing: 0px;} 
	50% {opacity: 1; scale: 100%; letter-spacing: 0px;} 
	100% {opacity: 0; scale: 100%; letter-spacing: 5rem;}
}
.ttlmv_01 {
	view-timeline-name: --ttlmv_01;
	view-timeline-axis: block;

	animation-timeline: --ttlmv_01;
	animation-name: ttlmv_01;

	animation-range: entry 20% cover 120%;
	animation-fill-mode: both;
	
}
@keyframes ttlmv_02 {
	0% {opacity: 0; scale: 0%;} 
	50% {opacity: 1; scale: 100%;} 
	100% {opacity: 0; scale: 100%; }
}
.ttlmv_02 {
	view-timeline-name: --ttlmv_02;
	view-timeline-axis: block;

	animation-timeline: --ttlmv_02;
	animation-name: ttlmv_02;

	animation-range: entry 20% cover 120%;
	animation-fill-mode: both;
	
}

@keyframes cont_btm {
	0% {opacity: 0; transform: translate(0,-50%) scale(0);} 
	50% {opacity: 1; transform: translate(0,-25%) scale(1.);} 
	100% {opacity: 1; transform: translate(0,0) scale(1);}
}
.cont_btm {
	view-timeline-name: --cont_btm;
	view-timeline-axis: block;

	animation-timeline: --cont_btm;
	animation-name: cont_btm;

	animation-range: entry 20% cover 60%;
	animation-fill-mode: both;
	
}

@keyframes ii_anim_01 {
	0% {scale: 300%; opacity: 0.0;} 
	10% {scale: 100%; opacity: 0.1;} 
	100% {scale: 0%; opacity: 0;} 
}
.ii_anim_01 {
	view-timeline-name: --ii_anim_01;
	view-timeline-axis: block;

	animation-timeline: --ii_anim_01;
	animation-name: ii_anim_01;

	animation-range: entry 50% cover 80%;
	animation-fill-mode: both;
	
}

@keyframes carr_anim_lam_01 {
	0% { transform: translate(25em,0) scale(250%); filter: blur(0); opacity: 0;} 
	50% { transform: translate(0em,0) scale(250%); filter: blur(0); opacity: 1;} 
	100% { transform: translate(-25em,0) scale(250%); filter: blur(5px); opacity: 0;} 
}
.carr_anim_lam_01 {
	view-timeline-name: --carr_anim_lam_01;
	view-timeline-axis: block;

	animation-timeline: --carr_anim_lam_01;
	animation-name: carr_anim_lam_01;

	animation-range: entry 0% cover 65%;
	animation-fill-mode: both;
	
}

@keyframes carr_anim_lam_02 {
	0% { transform: translate(-25em,0) scale(250%); filter: blur(0); opacity: 0;} 
	50% { transform: translate(0em,0) scale(250%); filter: blur(0); opacity: 1;} 
	100% { transform: translate(25em,0) scale(250%); filter: blur(5px); opacity: 0;} 
}
.carr_anim_lam_02 {
	view-timeline-name: --carr_anim_lam_02;
	view-timeline-axis: block;

	animation-timeline: --carr_anim_lam_02;
	animation-name: carr_anim_lam_02;

	animation-range: entry 10% cover 105%;
	animation-fill-mode: both;
	
}

@keyframes carr_anim_01 {
	0% { transform: translate(25em,0) scale(200%);} 
	50% { transform: translate(0em,0) scale(200%);} 
	100% { transform: translate(-25em,0) scale(200%);} 
}
.carr_anim_01 {
	view-timeline-name: --carr_anim_01;
	view-timeline-axis: block;

	animation-timeline: --carr_anim_01;
	animation-name: carr_anim_01;

	animation-range: entry 10% cover 110%;
	animation-fill-mode: both;
	
}

@keyframes carr_anim_02 {
	0% { transform: translate(-25em,0) scale(200%);} 
	50% { transform: translate(0em,0) scale(200%);} 
	100% { transform: translate(25em,0) scale(200%);} 
}
.carr_anim_02 {
	view-timeline-name: --carr_anim_02;
	view-timeline-axis: block;

	animation-timeline: --carr_anim_02;
	animation-name: carr_anim_02;

	animation-range: entry 10% cover 110%;
	animation-fill-mode: both;
	
}