/* 動畫 */

@keyframes hero-ad-bg-spin {
	0%,100%{-webkit-transform:scale(1);transform:scale(1)}
	20%{-webkit-transform:scale(1.1);transform:scale(1.1)}
	40%{-webkit-transform:scale(1);transform:scale(1)}
	70%{-webkit-transform:scale(1.1);transform:scale(1.1)}

}

@keyframes hero-ad-bird-float {
	0%{-webkit-transform:scale(1.2);transform:scale(1.2)}
	20%{-webkit-transform:scale(1);transform:scale(1)}
	40%{-webkit-transform:scale(1.2);transform:scale(1.2)}
	60%{-webkit-transform:scale(1);transform:scale(1)}
	100%{-webkit-transform:scale(1.2);transform:scale(1.2)}
}


@keyframes hero-ad-text-sway {
	0%,
	64%,
	100% { transform: rotate(0deg); }
	72% { transform: rotate(-4deg); }
	80% { transform: rotate(3.5deg); }
	88% { transform: rotate(-2deg); }
	96% { transform: rotate(0deg); }
}

@keyframes hero-char-idle {
	0%,
	100% { transform: translateY(0)   scale(1); }
	50% { transform: translateY(-3px)  scale(1.005); }
}

@keyframes hero-fish-idle {
	0%,
	100% { transform: translateY(0) rotate(-1.5deg) scale(1); }
	50% { transform: translateY(-5px) rotate(1.5deg) scale(1.02); }
}


@keyframes hero-slogan-idle {
	0%,
	100% { transform: translateY(0)   scale(1); }
	50% { transform: translateY(10px)  scale(1); }
}

@keyframes reg-char-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.4deg) scale(1); }
	50% { transform: translateY(-4px) rotate(1deg) scale(1.01); }
}
@keyframes reg-title-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.25deg) scale(1.01); }
	50% { transform: translateY(-10px) rotate(0.25deg) scale(1); }
}

@keyframes reg-sub-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.2deg) scale(1); }
	50% { transform: translateY(-3px) rotate(0.2deg) scale(1.05); }
}
@keyframes benefit-char-breathe {
	0%,
	100% { transform: translateY(0) rotate(-0.5deg) scale(1); }
	50% { transform: translateY(-10px) rotate(0.5deg) scale(1.015); }
}
@keyframes benefit-dog-idle {
	0%,
	100% { transform: translateY(0)  rotate(-0.5deg) scale(1); }
	50% { transform: translateY(-15px)  rotate(1deg)  scale(1.012); }
}


@keyframes recall-char-idle {
	0%,
	100% { transform: translateY(0)  rotate(-0.005deg)  scale(1); }
	50% { transform: translateY(-5px)  rotate(1deg) scale(1.01); }
}

@keyframes recall-title-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.2deg) scale(1); }
	50% { transform: translateY(-3px) rotate(0.2deg) scale(1.05); }
}

@keyframes invite-rabbit-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.8deg) scale(1); }
	50% { transform: translateY(-10px) rotate(0.8deg) scale(1.02); }
}

@keyframes invite-dragon-idle {
	0%,
	100% { transform: translateY(-10px) rotate(1deg) scale(1.01);  }
	50% { transform: translateY(0) rotate(-0.8deg) scale(1);}
}

@keyframes invite-title-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.25deg) scale(1); }
	50% { transform: translateY(-3px) rotate(0.25deg) scale(1.05); }
}

@keyframes friend-title-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.25deg) scale(1); }
	50% { transform: translateY(-3px) rotate(0.25deg) scale(1.05); }
}

@keyframes friend-reward-idle {
	0%,
	100% { transform: translateY(0) rotate(-0.3deg) scale(1); }
	50% { transform: translateY(-4px) rotate(0.3deg) scale(1.01); }
}

