/* ==================================
   misakamikoto Liquid Glass UI
   Optical Glass Simulation
   ================================== */


:root{


    /* 光学参数模拟

       air n1 ≈ 1.0
       glass n2 ≈ 1.5

    */


    --glass-index:1.5;


    --glass-white:
    rgba(255,255,255,.55);


    --glass-pink:
    rgba(255,170,220,.25);


    --glass-blue:
    rgba(150,220,255,.28);



    --shadow:

    rgba(255,130,190,.35);


}





*{

box-sizing:border-box;

}





html{


scroll-behavior:smooth;


}





body{


margin:0;


min-height:100vh;


padding-bottom:120px;



font-family:


-apple-system,
BlinkMacSystemFont,
"Noto Sans SC",
"Noto Sans TC",
sans-serif;



color:#555;



background:


linear-gradient(

135deg,

#fff1fa,

#e4f8ff,

#ffe8f4

);



overflow-x:hidden;



}







/* ==============================
   背景照片层
   ============================== */


.photo-wall{


position:fixed;



inset:-10%;



width:120%;


height:120%;



z-index:10;



overflow:hidden;



pointer-events:none;


}





.photo-wall img{


position:absolute;



object-fit:cover;



min-width:320px;



min-height:320px;



max-width:650px;



max-height:650px;



border-radius:45px;




/*
模拟玻璃后的颜色吸收
*/

filter:


saturate(120%)


contrast(105%);




opacity:.88;




border:


4px solid

rgba(255,255,255,.5);




box-shadow:



0 40px 120px

rgba(255,120,190,.45),



inset

0 0 40px

rgba(255,255,255,.25);



transition:

.8s cubic-bezier(.2,.8,.2,1);



}





.photo-wall img:hover{


transform:

scale(1.15)

rotate(0deg)

!important;



opacity:1;


}









/* ==============================
   主内容层
   ============================== */


.container{


position:relative;



z-index:30;



max-width:950px;



margin:auto;



padding:30px;



}









/* ==============================
   Liquid Glass 核心
   ============================== */


.glass{


position:relative;



overflow:hidden;



background:


linear-gradient(

135deg,


rgba(255,255,255,.45),



rgba(255,180,220,.18),



rgba(170,230,255,.22)

);





/*
折射模拟

散射越强 blur 越高

*/

backdrop-filter:


blur(28px)

saturate(180%);



-webkit-backdrop-filter:


blur(28px)

saturate(180%);





border:



1px solid

rgba(255,255,255,.65);





box-shadow:



inset

0 0 40px

rgba(255,255,255,.35),



0 35px 100px

rgba(255,130,190,.28);



}







/*
Fresnel 边缘反光
*/

.glass::before{


content:"";



position:absolute;



inset:0;



background:


linear-gradient(

120deg,


rgba(255,255,255,.8),


transparent 25%,


transparent 70%,


rgba(150,220,255,.35)

);




opacity:.45;



pointer-events:none;



}





/*
内部光斑
*/


.glass::after{


content:"";



position:absolute;



width:300px;



height:300px;



top:-120px;



left:-120px;




background:


radial-gradient(

circle,


rgba(255,255,255,.65),


transparent 70%

);




pointer-events:none;



}









/* ==============================
   首页
   ============================== */


.hero{


margin-top:70px;



padding:55px 35px;



text-align:center;



border-radius:55px;



}



.avatar{


width:190px;



height:190px;



margin:auto;



border-radius:50%;



overflow:hidden;




border:


8px solid

rgba(255,255,255,.75);





box-shadow:



0 30px 90px

rgba(255,100,190,.5);



}




.avatar img{


width:100%;



height:100%;



object-fit:cover;



}






h1{


font-size:58px;



letter-spacing:5px;



margin:25px 0;



color:


#ff82bc;



text-shadow:


0 10px 30px

rgba(255,120,190,.35);



}





h2{


color:#ff8fc7;


}





p{


font-size:18px;



line-height:1.8;



}









/* ==============================
   内容卡片
   ============================== */


.info{


margin-top:35px;



padding:40px;



border-radius:45px;



}







/* ==============================
   标签
   ============================== */


.tags span{


display:inline-block;



padding:12px 25px;



margin:8px;



border-radius:40px;



background:


rgba(255,255,255,.55);



border:


1px solid

rgba(255,255,255,.8);



box-shadow:



0 10px 30px

rgba(255,150,200,.2);



}







button{


padding:15px 30px;



border:none;



border-radius:40px;



background:


rgba(255,255,255,.6);



cursor:pointer;



font-size:16px;



transition:.3s;



}



button:hover{


transform:

translateY(-5px);



background:white;


}









/* ==============================
   跨性别旗
   ============================== */


.trans{


width:140px;



height:45px;



margin:25px auto;



overflow:hidden;



border-radius:15px;



box-shadow:

0 10px 30px

rgba(255,150,200,.3);



}



.trans div{


height:20%;



}





.trans div:nth-child(1),
.trans div:nth-child(5){


background:#55cdfc;


}





.trans div:nth-child(2),
.trans div:nth-child(4){


background:#f7a8b8;


}





.trans div:nth-child(3){


background:white;


}









/* ==============================
   macOS Dock
   ============================== */


.dock{


position:fixed;



bottom:25px;



left:50%;



transform:

translateX(-50%);



z-index:100;



padding:18px 35px;



display:flex;



gap:30px;



border-radius:35px;



}



.dock button{


background:none;



font-size:32px;



padding:5px;



}



.dock button:hover{


transform:

translateY(-18px)

scale(1.3);



}






small{


display:block;



font-size:12px;


}









/* ==============================
   鱼板鼠标
   ============================== */


.cursor{


position:fixed;



z-index:9999;



font-size:32px;



pointer-events:none;



}








/* ==============================
   手机适配
   ============================== */


@media(max-width:700px){



.container{


padding:15px;


}




.hero{


margin-top:40px;



padding:35px 20px;


}




.avatar{


width:140px;



height:140px;


}



h1{


font-size:38px;


}



.photo-wall img{


min-width:200px;



min-height:200px;



max-width:350px;



max-height:350px;



}




.glass{


backdrop-filter:


blur(20px);



}



.dock{


bottom:15px;



padding:12px 20px;



gap:15px;



}




.dock button{


font-size:24px;



}



}