/**
 * 浮动图标动画背景 - 优化版
 * 
 * @package Panda
 * @description 使用CSS变量和动画复用，大幅减少代码量，支持GPU加速、响应式和无障碍
 */

/* ================================
   CSS 变量定义 - 统一管理配置
   ================================ */
:root {
    /* 图标颜色配置 */
    --floating-icon-color-1: #DB7093;
    --floating-icon-color-2: #FFD700;
    --floating-icon-color-3: #C2B7FE;
    --floating-icon-color-4: #95A9FF;
    --floating-icon-color-5: #FFF8DC;
    
    /* 动画基础配置 */
    --floating-animation-duration: 45s;
    --floating-icon-base-size: 1rem;
    --floating-icon-base-margin: 6rem;
    
    /* 性能优化配置 */
    --floating-enable-gpu: true;
}

/* ================================
   容器样式
   ================================ */
.container1 {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: fixed;
    z-index: -1;
    margin-top: -5%;
    contain: strict; /* 性能优化：限制重绘范围 */
}

/* ================================
   图标容器通用样式
   ================================ */
.shape {
    margin: 0 auto;
    position: relative;
    z-index: -1;
}

.shape-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shape-container > .random-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: FontAwesome, 'Font Awesome 6 Free';
    font-weight: 900;
}

/* ================================
   通用旋转动画 - 所有图标复用同一动画
   ================================ */
@keyframes floating-rotate {
    from {
        transform: translate(-50%, -50%) rotate(var(--start-degree, 0deg));
    }
    to {
        transform: translate(-50%, -50%) rotate(calc(var(--start-degree, 0deg) + 360deg));
    }
}

/* 浮动动画变体1 - 普通旋转 */
@keyframes floating-spin-1 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 浮动动画变体2 - 反向旋转 */
@keyframes floating-spin-reverse {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

/* 浮动动画变体3 - 带缩放 */
@keyframes floating-spin-scale {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2); }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

/* 浮动动画变体4 - 带上下浮动 */
@keyframes floating-float {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) translateY(0); }
    25% { transform: translate(-50%, -50%) rotate(90deg) translateY(-20px); }
    50% { transform: translate(-50%, -50%) rotate(180deg) translateY(0); }
    75% { transform: translate(-50%, -50%) rotate(270deg) translateY(20px); }
}

/* ================================
   GPU 加速优化
   ================================ */