/* ---------------動畫物件--------------- */
@media screen and (min-width: 1025px) {
   /* hreo */
	.hero-char {
		transform-origin: 50% 88%;
		animation: hero-char-idle 2s ease-in-out infinite;
	}

	.hero-fish{
		transform-origin: center center;
		animation: hero-fish-idle 1s ease-in-out infinite;
	}
	.hero-slogan {
		transform-origin: center center;
		animation: hero-slogan-idle 2s ease-out infinite;
	}

	.hero-ad .ad-bg {
		transform-origin: center center;
		animation: hero-ad-bg-spin 3s linear infinite;
	}

	.hero-ad .ad-bird {
		transform-origin: center center;
		animation: hero-ad-bird-float 3s ease-in-out infinite;
	}

	.hero-ad .ad-text {
		transform-origin: center center;
		animation: hero-ad-text-sway 1s ease-in-out infinite;
	}




    /* reg */
	.reg-char {
		transform-origin: 50% 90%;
		animation: reg-char-idle 2s ease-in-out infinite;
	}

	.reg-title {
		transform-origin: center center;
		animation: reg-title-idle 1s ease-in-out infinite;
	}

	.reg-sub {
		transform-origin: center center;
		animation: reg-sub-idle 1s ease-in-out infinite;
	}


    /*benefit */

	.benefit-dog {
		transform-origin: 50% 0%;
		animation: benefit-dog-idle 1s ease-in-out infinite;
	}

	.benefit-char {
		transform-origin: 50% 90%;
		animation: benefit-char-breathe 1.5s ease-in-out infinite;
	}

    /*recall */
	.recall-title {
		transform-origin: center center;
		animation: recall-title-idle 2s ease-in-out infinite;
	}
	.recall-char {
		transform-origin: 50% 100%;
		animation: recall-char-idle 2s ease-in-out infinite;
	}

	 /*invite */			
	.invite-title {
		transform-origin: center center;
		animation: invite-title-idle 2s ease-in-out infinite;
	}

	.invite-rabbit {
		transform-origin: 50% 92%;
		animation: invite-rabbit-idle 2s ease-in-out infinite;
	}

	.invite-dragon {
		transform-origin: center center;
		animation: invite-dragon-idle 2s ease-in-out infinite;
	}


    /*friend */
	.friend-title {
		transform-origin: center center;
		animation: friend-title-idle 2s ease-in-out infinite;
	}

	.friend-wing {
		transform-origin: 50% 80%;
		animation: friend-reward-idle 2s ease-in-out infinite;
	}

	html.is-hero-pending .hero-char,
	html.is-hero-pending .hero-slogan,
	html.is-hero-pending .hero-native,
	html.is-hero-pending .hero-cat,
	html.is-hero-pending .hero-rabbit,
	html.is-hero-pending .hero-fish,
	html.is-hero-pending .gnb,
	html.is-hero-pending .socials,
	html.is-hero-pending .hero-ad,
	html.is-hero-pending .top-btn {
		opacity: 0;
	}

	html.is-hero-pending .hero-char,
	html.is-hero-pending .hero-slogan,
	html.is-hero-pending .hero-fish,
	html.is-hero-pending .hero-ad .ad-bg,
	html.is-hero-pending .hero-ad .ad-bird,
	html.is-hero-pending .hero-ad .ad-text,
	.hero-char.is-entering,
	.hero-slogan.is-entering,
	.hero-fish.is-entering,
	.hero-ad.is-entering .ad-bg,
	.hero-ad.is-entering .ad-bird,
	.hero-ad.is-entering .ad-text {
		animation: none;
	}

	html.is-reg-armed .p01 .reg-title,
	html.is-reg-armed .p01 .reg-panel,
	html.is-reg-armed .p01 .reg-reward,
	html.is-reg-armed .p01 .reg-char,
	html.is-reg-armed .p01 .reg-sub {
		opacity: 0;
	}

	html.is-reg-armed .p01 .reg-title,
	html.is-reg-armed .p01 .reg-char,
	html.is-reg-armed .p01 .reg-sub,
	.p01 .reg-title.is-entering,
	.p01 .reg-char.is-entering,
	.p01 .reg-sub.is-entering {
		animation: none;
	}

	html.is-ben-armed .p02 .benefit-title,
	html.is-ben-armed .p02 .benefit-char,
	html.is-ben-armed .p02 .benefit-board,
	html.is-ben-armed .p02 .benefit-dog {
		opacity: 0;
	}

	html.is-ben-armed .p02 .benefit-char,
	html.is-ben-armed .p02 .benefit-dog,
	.p02 .benefit-char.is-entering,
	.p02 .benefit-dog.is-entering {
		animation: none;
	}

	html.is-rec-armed .p03 .recall-char,
	html.is-rec-armed .p03 .recall-title,
	html.is-rec-armed .p03 .recall-board,
	html.is-rec-armed .p03 .recall-board-char,
	html.is-rec-armed .p03 .recall-reward,
	html.is-rec-armed .p03 .recall-btn,
	html.is-rec-armed .p03 .recall-front {
		opacity: 0;
	}

	html.is-rec-armed .p03 .recall-char,
	html.is-rec-armed .p03 .recall-title,
	.p03 .recall-char.is-entering,
	.p03 .recall-title.is-entering {
		animation: none;
	}

	html.is-rec-armed .p03 .recall-btn,
	.p03 .recall-btn.is-entering {
		transition: none;
	}

	html.is-inv-armed .p04 .invite-title,
	html.is-inv-armed .p04 .invite-rabbit,
	html.is-inv-armed .p04 .invite-dragon,
	html.is-inv-armed .p04 .invite-reward,
	html.is-inv-armed .p04 .invite-btn,
	html.is-inv-armed .p04 .invite-kbn,
	html.is-inv-armed .p04 .invite-kbtn {
		opacity: 0;
	}

	html.is-inv-armed .p04 .invite-title,
	html.is-inv-armed .p04 .invite-rabbit,
	html.is-inv-armed .p04 .invite-dragon,
	.p04 .invite-title.is-entering,
	.p04 .invite-rabbit.is-entering,
	.p04 .invite-dragon.is-entering {
		animation: none;
	}

	html.is-inv-armed .p04 .invite-btn,
	html.is-inv-armed .p04 .invite-kbtn,
	.p04 .invite-btn.is-entering,
	.p04 .invite-kbtn.is-entering {
		transition: none;
		pointer-events: none;
	}

	html.is-fri-armed .p05 .friend-title,
	html.is-fri-armed .p05 .friend-wing,
	html.is-fri-armed .p05 .friend-content,
	html.is-fri-armed .p05 .friend-bomb,
	html.is-fri-armed .p05 .friend-btn {
		opacity: 0;
	}

	html.is-fri-armed .p05 .friend-title,
	html.is-fri-armed .p05 .friend-wing,
	.p05 .friend-title.is-entering,
	.p05 .friend-wing.is-entering {
		animation: none;
	}

	html.is-fri-armed .p05 .friend-btn,
	.p05 .friend-btn.is-entering {
		transition: none;
		pointer-events: none;
	}







}