/* Hero Subtitle - 渐变文字动画 */
.hero-subtitle {
    font-family: var(--font-serif);
    font-size: 3vw;
    font-weight: 900;
    text-align: center;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 90%;
    max-width: 100vw;
    height: auto;

    /* 毛玻璃背景效果 */
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    border-radius: 1rem;

    /* 文字描边 */
    /* -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff; */

    /* 渐变填充 */
    background: linear-gradient(45deg,
            #8a2be2,
            #9370db,
            #9932cc,
            #ba55d3,
            #da70d6,
            #ee82ee,
            #d8bfd8,
            #8a2be2);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* 渐变动画 */
    animation: gradient-shift 8s ease infinite;
}




@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1.5rem;
        -webkit-text-stroke: 1px #ffffff;
        text-stroke: 1px #ffffff;
    }
}

@media (max-width: 480px) {
    .hero-subtitle {
        font-size: 1rem;
        -webkit-text-stroke: 0.5px #ffffff;
        text-stroke: 0.5px #ffffff;
    }
}

/* Illustration container with 16:9 aspect ratio (1920x1080) */
.插画总容器 {
    position: relative;
    width: 100vw;
    height: calc(100vw * 9 / 16);
    max-height: 100vh;
    margin-top: -180px;
}

/* 子元素绝对定位,与父容器大小相同并相互叠放 */
.插画总容器>div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 文件夹层级样式 - 每个文件夹div与父容器大小相同 */
.folder-0000,
.folder-0001,
.folder-0002,
.folder-0003,
.folder-0004 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 子文件夹也与父容器大小相同 */
.folder-0000s,
.folder-0001s-0000s,
.folder-0001s-0001s,
.folder-0001s-0002s,
.folder-0002s-0000s,
.folder-0002s-0001s,
.folder-0002s-0002s,
.folder-0003s-0000s,
.folder-0003s-0001s,
.folder-0003s-0002s,
.folder-0004s-0000,
.folder-0004s-0001,
.folder-0004s-0002,
.folder-0004s-0003,
.folder-0004s-0000s,
.folder-0004s-0001s,
.folder-0004s-0002s,
.folder-0003s-0001s-0000s,
.folder-0003s-0001s-0001s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 所有图片元素的通用样式 */
.插画总容器 img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* === 根据CSV文件重新设置元素样式 === */

/* 背景层 */
.layer-0003-bg {
    left: 0vw;
    top: 0vw;
    width: 100vw;
    height: 56.25vw;
    z-index: 0;
}

.layer-0002-bg {
    left: 0vw;
    top: 0vw;
    width: 4.375vw;
    height: 56.25vw;
    z-index: 1;
}

.layer-0000-黄边 {
    left: 0vw;
    top: 0vw;
    width: 4.375vw;
    height: 56.25vw;
    z-index: 9999;
}

/* 左侧遮罩层 - 遮挡二进制码在左侧区域的显示 */
.left-mask-overlay {
    position: absolute;
    left: 0vw;
    top: 0vw;
    width: 4.35vw;
    height: 99vh;
    background-color: var(--background-light);
    z-index: 10000;
    pointer-events: none;
}

.layer-0002-bg {
    left: 0vw;
    top: 0vw;
    width: 100vw;
    height: 56.25vw;
    z-index: 1;
}

.layer-0001-36 {
    left: 0vw;
    top: 0vw;
    width: 100vw;
    height: 56.25vw;
    z-index: 2;
}

.layer-0000-32 {
    left: 0vw;
    top: 0vw;
    width: 100vw;
    height: 56.25vw;
    z-index: 3;
}

/* 0004s 文件夹元素 */
.element-0004s-0002s-0001 {
    left: 83.02083333vw;
    top: 7.057291667vw;
    width: 15.3125vw;
    height: 43.17708333vw;
    z-index: 4;
}

.element-0004s-0002s-0000 {
    left: 81.71875vw;
    top: 6.25vw;
    width: 15.3125vw;
    height: 43.17708333vw;
    z-index: 5;
}

.element-0004s-0003-screen {
    left: 81.19791667vw;
    top: 8.411458333vw;
    width: 13.17708333vw;
    height: 7.630208333vw;
    z-index: 6;
}

.element-0004s-0002-plus-bg {
    left: 83.22916667vw;
    top: 24.32291667vw;
    width: 5.494791667vw;
    height: 5.625vw;
    z-index: 7;
}

.element-0004s-0001-logic {
    left: 81.84895833vw;
    top: 29.73958333vw;
    width: 4.661458333vw;
    height: 3.020833333vw;
    z-index: 8;
}

