/* ----- 外层容器（背景层）----- */
.container1 {
    pointer-events: none;      /* 不拦截鼠标事件 */
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;          /* 隐藏超出部分 */
    position: fixed;           /* 固定定位覆盖视口 */
    z-index: -1;               /* 置于所有内容下方 */
    margin-top: -5%;           /* 向上偏移，制造扩散效果 */
}

.container1 .inner-container1 {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: -1;
}

/* ----- 所有图标共用样式 ----- */
.shape {
    margin: 0 auto;
    position: relative;
    z-index: -1;

    /* 颜色和字体大小由具体图标的变量控制，伪元素继承这些值 */
    color: var(--color);
    font-size: var(--size);

    /* 统一旋转动画，时长和起始角度由变量控制 */
    animation: rotate var(--duration) linear infinite;
    animation-delay: calc(-1 * var(--start-angle) * var(--duration) / 360);
}

/* 伪元素是实际显示图标的载体 */
.shape .random-shape::after {
    font-family: FontAwesome;      /* 必须已加载FontAwesome库 */
    display: inline-block;         /* 保持内联块，使margin生效 */
    margin: var(--margin);         /* 控制图标位置偏移 */
    /* 颜色和字体大小从父元素.shape继承 */
}

/* 统一的关键帧：旋转360度 */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ----- 暂停动画类（可添加至容器）----- */
.stop-shape {
    animation-play-state: paused;
}

/* ===== 50个图标的独有定义（按原顺序 shape-1 至 shape-50）===== */

/* shape-1 */
.shape-1 {
    --margin: 6rem;
    --color: #DB7093;
    --size: 1.2rem;
    --duration: 45s;
    --start-angle: 226;
}
.shape-1 .random-shape::after {
    content: "\f018";  /* 原代码 "" 对应信封图标（FontAwesome 4 中的 fa-envelope） */
}

/* shape-2 */
.shape-2 {
    --margin: 9rem;
    --color: #FFD700;
    --size: 1.8rem;
    --duration: 45s;
    --start-angle: 74;
}
.shape-2 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 对应群组图标（fa-group） */
}

/* shape-3 */
.shape-3 {
    --margin: 8rem;
    --color: #FFD700;
    --size: 1.6rem;
    --duration: 48s;
    --start-angle: 242;
}
.shape-3 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 对应 flask 图标（fa-flask） */
}

/* shape-4 */
.shape-4 {
    --margin: 10rem;
    --color: #DB7093;
    --size: 2rem;
    --duration: 50s;
    --start-angle: 313;
}
.shape-4 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组图标 */
}

/* shape-5 */
.shape-5 {
    --margin: 9rem;
    --color: #C2B7FE;
    --size: 1.8rem;
    --duration: 50s;
    --start-angle: 135;
}
.shape-5 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-6 */
.shape-6 {
    --margin: 5rem;
    --color: #95A9FF;
    --size: 1rem;
    --duration: 49s;
    --start-angle: 355;
}
.shape-6 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-7 */
.shape-7 {
    --margin: 4rem;
    --color: #DB7093;
    --size: 0.8rem;
    --duration: 48s;
    --start-angle: 28;
}
.shape-7 .random-shape::after {
    content: "\f096";  /* 原代码 "" 对应方框图标（fa-square-o） */
}

/* shape-8 */
.shape-8 {
    --margin: 9rem;
    --color: #95A9FF;
    --size: 1.8rem;
    --duration: 43s;
    --start-angle: 126;
}
.shape-8 .random-shape::after {
    content: "\f096";  /* 原代码 "" 同方框 */
}

/* shape-9 */
.shape-9 {
    --margin: 2rem;
    --color: #FFF8DC;
    --size: 0.4rem;
    --duration: 45s;
    --start-angle: 165;
}
.shape-9 .random-shape::after {
    content: "\f096";  /* 原代码 "" 同方框 */
}

/* shape-10 */
.shape-10 {
    --margin: 3rem;
    --color: #95A9FF;
    --size: 0.6rem;
    --duration: 41s;
    --start-angle: 180;
}
.shape-10 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-11 */
.shape-11 {
    --margin: 7rem;
    --color: #95A9FF;
    --size: 1.4rem;
    --duration: 50s;
    --start-angle: 85;
}
.shape-11 .random-shape::after {
    content: "\f096";  /* 原代码 "" 同方框 */
}

