*{
box-sizing:border-box;
}


:root{

    --text-color:#222;

    --sub-text:#555;

    --glass-bg:
    rgba(255,255,255,.45);

    --glass-border:
    rgba(0,0,0,.08);

}



body{

    margin:0;

    min-height:100vh;

    font-family:
    "Noto Sans SC",
    system-ui;

    color:
    var(--text-color);

    transition:.4s;

}



/* 深色 */

body.dark{

    --text-color:#fff;

    --sub-text:rgba(255,255,255,.75);

    --glass-bg:
    rgba(255,255,255,.15);

    --glass-border:
    rgba(255,255,255,.25);

}
.bg{

position:fixed;

inset:0;

background:
linear-gradient(
135deg,
#ffffff,
#d9d9df
);

z-index:-1;

transition:.5s;

}



/* 深色模式 */

body.dark .bg{

background:
linear-gradient(
135deg,
#252525,
#111111
);

}

.theme-btn{

position:fixed;

top:25px;

left:25px;


width:48px;

height:48px;


border-radius:50%;


border:
1px solid
rgba(255,255,255,.4);


background:
rgba(255,255,255,.35);


backdrop-filter:
blur(20px);

-webkit-backdrop-filter:
blur(20px);


color:white;


font-size:22px;


cursor:pointer;


z-index:10;


transition:.3s;

}


.spirit-card:hover{

    box-shadow:
    0 30px 80px
    rgba(0,0,0,.35);

}


body.dark .theme-btn{

background:
rgba(255,255,255,.15);

}

header{

text-align:center;

padding:60px 20px 30px;

}


header h1{

font-size:42px;

margin:0;

}


.cards{

width:min(1600px,90%);

margin:auto;

display:grid;

grid-template-columns:
    repeat(auto-fit, minmax(300px, 340px));

justify-content:center;

gap:28px;

padding-bottom:80px;

}



/* 卡片 */

.spirit-card{

    position:relative;

    height:430px;

    border-radius:32px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    text-decoration:none;

    box-shadow:
    0 20px 60px rgba(0,0,0,.25);

}



/* 图片在下面 */

.thumbnail{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}



/* 上半玻璃区域 */

.info{

position:relative;

z-index:2;

padding:28px;

background:none;

}

.card-inner{

    position:relative;

    width:100%;

    height:100%;

    border-radius:32px;

    overflow:hidden;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    transition:
        box-shadow .35s;
}

.glass{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:45%;

    z-index:1;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.08)
        );

    backdrop-filter:
        blur(2px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(2px)
        saturate(120%);

    border-bottom:
        1px solid rgba(255,255,255,.25);

    pointer-events:none;

}

/* 高光 */

.info::after{

    content:"";

    position:absolute;

    inset:0;


    background:
    linear-gradient(
    120deg,
    rgba(255,255,255,.22),
    transparent 35%
    );


    pointer-events:none;

}


/* 文字 */

.info h2{

    position:relative;

    margin:0 0 12px;

    font-size:25px;

    color:#111;

}



.info p{

    position:relative;

    margin:0 0 15px;

    color:
    #333;

}



.info span{

    position:relative;

    font-size:15px;

    font-weight:700;

    color:
    #333;

}

.spirit-card .thumbnail{

    transition:
    transform .5s ease;

}


.spirit-card:hover .thumbnail{

    transform:
    scale(1.08);

}

.spirit-card{

transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s;

}

.info{
transition:.35s;
}

.spirit-card:hover .info{
transform:
translateY(-3px);
}



/* 手机 */
@media (max-width:767px){

    .cards{
        grid-template-columns:1fr;
    }

}


/* 平板 */
@media (min-width:768px){

    .cards{
        grid-template-columns:repeat(2,1fr);
    }

}


/* 普通电脑 */
@media (min-width:1200px){

    .cards{
        grid-template-columns:repeat(3,1fr);
    }

}


/* 大屏 */
@media (min-width:1600px){

    .cards{
        grid-template-columns:repeat(4,1fr);
    }

}


/* 超宽屏 */
@media (min-width:2200px){

    .cards{
        grid-template-columns:repeat(5,1fr);
    }

}