.element-0004s-0001s-0002 {
    left: 82.734375vw;
    top: 32.1875vw;
    width: 4.739583333vw;
    height: 17.05729167vw;
    z-index: 9;
}

.element-0004s-0001s-0001 {
    left: 82.578125vw;
    top: 14.79166667vw;
    width: 5.15625vw;
    height: 16.640625vw;
    z-index: 10;
}

.element-0004s-0001s-0000 {
    left: 87.76041667vw;
    top: 13.80208333vw;
    width: 4.739583333vw;
    height: 14.6875vw;
    z-index: 11;
}

.element-0004s-0000s-0005 {
    left: 85.67708333vw;
    top: 39.86979167vw;
    width: 4.21875vw;
    height: 5.598958333vw;
    z-index: 12;
}

.element-0004s-0000s-0004 {
    left: 86.328125vw;
    top: 39.84375vw;
    width: 8.984375vw;
    height: 9.583333333vw;
    z-index: 13;
}

.element-0004s-0000s-0003 {
    left: 91.35416667vw;
    top: 43.85416667vw;
    width: 1.5625vw;
    height: 1.510416667vw;
    z-index: 14;
}

.element-0004s-0000s-0002 {
    left: 89.21875vw;
    top: 41.74479167vw;
    width: 0.885416667vw;
    height: 3.59375vw;
    z-index: 15;
}

.element-0004s-0000s-0001 {
    left: 87.99479167vw;
    top: 42.5vw;
    width: 0.625vw;
    height: 2.786458333vw;
    z-index: 16;
}

.element-0004s-0000s-0000 {
    left: 87.44791667vw;
    top: 42.52604167vw;
    width: 3.411458333vw;
    height: 1.458333333vw;
    z-index: 17;
}

.element-0004s-0000-plus-fg {
    left: 84.140625vw;
    top: 24.94791667vw;
    width: 4.348958333vw;
    height: 4.427083333vw;
    z-index: 18;
}

/* 0003s 文件夹元素 */
.element-0003s-0002s-0002 {
    left: 63.125vw;
    top: 6.25vw;
    width: 16.11979167vw;
    height: 43.17708333vw;
    z-index: 19;
}

.element-0003s-0002s-0001 {
    left: 64.42708333vw;
    top: 7.057291667vw;
    width: 16.11979167vw;
    height: 43.17708333vw;
    z-index: 20;
}

.element-0003s-0002s-0000 {
    left: 63.125vw;
    top: 6.25vw;
    width: 16.11979167vw;
    height: 43.17708333vw;
    z-index: 21;
}

.element-0003s-0001s-0001s-0002 {
    left: 63.46354167vw;
    top: 40.33854167vw;
    width: 3.489583333vw;
    height: 7.083333333vw;
    z-index: 22;
}

.element-0003s-0001s-0001s-0001 {
    left: 72.5vw;
    top: 44.81770833vw;
    width: 2.265625vw;
    height: 4.583333333vw;
    z-index: 23;
}

.element-0003s-0001s-0001s-0000 {
    left: 74.0625vw;
    top: 39.03645833vw;
    width: 5.130208333vw;
    height: 10.33854167vw;
    z-index: 24;
}

.element-0003s-0001s-0001 {
    left: 64.41666667vw;
    top: 17.65625vw;
    width: 13.328125vw;
    height: 16.35416667vw;
    z-index: 25;
}

.element-0003s-0001s-0000 {
    left: 70.46875vw;
    top: 6.145833333vw;
    width: 9.114583333vw;
    height: 10.703125vw;
    z-index: 26;
}

.element-0003s-0001s-0000s-0001 {
    left: 64.79166667vw;
    top: 29.140625vw;
    width: 12.44791667vw;
    height: 13.95833333vw;
    z-index: 27;
}

.element-0003s-0001s-0000s-0000 {
    left: 65.57291667vw;
    top: 29.42708333vw;
    width: 7.239583333vw;
    height: 3.958333333vw;
    z-index: 28;
}

.element-0003s-0000s-0002 {
    left: 67.36979167vw;
    top: 35.13020833vw;
    width: 4.453125vw;
    height: 14.32291667vw;
    z-index: 29;
}

.element-0003s-0000s-0001 {
    left: 69.6875vw;
    top: 29.58333333vw;
    width: 6.71875vw;
    height: 15.10416667vw;
    z-index: 30;
}

.element-0003s-0000s-0000 {
    left: 65.13020833vw;
    top: 6.744791667vw;
    width: 7.552083333vw;
    height: 12.29166667vw;
    z-index: 31;
}

/* 0002s 文件夹元素 */
.element-0002s-0002s-0001 {
    left: 38.80208333vw;
    top: 7.057291667vw;
    width: 21.640625vw;
    height: 42.890625vw;
    z-index: 32;
}

