/* =========================
Dachengzi Official Website
Home V2.0
========================= */


*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{


margin:0;


font-family:

"Inter",
"Microsoft YaHei",
Arial,
sans-serif;


background:#070710;


color:white;


overflow-x:hidden;


}



/* 背景 */


.background{


position:fixed;


inset:0;


z-index:-2;


background:


radial-gradient(
circle at 20% 20%,
rgba(139,92,255,.35),
transparent 35%
),


radial-gradient(
circle at 80% 30%,
rgba(0,212,255,.25),
transparent 35%
),


linear-gradient(
180deg,
#090914,
#050508
);


}




.background:after{


content:"";


position:absolute;


inset:0;


background:

url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white' fill-opacity='.05'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/g%3E%3C/svg%3E");


}




/* Hero */


.hero{


min-height:100vh;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


text-align:center;


padding:40px 20px;


position:relative;


}



.hero-glow{


position:absolute;


width:500px;


height:500px;


background:

radial-gradient(
circle,
rgba(139,92,255,.4),
transparent 70%
);


filter:blur(40px);


z-index:-1;


}




.avatar{

width:240px;

height:240px;

object-fit:cover;

border-radius:50%;

border:

6px solid rgba(255,255,255,.15);

box-shadow:

0 0 80px rgba(139,92,255,.8);

transition:.5s;

}



.avatar:hover{


transform:

scale(1.08)
rotate(3deg);


}


width:220px;


height:220px;


object-fit:cover;


border-radius:50%;


border:

5px solid rgba(255,255,255,.2);


box-shadow:


0 0 60px rgba(139,92,255,.6);


animation:

float 5s infinite ease-in-out;


}



@keyframes float{


50%{

transform:translateY(-15px);

}


}



.badge{


margin-top:30px;


padding:8px 25px;


border-radius:50px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


letter-spacing:3px;


font-size:13px;


}



.hero h1{
    font-size: clamp(28px,4vw,50px);
}


margin:20px 0;


font-weight:900;


background:

linear-gradient(
90deg,
white,
#9d7cff,
#00d4ff
);


-webkit-background-clip:text;


color:transparent;


}



.hero p{


max-width:700px;


font-size:20px;


line-height:1.8;


color:#ddd;


}



.buttons{


margin-top:35px;


}



.buttons a{


display:inline-block;


margin:10px;


padding:

15px 35px;


border-radius:50px;


text-decoration:none;


color:white;


font-weight:600;


background:

linear-gradient(
135deg,
#8b5cff,
#00d4ff
);


box-shadow:

0 15px 40px
rgba(139,92,255,.35);


transition:.3s;


}



.buttons a:hover{


transform:

translateY(-5px);


}




/* Section */


.section{


width:90%;


max-width:1200px;


margin:

100px auto;


}



.section h2{


font-size:45px;


text-align:center;


margin-bottom:50px;


}




/* Glass */


.glass{


background:

rgba(255,255,255,.07);


border:

1px solid rgba(255,255,255,.12);


backdrop-filter:

blur(25px);


border-radius:30px;


padding:30px;


box-shadow:

0 20px 60px
rgba(0,0,0,.3);


}





/* Videos */


.grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(280px,1fr)
);


gap:30px;


}



.video-card{
.video-card{


position:relative;


overflow:hidden;


}



.video-card img{


transition:

transform .6s;


}



.video-card:hover img{


transform:

scale(1.08);


}

transition:.35s;


}



.video-card:hover{


transform:

translateY(-10px);


}



.video-card img{


width:100%;


height:220px;


object-fit:cover;


border-radius:20px;


}



.video-card a{


display:inline-block;


margin-top:15px;


color:#00d4ff;


text-decoration:none;


}




/* Achievement */


.timeline{


display:flex;


flex-direction:column;


gap:25px;


}



.achievement span{


color:#00d4ff;


font-weight:bold;


letter-spacing:3px;


}




/* Gallery */


.gallery{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(220px,1fr)
);


gap:25px;


}



.gallery img{


width:100%;


height:280px;


object-fit:cover;


border-radius:25px;


transition:.4s;


}



.gallery img:hover{


transform:

scale(1.05);


}




/* Social */


.social{


display:flex;


justify-content:center;


flex-wrap:wrap;


gap:20px;


}



.social a{


padding:

15px 35px;


border-radius:50px;


background:

rgba(255,255,255,.1);


color:white;


text-decoration:none;


transition:.3s;


}



.social a:hover{


background:

linear-gradient(
135deg,
#8b5cff,
#00d4ff
);


}




/* Comments */


.comments{


display:grid;


gap:20px;


}



.comment h3{


color:#9d7cff;


}




footer{


text-align:center;


padding:50px;


color:#888;


}




@media(max-width:600px){


.avatar{

width:150px;

height:150px;

}



.section h2{

font-size:32px;

}



.hero p{

font-size:16px;

}


}
/* ==========================
V2.0.4 Brand Upgrade
========================== */



.navbar{


position:fixed;


top:20px;


left:50%;


transform:translateX(-50%);


width:90%;


max-width:1100px;


padding:18px 35px;


display:flex;


justify-content:space-between;


align-items:center;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


backdrop-filter:

blur(20px);


border-radius:50px;


z-index:99;


}



.logo{


font-size:22px;


font-weight:900;


}



.nav-links{


display:flex;


gap:25px;


}



.nav-links a{


color:white;


text-decoration:none;


opacity:.8;


transition:.3s;


}



.nav-links a:hover{


opacity:1;


color:#00d4ff;


}






.live-dot{


display:inline-block;


width:10px;


height:10px;


border-radius:50%;


background:#ff3355;


margin-right:8px;


box-shadow:


0 0 20px #ff3355;


animation:

pulse 1.5s infinite;


}



