/* ========================================
   기본 설정
======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #FFFFFC;
    -webkit-tap-highlight-color: transparent;
}


/* ========================================
   생일축하 타이핑
======================================== */

.intro-overlay {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 9999;

    display: flex;

    justify-content: center;
    align-items: flex-start;

    padding-top: 80px;

    opacity: 1;

    transition: opacity 0.6s ease;

    pointer-events: none;
}


.intro-overlay.fade-out {
    opacity: 0;
}


.typing-demo {

    width: 100%;

    text-align: center;

    font-family: "Pixelify Sans", sans-serif;
    font-size: 5em;

    font-weight: 700;

    line-height: 1.1;

    color: var(--roof-color);

    text-shadow:

        -2px -2px 0 #fff,
         2px -2px 0 #fff,
        -2px  2px 0 #fff,
         2px  2px 0 #fff;
}


/* 타이핑 글자 */

#typingText {

    display: inline;

    white-space: pre-line;

    text-align: center;
}


/* 타이핑 커서 */

#typingCursor {

    display: inline-block;

    width: 3px;

    height: 0.9em;

    margin-left: 4px;

    background-color: var(--roof-color);

    vertical-align: -0.05em;
}


#typingCursor.blinking {

    animation: blink 0.5s step-end infinite alternate;
}


@keyframes blink {

    50% {
        opacity: 0;
    }

}


/* ========================================
   시작 버튼
======================================== */

.intro-buttons {

    position: absolute;

    left: 50%;

    top: 30%;

    transform: translateX(-50%);

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;
}
.intro-buttons > a {
    width: 90%;
    max-width: 270px;
    display: block;
}

.intro-buttons > a .pic-btn {
    width: 100%;
}

/* 버튼 */

.pic-btn {

    width: 90%;

    max-width: 270px;

    display: block;

    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;
}


.pic-btn img {

    display: block;

    width: 100%;

    height: auto;
}


/* 버튼 눌렀을 때 */

.pic-btn:active {

    transform: scale(0.97);
}


@media (prefers-reduced-motion: no-preference) {

    .pic-btn {

        transition: transform 0.12s ease;

    }

}
/* ========================================
   CONTACT 버튼
======================================== */

.contact {
    position: fixed;

    left: 40px;
    bottom: 20px;

    width: 120px;
    height: 120px;

    z-index: 1000;

    display: block;

    padding: 0;

    border: none;

    outline: none;

    background: none;

    cursor: pointer;

    text-decoration: none;
}


/* 이미지 */

.contact img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* 눌렀을 때 */

.contact:active {
    transform: scale(0.97);
}


@media (prefers-reduced-motion: no-preference) {

    .contact {
        transition: transform 0.12s ease;
    }

}

/* ========================================
   첫 화면 장식 이미지
======================================== */
.deco-image {
    position: fixed;
    z-index: 1;
    height: auto;
    pointer-events: none;
}


/* ========================================
   왼쪽 첫 번째 이미지
======================================== */

.deco-left {
    left: -30vw;
    top: 17vw;

    width: 220vw;
    max-width: 350px;

    pointer-events: none;

    animation: slideInLeft 0.8s ease-out forwards;
}

@keyframes slideInLeft {
    from {
        left: -30vw;
    }

    to {
        left: -1vw;
    }
}


/* ========================================
   첫 번째 버튼 왼쪽 옆 두 번째 이미지
======================================== */
.deco-left-top {
    position: fixed;

    width: 25vw;
    max-width: 180px;

    left: 20vw;
    top: 43%;

    pointer-events: auto;
    cursor: pointer;

    z-index: 10;

    animation: slideInSecond 0.8s ease-out 0.2s both;
}
@media (min-width: 769px) and (max-width: 1200px) {

    .deco-left-top {
        left: 22vw;
    }

}

@keyframes slideInSecond {

    from {
        opacity: 0;
        transform: translate(-30px, -50%);
    }

    to {
        opacity: 1;
        transform: translate(0, -50%);
    }

}