.element-0002s-0002s-0000 {
    left: 37.63020833vw;
    top: 6.354166667vw;
    width: 21.640625vw;
    height: 42.890625vw;
    z-index: 33;
}

.element-0002s-0001s-0016 {
    left: 40.52083333vw;
    top: 46.30208333vw;
    width: 18.77604167vw;
    height: 2.994791667vw;
    z-index: 34;
}

.element-0002s-0001s-0015 {
    left: 37.8125vw;
    top: 19.34895833vw;
    width: 3.723958333vw;
    height: 6.510416667vw;
    z-index: 35;
}

.element-0002s-0001s-0014 {
    left: 46.50895833vw;
    top: 32.29166667vw;
    width: 17.265625vw;
    height: 8.177083333vw;
    z-index: 36;
}

.element-0002s-0001s-0013 {
    left: 40.44270833vw;
    top: 35.80729167vw;
    width: 4.895833333vw;
    height: 5.78125vw;
    z-index: 37;
}

.element-0002s-0001s-0012 {
    left: 37.65625vw;
    top: 21.69270833vw;
    width: 8.645833333vw;
    height: 7.552083333vw;
    z-index: 38;
}

.element-0002s-0001s-0011 {
    left: 41.43229167vw;
    top: 43.80208333vw;
    width: 4.270833333vw;
    height: 3.463541667vw;
    z-index: 39;
}

.element-0002s-0001s-0010 {
    left: 39.53125vw;
    top: 42.70833333vw;
    width: 4.947916667vw;
    height: 4.010416667vw;
    z-index: 40;
}

.element-0002s-0001s-0009 {
    left: 37.78645833vw;
    top: 35.44270833vw;
    width: 3.723958333vw;
    height: 6.510416667vw;
    z-index: 41;
}

.element-0002s-0001s-0008 {
    left: 55.3125vw;
    top: 22.16145833vw;
    width: 6.510416667vw;
    height: 3.723958333vw;
    z-index: 42;
}

.element-0002s-0001s-0007 {
    left: 53.54166667vw;
    top: 13.48958333vw;
    width: 2.994791667vw;
    height: 3.567708333vw;
    z-index: 43;
}

.element-0002s-0001s-0006 {
    left: 49.50520833vw;
    top: 11.69270833vw;
    width: 6.328125vw;
    height: 2.8125vw;
    z-index: 44;
}

.element-0002s-0001s-0005 {
    left: 37.91666667vw;
    top: 7.317708333vw;
    width: 13.59375vw;
    height: 12.5vw;
    z-index: 45;
}

.element-0002s-0001s-0004 {
    left: 50.859375vw;
    top: 36.953125vw;
    width: 2.708333333vw;
    height: 2.5vw;
    z-index: 46;
}

.element-0002s-0001s-0003 {
    left: 39.6875vw;
    top: 8.984375vw;
    width: 8.984375vw;
    height: 8.072916667vw;
    z-index: 47;
}

.element-0002s-0001s-0002 {
    left: 44.453125vw;
    top: 17.31770833vw;
    width: 9.84375vw;
    height: 9.375vw;
    z-index: 48;
}

.element-0002s-0001s-0001 {
    left: 42.890625vw;
    top: 12.96875vw;
    width: 1.380208333vw;
    height: 1.822916667vw;
    z-index: 49;
}

.element-0002s-0001s-0000 {
    left: 51.19791667vw;
    top: 8.4375vw;
    width: 2.291666667vw;
    height: 4.192708333vw;
    z-index: 50;
}

.element-0002s-0000s-0005 {
    left: 40.13020833vw;
    top: 26.11979167vw;
    width: 11.5625vw;
    height: 15.80729167vw;
    z-index: 51;
}

.element-0002s-0000s-0004 {
    left: 47.44791667vw;
    top: 39.16666667vw;
    width: 5.416666667vw;
    height: 8.463541667vw;
    z-index: 52;
}

.element-0002s-0000s-0003 {
    left: 53.17708333vw;
    top: 38.359375vw;
    width: 6.119791667vw;
    height: 9.869791667vw;
    z-index: 53;
}

.element-0002s-0000s-0002 {
    left: 50.44270833vw;
    top: 25.52083333vw;
    width: 7.994791667vw;
    height: 8.541666667vw;
    z-index: 54;
}

.element-0002s-0000s-0001 {
    left: 38.95833333vw;
    top: 11.58854167vw;
    width: 7.083333333vw;
    height: 8.151041667vw;
    z-index: 55;
}

.element-0002s-0000s-0000 {
    left: 51.66666667vw;
    top: 6.822916667vw;
    width: 4.765625vw;
    height: 10.36458333vw;
    z-index: 56;
}