@keyframes pulse{


50%{

opacity:.4;

}


}






.loader{


position:fixed;


inset:0;


background:#070710;


display:flex;


align-items:center;


justify-content:center;


z-index:9999;


animation:

loaderHide 1.5s forwards;


animation-delay:1s;


}



.loader-logo{


font-size:60px;


font-weight:900;


background:

linear-gradient(
90deg,
#8b5cff,
#00d4ff
);


-webkit-background-clip:text;


color:transparent;


}




@keyframes loaderHide{


to{


opacity:0;


visibility:hidden;


}


}



@media(max-width:700px){


.navbar{


padding:15px 20px;


}



.nav-links{


display:none;


}


}
/* =====================
V2.1 Creator Stats
===================== */


.stats{


width:90%;


max-width:1000px;


margin:-80px auto 100px;


display:grid;


grid-template-columns:
repeat(3,1fr);


gap:25px;


}



.stat-card{


padding:35px;


text-align:center;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.12);


border-radius:30px;


backdrop-filter:

blur(20px);


}



.stat-card h2{


font-size:50px;


margin:0;


background:

linear-gradient(
90deg,
#8b5cff,
#00d4ff
);


-webkit-background-clip:text;


color:transparent;


}



.stat-card p{


color:#aaa;


font-size:18px;


}





.live-box{


width:fit-content;


margin:

0 auto 100px;


padding:

18px 40px;


border-radius:50px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


}



@media(max-width:700px){


.stats{


grid-template-columns:1fr;


}


}
/* =====================
Creator Tags
===================== */


.creator-tags{


display:flex;


justify-content:center;


align-items:center;


gap:15px;


flex-wrap:wrap;


margin-top:25px;


}




.creator-tags span{


padding:10px 22px;


border-radius:50px;


background:

rgba(255,255,255,.08);



border:

1px solid rgba(255,255,255,.15);



backdrop-filter:

blur(15px);



font-size:14px;



color:white;



transition:.35s;


}




.creator-tags span:hover{


transform:

translateY(-5px);



background:

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



box-shadow:

0 10px 30px rgba(139,92,255,.3);


}
/* =====================
V2.2 Visual Upgrade
===================== */



.hero{

position:relative;

overflow:hidden;

}




.hero-orbit{


position:absolute;


width:420px;


height:420px;


border-radius:50%;


border:

1px solid rgba(255,255,255,.15);


animation:

rotateOrbit 20s linear infinite;


}



.hero-orbit:before{


content:"";


position:absolute;


top:-8px;


left:50%;


width:16px;


height:16px;


border-radius:50%;


background:#00d4ff;


box-shadow:

0 0 30px #00d4ff;


}





@keyframes rotateOrbit{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}





.creator-tags{


display:flex;


gap:15px;


justify-content:center;


flex-wrap:wrap;


margin-top:25px;


}



.creator-tags span{


padding:

8px 20px;


border-radius:50px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


font-size:14px;


backdrop-filter:

blur(10px);


}






/* Section标题升级 */


.section h2{


position:relative;


}



.section h2:after{


content:"";


display:block;


width:60px;


height:4px;


margin:

20px auto;


border-radius:10px;


background:

linear-gradient(
90deg,
#8b5cff,
#00d4ff
);


}






/* 视频卡片升级 */


.video-card{


background:

rgba(255,255,255,.06);


border:

1px solid rgba(255,255,255,.1);


padding:20px;


border-radius:30px;


}





.video-card h3{


font-size:22px;


}



.video-card a{


background:

linear-gradient(
90deg,
#8b5cff,
#00d4ff
);


color:white;


padding:

10px 25px;


border-radius:50px;


}






/* 成就卡片升级 */


.achievement{


background:

rgba(255,255,255,.06);


border:

1px solid rgba(255,255,255,.12);


padding:30px;


border-radius:30px;


transition:.3s;


}



.achievement:hover{


transform:

translateX(15px);


border-color:

#8b5cff;


}






/* Footer升级 */


footer{


background:

rgba(255,255,255,.03);


backdrop-filter:

blur(20px);


border-top:

1px solid rgba(255,255,255,.1);


}
body:before{


content:"";


position:fixed;


inset:0;


background:

linear-gradient(
120deg,
transparent,
rgba(139,92,255,.08),
transparent
);


animation:

shine 8s infinite;


pointer-events:none;


}



@keyframes shine{


0%{

transform:translateX(-100%);

}


50%{

transform:translateX(100%);

}


100%{

transform:translateX(100%);

}


}
/* =====================
V2.2.2 Apple Title Effect
===================== */


.hero-title{


position:relative;


overflow:hidden;


display:inline-block;


}



.hero-title:after{


content:"";


position:absolute;


top:0;


left:-120%;


width:80%;


height:100%;


background:


linear-gradient(
120deg,
transparent,
rgba(255,255,255,.8),
transparent
);


animation:

titleShine 4s infinite;


}




@keyframes titleShine{


0%{


left:-120%;


}



30%{


left:120%;


}



100%{


left:120%;


}


}
/* Gallery Apple Reveal */


.gallery img{


opacity:0;


transform:


translateY(40px)
scale(.95);



animation:

galleryShow 1s forwards;


}



.gallery img:nth-child(2){

animation-delay:.15s;

}



.gallery img:nth-child(3){

animation-delay:.3s;

}



.gallery img:nth-child(4){

animation-delay:.45s;

}





@keyframes galleryShow{


to{


opacity:1;


transform:

translateY(0)
scale(1);


}


}
.apple-glow{


position:absolute;


width:700px;


height:700px;


background:

radial-gradient(
circle,
rgba(139,92,255,.25),
transparent 70%
);


filter:

blur(60px);


}