/* ========================================== INTRO ANIMATION ========================================== */
/* 01. 설명 문구 등장 및 축소 */
.hero-desc {
    transform-origin: center center;
    animation: introDesc 2s cubic-bezier(.22, 1, .36, 1) .1s both;
}
@keyframes introDesc {
    0% {
        opacity: 0;
        transform: translateY(52px) scale(1.6);
    }
    35% {
        opacity: 1;
        transform: translateY(24px) scale(1.6);
    }
    52% {
        opacity: 1;
        transform: translateY(24px) scale(1.6);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* 02. 헤더 등장 - 제자리 페이드인 */
.header-wrap {
    animation: introHeader .8s ease-out 1.2s both;
}
@keyframes introHeader {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* 03. 메인 타이틀 등장 */
.hero-title {
    animation: introTitle .8s ease-out 1.2s both;
}
@keyframes introTitle {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 04. 플랫폼 이미지 - 제자리 페이드인 */
.hero-platforms {
    animation: introTitle .8s ease-out 1.2s both;
}
@keyframes introPlatforms {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* ========================================== MOBILE ========================================== */
@media (max-width: 767px) {
    @keyframes introDesc {
        0% {
            opacity: 0;
            transform: translateY(35px) scale(1.45);
        }
        35% {
            opacity: 1;
            transform: translateY(15px) scale(1.45);
        }
        52% {
            opacity: 1;
            transform: translateY(15px) scale(1.45);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}
@media (max-width: 360px) {
    @keyframes introDesc {
        0% {
            opacity: 0;
            transform: translateY(35px) scale(1.35);
        }
        35% {
            opacity: 1;
            transform: translateY(15px) scale(1.35);
        }
        52% {
            opacity: 1;
            transform: translateY(15px) scale(1.35);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}
.portfolio-wrap,
.service-wrap,
.cta-wrap,
.footer-wrap {
    animation: introSection .8s ease-out 1.2s both;
}
@keyframes introSection {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* ========================================== REDUCED MOTION ========================================== */
@media (prefers-reduced-motion: reduce) {
    .header-wrap,
    .hero-title,
    .hero-desc,
    .hero-platforms,
    .portfolio-wrap,
    .service-wrap,
    .cta-wrap,
    .footer-wrap {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}