/* shape-12 */
.shape-12 {
    --margin: 6rem;
    --color: #FFD700;
    --size: 1.2rem;
    --duration: 45s;
    --start-angle: 137;
}
.shape-12 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-13 */
.shape-13 {
    --margin: 7rem;
    --color: #FFF8DC;
    --size: 1.4rem;
    --duration: 44s;
    --start-angle: 15;
}
.shape-13 .random-shape::after {
    content: "\f005";  /* 原代码 "" 对应星星图标（fa-star） */
}

/* shape-14 */
.shape-14 {
    --margin: 8rem;
    --color: #DB7093;
    --size: 1.6rem;
    --duration: 50s;
    --start-angle: 242;
}
.shape-14 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-15 */
.shape-15 {
    --margin: 4rem;
    --color: #95A9FF;
    --size: 0.8rem;
    --duration: 47s;
    --start-angle: 176;
}
.shape-15 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 对应实心方框（fa-square） */
}

/* shape-16 */
.shape-16 {
    --margin: 9rem;
    --color: #FFD700;
    --size: 1.8rem;
    --duration: 43s;
    --start-angle: 66;
}
.shape-16 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-17 */
.shape-17 {
    --margin: 6rem;
    --color: #FFF8DC;
    --size: 1.2rem;
    --duration: 43s;
    --start-angle: 113;
}
.shape-17 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-18 */
.shape-18 {
    --margin: 2rem;
    --color: #95A9FF;
    --size: 0.4rem;
    --duration: 44s;
    --start-angle: 166;
}
.shape-18 .random-shape::after {
    content: "\f005";  /* 原代码 "" 同星星 */
}

/* shape-19 */
.shape-19 {
    --margin: 1rem;
    --color: #FFF8DC;
    --size: 0.2rem;
    --duration: 42s;
    --start-angle: 293;
}
.shape-19 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-20 */
.shape-20 {
    --margin: 6rem;
    --color: #95A9FF;
    --size: 1.2rem;
    --duration: 42s;
    --start-angle: 283;
}
.shape-20 .random-shape::after {
    content: "\f096";  /* 原代码 "" 同方框 */
}

/* shape-21 */
.shape-21 {
    --margin: 6rem;
    --color: #C2B7FE;
    --size: 1.2rem;
    --duration: 50s;
    --start-angle: 4;
}
.shape-21 .random-shape::after {
    content: "\f005";  /* 原代码 "" 同星星 */
}

