/* =========================
DRIFT 首页入口
========================= */

.drift-entry{

position:absolute;

left:50%;

bottom:38px;

z-index:4;

transform:translateX(-50%);

display:flex;

align-items:center;

gap:13px;

padding:10px 14px;

border:0;

outline:0;

background:none;

font-family:
Helvetica,
Arial,
sans-serif;

font-size:10px;

font-weight:400;

letter-spacing:4px;

color:rgba(225,225,225,.68);

cursor:pointer;

transition:
color .7s ease,
opacity .7s ease;

}


.drift-entry:hover{

color:rgba(255,255,255,.92);

}


.drift-word{

display:block;

}



/* =========================
三个圆环
========================= */

.drift-mark{

position:relative;

display:block;

width:31px;

height:25px;

}


.drift-mark i{

position:absolute;

display:block;

width:16px;

height:16px;

border:1px solid currentColor;

border-radius:50%;

transition:
transform 1.35s
cubic-bezier(.22,.61,.36,1);

}


.drift-mark i:nth-child(1){

left:1px;
top:5px;

}


.drift-mark i:nth-child(2){

left:8px;
top:1px;

}


.drift-mark i:nth-child(3){

left:13px;
top:8px;

}


.drift-entry:hover
.drift-mark i:nth-child(1){

transform:
translate(-2px,2px);

}


.drift-entry:hover
.drift-mark i:nth-child(2){

transform:
translate(2px,-2px);

}


.drift-entry:hover
.drift-mark i:nth-child(3){

transform:
translate(3px,1px);

}



/* =========================
DRIFT 全屏层
========================= */

.drift-overlay{

position:fixed;

inset:0;

z-index:20000;

opacity:0;

visibility:hidden;

pointer-events:none;

overflow:hidden;

cursor:none;

/*
初始仍然能看到首页
*/

background:
rgba(0,0,0,0);

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

backdrop-filter:
blur(0px);

transition:

opacity .45s ease,

background-color .9s
cubic-bezier(.22,.61,.36,1),

backdrop-filter .9s
cubic-bezier(.22,.61,.36,1),

-webkit-backdrop-filter .9s
cubic-bezier(.22,.61,.36,1),

visibility 0s linear .45s;

}


.drift-overlay.is-active{

opacity:1;

visibility:visible;

pointer-events:auto;

transition-delay:0s;

}



/* =========================
进入第一阶段

首页逐渐变暗 + 模糊
========================= */

.drift-overlay.is-preparing{

background:
rgba(0,0,0,.78);

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

backdrop-filter:
blur(13px);

}



/* =========================
正式观看

完全黑色
========================= */

.drift-overlay.is-running{

background:#000;

-webkit-backdrop-filter:
blur(0);

backdrop-filter:
blur(0);

}



/* =========================
退出第一阶段

照片先溶入黑色
========================= */

.drift-overlay.is-exiting{

background:#000;

-webkit-backdrop-filter:
blur(0);

backdrop-filter:
blur(0);

}



/* =========================
退出第二阶段

黑色退开一点，
露出模糊的主页
========================= */

.drift-overlay.is-revealing{

background:
rgba(0,0,0,.72);

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

backdrop-filter:
blur(13px);

}



/* =========================
图片舞台
========================= */

.drift-stage{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}


.drift-image{

position:absolute;

display:block;

width:auto;

height:auto;

max-width:
calc(100vw - 90px);

max-height:
calc(100vh - 90px);

object-fit:contain;

opacity:0;

filter:
blur(0);

transform:
scale(1);

transition:

opacity .72s ease,

filter .72s
cubic-bezier(.22,.61,.36,1),

transform .8s
cubic-bezier(.22,.61,.36,1);

will-change:
opacity,
filter,
transform;

}


.drift-image.is-visible{

opacity:1;

}



/* =========================
退出时：

当前图片轻微放大、
模糊、消失
========================= */

.drift-overlay.is-exiting
.drift-image.is-visible{

opacity:0;

filter:
blur(12px);

transform:
scale(1.012);

}



/* =========================
控制区
========================= */

.drift-controls{

position:absolute;

left:50%;

bottom:24px;

z-index:5;

transform:
translateX(-50%)
translateY(5px);

display:flex;

align-items:center;

gap:5px;

opacity:0;

pointer-events:none;

transition:

opacity .4s ease,

transform .4s ease;

}


.drift-overlay.controls-visible
.drift-controls{

opacity:1;

pointer-events:auto;

transform:
translateX(-50%)
translateY(0);

}


.drift-control{

width:42px;

height:38px;

padding:0;

border:0;

outline:0;

background:none;

color:
rgba(255,255,255,.58);

font-family:
Helvetica,
Arial,
sans-serif;

font-size:17px;

font-weight:300;

line-height:38px;

text-align:center;

cursor:pointer;

transition:
color .3s ease,
opacity .3s ease;

}


.drift-control:hover{

color:#fff;

}


.drift-control-pause{

font-size:13px;

}


.drift-control-exit{

font-size:20px;

font-weight:200;

margin-left:4px;

}



/* =========================
进入、退出阶段
禁止出现控制器
========================= */

.drift-overlay.is-preparing
.drift-controls,

.drift-overlay.is-exiting
.drift-controls,

.drift-overlay.is-revealing
.drift-controls{

opacity:0 !important;

pointer-events:none !important;

}



/* =========================
手机
========================= */

@media(max-width:768px){


.drift-entry{

bottom:27px;

font-size:9px;

letter-spacing:3px;

gap:10px;

}


.drift-mark{

transform:
scale(.9);

}


.drift-image{

max-width:94vw;

max-height:88vh;

}


.drift-controls{

bottom:18px;

}


.drift-control{

width:40px;

height:40px;

}


}
/* =========================================================
   2026 RESPONSIVE OVERRIDES
   DRIFT 手机 / 平板适配
========================================================= */

@media (max-width:1024px){

.drift-image{
max-width:94vw;
max-height:90svh;
}

.drift-controls{
bottom:calc(18px + env(safe-area-inset-bottom,0px));
}

}


@media (max-width:768px){

.drift-entry{
bottom:calc(22px + env(safe-area-inset-bottom,0px));
min-height:44px;
padding:10px 12px;
font-size:10px;
letter-spacing:3px;
gap:10px;
}

.drift-mark{
transform:scale(.9);
transform-origin:center;
}

.drift-overlay{
height:100svh;
}

@supports (height:100dvh){
.drift-overlay{
height:100dvh;
}
}

.drift-stage{
padding:
env(safe-area-inset-top,0px)
env(safe-area-inset-right,0px)
env(safe-area-inset-bottom,0px)
env(safe-area-inset-left,0px);
}

.drift-image{
max-width:94vw;
max-height:calc(100svh - 86px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}

.drift-controls{
bottom:calc(12px + env(safe-area-inset-bottom,0px));
gap:3px;
}

.drift-control{
width:44px;
height:44px;
line-height:44px;
font-size:18px;
}

.drift-control-pause{
font-size:13px;
}

.drift-control-exit{
font-size:21px;
margin-left:2px;
}

}


@media (max-width:480px){

.drift-entry{
font-size:9px;
letter-spacing:2.6px;
}

.drift-image{
max-width:96vw;
}

}


@media (max-width:1000px) and (orientation:landscape){

.drift-image{
max-width:96vw;
max-height:calc(100svh - 42px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}

.drift-controls{
bottom:calc(6px + env(safe-area-inset-bottom,0px));
}

}