:root {
    --bg-color: #101014;
    --card-bg-color: rgba(255, 255, 255, 0.05);
    --text-color: #f0f0f0;
    --text-secondary-color: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --glass-size: 120px; /* 液态玻璃效果的大小 */
    --glass-size-mobile: 100px; /* 移动端液态玻璃效果的大小 */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    cursor: none; /* 隐藏默认鼠标指针 */
}

/* 移动设备上显示默认光标，因为没有鼠标 */
@media (hover: none) and (pointer: coarse) {
    body {
        cursor: auto;
    }
}

/* GitHub按钮样式 */
.github-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    text-decoration: none;
    cursor: none;
}

/* 移动设备上的GitHub按钮调整 */
@media (hover: none) and (pointer: coarse) {
    .github-button {
        cursor: auto;
    }
}

.github-button button {
    background: transparent;
    border: none;
    outline: none;
    cursor: none;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* 移动设备上的按钮样式调整 */
@media (hover: none) and (pointer: coarse) {
    .github-button button {
        cursor: pointer;
        width: 45px;
        height: 45px;
        background-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }
}

.github-button button:hover {
    transform: scale(1.2);
    background-color: rgba(255, 255, 255, 0.1);
}

.github-button svg {
    width: 30px;
    height: 30px;
    fill: var(--text-color);
    transition: all 0.3s ease;
}

/* 移动设备上的SVG图标调整 */
@media (hover: none) and (pointer: coarse) {
    .github-button svg {
        width: 28px;
        height: 28px;
    }
}

.github-button:hover svg {
    fill: #ffffff;
}

/* 液态玻璃效果样式 */
.glass-effect {
    position: fixed;
    width: var(--glass-size);
    height: var(--glass-size);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: url(#glass-filter) saturate(1.5) brightness(1.1);
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.15) inset,
                0 0 10px 4px rgba(255, 255, 255, 0.1) inset,
                0px 4px 16px rgba(17, 17, 26, 0.05), 
                0px 8px 24px rgba(17, 17, 26, 0.05),
                0px 16px 56px rgba(17, 17, 26, 0.05);
    transition: opacity 0.3s ease;
    /* 使用transform确保元素中心与鼠标位置对齐 */
    transform: translate(-50%, -50%);
    /* 移除left/top的transition，确保跟随鼠标平滑 */
    left: 0;
    top: 0;
}

/* 移动设备上的液态玻璃效果调整 */
@media (hover: none) and (pointer: coarse) {
    .glass-effect {
        width: var(--glass-size-mobile);
        height: var(--glass-size-mobile);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.2) inset,
                    0 0 15px 6px rgba(255, 255, 255, 0.15) inset,
                    0px 6px 20px rgba(17, 17, 26, 0.1);
    }
}

.glass-effect .filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

/* 显示玻璃效果 */
.glass-effect.active {
    opacity: 1;
}

.content {
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease-out 0.5s forwards;
    width: 90%;
    max-width: 1000px;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header {
    margin-bottom: 4rem;
}

.logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.title {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}

.projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* 项目卡片容器 */
.project-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    transition: 200ms;
    margin-bottom: 20px;
}

.project-wrapper:active {
    transform: scale(0.98);
}

/* 卡片画布 - 用于3D透视 */
.project-canvas {
    perspective: 800px;
    position: absolute;
    inset: 0;
    z-index: 200;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5"
      "tr-6 tr-7 tr-8 tr-9 tr-10"
      "tr-11 tr-12 tr-13 tr-14 tr-15"
      "tr-16 tr-17 tr-18 tr-19 tr-20"
      "tr-21 tr-22 tr-23 tr-24 tr-25";
    width: 100%;
    height: 100%;
}

/* 追踪区域 */
.tracker {
    position: relative;
    z-index: 200;
    grid-area: auto;
}

.tracker:hover {
    cursor: none !important;
}

