/*** NAVIGATION ***/

/* NAVIGATION > animation hover-nav */
:root {
    --hovernav-duration: 0.5s;
    --hovernav-height: calc((1.525rem + 3.3vw) * 1.2); /* .display-3 line-height */
}

@media(min-width: 1400px) {
    :root {
        --hovernav-height: calc(4rem * 1.2); /* .display-3 line-height */
    }
}

#hover-nav li.nav-item {
    height: var(--hovernav-height);
    overflow: hidden;
}

#hover-nav a.nav-link span {
    height: var(--hovernav-height);
}

#hover-nav a.nav-link {
    height: calc(var(--hovernav-height) * 2);
    transform: translateY(0%);
    transition: 0.3s;
}

#hover-nav a.nav-link:hover {
    transform: translateY(-50%);
}


/*** SECTION - MAIN ***/

/* MAIN > animation text */
:root {
    --words: 26; /* p.word 개수 */
    --azword-duration: 26s; /* (p.word 26개)s */
    --azword-height: calc((1.675rem + 5.1vw) * 1.2); /* .dispaly-0 line-height */
}

@media(min-width: 1400px) {
    :root {
        --azword-height: calc(9rem * 1.2); /* .dispaly-0 line-height */
    }
}

#animated-azword {
    height: var(--azword-height);
    overflow: hidden;
}

#animated-azword p.word {
    height: var(--azword-height);
    margin-bottom: 0;
    text-align: center;
}

#animated-azword .warp-word {
    height: fit-content;
}

#animated-azword p.word:first-child {
    /* animation: azword var(--azword-duration) infinite; */
    animation-name: azword;
    animation-duration: var(--azword-duration);
    animation-iteration-count: infinite;
}

@keyframes azword {
    /* (100 / p.word 26개 = 3.84) * n % {} */
    0% {
        margin-top: var(--azword-height);
    }

    3.84% {
        margin-top: 0px;
    }

    7.68% {
        margin-top: calc(var(--azword-height) * -1);
    }

    11.52% {
        margin-top: calc(var(--azword-height) * -2);
    }

    15.36% {
        margin-top: calc(var(--azword-height) * -3);
    }

    19.2% {
        margin-top: calc(var(--azword-height) * -4);
    }

    23.04% {
        margin-top: calc(var(--azword-height) * -5);
    }

    26.88% {
        margin-top: calc(var(--azword-height) * -6);
    }

    30.72% {
        margin-top: calc(var(--azword-height) * -7);
    }

    34.56% {
        margin-top: calc(var(--azword-height) * -8);
    }

    38.4% {
        margin-top: calc(var(--azword-height) * -9);
    }

    42.24% {
        margin-top: calc(var(--azword-height) * -10);
    }

    46.08% {
        margin-top: calc(var(--azword-height) * -11);
    }

    49.92% {
        margin-top: calc(var(--azword-height) * -12);
    }

    53.76% {
        margin-top: calc(var(--azword-height) * -13);
    }

    57.6% {
        margin-top: calc(var(--azword-height) * -14);
    }

    61.44% {
        margin-top: calc(var(--azword-height) * -15);
    }

    65.28% {
        margin-top: calc(var(--azword-height) * -16);
    }

    69.12% {
        margin-top: calc(var(--azword-height) * -17);
    }

    72.96% {
        margin-top: calc(var(--azword-height) * -18);
    }

    76.8% {
        margin-top: calc(var(--azword-height) * -19);
    }

    80.64% {
        margin-top: calc(var(--azword-height) * -20);
    }

    84.48% {
        margin-top: calc(var(--azword-height) * -21);
    }

    88.32% {
        margin-top: calc(var(--azword-height) * -22);
    }

    92.16% {
        margin-top: calc(var(--azword-height) * -23);
    }

    96% {
        margin-top: calc(var(--azword-height) * -24);
    }

    99.84%, 100% {
        margin-top: calc(var(--azword-height) * -25);
    }
}


/* MAIN > fadeout text */
#animated-azword p.word span:first-child {
    animation-name: fade_out1;
}

#animated-azword p.word span:last-child {
    animation-name: fade_out2;
}

#animated-azword p.word span {
    animation-duration: calc(var(--azword-duration) / var(--words) * 2); /* (--azword-duration / p.word 개수) * 2 */
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

#animated-azword p.word:nth-child(2n) span {
    animation-delay: calc(var(--azword-duration) / var(--words));
}

@keyframes fade_out1 {

    50% {
        opacity: 1;
    }
    65%, 100% {
        opacity: 0;
    }
}

@keyframes fade_out2 {

    40% {
        opacity: 1;
    }
    60%, 100% {
        opacity: 0;
    }
}

/* MAIN > animation progress-bar-scale */
.progress-bar-scale {
    position: relative;
    height: 2px;
    overflow: hidden;
    background-color: var(--bs-gray-300);
}

.progress-bar-scale::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--bs-primary);
    /* animation: progress-scale var(--azword-duration) linear infinite; */
    animation-name: progress-scale;
    animation-duration: var(--azword-duration);
    transition-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes progress-scale {
    to {
        transform: scaleX(1);
    }
}

