@font-face {
    font-family: 'OneStoreMobilePop';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

body {
    overflow: hidden;
}

.intro_bg {
    width: 100vw;
    height: 100vh;
    animation: changebg 5s linear;
    animation-fill-mode: forwards;
}


@keyframes changebg {
    /* 0%: 깊은 밤 - 가장 어두운 상태 */
    0% {
        background: linear-gradient(180deg, #2D3D57 0%, #3C668F 60%, #81A9CC 100%);
    }
    /* 20%: 동트기 직전 - 어둠이 위로 밀려 올라감 */
    20% {
        background: linear-gradient(180deg, #2D3D57 0%, #3C668F 40%, #81A9CC 100%);
    }
    /* 40%: 여명의 시작 - 아래쪽에서 따뜻한 태양빛(포인트색)이 살짝 보임 */
    40% {
        background: linear-gradient(180deg, #2D3D57 0%, #3C668F 30%, #81A9CC 70%, #FFDB83 100%);
    }
    /* 60%: 해가 떠오름 - 어둠이 거의 사라지고 지평선이 밝아짐 */
    60% {
        background: linear-gradient(180deg, #3C668F 0%, #81A9CC 50%, #FFDB83 90%, #E9B1A0 100%);
    }
    /* 80%: 완전한 여명 - 푸른 하늘이 넓어지고 따뜻한 기운이 퍼짐 */
    80% {
        background: linear-gradient(180deg, #3C668F 0%, #81A9CC 60%, #FFDB83 95%);
    }
    /* 100%: 최종 상태 - 상쾌하고 밝은 아침 하늘 */
    100% {
        background: linear-gradient(180deg, #3C668F 5%, #81A9CC 70%, #ffca37 100%);
    }
}

.stars {
  /* 1. 아주 작은 흰색 점 하나를 만듭니다 (별의 기본형) */
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%; /* 둥글게 */
  
  /* 2. 화면 상단에 배치 (여명 하늘) */
  position: absolute;
  top: 10%; /* 부모 요소 기준 위치 */
  left: 50%;
  transform: translateX(-50%);
  
  /* 3. box-shadow로 수십 개의 별 복사하기! */
  /* 구조: x축위치 y축위치 흐림정도 확산정도 색상 */
  box-shadow: 
    150px 50px 1px white,
    -200px 80px 1.5px rgba(255, 255, 255, 0.8),
    300px 120px 1px white,
    -100px -30px 2px rgba(255, 255, 255, 0.6),
    /* ... 원하는 만큼 쉼표로 구분해서 추가 ... */
    400px 200px 1px white,
    -150px 130px 2px rgba(255, 255, 255, 0.6),
    200px 200px 1px white,
    500px 130px 1px rgba(255, 255, 255, 0.6),
    -400px 150px 2px white,
    -300px 80px 1px rgba(255, 255, 255, 0.6);

    animation: fade 4s linear infinite;
    /* animation-fill-mode: forwards; */
}

/* 상단의 star 투명도 변하는 애니메이션 */
@keyframes fade {
    0% { opacity: 1;}
    33% { opacity: 0.7;}
    66% { opacity: 0.3;}
    100% {opacity: 0;}
}

/* sun 올라올 때 그라데이션 변하는 애니메이션 */
@keyframes chgradient {
        0% {
            background: radial-gradient(at 30% 20%, #FFDB83, #ffca37); 
        }
        50% {
            background: radial-gradient(at 30% 20%, #FFDB83, #ffe18f);
        }
        100% {
            background: radial-gradient(at 10% 10%, #FFDB83, #ffffff);
        }
    }

/* pc버전 css 소스 */
@media screen and (min-width: 1024px) {
    
    .sun_wrapper {
        width: 15rem;
        height: 15rem;
        position: absolute;
        bottom: -15rem;
        left: 50%;
        animation: dawn 4s linear;
        animation-fill-mode: forwards;
        filter: drop-shadow(0px 0px 30px rgba(255, 243, 192, 1));
        transition: all 0.5s ease;
    }

    .sun {
        width: 100%;
        height: 100%;
        clip-path: circle(50% at 50% 50%);
        animation: chgradient 4s linear;
        animation-fill-mode: forwards;
        position: relative;
        align-content: center;
        text-align: center;
    }

    /* sun 위치 이동 애니메이션 - pc버전 */
    @keyframes dawn {
        from {
            transform: translateX(-50%) translateY(10%);
        }
        to {
            transform: translateX(-50%) translateY(-250%);
        }
    }
    
    .sun a {
        font-family: 'OnestoreMobilePop', sans-serif;
        color: rgb(255, 157, 46);
        font-size: 3.5rem;
        opacity: 0;
        transition: all 0.5s linear;
    }

    .sun:hover a {
        opacity: 1;  
    }
    
    .sun_wrapper:hover {
        filter: drop-shadow(0px 0px 30px rgb(233, 177, 160));
    }

    .cloud1 {
        width: 9rem;
        height: 3rem;
        background-color: #fff;
        border-radius: 1.5rem;
        position: absolute;
        bottom: 25%;
        left: -5%;
        animation: slide 4s ease-out;
        animation-fill-mode: forwards;
        opacity: .7;        
    }

    .cloud1::before {
        content: '';
        width: 4.5rem;
        height: 4.5rem;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 12%;
        bottom: 25%;
    }

    .cloud1::after {
        content: '';
        width: 3rem;
        height: 3rem;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        right: 10%;
        bottom: 45%;
    }

    .cloud2 {
        width: 9rem;
        height: 3rem;
        background-color: #fff;
        border-radius: 1.5rem;
        position: absolute;
        bottom: 20%;
        right: -5%;
        opacity: 0.7;
        animation: slide2 4s ease-out;
        animation-fill-mode: forwards;
    }

    .cloud2::before {
        content: '';
        width: 4.5rem;
        height: 4.5rem;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        right: 15%;
        bottom: 35%;
    }

    .cloud2::after {
        content: '';
        width: 3rem;
        height: 3rem;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        left: 12%;
        bottom: 35%;
    }

}

/* pc버전 이외 css 소스 */
@media screen and (max-width: 1024px) {

    .sun_wrapper {
        width: 10rem;
        height: 10rem;
        position: absolute;
        bottom: -15rem;
        left: 50%;
        animation: dawn 6s linear;
        animation-fill-mode: forwards;
        align-content: center;
        filter: drop-shadow(0px 0px 30px rgba(255, 243, 192, 1));
        transition: all 1s ease;
    }

    .sun {
        width: 100%;
        height: 100%;
        clip-path: circle(50% at 50% 50%);
        animation: chgradient 6s linear;
        animation-fill-mode: forwards;
        position: relative;
        align-content: center;
        text-align: center;
    }

    /* pc버전 이외 sun 위치변경 애니메이션 */
    @keyframes dawn {
        from {
            transform: translateX(-50%) translateY(10%);
        }
        to {
            transform: translateX(-50%) translateY(-400%);
        }
    }

    .sun a {
        font-family: 'OnestoreMobilePop', sans-serif;
        color: rgb(255, 157, 46);
        font-size: 2rem;
    }

    .cloud1 {
        width: 9rem;
        height: 3rem;
        background-color: #eef;
        border-radius: 1.5rem;
        position: absolute;
        bottom: 30%;
        left: -25%;
        animation: slide 4s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .5s;
        opacity: 0.7;
    }

    .cloud1::before {
        content: '';
        width: 4.5rem;
        height: 4.5rem;
        background-color: #eef;
        border-radius: 50%;
        position: absolute;
        left: 12%;
        bottom: 25%;
    }

    .cloud1::after {
        content: '';
        width: 3rem;
        height: 3rem;
        background-color: #eef;
        border-radius: 50%;
        position: absolute;
        right: 10%;
        bottom: 45%;
    }

    .cloud2 {
        width: 9rem;
        height: 3rem;
        background-color: #eef;
        border-radius: 1.5rem;
        position: absolute;
        bottom: 25%;
        right: -25%;
        animation: slide2 4s ease-out;
        animation-fill-mode: forwards;
        animation-delay: .5s;
        opacity: 0.7;
    }

    .cloud2::before {
        content: '';
        width: 4.5rem;
        height: 4.5rem;
        background-color: #eef;
        border-radius: 50%;
        position: absolute;
        right: 15%;
        bottom: 35%;
    }

    .cloud2::after {
        content: '';
        width: 3rem;
        height: 3rem;
        background-color: #eef;
        border-radius: 50%;
        position: absolute;
        left: 12%;
        bottom: 35%;
    }

}

.wrapper1 {
    width: 100vw;
    height: 17vh;
    position: absolute;
    left: -100vw;
    bottom: 0rem;
    animation: slide 4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 4s;
    filter: drop-shadow(0 -0.1rem 1rem rgba(233, 177, 160, 0.7));
}

.mountain1 {
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 15%, 5% 0%, 10% 15%, 15% 10%, 25% 5%, 30% 0%, 40% 15%, 45% 10%, 55% 15%, 65% 0%, 70% 5%, 80% 10%, 90% 5%, 100% 20%, 100% 100%, 0% 100%);
    background-color: #81A9CC;    
    
}

.wrapper2 {
    width: 100vw;
    height: 15vh;
    position: absolute;
    left: 100vw;
    bottom: 0rem;
    animation: slide2 4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    filter: drop-shadow(0 -0.1rem 0.1rem rgba(50, 50, 50, 0.3));
}

.mountain2 {
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 30%, 10% 0%, 20% 10%, 25% 15%, 35% 5%, 45% 15%, 60% 25%, 75% 5%, 80% 15%, 90% 10%, 95% 15%, 100% 0%, 100% 100%, 0% 100%);
    background-color: #3C668F;
}

.wrapper3 {
    width: 100vw;
    height: 13vh;
    position: absolute;
    left: -100vw;
    bottom: 0rem;
    animation: slide 4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    filter: drop-shadow(0 -0.1rem 0.1rem rgba(30, 30, 30, 0.3));
}

.mountain3 {
    width: 100%;
    height: 100%;
    clip-path: polygon(0% 45%, 15% 28%, 22% 30%, 35% 22%, 45% 20%, 60% 0%, 63% 5%, 68% 10%, 75% 15%, 80% 20%, 85% 20%, 90% 25%, 100% 30%, 100% 100%, 0% 100%);
    background-color: #2D3D57;    
}

/* moutain, cloud 위치 이동 좌->우 */
@keyframes slide {
    at {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

/* moutain, cloud 위치 이동 우->좌 */
@keyframes slide2 {
    at {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}