@charset "utf-8";
/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */

/* visual — scroll down arrows */
@keyframes visualScrollArrow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.main .visual-section .scroll-box .arrow-wrap .icon {
    display: block;
    animation: visualScrollArrow 1.35s ease-in-out infinite;
}
.main .visual-section .scroll-box .arrow-wrap .icon:nth-child(1) { animation-delay: 0s; }
.main .visual-section .scroll-box .arrow-wrap .icon:nth-child(2) { animation-delay: 0.12s; }
.main .visual-section .scroll-box .arrow-wrap .icon:nth-child(3) { animation-delay: 0.24s; }

/* visual — circle1 & circle2 alternating opacity */
@keyframes visualCircleFade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.main .visual-section .inner .circle.circle1,
.main .visual-section .inner .circle.circle2 {
    animation: visualCircleFade 3.5s ease-in-out infinite;
}
.main .visual-section .inner .circle.circle2 {
    animation-delay: -1.75s; /* half cycle — opposite phase */
}

@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInDown {
    0% {transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}