/* breath.css – 潦草手写+下划线动效+光晕鼠标 */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 更潦草的手写体：开源「宅在家」 */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-hand@1.0/style.css');
body {
    font-family: 'LXGW WenKai Hand', cursive;
    background: #f2f0ee;
    background-image: url(img/noise.php),
                      radial-gradient(circle at 15% 90%, rgba(180,170,200,.18) 0%, transparent 40%),
                      radial-gradient(circle at 85% 10%, rgba(150,190,180,.15) 0%, transparent 40%);
    animation: breathe 10s ease-in-out infinite,
               grain .6s steps(3) infinite;
    color: #6b6866;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


body::before {
    content: '';
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at var(--x,50%) var(--y,50%),
                rgba(255,255,255,.18) 0%,
                transparent 12%);
    transition: background .15s;
}



@keyframes breathe {
    0%,100% { background-color: #f2f0ee; }
    50%     { background-color: #ebe8e5; }
}
@keyframes grain {
    0%,100% { background-position: 0 0; }
    10%     { background-position: -5% -3%; }
    30%     { background-position: 3% -5%; }
    50%     { background-position: -2% 4%; }
    70%     { background-position: 5% 2%; }
    90%     { background-position: -4% -1%; }
}

.center { text-align: center; }

/* 主标题 – 潦草+随机扭 */
.text-glow {
    font-size: 2.4rem;
    letter-spacing: .08em;
    color: #7a7572;
    text-shadow: 0 0 1px rgba(255,255,255,.9);
    animation: emerge 2s ease forwards,
               messy 6s infinite ease-in-out;
}
@keyframes emerge {
    0%   { opacity: 0; transform: translateY(20px) rotate(-1deg); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0)   rotate(0deg);   filter: blur(0); }
}
@keyframes messy {
    0%,100% { transform: rotate(0deg)  scale(1); }
    25%     { transform: rotate(.4deg) scale(1.01); }
    50%     { transform: rotate(-.3deg) scale(.99); }
    75%     { transform: rotate(.2deg) scale(1.01); }
}

/* 呼吸光晕按钮 */
.glow-btn{
    margin-top: 2rem;
    padding: .6rem 1.2rem;
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(180,170,200,.3);
    border-radius: 24px;
    cursor: pointer;
    transition: all .4s;
    /* 呼吸光晕 */
    animation: breathe 2.4s infinite;
}
.glow-btn:hover{
    background: #fff;
    color: #8e7cb0;
    transform: scale(1.08);
    animation: none;
}
.arrow{
    display: inline-block;
    margin-right: .3rem;
    transition: transform .4s;
}
.glow-btn:hover .arrow{
    transform: translate(3px,-3px);
}
@keyframes breathe{
    0%,100% { box-shadow: 0 0 0 0 rgba(180,170,200,0); }
    50%     { box-shadow: 0 0 0 6px rgba(180,170,200,.18); }
}

/* 下划线输入框 – 呼吸彩边 */
.input-wrap {
    margin-top: 2.5rem;
    position: relative;
    display: inline-block;
}
input[type=text] {
    background: transparent;
    border: none;
    border-bottom: 2px solid #c5c1be;
    width: 16rem;
    padding: .4rem 0;
    font-size: 1.4rem;
    color: #5a5552;
    text-align: center;
    outline: none;
    transition: all .4s;
}
input[type=text]:focus {
    border-bottom-color: #a89cbc;
    box-shadow: 0 4px 8px -4px rgba(168,156,188,.35);
}
/* 下划线呼吸 */
.input-wrap::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, #a89cbc, #9bb8b0, #a89cbc);
    background-size: 200% 100%;
    animation: lineBreath 3s infinite linear;
    opacity: 0;
    transition: opacity .4s;
}
input[type=text]:focus + .input-wrap::after { opacity: 1; }
@keyframes lineBreath {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* 小字按钮 – 潦草抬升 */
.sub {
    margin-top: 3rem;
    font-size: .9rem;
    color: #9a9490;
    cursor: pointer;
    display: inline-block;
    transition: all .4s;
}
.sub:hover {
    color: #7a7370;
    transform: translateY(-3px) rotate(.6deg);
}

/* 光晕鼠标 – 全局 */
body::before {
    content: '';
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    background: radial-gradient(circle at var(--x,50%) var(--y,50%),
                rgba(255,255,255,.18) 0%,
                transparent 12%);
    transition: background .15s;
}