/* shape-22 */
.shape-22 {
    --margin: 9rem;
    --color: #C2B7FE;
    --size: 1.8rem;
    --duration: 50s;
    --start-angle: 49;
}
.shape-22 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-23 */
.shape-23 {
    --margin: 5rem;
    --color: #95A9FF;
    --size: 1rem;
    --duration: 50s;
    --start-angle: 337;
}
.shape-23 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-24 */
.shape-24 {
    --margin: 8rem;
    --color: #C2B7FE;
    --size: 1.6rem;
    --duration: 49s;
    --start-angle: 34;
}
.shape-24 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-25 */
.shape-25 {
    --margin: 1rem;
    --color: #95A9FF;
    --size: 0.2rem;
    --duration: 43s;
    --start-angle: 292;
}
.shape-25 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-26 */
.shape-26 {
    --margin: 4rem;
    --color: #95A9FF;
    --size: 0.8rem;
    --duration: 50s;
    --start-angle: 117;
}
.shape-26 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-27 */
.shape-27 {
    --margin: 10rem;
    --color: #95A9FF;
    --size: 2rem;
    --duration: 46s;
    --start-angle: 115;
}
.shape-27 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-28 */
.shape-28 {
    --margin: 2rem;
    --color: #DB7093;
    --size: 0.4rem;
    --duration: 48s;
    --start-angle: 110;
}
.shape-28 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-29 */
.shape-29 {
    --margin: 1rem;
    --color: #95A9FF;
    --size: 0.2rem;
    --duration: 47s;
    --start-angle: 89;
}
.shape-29 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-30 */
.shape-30 {
    --margin: 2rem;
    --color: #FFD700;
    --size: 0.4rem;
    --duration: 43s;
    --start-angle: 103;
}
.shape-30 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-31 */
.shape-31 {
    --margin: 2rem;
    --color: #C2B7FE;
    --size: 0.4rem;
    --duration: 43s;
    --start-angle: 64;
}
.shape-31 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-32 */
.shape-32 {
    --margin: 4rem;
    --color: #FFD700;
    --size: 0.8rem;
    --duration: 44s;
    --start-angle: 265;
}
.shape-32 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-33 */
.shape-33 {
    --margin: 5rem;
    --color: #95A9FF;
    --size: 1rem;
    --duration: 48s;
    --start-angle: 22;
}
.shape-33 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-34 */
.shape-34 {
    --margin: 7rem;
    --color: #FFF8DC;
    --size: 1.4rem;
    --duration: 44s;
    --start-angle: 19;
}
.shape-34 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-35 */
.shape-35 {
    --margin: 8rem;
    --color: #FFD700;
    --size: 1.6rem;
    --duration: 46s;
    --start-angle: 344;
}
.shape-35 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-36 */
.shape-36 {
    --margin: 10rem;
    --color: #FFD700;
    --size: 2rem;
    --duration: 49s;
    --start-angle: 6;
}
.shape-36 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-37 */
.shape-37 {
    --margin: 8rem;
    --color: #C2B7FE;
    --size: 1.6rem;
    --duration: 47s;
    --start-angle: 272;
}
.shape-37 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-38 */
.shape-38 {
    --margin: 2rem;
    --color: #C2B7FE;
    --size: 0.4rem;
    --duration: 43s;
    --start-angle: 55;
}
.shape-38 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-39 */
.shape-39 {
    --margin: 4rem;
    --color: #FFF8DC;
    --size: 0.8rem;
    --duration: 46s;
    --start-angle: 86;
}
.shape-39 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-40 */
.shape-40 {
    --margin: 9rem;
    --color: #FFD700;
    --size: 1.8rem;
    --duration: 46s;
    --start-angle: 164;
}
.shape-40 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-41 */
.shape-41 {
    --margin: 7rem;
    --color: #C2B7FE;
    --size: 1.4rem;
    --duration: 45s;
    --start-angle: 98;
}
.shape-41 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-42 */
.shape-42 {
    --margin: 10rem;
    --color: #C2B7FE;
    --size: 2rem;
    --duration: 50s;
    --start-angle: 140;
}
.shape-42 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-43 */
.shape-43 {
    --margin: 8rem;
    --color: #DB7093;
    --size: 1.6rem;
    --duration: 41s;
    --start-angle: 268;
}
.shape-43 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-44 */
.shape-44 {
    --margin: 2rem;
    --color: #95A9FF;
    --size: 0.4rem;
    --duration: 43s;
    --start-angle: 134;
}
.shape-44 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-45 */
.shape-45 {
    --margin: 6rem;
    --color: #FFD700;
    --size: 1.2rem;
    --duration: 50s;
    --start-angle: 176;
}
.shape-45 .random-shape::after {
    content: "\f018";  /* 原代码 "" 同信封 */
}

/* shape-46 */
.shape-46 {
    --margin: 5rem;
    --color: #DB7093;
    --size: 1rem;
    --duration: 48s;
    --start-angle: 9;
}
.shape-46 .random-shape::after {
    content: "\f096";  /* 原代码 "" 同方框 */
}

/* shape-47 */
.shape-47 {
    --margin: 6rem;
    --color: #C2B7FE;
    --size: 1.2rem;
    --duration: 42s;
    --start-angle: 342;
}
.shape-47 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}

/* shape-48 */
.shape-48 {
    --margin: 5rem;
    --color: #FFD700;
    --size: 1rem;
    --duration: 44s;
    --start-angle: 40;
}
.shape-48 .random-shape::after {
    content: "\f0c3";  /* 原代码 "" 同 flask */
}

/* shape-49 */
.shape-49 {
    --margin: 2rem;
    --color: #FFF8DC;
    --size: 0.4rem;
    --duration: 45s;
    --start-angle: 150;
}
.shape-49 .random-shape::after {
    content: "\f0c0";  /* 原代码 "" 同群组 */
}

/* shape-50 */
.shape-50 {
    --margin: 9rem;
    --color: #C2B7FE;
    --size: 1.8rem;
    --duration: 43s;
    --start-angle: 20;
}
.shape-50 .random-shape::after {
    content: "\f0c8";  /* 原代码 "" 同实心方框 */
}