/* ============================================================
   Galaxy UI 增强层
   ============================================================
   本文件是**增量**样式，不修改原站任何文件，删除本文件即可完全回退。

   效果手法取自 Uiverse.io 开源 UI 库（https://uiverse.io/ ，GitHub: uiverse-io/galaxy，
   MIT License）。原始组件为独立 HTML/CSS 片段，此处按本站“赛博朋克”主题
   （青 #00fff0 / 品红 #ff00aa）重新配色与实现，未直接复制其硬编码颜色。

   对应关系：
     1. 主按钮微光扫过   ← Uiverse.io by elijahgummer（Buttons/short-bird-25）的 ::after 扫光手法
     2. 描边按钮渐变填充 ← Uiverse.io by Deri-Kurniawan（Buttons/helpless-insect-19）的 slide-fill
     3. 项目卡片光泽扫过 ← Uiverse.io 卡片悬停扫光通用手法
     4. 技能标签提示气泡 ← Uiverse.io by elijahgummer（Tooltips/brown-moose-94），改用纯 CSS attr()
     5. 表单输入框聚焦   ← Uiverse.io by Yaya12085（Inputs/new-rabbit-37）的 focus-within 双色辉光，
                            并用 background-clip 双图层实现「渐变描边」平移（input 不支持伪元素）
     6. 提交成功通知卡   ← Uiverse.io by Gianluks90（Notifications/funny-impala-78）的平移渐变边框
     7. 时间线 / 教育卡片 ← 同 3，把光泽扫光推广到其余卡片，保持全站一致
     8. 返回顶部按钮     ← Uiverse.io 按钮悬停涟漪通用手法
   ============================================================ */

/* ------------------------------------------------------------
   1. 主按钮：悬停时一道微光自左向右扫过
   ------------------------------------------------------------ */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transition: left 0.6s ease 0.05s;
  pointer-events: none;
}

.btn--primary:hover::after,
.btn--primary:focus-visible::after {
  left: 100%;
}

/* ------------------------------------------------------------
   2. 描边按钮：悬停时渐变面板自左滑入铺满
      （需要自身形成层叠上下文，才能使 ::before 位于文字之下、祖先背景之上）
   ------------------------------------------------------------ */
.btn--outline {
  z-index: 0;
}

.btn--outline::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-accent);
  transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn--outline:hover::before,
.btn--outline:focus-visible::before {
  left: 0;
}

/* 填充后改用反色文字，保证在渐变上的对比度（深/浅主题通用） */
.btn--outline:hover,
.btn--outline:focus-visible {
  color: var(--color-text-inverse);
  border-color: transparent;
  text-shadow: none;
}

/* ------------------------------------------------------------
   3. 项目卡片：悬停时斜向光泽扫过（叠加在原有上浮效果之上）
   ------------------------------------------------------------ */
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 2;
}

.project-card:hover::before,
.project-card:focus-within::before {
  left: 125%;
}

/* ------------------------------------------------------------
   4. 技能标签：悬停显示熟练度气泡（内容取自 data-level，纯 CSS）
   ------------------------------------------------------------ */
.skill-tag {
  position: relative;
}

.skill-tag::before {
  content: "熟练度 " attr(data-level) "%";
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.65rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--color-text-primary);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), 0 0 14px rgba(255, 0, 128, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 30;
}

/* 气泡下方的小三角 */
.skill-tag::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border-hover);
  border-bottom: 1px solid var(--color-border-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s;
  z-index: 30;
}

.skill-tag:hover::before,
.skill-tag:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.skill-tag:hover::after,
.skill-tag:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

/* 键盘可达性：标签本身不可聚焦，用 tabindex 提供时可显示气泡 */
.skill-tag:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   5. 表单输入框：聚焦时渐变描边平移 + 双色辉光
   ------------------------------------------------------------
   <input> / <textarea> 不支持 ::before / ::after，因此改用
   background-clip: padding-box, border-box 双图层实现渐变描边，
   再靠 background-position 平移让渐变"流动"。
   ------------------------------------------------------------ */
.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: transparent;
  background-image:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)),
    var(--gradient-accent);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 0% 50%;
  animation:
    form-border-pan 3s linear infinite alternate,
    form-focus-glow 2.6s ease-in-out infinite;
}

@keyframes form-border-pan {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 100% 50%; }
}

/* 青、品红从两侧交替渗出，呼应本站双主色 */
@keyframes form-focus-glow {
  0%, 100% {
    box-shadow:
      -10px 0 26px -14px rgba(0, 255, 240, 0.9),
       10px 0 26px -14px rgba(255, 0, 170, 0.9),
       0 0 0 3px rgba(0, 255, 240, 0.10);
  }
  50% {
    box-shadow:
       10px 0 26px -14px rgba(0, 255, 240, 0.9),
      -10px 0 26px -14px rgba(255, 0, 170, 0.9),
       0 0 0 3px rgba(255, 0, 170, 0.10);
  }
}

/* 校验失败时保持红色描边，不被聚焦态的渐变盖掉 */
.form__input--error:focus,
.form__textarea--error:focus {
  background-image:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)),
    linear-gradient(#ef4444, #ef4444);
}

/* ------------------------------------------------------------
   6. 提交成功提示：升级为动态渐变边框的通知卡片
   ------------------------------------------------------------ */
.form__success {
  position: relative;
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  background-image:
    linear-gradient(var(--color-bg-card), var(--color-bg-card)),
    linear-gradient(75deg, #00fff0, #ff00aa, #00fff0);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, 0% 50%;
  animation:
    success-border-pan 4s ease infinite alternate,
    success-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes success-border-pan {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 100% 50%; }
}

@keyframes success-card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}

/* 图标改为渐变圆形徽章 */
.form__success i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  font-size: 1.9rem;
  border-radius: 50%;
  margin-bottom: var(--space-md);
  color: var(--color-text-inverse);
  background: var(--gradient-accent);
  box-shadow:
    0 0 22px rgba(0, 255, 240, 0.35),
    0 0 22px rgba(255, 0, 170, 0.35);
  animation: success-badge-pulse 2.4s ease-in-out infinite;
}

@keyframes success-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ------------------------------------------------------------
   7. 时间线 / 教育卡片：悬停光泽扫过（与项目卡片统一）
   ------------------------------------------------------------ */
.timeline__content,
.education__card {
  position: relative;
  overflow: hidden;
}

.timeline__content::before,
.education__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 2;
}

.timeline__content:hover::before,
.timeline__content:focus-within::before,
.education__card:hover::before {
  left: 125%;
}

/* ------------------------------------------------------------
   8. 返回顶部按钮：悬停时向外扩散一圈涟漪
   ------------------------------------------------------------ */
.back-to-top {
  position: relative;
}

.back-to-top::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent-cyan);
  opacity: 0;
  pointer-events: none;
  transition: inset 0.4s ease, opacity 0.4s ease;
}

.back-to-top:hover::after,
.back-to-top:focus-visible::after {
  inset: -7px;
  opacity: 0.65;
}

/* ------------------------------------------------------------
   9. 尊重「减少动态效果」偏好
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .btn--outline::before,
  .project-card::before,
  .skill-tag::before,
  .skill-tag::after,
  .timeline__content::before,
  .education__card::before,
  .back-to-top::after {
    transition: none;
  }
  .project-card::before,
  .timeline__content::before,
  .education__card::before {
    display: none;
  }
  /* 关闭无限动画，保留静态渐变描边 */
  .form__input:focus,
  .form__textarea:focus,
  .form__success,
  .form__success i {
    animation: none;
  }
}