/**
 * GoWash24 Animation CSS
 * ============================================================
 * USB 방식 - 이 파일만 교체하면 전체 애니메이션 변경 가능
 *
 * 사용법:
 *   <div class="animate-fade-in">...</div>
 *   <div class="animate-slide-up delay-200">...</div>
 *   <div class="animate-pulse">...</div>
 * ============================================================
 */

/* ============================================================
   1. Keyframes 정의
   ============================================================ */

/* Fade */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Pulse / Blink */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Shimmer (스켈레톤 로딩용) */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Progress Bar */
@keyframes progressGrow {
    from { width: 0; }
    to { width: var(--progress-width, 100%); }
}

/* Page Transition */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pageExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Network Status Pulse */
@keyframes pulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Stagger (리스트용) */
@keyframes staggerIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Empty State */
@keyframes emptyStateFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes emptyStateFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Status Indicator Pulse Ring */
@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(2); opacity: 0; }
}

/* Mobile Rotate Device */
@keyframes rotateDevice {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-15deg);
    }
    75% {
        transform: rotate(90deg);
    }
}


/* ============================================================
   2. Animation 클래스
   ============================================================ */

/* Base - 모든 애니메이션 공통 */
[class*="animate-"] {
    animation-fill-mode: both;
}

/* Fade */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.4s ease-out;
}

/* Slide */
.animate-slide-in-left {
    animation: slideInLeft 0.4s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.4s ease-out;
}

.animate-slide-in-up {
    animation: slideInUp 0.4s ease-out;
}

.animate-slide-in-down {
    animation: slideInDown 0.4s ease-out;
}

/* Scale */
.animate-scale-in {
    animation: scaleIn 0.3s ease-out;
}

.animate-scale-out {
    animation: scaleOut 0.3s ease-out;
}

/* Continuous (반복) */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-blink {
    animation: blink 1s step-end infinite;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s ease-in-out infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-shake {
    animation: shake 0.5s ease-in-out;
}

/* Bounce In */
.animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
}

/* Shimmer (스켈레톤) */
.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.1) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Progress */
.animate-progress {
    animation: progressGrow 1s ease-out forwards;
}


/* ============================================================
   3. Delay 클래스 (지연 시간)
   ============================================================ */

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }


/* ============================================================
   4. Duration 클래스 (지속 시간)
   ============================================================ */

.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }


/* ============================================================
   5. Scroll Reveal (JS 연동용)
   - animation.js에서 .is-visible 클래스 추가
   ============================================================ */

[data-scroll-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-scroll-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 방향별 Scroll Reveal */
[data-scroll-reveal="left"] {
    transform: translateX(-30px);
}
[data-scroll-reveal="left"].is-visible {
    transform: translateX(0);
}

[data-scroll-reveal="right"] {
    transform: translateX(30px);
}
[data-scroll-reveal="right"].is-visible {
    transform: translateX(0);
}

[data-scroll-reveal="scale"] {
    transform: scale(0.9);
}
[data-scroll-reveal="scale"].is-visible {
    transform: scale(1);
}


/* ============================================================
   6. 공통 상태 표시용 애니메이션
   ============================================================ */

/* 사용중 상태 - 깜빡이는 점 */
.status-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 숫자 카운팅용 (JS 연동) */
[data-count-to] {
    display: inline-block;
}


/* ============================================================
   PAGE: 로그인 (login.html)
   ============================================================ */

/* 브랜드 영역 확장 애니메이션 */
.login-expand-cover {
    width: 100% !important;
    transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 폼 영역 사라짐 */
.login-fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s ease-in;
}

/* 콘텐츠 숨김 */
.login-content-hidden {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* 로딩 스피너 */
.login-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 79, 0, 0.2);
    border-top-color: #FF4F00;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}


/* ============================================================
   PAGE: 대시보드 - 베이 모니터링 (dashboard.html)
   ============================================================ */

/* 페이지 커튼 (진입 오버레이) */
#page-curtain {
    position: fixed;
    inset: 0;
    background-color: #020617;
    z-index: 9999;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#page-curtain.from-login {
    opacity: 1;
}

/* 사이드바 올라오는 애니메이션 - 로그인 후 첫 진입 시 */
@keyframes sidebarRise {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes sidebarContentReveal {
    to { opacity: 1; transform: translateY(0); }
}

#sidebar-container.from-login aside {
    transform: translateY(100%);
    animation: sidebarRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
}

#sidebar-container.from-login aside > * {
    opacity: 0;
    transform: translateY(10px);
    animation: sidebarContentReveal 0.6s ease-out forwards;
    animation-delay: 0.4s;
}

/* 메인 콘텐츠 페이드 인 - 로그인 후 첫 진입 시 */
@keyframes dashboardMainFadeIn {
    to { opacity: 1; }
}

.main-content-wrapper.from-login {
    opacity: 0;
    animation: dashboardMainFadeIn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}


/* ============================================================
   PAGE: 회원 관리 (members.html)
   ============================================================ */


/* ============================================================
   PAGE: 예약 관리 (reservations.html)
   ============================================================ */

/* 예약 관리 스타일은 reservation.css로 분리됨 */


/* ============================================================
   PAGE: 포인트·코인 관리 (points.html)
   ============================================================ */


/* ============================================================
   PAGE: 쿠폰 관리 (coupons.html)
   ============================================================ */


/* ============================================================
   PAGE: 이벤트 관리 (events.html)
   ============================================================ */


/* ============================================================
   PAGE: 매출 분석 (sales.html)
   ============================================================ */


/* ============================================================
   PAGE: 매장 관리 (store.html)
   ============================================================ */


/* ============================================================
   PAGE: 커뮤니티 관리 (community.html)
   ============================================================ */