/* ============================================================
 * DSH · 卡尼奶首页 Hero 增强层  v3
 * 视觉：参考图「深墨绿底 + 高密度青色粒子三角网」
 *  ① 渐变轮播（@property 让 CSS 变量可过渡）
 *  ② 粒子网络 canvas
 *  ③ 科技点阵（改青色，与参考图同色系）
 *  ④ 扫描光带
 *  ⑤ 深色遮罩，保证白色文字在深底上依然清晰
 * 主题 .knn-hero 已给 position:relative + overflow:hidden，
 * .knn-hero-inner 有 z-index:1，本层用 z-index:0 垫底。
 * ============================================================ */

@property --knn-hero-from {
    syntax: '<color>';
    inherits: true;
    initial-value: #04201f;
}
@property --knn-hero-to {
    syntax: '<color>';
    inherits: true;
    initial-value: #0d6f66;
}

.dsh-hero {
    transition: --knn-hero-from 1.6s ease, --knn-hero-to 1.6s ease;
    background-color: #04161a;   /* 兜底底色：深墨绿 */
    isolation: isolate;
}

/* 深色压暗层：让白字在亮青网格上依然可读（对应参考图的暗角） */
.dsh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 90% at 50% 45%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .45) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 38%);
}

/* ---------- ② 粒子 canvas ---------- */
.dsh-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .95;
}

/* ---------- ③ 科技点阵（青色，对应参考图肌理） ---------- */
.dsh-hero-grid {
    position: absolute;
    inset: -40px;
    z-index: 0;
    pointer-events: none;
    opacity: .38;
    background-image: radial-gradient(circle, rgba(130, 255, 226, .34) 1px, transparent 1.3px);
    background-size: 30px 30px;
    background-position: 0 0;
    animation: dsh-hero-grid-pan 28s linear infinite;
    -webkit-mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 85% at 50% 42%, #000 30%, transparent 100%);
}

@keyframes dsh-hero-grid-pan {
    from { background-position: 0 0; }
    to   { background-position: 30px 60px; }
}

/* ---------- ④ 扫描光带（青色，更贴合主题色调） ---------- */
.dsh-hero-scan {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg,
        rgba(120, 255, 230, 0) 0%,
        rgba(120, 255, 230, .07) 44%,
        rgba(150, 255, 240, .16) 50%,
        rgba(120, 255, 230, .07) 56%,
        rgba(120, 255, 230, 0) 100%);
    transform: translateX(-100%);
    animation: dsh-hero-scan-move 9s ease-in-out 2.5s infinite;
}

@keyframes dsh-hero-scan-move {
    0%   { opacity: 0;  transform: translateX(-100%); }
    8%   { opacity: 1; }
    42%  { opacity: 1; }
    50%  { opacity: 0;  transform: translateX(100%); }
    100% { opacity: 0;  transform: translateX(100%); }
}

/* ---------- 内容层在动效之上 ---------- */
.dsh-hero .knn-hero-inner { z-index: 2; }

/* 搜索框：深底上加强外发光 */
.dsh-hero .knn-hero-search {
    box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(150, 255, 240, .22);
}

/* 标签：青色描边，贴合参考图 */
.dsh-hero .knn-hero-tag {
    background: rgba(20, 70, 68, .45);
    border-color: rgba(130, 255, 226, .38);
    color: #d8fff7;
    backdrop-filter: blur(4px);
}
.dsh-hero .knn-hero-tag:hover {
    background: rgba(30, 110, 105, .6);
    border-color: rgba(150, 255, 240, .6);
    color: #fff;
}

/* 快捷入口卡片：青色玻璃 */
.dsh-hero .knn-hero-card {
    background: rgba(16, 56, 56, .42);
    border-color: rgba(130, 255, 226, .22);
    backdrop-filter: blur(6px);
}
.dsh-hero .knn-hero-card:hover {
    background: rgba(24, 88, 86, .58);
    border-color: rgba(150, 255, 240, .42);
}

/* 大标题：青色外发光，科技感 */
.dsh-hero .knn-hero-title {
    color: #fff;
    text-shadow:
        0 2px 26px rgba(0, 0, 0, .45),
        0 0 28px rgba(64, 224, 208, .32);
    letter-spacing: 1px;
}

/* 副标题 */
.dsh-hero .knn-hero-sub {
    color: rgba(215, 255, 248, .92);
}

/* 兜底注入外层 */
.dsh-hero-fallback { margin: 0 0 20px; }

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion: reduce) {
    .dsh-hero, .dsh-hero-grid, .dsh-hero-scan {
        animation: none !important;
        transition: none !important;
    }
    .dsh-hero-scan { display: none; }
    .dsh-hero-grid { opacity: .26; }
    .dsh-hero-canvas { opacity: .6; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .dsh-hero-grid {
        background-size: 26px 26px;
        opacity: .30;
    }
    .dsh-hero-scan { display: none; }
    .dsh-hero .knn-hero-title { letter-spacing: .5px; }
}