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

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


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

    overflow: hidden;
}


body {
    font-family:
        "Courier New",
        monospace;

    background: white;
}



/* =========================================
   WORLD
========================================= */

.world {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #ffffff;
}

/* =========================================
   돌아가는 톱니바퀴
========================================= */

.gear {
    position: absolute;

    width: 200px;

    left: 10%;
    top: 50%;

    animation: gearRotate 15s linear infinite;
}

@keyframes gearRotate {
    from {
        transform:
            perspective(600px)
            rotateX(65deg)
            rotateZ(0deg);
    }

    to {
        transform:
            perspective(600px)
            rotateX(65deg)
            rotateZ(360deg);
    }
}


/* =========================================
   1. 랜덤 문양 레이어
========================================= */

.symbol-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 1;

    pointer-events: none;
}



/* 각각의 문양 */

.symbol {
    position: absolute;

    width: var(--size);

    height: auto;

    opacity: var(--opacity);

    transform-origin: center;

    animation:
        symbolPulse
        var(--speed)
        ease-in-out
        infinite
        alternate;

    animation-delay:
        var(--delay);
}



/* 문양이 커졌다 작아졌다 */

@keyframes symbolPulse {

    0% {
        transform:
            scale(0.75);
    }

    100% {
        transform:
            scale(1.15);
    }

}



/* =========================================
   2. 구름 레이어
========================================= */

.cloud-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: 2;

    pointer-events: none;

    /*
        중요!

        여기에 background:white 넣지 말 것.
        문양이 구름 뒤에서 보여야 함.
    */
    background: transparent;
}



/* 구름 이미지들이 들어있는 긴 줄 */

.cloud-track {
    position: absolute;

    left: 0;
    top: 50%;

    display: flex;

    align-items: center;

    width: max-content;

    /*
        숫자가 클수록 천천히 움직임
    */

    animation:
        cloudMove
        300s
        linear
        infinite;
}



/* 각각의 구름 이미지 */

.cloud-track img {

    /*
        구름이 너무 크면
        여기 숫자를 줄이면 됨.

        40vw → 큼
        30vw → 중간
        25vw → 작음
        20vw → 더 작음
    */

    width: 35vw;

    height: auto;

    flex-shrink: 0;

    display: block;
}



/* 오른쪽으로 계속 이동 */

@keyframes cloudMove {

    from {
        transform:
            translate(-50%, -50%);
    }

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

}

/* =========================================
   강아지 발자국
========================================= */

.dogfoot-layer {
    position: absolute;
    inset: 0;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;
}


.dogfoot {
    position: absolute;

    width: 35px;
    height: auto;

    z-index: 3;

    opacity: 0;

    transform-origin: center;

    animation: dogfootAppear 2.5s ease-out forwards;
}

@keyframes dogfootAppear {
    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--rotation))
            scale(0.8);
    }

    15% {
        opacity: 0.8;
        transform:
            translate(-50%, -50%)
            rotate(var(--rotation))
            scale(1);
    }

    70% {
        opacity: 0.8;
        transform:
            translate(-50%, -50%)
            rotate(var(--rotation))
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            rotate(var(--rotation))
            scale(1);
    }
}


/* =========================================
   3. 행성 레이어
========================================= */

.planet-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 4;

    pointer-events: none;
}