/* 0001s 文件夹元素 */
.element-0001s-0002s-0001 {
    left: 18.80208333vw;
    top: 7.057291667vw;
    width: 15.96354167vw;
    height: 30.67708333vw;
    z-index: 57;
}

.element-0001s-0002s-0000 {
    left: 17.68229167vw;
    top: 6.432291667vw;
    width: 15.96354167vw;
    height: 30.67708333vw;
    z-index: 58;
}

.element-0001s-0001s-0005 {
    left: 17.890625vw;
    top: 28.33333333vw;
    width: 12.47395833vw;
    height: 8.776041667vw;
    z-index: 59;
}

.element-0001s-0001s-0004 {
    left: 18.984375vw;
    top: 29.296875vw;
    width: 5.234375vw;
    height: 3.229166667vw;
    z-index: 60;
}

.element-0001s-0001s-0003 {
    left: 23.359375vw;
    top: 9.401041667vw;
    width: 10.67708333vw;
    height: 10.52083333vw;
    z-index: 61;
}

.element-0001s-0001s-0002 {
    left: 25.72916667vw;
    top: 7.057291667vw;
    width: 7.8125vw;
    height: 4.6875vw;
    z-index: 62;
}

.element-0001s-0001s-0001 {
    left: 29.40104167vw;
    top: 23.61979167vw;
    width: 5.260416667vw;
    height: 5.234375vw;
    z-index: 63;
}

.element-0001s-0001s-0000 {
    left: 31.22395833vw;
    top: 28.38541667vw;
    width: 3.645833333vw;
    height: 3.645833333vw;
    z-index: 64;
}

.element-0001s-0000s-0003 {
    left: 17.39583333vw;
    top: 8.229166667vw;
    width: 7.5vw;
    height: 13.02083333vw;
    z-index: 65;
}

.element-0001s-0000s-0002 {
    left: 16.875vw;
    top: 18.72395833vw;
    width: 6.171875vw;
    height: 10.78125vw;
    z-index: 66;
}

.element-0001s-0000s-0001 {
    left: 25.26041667vw;
    top: 13.59375vw;
    width: 6.901041667vw;
    height: 14.40104167vw;
    z-index: 67;
}

.element-0001s-0000s-0000 {
    left: 25.18229167vw;
    top: 27.52604167vw;
    width: 6.953125vw;
    height: 9.453125vw;
    z-index: 68;
}

/* 0000s 文件夹元素 */
.element-0000s-0015 {
    left: 5.546875vw;
    top: 7.057291667vw;
    width: 29.40104167vw;
    height: 42.8125vw;
    z-index: 69;
}

.element-0000s-0014 {
    left: 4.348958333vw;
    top: 6.458333333vw;
    width: 29.40104167vw;
    height: 42.8125vw;
    z-index: 70;
}

.element-0000s-0013 {
    left: 0.078125vw;
    top: 37.421875vw;
    width: 21.484375vw;
    height: 7.057291667vw;
    z-index: 71;
}

.element-0000s-0012 {
    left: 0vw;
    top: 45.10416667vw;
    width: 18.17708333vw;
    height: 3.53vw;
    z-index: 72;
}

.element-0000s-0011 {
    left: 6.041666667vw;
    top: 5.833333333vw;
    width: 5.442708333vw;
    height: 39.08854167vw;
    z-index: 73;
}

.element-0000s-0010 {
    left: 4.348958333vw;
    top: 16.953125vw;
    width: 18.4375vw;
    height: 32.421875vw;
    z-index: 74;
}

.element-0000s-0009 {
    left: 26.97916667vw;
    top: 40.44270833vw;
    width: 6.692708333vw;
    height: 7.890625vw;
    z-index: 75;
}

.element-0000s-0008 {
    left: 18.828125vw;
    top: 41.38020833vw;
    width: 8.828125vw;
    height: 7.942708333vw;
    z-index: 76;
}

.element-0000s-0007 {
    left: 14.58333333vw;
    top: 40.02604167vw;
    width: 5.104166667vw;
    height: 9.270833333vw;
    z-index: 77;
}

.element-0000s-0006 {
    left: 10.05208333vw;
    top: 16.27604167vw;
    width: 4.947916667vw;
    height: 5.494791667vw;
    z-index: 78;
}

.element-0000s-0005 {
    left: 8.489583333vw;
    top: 38.046875vw;
    width: 5.494791667vw;
    height: 11.27604167vw;
    z-index: 79;
}

.element-0000s-0004 {
    left: 7.65625vw;
    top: 25.28645833vw;
    width: 5.859375vw;
    height: 13.02083333vw;
    z-index: 80;
}

