/**
 * DuckWow Dock
 * Frontend CSS
 * Version: 1.2.1
 *
 * macOS Dock 风格
 * 日间 / 夜间毛玻璃
 */


/* =========================================================
   Dock 主体
   ========================================================= */

#duckwow-dock {

    /*
     * -----------------------------------------------------
     * 基础尺寸
     * -----------------------------------------------------
     */

    --dw-size: 64px;

    --dw-gap: 7px;

    --dw-pad: 8px;

    --dw-bottom: 18px;


    /*
     * -----------------------------------------------------
     * 定位
     * -----------------------------------------------------
     */

    position: fixed;

    left: 50%;

    bottom:
        var(--dw-bottom);


    transform:
        translateX(-50%);


    z-index:
        2147483000;


    /*
     * -----------------------------------------------------
     * 布局
     * -----------------------------------------------------
     */

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap:
        var(--dw-gap);


    padding:
        var(--dw-pad);


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


    box-sizing:
        border-box;


    /*
     * 防止 Dock 自身内容溢出
     */

    overflow:
        visible;


    /*
     * -----------------------------------------------------
     * 玻璃边缘
     * -----------------------------------------------------
     */

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


    border-top-color:
        rgba(255,255,255,.72);


    border-radius:
        25px;


    /*
     * -----------------------------------------------------
     * 默认材质
     *
     * JS 加载后会根据网站状态自动变成：
     *
     * dw-theme-light
     * 或
     * dw-theme-dark
     *
     * -----------------------------------------------------
     */

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.58),
            rgba(238,238,242,.36)
        );


    /*
     * -----------------------------------------------------
     * 毛玻璃
     * -----------------------------------------------------
     */

    -webkit-backdrop-filter:

        blur(30px)
        saturate(180%)
        brightness(1.08);


    backdrop-filter:

        blur(30px)
        saturate(180%)
        brightness(1.08);


    /*
     * -----------------------------------------------------
     * 阴影
     * -----------------------------------------------------
     */

    box-shadow:

        /*
         * 内部顶部高光
         */

        inset
        0 1px 0
        rgba(255,255,255,.72),


        /*
         * 内部底部轻微暗边
         */

        inset
        0 -1px 0
        rgba(0,0,0,.045),


        /*
         * 主阴影
         */

        0 22px 55px
        rgba(0,0,0,.17),


        /*
         * 近距离阴影
         */

        0 4px 13px
        rgba(0,0,0,.10);


    /*
     * -----------------------------------------------------
     * 动画
     * -----------------------------------------------------
     */

    transition:

        opacity .28s
        cubic-bezier(.22,.61,.36,1),

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

        background .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;


    /*
     * -----------------------------------------------------
     * 性能
     * -----------------------------------------------------
     */

    will-change:
        transform,
        opacity;


    /*
     * -----------------------------------------------------
     * 防止用户选中
     * -----------------------------------------------------
     */

    user-select:
        none;

}


/* =========================================================
   顶部玻璃高光
   ========================================================= */

#duckwow-dock::before {

    content:
        "";


    position:
        absolute;


    inset:
        0;


    border-radius:
        inherit;


    pointer-events:
        none;


    /*
     * 顶部高光
     */

    background:

        linear-gradient(
            180deg,

            rgba(255,255,255,.30)
            0%,

            rgba(255,255,255,.10)
            18%,

            rgba(255,255,255,0)
            43%,

            rgba(0,0,0,.025)
            100%
        );


    /*
     * 让高光不影响内容
     */

    z-index:
        0;

}


/* =========================================================
   Dock 内部内容层
   ========================================================= */

#duckwow-dock > * {

    position:
        relative;


    z-index:
        1;

}


/* =========================================================
   ☀️ 日间模式
   ========================================================= */

#duckwow-dock.dw-theme-light {

    /*
     * 浅色玻璃
     */

    background:

        linear-gradient(
            180deg,

            rgba(255,255,255,.62),

            rgba(238,238,242,.38)
        );


    /*
     * 边缘
     */

    border-color:
        rgba(255,255,255,.55);


    border-top-color:
        rgba(255,255,255,.82);


    /*
     * 毛玻璃亮度
     */

    -webkit-backdrop-filter:

        blur(30px)
        saturate(180%)
        brightness(1.08);


    backdrop-filter:

        blur(30px)
        saturate(180%)
        brightness(1.08);


    /*
     * 阴影
     */

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.76),

        inset
        0 -1px 0
        rgba(0,0,0,.04),

        0 22px 55px
        rgba(0,0,0,.17),

        0 4px 13px
        rgba(0,0,0,.09);

}


