/* asset/css/style.css */

/* =========================================
   1. 全局设置 (Global Settings)
   ========================================= */
body {
    background-color: #030305;
    color: #E0E0E0;
    cursor: none; /* 隐藏默认光标，使用自定义光标 */
    overflow-x: hidden;
}

/* =========================================
   2. 自定义光标 (Custom Cursor)
   ========================================= */
.cursor-dot, .cursor-outline {
    position: fixed; top: 0; left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}
.cursor-dot { width: 8px; height: 8px; background-color: #00F0FF; box-shadow: 0 0 15px #00F0FF; }
.cursor-outline { 
    width: 50px; height: 50px; 
    border: 1px solid rgba(0, 240, 255, 0.3); 
    transition: width 0.2s, height 0.2s, background-color 0.2s; 
}
body:hover .cursor-outline { opacity: 1; }

/* =========================================
   3. 玻璃拟态与卡片 (Glassmorphism)
   ========================================= */
.glass-nav {
    background: rgba(3, 3, 5, 0.7);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
    background: rgba(20, 20, 25, 0.3);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* =========================================
   4. 文本效果 (Text Effects)
   ========================================= */
.text-glow { text-shadow: 0 0 20px rgba(0, 240, 255, 0.5); }
.text-gradient {
    background: linear-gradient(135deg, #FFFFFF 0%, #00F0FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   5. 故障文字效果 (Glitch - Index Page)
   ========================================= */
.glitch { position: relative; }
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #030305;
}
.glitch::before {
    left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px; text-shadow: -1px 0 #00fff9; clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(33px, 9999px, 11px, 0); } 20% { clip: rect(89px, 9999px, 96px, 0); }
    40% { clip: rect(12px, 9999px, 55px, 0); } 60% { clip: rect(67px, 9999px, 2px, 0); }
    80% { clip: rect(4px, 9999px, 88px, 0); } 100% { clip: rect(92px, 9999px, 36px, 0); }
}
@keyframes glitch-anim2 {
    0% { clip: rect(10px, 9999px, 91px, 0); } 20% { clip: rect(2px, 9999px, 23px, 0); }
    40% { clip: rect(56px, 9999px, 12px, 0); } 60% { clip: rect(29px, 9999px, 86px, 0); }
    80% { clip: rect(77px, 9999px, 44px, 0); } 100% { clip: rect(18px, 9999px, 65px, 0); }
}

/* =========================================
   6. 3D 层叠卡片 (Layer Cards - Index Page)
   ========================================= */
.layer-card {
    transform-style: preserve-3d;
    transition: all 0.5s ease;
}
.layer-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.15);
}
.layer-card::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
    opacity: 0; transition: opacity 0.5s; pointer-events: none;
}
.layer-card:hover::before { opacity: 1; }

/* =========================================
   7. 加载动画 (Loader - IMPORTANT)
   ========================================= */
#loader {
    position: fixed; inset: 0; background: #030305; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}
/* 核心：如果没有这行代码，JS添加了类名后界面也不会消失 */
.loader-hidden { opacity: 0; visibility: hidden; }

/* =========================================
   8. Business 页面特定样式
   ========================================= */

/* 自定义滚动条 (用于 Matrix 表格) */
.custom-scrollbar::-webkit-scrollbar { height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #0A0A0E; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #00F0FF; }

/* 噪点背景辅助类 */
.noise-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('./images/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    z-index: 9998;
}

/* 强制最小宽度 (防止表格压缩) */
.min-w-\[1000px\] { min-width: 1000px; }


/* --- Append to asset/css/style.css --- */

/* Performance Helper */
.will-change-transform {
    will-change: transform, opacity;
}


/* --- Append to asset/css/style.css --- */

/* Careers Page: Hiring Process Timeline */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
}
/* Use Cases (UC) styles */
.uc-preview {
    position: relative;
    min-height: 100vh;
    background: #030305;
    color: #E0E0E0;
    font-family: "Inter", "Noto Sans JP", sans-serif;
}
.uc-noise {
    position: absolute;
    inset: 0;
    background-image: url('./images/noise.svg');
    opacity: 0.05;
    pointer-events: none;
    mix-blend-mode: screen;
}
.uc-radial {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 50% 10%, rgba(0, 240, 255, 0.14), transparent 45%),
        radial-gradient(circle at 80% 50%, rgba(112, 0, 255, 0.12), transparent 40%),
        radial-gradient(circle at 25% 80%, rgba(255, 0, 85, 0.10), transparent 38%);
    filter: blur(0px);
    pointer-events: none;
}
.uc-heading-line {
    height: 1px;
    width: 160px;
    background: linear-gradient(90deg, #00F0FF, #7000FF);
    opacity: 0.7;
}
.uc-lead { max-width: 720px; margin-left: auto; margin-right: auto; }
.uc-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.uc-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(0, 240, 255, 0.35);
    box-shadow: 0 20px 60px rgba(0, 240, 255, 0.12);
}
.uc-card::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 20% 20%, rgba(0, 240, 255, 0.08), transparent 55%),
                radial-gradient(circle at 80% 10%, rgba(112, 0, 255, 0.08), transparent 50%);
    opacity: 0.6;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.uc-card:hover::before { opacity: 0.95; }