.element-0000s-0003 {
    left: 6.71875vw;
    top: 30.3125vw;
    width: 0.9375vw;
    height: 1.015625vw;
    z-index: 81;
}

.element-0000s-0002 {
    left: 4.114583333vw;
    top: 12.29166667vw;
    width: 7.838541667vw;
    height: 9.947916667vw;
    z-index: 82;
}

.element-0000s-0001 {
    left: 8.776041667vw;
    top: 22.578125vw;
    width: 1.380208333vw;
    height: 1.71875vw;
    z-index: 83;
}

.element-0000s-0000 {
    left: 4.895833333vw;
    top: 22.70833333vw;
    width: 3.411458333vw;
    height: 2.786458333vw;
    z-index: 84;
}

/* === 动画定义 === */

/* 缓动函数定义 */
:root {
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 关键帧动画 */

/* 细菌相关动画 */
@keyframes bacteria-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-8px) rotate(2deg);
    }

    50% {
        transform: translateY(-15px) rotate(0deg);
    }

    75% {
        transform: translateY(-8px) rotate(-2deg);
    }
}

@keyframes bacteria-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* 齿轮旋转动画 */
@keyframes gear-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes gear-rotate-reverse {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* 人物呼吸动画 */
@keyframes character-breath {

    0%,
    100% {
        transform: scale(1) translateY(0px);
    }

    50% {
        transform: scale(1.02) translateY(-2px);
    }
}

/* 荧幕闪烁动画 */
@keyframes screen-flicker {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    75% {
        opacity: 0.9;
    }
}

/* 二进制码滚动动画 */
@keyframes binary-scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* DNA双螺旋动画 */
/* @keyframes dna-twist {
    0% {
        transform: rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateY(360deg) rotateZ(10deg);
    }
} */

/* 电路闪烁动画 */
@keyframes circuit-glow {

    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(0, 255, 255, 0.3));
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 15px rgba(0, 255, 255, 0.6));
    }
}

/* 液体波动动画 */
@keyframes liquid-wave {

    0%,
    100% {
        transform: scaleY(1) translateY(0px);
    }

    50% {
        transform: scaleY(1.05) translateY(-2px);
    }
}

/* 风线飘动动画 */
@keyframes wind-flow {
    0% {
        transform: translateX(0px) scaleX(1);
    }

    50% {
        transform: translateX(5px) scaleX(1.1);
    }

    100% {
        transform: translateX(0px) scaleX(1);
    }
}

/* 信号脉冲动画 */
@keyframes signal-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* 灯泡闪亮动画 */
@keyframes bulb-shine {

    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 10px rgba(255, 255, 0, 0.3));
    }

    50% {
        filter: brightness(1.5) drop-shadow(0 0 30px rgba(255, 255, 0, 0.8));
    }
}

/* 云雾飘散动画 */
@keyframes cloud-drift {

    0%,
    100% {
        transform: translateX(0px) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateX(10px) scale(1.05);
        opacity: 0.9;
    }
}

/* 显微镜聚焦动画 */
@keyframes microscope-focus {

    0%,
    100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.02);
    }

    75% {
        transform: scale(0.98);
    }
}

/* 箭头指示动画 */
@keyframes arrow-point {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(8px);
    }
}

@keyframes arrow-point-right {

    0%,
    100% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(8px);
    }
}

/* 软盘读取动画 */
@keyframes disk-read {

    0%,
    100% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(5deg);
    }
}

/* 天平摆动动画 */
@keyframes scale-balance {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1deg);
    }

    75% {
        transform: rotate(-1deg);
    }
}

/* CPU处理动画 */
@keyframes cpu-process {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

/* 量杯液体晃动动画 */
@keyframes beaker-shake {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(0.5deg);
    }

    75% {
        transform: rotate(-0.5deg);
    }
}