/* =========================================================
   🌙 夜间模式
   ========================================================= */

#duckwow-dock.dw-theme-dark {

    /*
     * 深色玻璃
     *
     * 注意：
     * 不是简单把白色背景变黑。
     */

    background:

        linear-gradient(
            180deg,

            rgba(62,62,70,.72),

            rgba(25,25,31,.58)
        );


    /*
     * 边缘
     */

    border-color:
        rgba(255,255,255,.16);


    border-top-color:
        rgba(255,255,255,.27);


    /*
     * 夜间玻璃
     */

    -webkit-backdrop-filter:

        blur(30px)
        saturate(155%)
        brightness(.82);


    backdrop-filter:

        blur(30px)
        saturate(155%)
        brightness(.82);


    /*
     * 深色阴影
     */

    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.20),

        inset
        0 -1px 0
        rgba(0,0,0,.34),

        0 24px 60px
        rgba(0,0,0,.48),

        0 4px 14px
        rgba(0,0,0,.30);

}


/* =========================================================
   夜间顶部高光
   ========================================================= */

#duckwow-dock.dw-theme-dark::before {

    background:

        linear-gradient(
            180deg,

            rgba(255,255,255,.13)
            0%,

            rgba(255,255,255,.045)
            18%,

            rgba(255,255,255,0)
            43%,

            rgba(0,0,0,.10)
            100%
        );

}


/* =========================================================
   Dock 隐藏
   ========================================================= */

#duckwow-dock.dw-hidden {

    opacity:
        0;


    pointer-events:
        none;


    transform:
        translate(
            -50%,
            18px
        )
        scale(.985);

}


/* =========================================================
   Dock 图标按钮
   ========================================================= */

#duckwow-dock
.dw-dock-item {

    /*
     * 基础尺寸
     */

    position:
        relative;


    width:
        var(--dw-size);


    height:
        var(--dw-size);


    flex:
        0 0 var(--dw-size);


    /*
     * 居中
     */

    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    /*
     * 链接
     */

    text-decoration:
        none;


    outline:
        none;


    /*
     * 放大中心
     *
     * macOS Dock 的关键：
     * 图标从底部向上放大。
     */

    transform-origin:
        50% 100%;


    /*
     * 性能
     */

    will-change:
        transform,
        margin;


    /*
     * 动画
     */

    transition:

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

        margin-left .20s
        cubic-bezier(.22,.61,.36,1),

        margin-right .20s
        cubic-bezier(.22,.61,.36,1);

}


/* =========================================================
   PNG 图标
   ========================================================= */

#duckwow-dock
.dw-dock-icon {

    display:
        block;


    width:
        100%;


    height:
        100%;


    max-width:
        100%;


    max-height:
        100%;


    /*
     * 保持 PNG 比例
     */

    object-fit:
        contain;


    /*
     * 鼠标事件交给父级
     */

    pointer-events:
        none;


    /*
     * 防止拖动图片
     */

    user-select:
        none;


    -webkit-user-drag:
        none;


    /*
     * 图标阴影
     *
     * 白色 / 夜间都保持一致
     */

    filter:

        drop-shadow(
            0 3px 5px
            rgba(0,0,0,.14)
        );


    /*
     * 图标放大也平滑
     */

    transition:
        filter .2s ease;

}


/* =========================================================
   夜间图标
   ========================================================= */

#duckwow-dock.dw-theme-dark
.dw-dock-icon {

    /*
     * 不降低 PNG 饱和度
     *
     * 保持原图颜色鲜艳
     */

    filter:

        drop-shadow(
            0 3px 6px
            rgba(0,0,0,.35)
        );

}


/* =========================================================
   鼠标悬停图标
   ========================================================= */

#duckwow-dock
.dw-dock-item:hover
.dw-dock-icon {

    filter:

        drop-shadow(
            0 4px 7px
            rgba(0,0,0,.18)
        );

}


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