.shape-container {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ================================
   图标样式 - 使用CSS变量控制
   ================================ */

/* 图标1 - 星星 */
.shape-container--1 .random-shape:after {
    content: "\f005";
    color: var(--floating-icon-color-1);
    font-size: calc(var(--floating-icon-base-size) * 1.2);
    margin: calc(var(--floating-icon-base-margin) * 1);
    animation: floating-spin-1 45s linear infinite;
}

/* 图标2 - 发送 */
.shape-container--2 .random-shape:after {
    content: "\f1d8";
    color: var(--floating-icon-color-2);
    font-size: calc(var(--floating-icon-base-size) * 1.8);
    margin: calc(var(--floating-icon-base-margin) * 1.5);
    animation: floating-spin-reverse 43s linear infinite;
}

/* 图标3 - 咖啡 */
.shape-container--3 .random-shape:after {
    content: "\f0f4";
    color: var(--floating-icon-color-2);
    font-size: calc(var(--floating-icon-base-size) * 1.6);
    margin: calc(var(--floating-icon-base-margin) * 1.33);
    animation: floating-spin-1 48s linear infinite;
}

/* 图标4 - 邮件 */
.shape-container--4 .random-shape:after {
    content: "\f0e0";
    color: var(--floating-icon-color-1);
    font-size: calc(var(--floating-icon-base-size) * 2);
    margin: calc(var(--floating-icon-base-margin) * 1.67);
    animation: floating-spin-scale 50s linear infinite;
}

/* 图标5 - 空心圆圈 */
.shape-container--5 .random-shape:after {
    content: "\f006";
    color: var(--floating-icon-color-3);
    font-size: calc(var(--floating-icon-base-size) * 1.8);
    margin: calc(var(--floating-icon-base-margin) * 1.5);
    animation: floating-float 50s linear infinite;
}

/* 图标6 - 方块 */
.shape-container--6 .random-shape:after {
    content: "\f0c8";
    color: var(--floating-icon-color-4);
    font-size: calc(var(--floating-icon-base-size) * 1);
    margin: calc(var(--floating-icon-base-margin) * 0.83);
    animation: floating-spin-1 49s linear infinite;
}

/* 图标7 - 心脏 */
.shape-container--7 .random-shape:after {
    content: "\f004";
    color: var(--floating-icon-color-1);
    font-size: calc(var(--floating-icon-base-size) * 0.8);
    margin: calc(var(--floating-icon-base-margin) * 0.67);
    animation: floating-spin-reverse 48s linear infinite;
}

/* 图标8 - 旗帜 */
.shape-container--8 .random-shape:after {
    content: "\f024";
    color: var(--floating-icon-color-4);
    font-size: calc(var(--floating-icon-base-size) * 1.8);
    margin: calc(var(--floating-icon-base-margin) * 1.5);
    animation: floating-spin-1 43s linear infinite;
}

/* 图标9 - 钻石 */
.shape-container--9 .random-shape:after {
    content: "\f219";
    color: var(--floating-icon-color-5);
    font-size: calc(var(--floating-icon-base-size) * 0.4);
    margin: calc(var(--floating-icon-base-margin) * 0.33);
    animation: floating-spin-scale 45s linear infinite;
}

/* 图标10 - 音乐 */
.shape-container--10 .random-shape:after {
    content: "\f001";
    color: var(--floating-icon-color-4);
    font-size: calc(var(--floating-icon-base-size) * 0.6);
    margin: calc(var(--floating-icon-base-margin) * 0.5);
    animation: floating-spin-1 41s linear infinite;
}

/* ================================
   响应式设计
   ================================ */
@media (max-width: 1024px) {
    .shape-container > .random-shape:after {
        /* 平板：缩小图标尺寸 */
        transform: scale(0.8);
    }
}

@media (max-width: 768px) {
    /* 移动端：隐藏部分动画，只保留5个 */
    .shape-container--6,
    .shape-container--7,
    .shape-container--8,
    .shape-container--9,
    .shape-container--10 {
        display: none;
    }
    
    .shape-container > .random-shape:after {
        /* 移动端：进一步缩小 */
        font-size: calc(var(--floating-icon-base-size) * 0.7);
        margin: calc(var(--floating-icon-base-margin) * 0.5);
    }
}

@media (max-width: 480px) {
    /* 小屏幕：只保留3个动画 */
    .shape-container--3,
    .shape-container--4,
    .shape-container--5 {
        display: none;
    }
    
    .container1 {
        margin-top: -2%;
    }
}

/* ================================
   无障碍支持 - 尊重用户减少动画偏好
   ================================ */
@media (prefers-reduced-motion: reduce) {
    .shape-container > .random-shape:after {
        animation: none !important;
        opacity: 0.4;
        transform: scale(1.2);
    }
}

/* ================================
   打印样式 - 隐藏动画
   ================================ */
@media print {
    .container1 {
        display: none;
    }
}

/* ================================
   暂停动画控制类
   ================================ */
.stop-shape,
.shape-paused {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

/* ================================
   性能模式 - 可通过此类启用低性能模式
   ================================ */
.performance-mode .shape-container {
    will-change: auto;
    transform: none;
}

.performance-mode .shape-container > .random-shape:after {
    animation-duration: 60s !important; /* 放慢动画减少GPU消耗 */
}

/* ================================
   深色模式适配
   ================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --floating-icon-color-1: #FF6B9D;
        --floating-icon-color-2: #FFE066;
        --floating-icon-color-3: #D4B8FF;
        --floating-icon-color-4: #B8C7FF;
        --floating-icon-color-5: #FFF8DC;
    }
}