/* ============================================================
   CSS 3D 视差伪 3D 效果系统 — 动画关键帧 + 基础样式 (V2)
   改版重点：rotateY→rotate（绕Z轴水平旋转），替代地球仪效果
   新增：浮动光晕动画、conic-gradient 旋转动画
   ============================================================ */

/* ====== 1. 容器基础样式 ====== */

/* 外层容器 */
.effect-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 背景图片 */
.effect-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* Section 模式 —— 填满父容器 */
.effect-section {
  position: absolute;
  inset: 0;
}

/* Card 模式 —— 内嵌定高容器 */
.effect-card {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ====== 2. 每一层 ====== */

/* 外层 */
.effect-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* 内层：动画 + 视觉效果 */
.effect-layer-anim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  will-change: transform, opacity, filter;
}

/* 形状通用 */
.effect-shape {
  will-change: transform;
}

/* ====== 3. 形状特化 ====== */

/* 渐变模糊块：放大确保覆盖 */
.shape-blur-block {
  position: absolute;
  inset: -50%;
}

/* 光带：圆形 */
.shape-band {
  position: absolute;
}

/* 玻璃球体网格纹理容器 */
.shape-sphere {
  position: relative;
  flex-shrink: 0;
}

/* 网格覆盖层 */
.shape-grid {
  position: absolute;
  inset: -20%;
}

/* 高光曲线 SVG */
.shape-curve {
  position: absolute;
  inset: -10%;
}

/* ====== 4. 动画关键帧 ====== */

/*
 * 动画类型说明：
 *   rotate-cw    → 正转（绕 Z 轴顺时针旋转 — 水平旋转，非3D）
 *   rotate-ccw   → 反转（绕 Z 轴逆时针旋转）
 *   sway-h       → 水平摆动（左右来回移动）
 *   sway-v       → 垂直摆动（上下移动）
 *   scale-pulse  → 缩放脉冲（像呼吸一样缩放）
 *   orbit        → 椭圆轨道（沿椭圆路径公转）
 *   color-flow   → 色彩流动（渐变色环绕旋转，仅圆锥渐变有效）
 *   float-slow   → 浮动（上下浮动+轻微缩放，适合光晕块/球体）
 *   curve-drift  → 漂移（水平缓动，适合高光曲线）
 */

/* 4.1 正转 — 绕 Z 轴顺时针 360°（水平旋转，替代之前的 rotateY 地球仪效果） */
@keyframes anim-rotate-cw {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4.2 反转 — 绕 Z 轴逆时针 360° */
@keyframes anim-rotate-ccw {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* 4.3 水平摆动 — 左右来回移动 */
@keyframes anim-sway-h {
  0%, 100% { transform: translateX(0px); }
  50%      { transform: translateX(-6%); }
}

/* 4.4 垂直摆动 — 上下移动 */
@keyframes anim-sway-v {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-5%); }
}

/* 4.5 缩放脉冲 — 呼吸感缩放 */
@keyframes anim-scale-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* 4.6 椭圆轨道 — 沿椭圆路径公转 */
@keyframes anim-orbit {
  0%   { transform: rotate(0deg) translateX(4%) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(4%) rotate(-360deg); }
}

/* 4.7 色彩流动 — conic-gradient 旋转 */
@keyframes anim-color-flow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4.8 浮动 — 上下浮动 + 轻微缩放缓动，适合光晕块/玻璃球 */
@keyframes anim-float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(12px, -10px) scale(1.03); }
  66%      { transform: translate(-8px, 8px) scale(0.97); }
}

/* 4.9 漂移 — 水平缓动+透明度变化，适合高光曲线 */
@keyframes anim-curve-drift {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.12; }
  50%      { transform: translateX(15px) scale(1.02); opacity: 0.2; }
}

/* 4.10 球体浮动 — 垂直浮动，适合玻璃球体 */
@keyframes anim-sphere-float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-10px) scale(1.02); }
}

/* 4.11 网格脉冲 — 透明度呼吸 */
@keyframes anim-grid-pulse {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.2; }
}

/* ====== 5. 预设效果快速切换辅助类（已弃用，由 renderEffect JS 动态控制） ====== */