#duckwow-dock
.dw-dock-label {

    position:
        absolute;


    left:
        50%;


    /*
     * 位于 Dock 上方
     */

    bottom:
        calc(100% + 11px);


    transform:
        translate(
            -50%,
            5px
        );


    opacity:
        0;


    pointer-events:
        none;


    white-space:
        nowrap;


    /*
     * 标签内边距
     */

    padding:
        7px 10px;


    border-radius:
        9px;


    /*
     * 默认深色标签
     */

    background:
        rgba(20,20,22,.88);


    color:
        #fff;


    /*
     * 字体
     */

    font:

        500 12px/1

        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;


    /*
     * 阴影
     */

    box-shadow:
        0 7px 24px
        rgba(0,0,0,.18);


    /*
     * 动画
     */

    transition:

        opacity .16s ease,

        transform .16s ease;

}


/* =========================================================
   标签小三角
   ========================================================= */

#duckwow-dock
.dw-dock-label::after {

    content:
        "";


    position:
        absolute;


    left:
        50%;


    bottom:
        -4px;


    width:
        8px;


    height:
        8px;


    transform:
        translateX(-50%)
        rotate(45deg);


    background:
        rgba(20,20,22,.88);

}


/* =========================================================
   鼠标悬停 / 键盘焦点显示标签
   ========================================================= */

#duckwow-dock
.dw-dock-item:hover
.dw-dock-label,

#duckwow-dock
.dw-dock-item:focus-visible
.dw-dock-label {

    opacity:
        1;


    transform:
        translate(
            -50%,
            0
        );

}


/* =========================================================
   键盘焦点
   ========================================================= */

#duckwow-dock
.dw-dock-item:focus-visible {

    outline:
        none;

}


#duckwow-dock
.dw-dock-item:focus-visible
.dw-dock-icon {

    filter:

        drop-shadow(
            0 4px 8px
            rgba(0,0,0,.25)
        );

}


/* =========================================================
   1500px 以下
   ========================================================= */

@media (max-width: 1500px) {

    #duckwow-dock {

        --dw-size:
            58px;

        --dw-gap:
            5px;

        --dw-pad:
            8px;

        border-radius:
            23px;

    }

}


/* =========================================================
   1250px 以下
   ========================================================= */

@media (max-width: 1250px) {

    #duckwow-dock {

        --dw-size:
            52px;

        --dw-gap:
            4px;

        --dw-pad:
            7px;

        border-radius:
            20px;

    }

}


/* =========================================================
   1100px 以下
   ========================================================= */

@media (max-width: 1100px) {

    #duckwow-dock {

        --dw-size:
            48px;

        --dw-gap:
            4px;

        --dw-pad:
            7px;

        border-radius:
            19px;

    }

}


/* =========================================================
   手机 / 平板
   ========================================================= */

@media (max-width: 1000px) {

    #duckwow-dock {

        display:
            none !important;

    }

}


/* =========================================================
   减少动画
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #duckwow-dock,

    #duckwow-dock
    .dw-dock-item,

    #duckwow-dock
    .dw-dock-label,

    #duckwow-dock
    .dw-dock-icon {

        transition:
            none !important;

    }

}


/* =========================================================
   防止某些 WordPress 主题干扰
   ========================================================= */

#duckwow-dock,
#duckwow-dock * {

    box-sizing:
        border-box;

}


/* =========================================================
   防止主题给链接添加默认样式
   ========================================================= */

#duckwow-dock
.dw-dock-item {

    color:
        inherit !important;

    background:
        transparent !important;

    border:
        0 !important;

    box-shadow:
        none !important;

}


/* =========================================================
   保证 PNG 不被主题修改
   ========================================================= */

#duckwow-dock
.dw-dock-icon {

    opacity:
        1 !important;

    visibility:
        visible !important;

}


/* =========================================================
   Dock 自身始终保持圆角
   ========================================================= */

#duckwow-dock {

    overflow:
        visible;

}


/* =========================================================
   Safari / macOS 毛玻璃兼容
   ========================================================= */

@supports (
    -webkit-backdrop-filter: blur(1px)
) {

    #duckwow-dock {

        -webkit-backdrop-filter:
            blur(30px)
            saturate(180%)
            brightness(1.08);

    }


    #duckwow-dock.dw-theme-dark {

        -webkit-backdrop-filter:
            blur(30px)
            saturate(155%)
            brightness(.82);

    }

}


/* =========================================================
   不支持 backdrop-filter 的浏览器
   ========================================================= */

@supports not (
    backdrop-filter: blur(1px)
) {

    #duckwow-dock.dw-theme-light {

        background:
            rgba(245,245,248,.92);

    }


    #duckwow-dock.dw-theme-dark {

        background:
            rgba(35,35,40,.94);

    }

}