/* ============================================================
   CYBERLOG Logo Staggered Letter Animation
   Inspired by: https://codepen.io/benhatsor/pen/JoRPNmz
   ============================================================ */

/* 全站禁止文字选中 */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 输入框、textarea 恢复可选中 */
input, textarea, [contenteditable] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ===== Logo 字母容器 ===== */
.logo {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    overflow: hidden;
}

.logo-icon {
    margin-right: 0.35em;
    display: inline-block;
    flex-shrink: 0;
}

.logo-letters {
    display: inline-flex;
    align-items: center;
}

/* 每个字母的包裹容器 */
.logo-letter {
    display: inline-block;
    position: relative;
    overflow: hidden;
    line-height: 1;
}

/* 字母的两层：当前层（visible）和下一层（ready to come in from bottom） */
.logo-letter .letter-top,
.logo-letter .letter-bot {
    display: block;
    line-height: 1;
    transition: none;
}

.logo-letter .letter-top {
    /* 默认显示 */
}

.logo-letter .letter-bot {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
}

/* ===== 翻转动画关键帧 ===== */
@keyframes cyberlog-letter-out {
    from {
        clip-path: inset(0 0 0 0);
        translate: 0 0;
    }
    49.99% {
        clip-path: inset(0 0 100% 0);
        translate: 0 -60%;
    }
    50% {
        clip-path: inset(100% 0 0 0);
        translate: 0 60%;
    }
    to {
        clip-path: inset(0 0 0 0);
        translate: 0 0;
    }
}

/* ===== 进度条（可选，与 CodePen 一致） ===== */
.logo-progress {
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--primary, #00ff9d);
    box-shadow: 0 0 6px var(--primary, #00ff9d);
    transition: width 0.05s linear;
    border-radius: 1px;
}