/* MAIN > animation progress-bar */
.progress-bar .progress-active {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateX(0%);
    transform-origin: left center;
    /* animation: progress var(--azword-duration) linear infinite; */
    animation-name: progress;
    animation-duration: var(--azword-duration);
    transition-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes progress {
    to {
        transform: translateX(calc(100% - 0.4rem));
    }
}


/*** SECTION - BUSINESS ***/

/* BUSINESS > animation svg */

    /* svg > OS, DB, Web+WAS, App */
#business .svg_scale:nth-of-type(2) {
    --circle: calc(1 - 1);
    transform-origin: 48% 28%;
}

#business .svg_scale:nth-of-type(3) {
    --circle: calc(2 - 1);
    transform-origin: 37% 66%;
}
 
#business .svg_scale:nth-of-type(4) {
    --circle: calc(3 - 1);
    transform-origin: 76% 56%;
}

#business .svg_scale {
    animation-name: cir_scale; /* @keyframes에 지정한 이름 */
    animation-duration: .6s; /* 동작 시간 */
    animation-timing-function: ease-out; /* 움직임 속도 */
    animation-iteration-count: infinite; /* 재생 횟수 */
    animation-direction: alternate; /* 반복 방향 */
    animation-fill-mode: forwards; /* 시작, 끝 상태 */
    animation-delay: calc(var(--circle) * 00.2s); /* 동작 딜레이 */
}

@keyframes cir_scale {
    from {
        transform: scale(1, 1);
        opacity: 0.7;
    }
    to {
        transform: scale(1.03, 1.03);
        opacity: 1;
    }
}

    /* svg > HW, Network, Backup */
#business .svg_rotate {
    animation-name: rd_rotate; /* @keyframes에 지정한 이름 */
    animation-duration: 6s; /* 동작 시간 */
    animation-timing-function: linear; /* 움직임 속도 */
    animation-iteration-count: infinite; /* 재생 횟수 */
}

#business circle.svg_rotate {
    transform-origin: 50% 35%;
}

@keyframes rd_rotate {
    100% {
        transform: rotate(360deg);
    }
}


/*** SECTION - PROJECT ***/

/* PROJECT > animation box */
#project ul li:nth-of-type(1) .box {
    --box: calc(1 - 1);
}

#project ul li:nth-of-type(2) .box {
    --box: calc(2 - 1);
}

#project ul li:nth-of-type(3) .box {
    --box: calc(3 - 1);
}

#project ul li:nth-of-type(4) .box {
    --box: calc(4 - 1);
}

#project ul li:nth-of-type(5) .box {
    --box: calc(5 - 1);
}

#project ul li:nth-of-type(6) .box {
    --box: calc(6 - 1);
}

#project ul li:nth-of-type(7) .box {
    --box: calc(7 - 1);
}

#project ul li:nth-of-type(8) .box {
    --box: calc(8 - 1);
}

#project ul li:nth-of-type(9) .box {
    --box: calc(9 - 1);
}

#project ul li:nth-of-type(10) .box {
    --box: calc(10 - 1);
}

#project ul li:nth-of-type(11) .box {
    --box: calc(11 - 1);
}

#project ul li:nth-of-type(12) .box {
    --box: calc(12 - 1);
}

.box {
    /* animation: fade_in 3s ease-out forwards; */
    animation-name: fade_in;
    animation-duration: 3s;
    transition-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: calc(var(--box) * 00.06s);
    opacity: 0;
}

@keyframes fade_in {

    0%,
    14% {
        opacity: 0;
        transform: translateY(1rem) scale(0.95);
    }

    15% {
        opacity: 0.25;
    }

    30%,
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/** PROJECT > hover **/
:root {
    --duration-hover: 0.5s;
}

/* PROJECT > hover: animation box */
#project .box {
    overflow: hidden;
}

#project .box a img {
    transform: scale(1.1);
}

#project .box a:hover img {
    animation-name: zoom_out;
    animation-duration: var(--duration-hover);
    transition-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes zoom_out {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

/* PROJECT > hover: fadein text */
@media(min-width: 768px){
    #project .box a dt, #project .box a dd.p-name {
        opacity: 0;
    }
    
    #project .box a:hover dt, #project .box a:hover dd.p-name {
        animation-name: fadein-text;
        animation-duration: var(--duration-hover);
        transition-timing-function: ease-out;
        animation-fill-mode: forwards;
        opacity: 1;
    }
    
    @keyframes fadein-text {
        from {
            opacity: 0;
        }
    
        to {
            opacity: 1;
        }
    }
}


/* PROJECT > hover: transY text */
@media(min-width: 768px){
    #project .box a dt {
        transform: translateY(40%);
    }
    
    #project .box a:hover dt {
        animation-name: transY-text;
        animation-duration: var(--duration-hover);
        transition-timing-function: ease-out;
        animation-fill-mode: forwards;
    }
    
    @keyframes transY-text {
        from {
            transform: translateY(40%);
        }
    
        to {
            transform: translateY(0);
        }
    }
}