@tailwind base;
@tailwind components;
@tailwind utilities;

/* 색상 변수 정의 */
:root {
    --disable-light: #F8F8F8;
    --disable-normal: #B8B9B4;
    --disable-dark: #8A8B87;
    --disable-darker: #40413F;

    --point-light: #F9FBFF;
    --point-normal: #C2D6FA;
    --point-dark: #92A1BC;
    --point-darker: #444B58;

    --text-title: #1D1D1D;
    --text-detail: #545454;
    --text-disabled: #8E8E8E;
    --text-white: #FFFFFF;
    --text-black: #000000;
    --text-border: #C6C6C6;
}

/* 클리핑 애니메이션 (왼쪽부터 점점 보임) */
@keyframes clipReveal {
    from {
        clip-path: inset(0 100% 0 0); /* 왼쪽만 남기고 나머지 잘라냄 */
    }
    to {
        clip-path: inset(0 0 0 0); /* 전체 다 보임 */
    }
}

.clip-reveal {
    animation: clipReveal 2500ms ease forwards;
}
/* 텍스트 블링크 */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
.animate-blink {
    animation: blink 1.2s infinite;
}

/* 로고 마스크 설정 */
.mask-logo {
    -webkit-mask-image: url('/logo.png');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-image: url('/logo.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
}