/* ==========================================================================
   Orbit 动画 —— 网盘平台环绕轨道
   结构:pulse-ring(脉冲圈) + orbit-center(中心logo) + 2条orbit-ring(轨道) + data-particle(粒子)
   ========================================================================== */


.orbit-wrap {
    position: relative;
    width: 360px;
    height: 360px;
    margin: 0 auto ;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -208px; z-index: -1;
}

/* 中心光晕颜色变量,注册成 <color> 类型浏览器才能平滑补间(不支持则退化为硬切,不影响布局) */
@property --orbit-glow {
    syntax: '<color>';
    initial-value: #d7ebf7;
    inherits: false;
}

/* 渐变背景放伪元素,单独循环变色,不影响前景图标 */
.orbit-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(var(--orbit-glow) 0%, #fff 70%);
    animation: orbit-glow 10s ease-in-out infinite;
}

/* 4 个柔和浅色轮换:淡蓝 → 淡粉 → 淡绿 → 淡紫 → 回到淡蓝 */
@keyframes orbit-glow {
    0%, 100% { --orbit-glow: #d7ebf7; }
    25%      { --orbit-glow: #ecd4f4; }
    50%      { --orbit-glow: #d4f0f2; }
    75%      { --orbit-glow: #fffae0; }
}


/* ---- 脉冲圈:从中心向外扩散的呼吸波 ---- */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255, 1);
    transform: scale(0.6);
    opacity: 0;
    animation: orbit-pulse 4s ease-out infinite;
    pointer-events: none;
}

@keyframes orbit-pulse {
    0%   { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0;  }
}

/* ---- 中心 logo ---- */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.orbit-center img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    display:none;
}

/* ---- 轨道:静态虚线圆(不旋转,只做视觉底纹) ---- */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px dashed rgba(0,0,0, 0.08);
    pointer-events: none;
}

.orbit-ring-1 {
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
}

.orbit-ring-2 {
    width: 340px;
    height: 340px;
    margin: -170px 0 0 -170px;
    border-color: rgba(0,0,0, 0.06);
}

/* ---- 轨道上的图标 ----
   单个动画同时完成「绕中心公转」+「自身反向自转」,在同一 transform 里抵消 → 图标严格正立。
   半径用 --r 变量,移动端只需改 --r。公转很慢,呈"静中有动"。 */
.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .fb 承担视觉(白底/圆/阴影)+ 缩放呼吸动画。
   缩放放在这层,不受 .orbit-item 上错开位置的 animation-delay 影响 → 所有图标同步呼吸。 */
.orbit-item .fb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    transform-origin: center;
    /* 每个图标周期(--dur)+起始相位(--wave)都不同 → 永不同步,自然呼吸 */
    animation: orbit-breathe var(--dur, 8s) ease-in-out infinite;
    animation-delay: var(--wave, 0s);
}

/* 缩放呼吸:大部分时间停留,缩小/放大集中在短区间内快速完成 → 动作干脆 */
@keyframes orbit-breathe {
    0%,  20% { transform: scale(1); }
    24%, 74% { transform: scale(0.25); }
    78%,100% { transform: scale(1); }
}

/* 图标淡出:与缩放严格同步(共用 --dur / --wave) */
.orbit-item .fb img {
    animation: orbit-fade var(--dur, 8s) ease-in-out infinite;
    animation-delay: var(--wave, 0s);
}

@keyframes orbit-fade {
    0%,  20% { opacity: 1; }
    24%, 74% { opacity: 0; }
    78%,100% { opacity: 1; }
}

.orbit-item .fb img,
.orbit-item > img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

/* 公转+反向自转(净朝向不变=正立)。--r 为负值(向上偏移到环上) */
@keyframes orbit-upright {
    from { transform: rotate(0deg)   translateY(var(--r)) rotate(0deg); }
    to   { transform: rotate(360deg) translateY(var(--r)) rotate(-360deg); }
}

/* 内环:半径 110,周期 90s(很慢);外环:半径 170,周期 120s 反向 */
.orbit-ring-1 .orbit-item {
    --r: -110px;
    animation: orbit-upright 90s linear infinite;
}
.orbit-ring-2 .orbit-item {
    --r: -170px;
    animation: orbit-upright 120s linear infinite reverse;
}

