/* --- static/css/ai_ball.css (最终修正版 - 完美圆球) --- */

.loader {
  /* --- 配色变量 --- */
  --color-one: #ffbf48; /* 金橙色 */
  --color-two: #be4a1d; /* 深红色 */
  --color-three: rgba(255, 191, 71, 0.6);
  --color-four: rgba(190, 74, 29, 0.6);
  --size: 100px; /* 统一控制尺寸 */

  width: var(--size);
  height: var(--size);
  
  /* --- 核心定位 --- */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0; 
  
  /* --- 关键修正：强制变成圆球 --- */
  border-radius: 50%;  /* 变圆 */
  overflow: hidden;    /* 核心代码：裁掉所有多余的方形边角 */
  /* ------------------------- */

  /* 初始状态 */
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  
  /* 飞出动画 */
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;

  /* 外部光晕 (Glow) */
  box-shadow:
    0 0 30px 0 var(--color-three),
    0 0 60px 0 var(--color-four);
  
  /* 色相呼吸动画 */
  animation: colorize 6s ease-in-out infinite;
  
  /* 消除特定浏览器下的渲染锯齿 */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  transform: translate3d(-50%, -50%, 0) scale(0.5);
}

/* --- 交互触发：飞出逻辑 --- */
#poda:hover .loader,
#poda:focus-within .loader {
    /* 修正高度：向上移动 230px，确保完全不被遮挡 */
    transform: translate3d(-50%, -230px, 0) scale(1);
    opacity: 1;
}

/* --- 内部渐变盒子 --- */
.loader .box {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 双重保险：内部也变圆 */
  background: linear-gradient(
    180deg,
    var(--color-one) 0%,
    var(--color-two) 80%
  );
  
  /* 应用遮罩 (液态流动效果) */
  mask: url(#clipping);
  -webkit-mask: url(#clipping);
}

/* --- 新增：3D 玻璃质感高光 --- */
/* 这会让它看起来像个球，而不是平面的纸 */
.loader::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;
    
    /* 内阴影 + 顶部高光 */
    box-shadow: 
        inset 0 10px 20px rgba(255, 255, 255, 0.5), /* 顶部反光 */
        inset 0 -10px 20px rgba(0, 0, 0, 0.3);      /* 底部阴影 */
    z-index: 2;
    pointer-events: none;
}

/* --- SVG 定义相关 (保持看不见) --- */
.loader svg {
  width: 0; height: 0; position: absolute;
}

/* 液态滤镜逻辑 */
.loader svg #clipping {
  filter: contrast(20); /* 提高对比度，边缘更清晰 */
}

.loader svg #clipping polygon {
  filter: blur(8px); /* 增加模糊度，让液态更明显 */
  fill: white;
}

/* --- 多边形旋转动画 (保持不变) --- */
.loader svg #clipping polygon:nth-child(1) { transform-origin: 50% 50%; animation: rotation 4s linear infinite; }
.loader svg #clipping polygon:nth-child(2) { transform-origin: 50% 50%; animation: rotation 6s linear infinite reverse; }
.loader svg #clipping polygon:nth-child(3) { transform-origin: 50% 50%; animation: rotation 5s linear infinite; }
.loader svg #clipping polygon:nth-child(4) { transform-origin: 50% 50%; animation: rotation 7s linear infinite reverse; }
.loader svg #clipping polygon:nth-child(5) { transform-origin: 50% 50%; animation: rotation 5s linear infinite; }
.loader svg #clipping polygon:nth-child(6) { transform-origin: 50% 50%; animation: rotation 3s linear infinite reverse; }
.loader svg #clipping polygon:nth-child(7) { transform-origin: 50% 50%; animation: rotation 8s linear infinite; }

@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes colorize {
  0% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(-30deg); }
  100% { filter: hue-rotate(0deg); }
}