/* 
   키워드 확장 서비스 소개 페이지 전용 애니메이션 스타일
   스크롤 기반 등장 효과 및 호버 인터랙션 정의
*/

/* 1. Reveal Animation Base */
.m-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.m-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Stagger Delays */
.m-delay-100 { transition-delay: 100ms; }
.m-delay-200 { transition-delay: 200ms; }
.m-delay-300 { transition-delay: 300ms; }
.m-delay-400 { transition-delay: 400ms; }
.m-delay-500 { transition-delay: 500ms; }

/* 3. Hover & Active Effects (Mobile Friendly) */
.m-hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (hover: hover) {
    .m-hover-lift:hover {
        transform: translateY(-6px) scale(1.02) !important;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
        z-index: 50;
    }
}

/* Touch Active State */
.m-hover-lift:active {
    transform: translateY(-2px) scale(0.98) !important;
    opacity: 0.9;
}

/* 4. Specialized Reveal Variations */
.m-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
}
.m-reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.m-reveal-right {
    opacity: 0;
    transform: translateX(30px);
}
.m-reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}