/* 背景 */
[data-at="entry"].visible.bg-vision .bg-block__item:has(.sec-block){
							animation-name:sec-mask_fadeIn; 
							animation-duration:1.1s;
							animation-delay:0s;
							animation-fill-mode:forwards;
							animation-timing-function:linear;
				           }
@keyframes sec-mask_fadeIn{ 0%{ -webkit-mask-size:0vw 0vw;
										mask-size:0vw 0vw; 
									background-size:0vw 0vw;
							   }
							100%{ -webkit-mask-size:145vw 145vw;
										mask-size:145vw 145vw; 
									background-size:145vw 145vw; 
								}
						  }
@media (max-width:900px){

					@keyframes sec-mask_fadeIn{ 0%{ -webkit-mask-size:0vw 0vw;
														mask-size:0vw 0vw; 
													background-size:0vw 0vw;
												   }
												100%{ 
													-webkit-mask-size:200vw 200vw;
														mask-size:200vw 200vw; 
													background-size:200vw 200vw; 
													}
						                         }
}

.sec-block{ opacity:0;}	
[data-at="entry"].visible.bg-vision .sec-block{ animation-name:sec-block_fadeIn; 
												animation-duration:0.5s;
												animation-delay:0s;
												animation-fill-mode:forwards;
												animation-timing-function:linear;
											}	

@keyframes sec-block_fadeIn{ 0%{ opacity:0;}
							 100%{ opacity:1;}
						    }


.bg-vision .ttl-block{ opacity:0;}
[data-at="entry"].visible.bg-vision .ttl-block{
						animation-name:ttl-vision_fadeIn,ttl-vision_an; 
						animation-duration:0.5s,2s;
						animation-delay:0s,0.2s;
						animation-fill-mode:forwards,none;
						animation-iteration-count:1,infinite;
						animation-timing-function:ease-in-out;
						transform-origin:center center;
                        animation-composition:accumulate;
                        }						
@keyframes ttl-vision_an{ 0%, 100%{ transform:translateY(0.5%);}
			              50%{ transform:translateY(-2%);}
			            }						
@keyframes ttl-vision_fadeIn{ 0%{ transform:translateY(-25%) scale(0.6); opacity:0; }
					          100%{ transform:translateY(0%) scale(1); opacity:1; }
				             }

@media (max-width:700px){

					@keyframes ttl-vision_an{ 0%, 100%{ transform:translateY(0.45%);}
											  50%{ transform:translateY(-1.95%);}
											}		

}

.particles-eff{ opacity:0;}
[data-at="entry"].visible.bg-vision .particles-eff{ animation-name:particles_fadeIn;
													animation-duration:.5s;
													animation-delay:0s;  
													animation-fill-mode:forwards;
													}
@keyframes particles_fadeIn{ 0%{ opacity:0;}
		                     100%{ opacity:1;}
                            }	
							
							
/*logo*/
.logo-block{ opacity:0;}
[data-at="entry"]#header.visible .logo-block{ animation-name:logo_fadeIn; 
											  animation-duration:0.5s;
											  animation-delay:0.45s;
											  animation-fill-mode:forwards;
											  animation-timing-function:ease-in-out;
											 }
@keyframes logo_fadeIn{ 0%{ opacity:0;}
					    100%{ opacity:1;}
				       }

/*次選單*/
.otr-menu{ opacity:0;}
[data-at="entry"]#header.visible .otr-menu{ animation-name:top-block_fadeIn; 
											animation-duration:0.5s;
											animation-delay:0.45s;
											animation-fill-mode:forwards;
											animation-timing-function:ease-in-out;
											}

@keyframes top-block_fadeIn{ 0%{ opacity:0;}
					         100%{ opacity:1;}
				           }


/*event-block*/
.event-part01, .event-part02{ opacity:0;}
[data-at="entry"].visible.event-part01,
[data-at="entry"].visible.event-part02{ animation:event-block_fadeIn 1s ease 0s forwards;}
@keyframes event-block_fadeIn{ 0%{ transform:translateY(3%); opacity:0; }
						       100%{ transform:translateY(0%); opacity:1; }
                             }


/*人物頭像*/
[class*="cha-icon0"]{ opacity:0;}
[data-at="entry"].visible[class*="cha-icon0"]{ animation:cha-icon_fadeIn 1s ease 0s forwards;}
@keyframes cha-icon_fadeIn{ 0%{ transform:scale(0.25); opacity:0; }
						    100%{ transform:scale(1); opacity:1; }
                           }


/*event-內容*/
.item-con{ opacity:0;}
.item-con:has(.ticket-block){ opacity:1;}
[data-at="entry"].visible.item-con{ animation:item-con_fadeIn 1s ease 0.3s forwards;}
@keyframes item-con_fadeIn{ 0%{ transform:translateY(-10%); opacity:0;}
							100%{ transform:translateY(0%); opacity:1;}
                          }
/* 開獎號碼區塊 */		
.ticket-block{ opacity:0;}
[data-at="entry"].visible.ticket-block{ animation:ticket-block_fadeIn 0.75s ease 0.4s forwards;}
@keyframes ticket-block_fadeIn{ 0%{ transform:translateY(-10%); opacity:0;}
							    100%{ transform:translateY(0%); opacity:1;}
						       }

/* 注意事項 */      
.notice-block{ opacity:0;}
[data-at="entry"].visible.notice-block{ animation:notice-block_fadeIn 1s ease 0.3s forwards;}
@keyframes notice-block_fadeIn{ 0%{ transform:translateY(-10%); opacity:0;}
                                100%{ transform:translateY(0%); opacity:1;}
						      }
                           
/*氣球*/
[class*="deco-balloon0"] .balloon-an{ opacity:0;}
[data-at="entry"].visible:is(.deco-balloon01, .deco-balloon03, .deco-balloon05) .balloon-an{ animation:deco-balloon-lt_fadeIn 1s ease 0.5s forwards; }
[data-at="entry"].visible:is(.deco-balloon02, .deco-balloon04, .deco-balloon06) .balloon-an{ animation:deco-balloon-rt_fadeIn 1s ease 0.5s forwards; }
@keyframes deco-balloon-lt_fadeIn{ 0%{ transform:translateY(12%) translateX(1.1%) scale(0.95); opacity:0; }
							       100%{ transform:translateY(0%) translateX(0%) scale(1); opacity:1; }
							     }
@keyframes deco-balloon-rt_fadeIn{ 0%{ transform:translateY(12%) translateX(-1.1%) scale(0.95); opacity:0;}
							       100%{ transform:translateY(0%) translateX(0%) scale(1); opacity:1; }
							     }