/* ══════════════════════════════════════════════════════
   웹즐(Webzle) — "웹을즐겁게 → 웹즐" 브랜드 스토리텔링 로고
   컨셉: '웹을즐겁게'에서 '을겁게'가 사라지며 '웹즐'이 탄생
   파일: css/webzle-logo.css
══════════════════════════════════════════════════════ */

/* ── 로고 SVG 컨테이너 (ID 및 클래스 겸용) ── */
#webzle-logo,
.webzle-logo {
    overflow: visible;
    height: 100%;
    width: auto;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 호버: 미세 확대 + 은은한 후광 */
.logo:hover #webzle-logo,
.logo:hover .webzle-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.12));
}

/* ── 공통 글자 베이스 (Funnel Display) ── */
.wz-ch {
    font-family: 'Funnel Display', sans-serif;
    font-size: 40px;
    opacity: 0;
}

/* ── 강조 글자: '웹', '즐' (굵고 밝음) ── */
.wz-bold {
    font-weight: 800;
    fill: #ffffff;
}

/* ── 보조 글자: '을', '겁', '게' (가늘고 흐림) ── */
.wz-light {
    font-weight: 400;
    fill: rgba(255, 255, 255, 0.4);
}

/* ── 영문 'Webzle' ── */
.wz-en {
    font-family: 'Funnel Display', sans-serif;
    font-weight: 700;
    font-size: 42px;
    letter-spacing: 5px;
    opacity: 0;
}

/* ═══════════════════════════════════════════
   타임라인 (12초 1사이클)
   ───────────────────────────────────────────
   0.0s ~  0.6s : 전체 '웹을즐겁게' 페이드인
   0.6s ~  4.2s : 유지 (웹/즐 강조, 을겁게 흐림) ← 약 3.6초 유지
   4.2s ~  5.0s : '을','겁','게' 페이드아웃
   5.0s ~  6.0s : '웹','즐' 중앙으로 슬라이드 (넓은 자간)
   6.0s ~  8.0s : '웹즐' 유지
   8.0s ~  8.5s : '웹즐' 페이드아웃
   8.5s ~  9.0s : 'Webzle' 페이드인
   9.0s ~ 11.5s : 'Webzle' 유지 (시머 효과)
  11.5s ~ 12.0s : 'Webzle' 페이드아웃
═══════════════════════════════════════════ */

/* ── '웹' 글자: 등장 → 유지 → 슬라이드 → 유지 → 아웃 ── */
.wz-c-web {
    animation: animWeb 12s ease-in-out infinite;
}

@keyframes animWeb {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(6px);
    }

    5% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }

    /* '웹을즐겁게' 유지 구간 (약 3.6초) */
    35% {
        opacity: 1;
        transform: translateX(0);
    }

    /* '을' 사라진 후 오른쪽으로 슬라이드 — 넓은 자간 확보 */
    48% {
        opacity: 1;
        transform: translateX(55px);
    }

    64% {
        opacity: 1;
        transform: translateX(55px);
    }

    68% {
        opacity: 0;
        transform: translateX(55px) translateY(-4px);
    }

    100% {
        opacity: 0;
    }
}

/* ── '을' 글자: 등장 → 페이드아웃 ── */
.wz-c-eul {
    animation: animFade 12s ease-in-out infinite;
}

@keyframes animFade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    5% {
        opacity: 0.45;
        transform: translateY(0);
    }

    /* 더 길게 유지 */
    32% {
        opacity: 0.45;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* ── '즐' 글자: 등장 → 유지 → 슬라이드 → 유지 → 아웃 ── */
.wz-c-zul {
    animation: animZul 12s ease-in-out infinite;
}

@keyframes animZul {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(6px);
    }

    5% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateX(0);
    }

    /* '겁게' 사라진 후 살짝 오른쪽으로 슬라이드 — 넓은 자간 확보 */
    48% {
        opacity: 1;
        transform: translateX(10px);
    }

    64% {
        opacity: 1;
        transform: translateX(10px);
    }

    68% {
        opacity: 0;
        transform: translateX(10px) translateY(-4px);
    }

    100% {
        opacity: 0;
    }
}

/* ── '겁' 글자: 등장 → 페이드아웃 ── */
.wz-c-geop {
    animation: animFade2 12s ease-in-out infinite;
}

/* ── '게' 글자: 등장 → 페이드아웃 (약간 지연) ── */
.wz-c-ge {
    animation: animFade2 12s ease-in-out infinite;
    animation-delay: 0.1s;
}

@keyframes animFade2 {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    5% {
        opacity: 0.45;
        transform: translateY(0);
    }

    32% {
        opacity: 0.45;
    }

    40% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 0;
    }
}

/* ── 영문 'Webzle': 페이드인 → 유지 → 페이드아웃 ── */
.wz-en {
    animation: animEN 12s ease-in-out infinite;
}

@keyframes animEN {

    0%,
    70% {
        opacity: 0;
        transform: translateY(6px);
    }

    75% {
        opacity: 1;
        transform: translateY(0);
    }

    93% {
        opacity: 1;
        transform: translateY(0);
    }

    98% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 0;
    }
}

/* ── 로고 링크 컨테이너 (네비게이션 바 전용) ── */
.navbar .logo {
    margin-left: 15px;
    transition: all 0.4s;
    width: 220px;
    height: 42px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

/* ── 푸터 로고 전용 스타일 ── */
footer .logo {
    width: 220px;
    height: 42px;
    display: flex;
    align-items: center;
}

/* 모바일 반응형 */
@media (max-width: 991px) {
    .navbar .logo {
        margin-left: 0;
        width: 180px;
        height: 36px;
    }
}

/* ══════════════════════════════════════════════════════
   라이트 모드 (body.light) — 로고 색상 반전
   다크 배경 → 밝은 배경 전환 시 글자 색상 변경
══════════════════════════════════════════════════════ */

/* 호버: 다크 톤 후광으로 변경 */
body.light .navbar .logo:hover #webzle-logo {
    filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.1));
}

/* 강조 글자 '웹', '즐': 흰색 → 다크 컬러 */
body.light .wz-bold {
    fill: #1a1a1a !important;
}

/* 보조 글자 '을', '겁', '게': 어두운 반투명 */
body.light .wz-light {
    fill: rgba(26, 26, 26, 0.35) !important;
}

/* 공통 글자 베이스에도 색상 보장 */
body.light .wz-ch {
    fill: #1a1a1a !important;
}

/* 영문 'Webzle': SVG fill 속성보다 CSS 우선 */
body.light .wz-en {
    fill: #1a1a1a !important;
}