/* Loading文字动画 */
@keyframes loading-text {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* === 元素动画应用 === */

/* 细菌类元素 */
.element-0000s-0000,
/* 桌上细菌 */
.element-0001s-0001s-0002,
/* 上细菌 */
.element-0002s-0001s-0003,
/* 张头上细菌 */
.element-0002s-0001s-0010,
/* 左下角黄色细菌 */
.element-0002s-0001s-0011

/* 左下角细菌影子 */
    {
    animation: bacteria-float 4s var(--ease-in-out-back) infinite;
}

.element-0000s-0000 {
    animation-delay: 0s;
}

.element-0001s-0001s-0002 {
    animation-delay: 0.8s;
}

.element-0002s-0001s-0003 {
    animation-delay: 1.6s;
}

.element-0002s-0001s-0010 {
    animation-delay: 2.4s;
}

.element-0002s-0001s-0011 {
    animation-delay: 2.6s;
}

/* 齿轮类元素 */
.element-0001s-0001s-0000

/* 小齿轮 */
    {
    animation: gear-rotate 4s linear infinite;
    transform-origin: center;
}

.element-0001s-0001s-0001

/* 大齿轮 */
    {
    animation: gear-rotate-reverse 4s linear infinite;
    transform-origin: center;
}

.element-0004s-0000s-0003

/* 湿实验机上齿轮 */
    {
    animation: gear-rotate 2.5s linear infinite;
    transform-origin: center;
}

/* 人物角色 */
.element-0000s-0002,
/* 湿实验同学1 */
.element-0000s-0004,
/* 湿实验同学某 */
.element-0000s-0005,
/* LuanBoxiang */
.element-0000s-0008,
/* 湿实验同学2 */
.element-0001s-0000s-0000,
/* 网页同学1 */
.element-0001s-0000s-0001,
/* 网页同学2 */
.element-0001s-0000s-0002,
/* NiuJiangyue */
.element-0001s-0000s-0003,
/* HuangXiangyu */
.element-0002s-0000s-0000,
/* Zouxiaoyao */
.element-0002s-0000s-0001,
/* ZhangChenyue */
.element-0002s-0000s-0002,
/* Caikailing */
.element-0002s-0000s-0003,
/* Wangyan */
.element-0002s-0000s-0004,
/* RuanYuya */
.element-0002s-0000s-0005,
/* Wanghongbo */
.element-0003s-0000s-0000,
/* QiuLinjia */
.element-0003s-0000s-0001,
/* 某人2 */
.element-0003s-0000s-0002,
/* ZhangYaxuan */
.element-0004s-0001s-0000,
/* 数模同学1 */
.element-0004s-0001s-0001,
/* 数模同学2 */
.element-0004s-0001s-0002

/* 数模同学3 */
    {
    animation: character-breath 6s var(--ease-smooth) infinite;
}

/* 为不同人物添加延迟,让呼吸不同步 */
.element-0000s-0002 {
    animation-delay: 0s;
}

.element-0000s-0004 {
    animation-delay: 1s;
}

.element-0000s-0005 {
    animation-delay: 2s;
}

.element-0000s-0008 {
    animation-delay: 3s;
}

.element-0001s-0000s-0000 {
    animation-delay: 0.5s;
}

.element-0001s-0000s-0001 {
    animation-delay: 1.5s;
}

.element-0001s-0000s-0002 {
    animation-delay: 2.5s;
}

.element-0001s-0000s-0003 {
    animation-delay: 3.5s;
}

.element-0002s-0000s-0000 {
    animation-delay: 0.3s;
}

.element-0002s-0000s-0001 {
    animation-delay: 1.3s;
}

.element-0002s-0000s-0002 {
    animation-delay: 2.3s;
}

.element-0002s-0000s-0003 {
    animation-delay: 3.3s;
}

.element-0002s-0000s-0004 {
    animation-delay: 0.7s;
}

.element-0002s-0000s-0005 {
    animation-delay: 1.7s;
}

.element-0003s-0000s-0000 {
    animation-delay: 2.7s;
}

.element-0003s-0000s-0001 {
    animation-delay: 3.7s;
}

.element-0003s-0000s-0002 {
    animation-delay: 0.9s;
}

.element-0004s-0001s-0000 {
    animation-delay: 1.9s;
}

.element-0004s-0001s-0001 {
    animation-delay: 2.9s;
}

.element-0004s-0001s-0002 {
    animation-delay: 3.9s;
}

/* 荧幕和显示器 */
.element-0001s-0001s-0003,
/* 科幻logic荧幕 */
.element-0003s-0001s-0000s-0001,
/* 荧幕本体 */
.element-0004s-0003-screen

/* 上荧幕 */
    {
    animation: screen-flicker 3s var(--ease-smooth) infinite;
}

.element-0001s-0001s-0003 {
    animation-delay: 0s;
}

.element-0003s-0001s-0000s-0001 {
    animation-delay: 1s;
}

.element-0004s-0003-screen {
    animation-delay: 2s;
}

/* 二进制码 */
.element-0000s-0012,
/* 二进制码1 */
.element-0000s-0013

/* 二进制码2 */
    {
    animation: binary-scroll 8s linear infinite;
}

.element-0000s-0012 {
    animation-delay: 0s;
}

.element-0000s-0013 {
    animation-delay: 4s;
}

/* DNA */
.element-0003s-0001s-0001

/* 中间DNA */
    {
    animation: dna-twist 10s var(--ease-elastic) infinite;
    transform-origin: center;
}

/* 电路类 */
.element-0000s-0011,
/* 电路 */
.element-0002s-0001s-0014,
/* 右边的电路图 */
.element-0003s-0001s-0001s-0000,
/* 下电路3 */
.element-0003s-0001s-0001s-0001,
/* 下电路2 */
.element-0003s-0001s-0001s-0002

/* 下电路1 */
    {
    animation: circuit-glow 4s var(--ease-smooth) infinite;
}

.element-0000s-0011 {
    animation-delay: 0s;
}

.element-0002s-0001s-0014 {
    animation-delay: 1s;
}

.element-0003s-0001s-0001s-0000 {
    animation-delay: 2s;
}

.element-0003s-0001s-0001s-0001 {
    animation-delay: 2.5s;
}

.element-0003s-0001s-0001s-0002 {
    animation-delay: 3s;
}

/* 液体类 */
.element-0004s-0000s-0002

/* 液体 */
    {
    animation: liquid-wave 3s var(--ease-bounce) infinite;
}

/* 风线 */
.element-0004s-0000s-0005

/* 风线 */
    {
    animation: wind-flow 2s var(--ease-smooth) infinite;
}

/* 信号类 */
.element-0002s-0001s-0001

/* 张头上小信号 */
    {
    animation: signal-pulse 2s var(--ease-bounce) infinite;
    animation-delay: 0s;
}

.element-0002s-0001s-0002

/* 蔡头上大信号 */
    {
    animation: signal-pulse 2s var(--ease-bounce) infinite;
    animation-delay: 1s;
    transform-origin: bottom right;
}



/* 灯泡 */
.element-0002s-0001s-0004

/* 中间灯泡 */
    {
    animation: bulb-shine 4s var(--ease-smooth) infinite;
}

/* 云雾类 */
.element-0002s-0001s-0012
/* 左边的云雾 */

    {
    animation: cloud-drift 6s var(--ease-smooth) infinite;
}

.element-0002s-0001s-0012 {
    animation-delay: 0s;
}

.element-0002s-0001s-0015 {
    animation-delay: 3s;
}

/* 显微镜 */
.element-0002s-0001s-0000

/* 上方显微镜 */
    {
    animation: microscope-focus 5s var(--ease-elastic) infinite;
}

/* 箭头 */
.element-0002s-0001s-0009

/* 第二个下箭头 */
    {
    animation: arrow-point 4s var(--ease-bounce) infinite;
}

.element-0002s-0001s-0015

/* 第一个下箭头 */
    {
    animation: arrow-point 3s var(--ease-bounce) infinite;
}

.element-0002s-0001s-0015 {
    animation-delay: 0s;
}

.element-0002s-0001s-0009 {
    animation-delay: 1s;
}

.element-0002s-0001s-0008

/* 右边的箭头 */
    {
    animation: arrow-point-right 2s var(--ease-bounce) infinite;
}

.element-0002s-0001s-0018 {
    animation-delay: 1.5s;
}

/* 软盘 */
.element-0003s-0001s-0000

/* 软盘 */
    {
    animation: disk-read 4s var(--ease-elastic) infinite;
}

/* 天平 */
.element-0000s-0006

/* 桌上天平 */
    {
    animation: scale-balance 6s var(--ease-smooth) infinite;
}

/* CPU */
.element-0000s-0009

/* CPU */
    {
    animation: cpu-process 3s var(--ease-bounce) infinite;
}

/* 量杯 */
.element-0000s-0001

/* 桌上量杯 */
    {
    animation: beaker-shake 4s var(--ease-smooth) infinite;
}

/* Loading文字 */
.element-0001s-0001s-0004

/* LOGIC Loading */
    {
    animation: loading-text 2s var(--ease-smooth) infinite;
}

/* 电脑 */
.element-0001s-0001s-0005

/* 电脑 */
    {
    animation: screen-flicker 4s var(--ease-smooth) infinite;
}

/* 荧幕算式 */
.element-0003s-0001s-0000s-0000

/* 荧幕算式 */
    {
    animation: loading-text 3s var(--ease-smooth) infinite;
}

/* 喷壶 */
.element-0000s-0003

/* 某手上的喷壶 */
    {
    animation: bacteria-pulse 3s var(--ease-bounce) infinite;
}

/* 逻辑门 */
.element-0004s-0001-logic

/* 中间逻辑门 */
    {
    animation: circuit-glow 3s var(--ease-smooth) infinite;
}

/* 铁架仪器 */
.element-0000s-0007

/* 湿实验铁架仪器 */
    {
    animation: scale-balance 8s var(--ease-smooth) infinite;
}

/* 湿实验机主体 */
.element-0004s-0000s-0004

/* 湿实验机主体 */
    {
    animation: cpu-process 5s var(--ease-smooth) infinite;
}

/* 字母主体和阴影 */
.element-0001s-0002s-0000,
/* o字母主体 */
.element-0001s-0002s-0001,
/* o字母阴影 */
.element-0002s-0002s-0000,
/* G主体 */
.element-0002s-0002s-0001

/* G阴影 */
    {
    animation: character-breath 8s var(--ease-smooth) infinite;
}

.element-0001s-0002s-0000 {
    animation-delay: 0s;
}

.element-0001s-0002s-0001 {
    animation-delay: 0.2s;
}

.element-0002s-0002s-0000 {
    animation-delay: 4s;
}

.element-0002s-0002s-0001 {
    animation-delay: 4.2s;
}



/* +号相关 */
.element-0004s-0000-plus-fg,
/* +号前景 */
.element-0004s-0002-plus-bg

/* +号背景 */
    {
    animation: signal-pulse 4s var(--ease-bounce) infinite;
}

.element-0004s-0000-plus-fg {
    animation-delay: 0s;
}

.element-0004s-0002-plus-bg {
    animation-delay: 2s;
}

/* 实验设备微动 */
.element-0004s-0000s-0000,
/* 固着横 */
.element-0004s-0000s-0001

/* 紫色竖 */
    {
    animation: scale-balance 10s var(--ease-smooth) infinite;
}

.element-0004s-0000s-0000 {
    animation-delay: 0s;
}

.element-0004s-0000s-0001 {
    animation-delay: 5s;
}

/* 桌子和实验器材 */
.element-0000s-0010,
/* 桌子 */
.element-0002s-0001s-0006,
/* 上面的桌子 */
.element-0002s-0001s-0016

/* 桌子和培养皿和量杯 */
    {
    animation: scale-balance 15s var(--ease-smooth) infinite;
}

/* 凳子 */
.element-0002s-0001s-0007,
/* 上面的凳子 */
.element-0002s-0001s-0013

/* 左边的凳子 */
    {
    animation: character-breath 10s var(--ease-smooth) infinite;
}

/* 悬停增强效果 */
/* .插画总容器 img:hover {
    animation-play-state: paused;
    transform: scale(1.05);
    transition: transform 0.3s var(--ease-bounce);
    filter: brightness(1.1);
} */

/* === 弹幕效果样式 === */
.danmaku-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.danmaku-line {
    position: absolute;
    left: 0;
    width: auto;
    white-space: nowrap;
    display: flex;
}

.danmaku-text {
    font-family: var(--font-serif);
    font-size: 2vw;
    font-weight: 700;
    padding: 0 4vw;
    color: rgba(138, 43, 226, 0.2);
    /* text-shadow:
        0 0 10px rgba(138, 43, 226, 0.8),
        0 0 20px rgba(138, 43, 226, 0.6),
        0 0 30px rgba(138, 43, 226, 0.4);
    -webkit-text-stroke: 1px rgba(186, 85, 211, 0.3);
    text-stroke: 1px rgba(186, 85, 211, 0.3); */
}

/* 弹幕循环滚动动画 - 移动一半距离实现无缝循环 */
@keyframes danmaku-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes danmaku-scroll-2 {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* 为每一行弹幕设置不同的位置和速度 */
.danmaku-line-1 {
    top: 12%;
    animation: danmaku-scroll 20s linear infinite;
}

.danmaku-line-2 {
    top: 32%;
    animation: danmaku-scroll 25s linear infinite;
    animation-delay: -5s;
}

.danmaku-line-3 {
    top: 52%;
    animation: danmaku-scroll 22s linear infinite;
    animation-delay: -10s;
}

.danmaku-line-4 {
    top: 72%;
    animation: danmaku-scroll 28s linear infinite;
    animation-delay: -15s;
}

.danmaku-line-5 {
    top: 22%;
    animation: danmaku-scroll-2 20s linear infinite;
    animation-delay: -15s;
}

.danmaku-line-6 {
    top: 42%;
    animation: danmaku-scroll-2 25s linear infinite;
    animation-delay: -10s;
}

.danmaku-line-7 {
    top: 62%;
    animation: danmaku-scroll-2 22s linear infinite;
    animation-delay: -5s;
}

.danmaku-line-8 {
    top: 82%;
    animation: danmaku-scroll-2 28s linear infinite;
}



/* 响应式设计 */
@media (max-width: 768px) {
    .danmaku-text {
        font-size: 3vw;
        padding: 0 3vw;
    }
}

@media (max-width: 480px) {
    .danmaku-text {
        font-size: 4vw;
        padding: 0 2vw;
        -webkit-text-stroke: 0.5px rgba(186, 85, 211, 0.3);
        text-stroke: 0.5px rgba(186, 85, 211, 0.3);
    }
}