.uc-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 18px;
    padding: 1px;
    background:
        conic-gradient(
            from 0deg,
            rgba(0, 240, 255, 0) 0deg,
            rgba(0, 240, 255, 0.8) 10deg,
            rgba(0, 240, 255, 0.3) 16deg,
            rgba(112, 0, 255, 0) 30deg,
            rgba(255, 0, 85, 0) 200deg,
            rgba(255, 0, 85, 0.75) 210deg,
            rgba(255, 0, 85, 0.3) 218deg,
            rgba(0, 240, 255, 0) 360deg
        ),
        radial-gradient(circle at 0% 0%, rgba(255,255,255,0.42), transparent 45%),
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.35), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(255,255,255,0.32), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.35), transparent 45%);
    background-size: 220% 220%, 18px 18px, 18px 18px, 18px 18px, 18px 18px;
    background-position: 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: ucBorderRun 5s linear infinite, ucCorners 1.6s linear infinite;
    pointer-events: none;
}
.uc-card:hover::after { opacity: 1; animation-duration: 3.8s, 1.4s; }
.uc-card-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
.uc-list { list-style: none; padding-left: 0; margin: 0; }
.uc-list li { color: #A0A0B0; font-size: 0.9rem; margin: 10px 0; display: flex; gap: 10px; align-items: baseline; line-height: 1.8; }
.uc-list.uc-list-reverse { justify-content: flex-end; }
.uc-list.uc-list-reverse li { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.uc-desc { color: #C7C7D8; font-size: 0.95rem; line-height: 1.7; margin-bottom: 18px; }
.uc-card-body { position: relative; z-index: 2; }
.uc-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 240, 255, 0.08);
    color: #00F0FF;
}
.uc-pill-purple { background: rgba(112, 0, 255, 0.12); color: #C7A0FF; border-color: rgba(112, 0, 255, 0.35); }
.uc-fade-label { font-size: 0.75rem; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.4); }
.uc-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.uc-ghost-number {
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 64px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}
.uc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.uc-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #E8E8F0;
}
.uc-tag .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.uc-tag .dot.cyan { background: #00F0FF; box-shadow: 0 0 10px #00F0FF; }
.uc-tag .dot.purple { background: #7000FF; box-shadow: 0 0 10px #7000FF; }
.uc-tag .dot.pink { background: #FF0055; box-shadow: 0 0 10px #FF0055; }

/* Variant B specific */
.uc-variant-b .uc-beam {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    width: 6px;
    height: calc(100% + 200px);
    background: linear-gradient(180deg, rgba(0, 240, 255, 0.0), rgba(0, 240, 255, 0.7), rgba(112, 0, 255, 0.0));
    box-shadow: 0 0 80px rgba(0, 240, 255, 0.35);
    filter: blur(1px);
    opacity: 0.8;
    animation: ucBeamPulse 6s ease-in-out infinite;
}
.uc-variant-b .uc-beam::after {
    content: '';
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.35), transparent 60%);
    filter: blur(30px);
    opacity: 0.6;
}
.uc-variant-b .uc-card { border-left: 1px solid rgba(0, 240, 255, 0.2); border-right: 1px solid rgba(112, 0, 255, 0.15); }

@keyframes ucBeamPulse {
    0%, 100% { opacity: 0.75; box-shadow: 0 0 80px rgba(0, 240, 255, 0.25); }
    50% { opacity: 1; box-shadow: 0 0 120px rgba(0, 240, 255, 0.4); }
}

@keyframes ucBorderRun {
    0% { background-position: 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    25% { background-position: 50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    50% { background-position: 100% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    75% { background-position: 50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    100% { background-position: 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
}

@keyframes ucCorners {
    0% { background-position: 0% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    25% { background-position: 25% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%; }
    50% { background-position: 50% 50%, 50% 0%, 50% 0%, 100% 100%, 0% 100%; }
    75% { background-position: 75% 50%, 50% 0%, 50% 100%, 50% 100%, 0% 100%; }
    100% { background-position: 100% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
}