/* 公转定位:6 个位置用「负 animation-delay」错开到 60° 间隔(占各自周期的 n/6) */
.orbit-ring-1 .pos-0   { animation-delay:   0s; }
.orbit-ring-1 .pos-60  { animation-delay: -15s; }
.orbit-ring-1 .pos-120 { animation-delay: -30s; }
.orbit-ring-1 .pos-180 { animation-delay: -45s; }
.orbit-ring-1 .pos-240 { animation-delay: -60s; }
.orbit-ring-1 .pos-300 { animation-delay: -75s; }

.orbit-ring-2 .pos-0   { animation-delay:   0s; }
.orbit-ring-2 .pos-60  { animation-delay: -20s; }
.orbit-ring-2 .pos-120 { animation-delay: -40s; }
.orbit-ring-2 .pos-180 { animation-delay: -60s; }
.orbit-ring-2 .pos-240 { animation-delay: -80s; }
.orbit-ring-2 .pos-300 { animation-delay: -100s; }

/* 缩放呼吸:12 个图标各用不同周期(--dur)+不同起始相位(--wave)。
   周期取 7~13s 间互不成倍数的值 → 长期永不同步,不会"排队一起变小"。
   --wave 用负值,让页面一加载各图标就散落在各自相位(有的小、有的大、有的过渡)。
   .fb 与 .fb img 共用同一组变量,保证缩放与淡出对齐。 */
.orbit-ring-1 .pos-0   .fb, .orbit-ring-1 .pos-0   .fb img { --dur: 8s;    --wave: -0.5s; }
.orbit-ring-1 .pos-60  .fb, .orbit-ring-1 .pos-60  .fb img { --dur: 11s;   --wave: -6.2s; }
.orbit-ring-1 .pos-120 .fb, .orbit-ring-1 .pos-120 .fb img { --dur: 9.5s;  --wave: -2.7s; }
.orbit-ring-1 .pos-180 .fb, .orbit-ring-1 .pos-180 .fb img { --dur: 12.5s; --wave: -9.1s; }
.orbit-ring-1 .pos-240 .fb, .orbit-ring-1 .pos-240 .fb img { --dur: 7s;    --wave: -4.3s; }
.orbit-ring-1 .pos-300 .fb, .orbit-ring-1 .pos-300 .fb img { --dur: 10.5s; --wave: -1.6s; }

.orbit-ring-2 .pos-0   .fb, .orbit-ring-2 .pos-0   .fb img { --dur: 13s;   --wave: -7.8s; }
.orbit-ring-2 .pos-60  .fb, .orbit-ring-2 .pos-60  .fb img { --dur: 8.5s;  --wave: -3.4s; }
.orbit-ring-2 .pos-120 .fb, .orbit-ring-2 .pos-120 .fb img { --dur: 11.5s; --wave: -0.9s; }
.orbit-ring-2 .pos-180 .fb, .orbit-ring-2 .pos-180 .fb img { --dur: 9s;    --wave: -5.5s; }
.orbit-ring-2 .pos-240 .fb, .orbit-ring-2 .pos-240 .fb img { --dur: 12s;   --wave: -10.2s; }
.orbit-ring-2 .pos-300 .fb, .orbit-ring-2 .pos-300 .fb img { --dur: 7.5s;  --wave: -2.1s; }

/* ---- 漂浮数据粒子 ---- */
.data-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.7;
    animation: orbit-drift var(--dur, 4s) ease-in-out infinite;
    pointer-events: none;
}

@keyframes orbit-drift {
    0%, 100% { transform: translate(0, 0); opacity: 0.25; }
    50%      { transform: translate(var(--dx, 30px), var(--dy, -40px)); opacity: 0.8; }
}

/* ---- 响应式:移动端缩小 ---- */
@media only screen and (max-width: 767px) {
    .orbit-wrap { width: 280px; height: 280px; margin-top: 32px; }
    .orbit-ring-1 { width: 176px; height: 176px; margin: -88px 0 0 -88px; }
    .orbit-ring-2 { width: 264px; height: 264px; margin: -132px 0 0 -132px; }
    .orbit-item { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
    .orbit-center { width: 68px; height: 68px; margin: -34px 0 0 -34px; }

    /* 只需改半径变量,公转/正立逻辑不变 */
    .orbit-ring-1 .orbit-item { --r: -88px; }
    .orbit-ring-2 .orbit-item { --r: -132px; }
}