/* 为每个追踪区域分配网格区域 */
.tr-1 { grid-area: tr-1; }
.tr-2 { grid-area: tr-2; }
.tr-3 { grid-area: tr-3; }
.tr-4 { grid-area: tr-4; }
.tr-5 { grid-area: tr-5; }
.tr-6 { grid-area: tr-6; }
.tr-7 { grid-area: tr-7; }
.tr-8 { grid-area: tr-8; }
.tr-9 { grid-area: tr-9; }
.tr-10 { grid-area: tr-10; }
.tr-11 { grid-area: tr-11; }
.tr-12 { grid-area: tr-12; }
.tr-13 { grid-area: tr-13; }
.tr-14 { grid-area: tr-14; }
.tr-15 { grid-area: tr-15; }
.tr-16 { grid-area: tr-16; }
.tr-17 { grid-area: tr-17; }
.tr-18 { grid-area: tr-18; }
.tr-19 { grid-area: tr-19; }
.tr-20 { grid-area: tr-20; }
.tr-21 { grid-area: tr-21; }
.tr-22 { grid-area: tr-22; }
.tr-23 { grid-area: tr-23; }
.tr-24 { grid-area: tr-24; }
.tr-25 { grid-area: tr-25; }

/* 项目卡片样式 */
.project-card {
    position: absolute;
    inset: 0;
    background: var(--card-bg-color);
    border: 2px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transform-style: preserve-3d;
    cursor: none; /* 隐藏鼠标指针 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 0;
    text-align: center;
    width: calc(100% - 4rem); /* 减去padding */
    height: calc(100% - 4rem); /* 减去padding */
    overflow: hidden;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
}


.tracker:hover ~ .project-card {
    transition: 125ms ease-in-out;
    filter: brightness(1.1);
}

/* 倾斜效果 - 第一行 (顶部) */
.tr-1:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

/* 倾斜效果 - 第二行 */
.tr-6:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

/* 倾斜效果 - 第三行 (中间) */
.tr-11:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

/* 倾斜效果 - 第四行 */
.tr-16:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

/* 倾斜效果 - 第五行 (底部) */
.tr-21:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ .project-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.project-card h2 {
    font-size: 1.7rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}
.project-card h3 {
    font-size: 1.rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.project-card p {
    font-size: 1rem;
    color: var(--text-secondary-color);
    margin: 0;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 背景效果 */
.container {
  position: absolute;
  background-size: 10px 1px;
  z-index: -1;
}

.container::before {
    content: "";
    position: absolute;
    inset: -10em;
    z-index: -1;
    --f: blur(9em) brightness(5);
    --c: #09f;
    animation: blobs-1e28bd3d 100s linear infinite,
    thingy 5s linear infinite;
    background-color: #000;
    background-image: radial-gradient(
      ellipse 66px 50px at 50% 50%,
      #0f0 0%,
      transparent 100%
    ),
    radial-gradient(ellipse 77px 60px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 78px 100px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 73px 96px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 76px 77px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 66px 51px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 90px 57px at 50% 50%, #0f0 0%, transparent 100%),
    radial-gradient(ellipse 89px 93px at 50% 50%, #0f0 0%, transparent 100%);
    background-size: 726px 576px,
    1242px 454px,
    876px 1160px,
    691px 873px,
    914px 550px,
    1159px 340px,
    1017px 831px,
    313px 977px;
}

.container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: hue-rotate(90deg);
  mask: linear-gradient(45deg, #0000, #000);
  transform-origin: center;
}

@keyframes thingy {
  0% {
    filter: var(--f) hue-rotate(0deg);
  }
  to {
    filter: var(--f) hue-rotate(1turn);
  }
}

@keyframes blobs-1e28bd3d {
  0% {
    background-position:
      271px 478px,
      62px 291px,
      67px 861px,
      553px 413px,
      36px 392px,
      1077px 226px,
      400px 799px,
      7px 264px;
  }

  to {
    background-position:
      -14975px -2978px,
      31112px 11187px,
      -20081px 8981px,
      11609px -3952px,
      -12760px 12492px,
      -9354px 2946px,
      9553px 21574px,
      946px 9057px;
  }
} 

.project-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    text-decoration: none;
    cursor: none;
}

/* 确保所有链接和可交互元素都不显示鼠标指针 */
a, button, input[type="button"], input[type="submit"], .logo, [data-tilt], .tracker, .project-card, .project-wrapper, .project-canvas, .project-link, * {
    cursor: none !important;
} 

@media (min-width: 768px) {
    .projects {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .project-wrapper {
        height: 200px;
    }

    .title {
        font-size: 3rem;
    }
}