/* =========================================================
   1. 基础与主题
   ========================================================= */
:root{
    --c1:#4f8cff;
    --c2:#a55cff;
    --c3:#ff5ca8;
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    min-width:100vw;
    min-height:100vh;
    display:flex;
    color:#e9eefb;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 0px;
    padding: 0px 0px;
    font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing:antialiased;
}

.page-head{
    text-align:center;
    max-width:100vw;
}
.page-head h1{
    font-size:clamp(22px,3.4vw,32px);
    font-weight:650;
    letter-spacing:.6px;
    background:linear-gradient(100deg,#fff 10%, #9ec3ff 45%, #d4a8ff 85%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:10px;
}
.page-head p{
    font-size:13.5px;
    color:rgba(233,238,251,.5);
    letter-spacing:1.4px;
}

.stage{
    width:min(100wh,100%);
}

/* =========================================================
   2. 轮播容器
   ========================================================= */
.carousel{
    position:relative;
    min-width:100vw;
    min-height:100vh;
    height:100vh;
    width:100vw;
    aspect-ratio:16/9;
    border-radius:22px;
    overflow:hidden;
    background:#0d1220;
    isolation:isolate;
    outline:none;
    user-select:none;
    -webkit-user-select:none;
    touch-action:pan-y;
    box-shadow:
        0 40px 90px -32px rgba(0,0,0,.95),
        0 0 0 1px rgba(255,255,255,.07),
        inset 0 1px 0 rgba(255,255,255,.06);
}
.carousel:focus-visible{
    box-shadow:
        0 0 0 2px var(--c1),
        0 40px 90px -32px rgba(0,0,0,.95);
}

/* ---- 轨道 ---- */
.carousel-track{
    display:flex;
    height:100%;
    transition:transform .72s cubic-bezier(.7,0,.25,1);
    will-change:transform;
}
.carousel-track.no-anim{
    transition:none !important;
}

/* ---- 单张 ---- */
.carousel-slide{
    position:relative;
    flex:0 0 100%;
    height:100%;
    overflow:hidden;
    background:#0b0f1a;
}
.carousel-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform:scale(1.07);
    transition:transform 6.5s ease-out;
    -webkit-user-drag:none;
}
.carousel-slide.is-active img{
    transform:scale(1);
}

/* ---- 淡入模式 ---- */
.carousel[data-mode="fade"] .carousel-track{
    display:block;
    position:relative;
}
.carousel[data-mode="fade"] .carousel-slide{
    position:absolute;
    inset:0;
    opacity:0;
    z-index:1;
    transition:opacity .85s ease;
}
.carousel[data-mode="fade"] .carousel-slide.is-active{
    opacity:1;
    z-index:2;
}

/* ---- 文案 ---- */
.slide-caption{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:130px 42px 40px;
    background:linear-gradient(to top,
        rgba(5,8,16,.95) 0%,
        rgba(5,8,16,.66) 40%,
        rgba(5,8,16,0) 100%);
    pointer-events:none;
}
.slide-caption h2{
    font-size:clamp(19px,3vw,31px);
    font-weight:650;
    letter-spacing:.8px;
    margin-bottom:9px;
    text-shadow:0 2px 20px rgba(0,0,0,.5);
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s .12s, transform .7s .12s;
}
.slide-caption p{
    font-size:clamp(12.5px,1.5vw,14.5px);
    line-height:1.7;
    color:rgba(233,238,251,.72);
    max-width:48ch;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .7s .22s, transform .7s .22s;
}
.carousel-slide.is-active .slide-caption h2,
.carousel-slide.is-active .slide-caption p{
    opacity:1;
    transform:none;
}

/* ---- 箭头 ---- */
.carousel-arrow{
    position:absolute;
    bottom: 80px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    cursor: pointer;
    z-index: 8;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(12,17,30,.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform:translateY(-50%) scale(.92);
    transition:opacity .3s, transform .25s, background .25s, border-color .25s;
}
.carousel-arrow.prev{
    left:18px;
}
.carousel-arrow.next{
    right:18px;
}

.carousel:hover .carousel-arrow,
.carousel:focus-within .carousel-arrow{
    opacity:1;
    transform:translateY(-50%) scale(1);
}
.carousel-arrow:hover{
    background:rgba(79,140,255,.4);
    border-color:rgba(255,255,255,.45);
}
.carousel-arrow:active{
    transform:translateY(-50%) scale(.92);
}

@media (hover:none){
    .carousel-arrow{
        opacity:1;
        transform:translateY(-50%) scale(1);
    }
}

/* ---- 圆点 ---- */
.carousel-dots{
    position:absolute;
    right:26px;
    bottom:26px;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:8;
}
.dot{
    width:8px;
    height:8px;
    padding:0;
    border:none;
    border-radius:99px;
    background:rgba(255,255,255,.32);
    cursor:pointer;
    transition:width .38s cubic-bezier(.7,0,.25,1), background .3s;
}
.dot:hover{
    background:rgba(255,255,255,.62);
}
.dot.is-active{
    width:28px;
    background:linear-gradient(90deg,var(--c1),var(--c2));
}

/* ---- 计数器 ---- */
.carousel-counter{
    position:absolute;
    top:20px;
    right:24px;
    z-index:8;
    padding:6px 13px;
    border-radius:99px;
    font-size:12px;
    letter-spacing:2px;
    font-variant-numeric:tabular-nums;
    color:rgba(255,255,255,.88);
    background:rgba(10,14,25,.55);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/* ---- 进度条 ---- */
.carousel-progress{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    z-index:9;
    background:rgba(255,255,255,.1);
}
.carousel-progress .bar{
    height:100%;
    width:100%;
    transform:scaleX(0);
    transform-origin:left center;
    background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));
    transition:opacity .3s;
}
.carousel[data-paused="true"] .carousel-progress .bar{
    opacity:.35;
}

/* =========================================================
   3. 控制面板
   ========================================================= */
.panel{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}
.panel button{
    padding:10px 18px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
    color:#dfe7f8;
    font-size:13.5px;
    font-family:inherit;
    cursor:pointer;
    transition:background .25s, border-color .25s, transform .2s;
}
.panel button:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.24);
    transform:translateY(-1px);
}
.panel button:active{
    transform:translateY(0);
}
.panel button.primary{
    border-color:transparent;
    color:#fff;
    background:linear-gradient(135deg, rgba(79,140,255,.95), rgba(165,92,255,.95));
    box-shadow:0 10px 26px -12px rgba(120,110,255,.9);
}

@media (prefers-reduced-motion: reduce){
    .carousel-track,
    .carousel-slide img,
    .carousel[data-mode="fade"] .carousel-slide{
        transition-duration:.01ms !important;
    }
}

@media (max-width:640px){
    body{
        padding:0px 14px;
        gap:20px;
    }
    .carousel{
        border-radius:16px;
    }
    .slide-caption{
        padding:90px 22px 30px;
    }
    .carousel-dots{
        right:18px;
        bottom:18px;
    }
    .carousel-counter{
        top:14px;
        right:16px;
    }
    .carousel-arrow{
        width:40px;
        height:40px;
    }
    .carousel-arrow.prev{
        left:10px;
    }
    .carousel-arrow.next{
        right:10px;
    }
}