/* ============================================================
   OpenSkills - AI开源技能包云服务 样式表
   品牌色系: 深海蓝 #080E1B + 科技青 #00D4FF
   Logo配色: 尾鳍橙 #F97316 → 身体灰 #94A3B8 → 头部银白 #E2E8F0
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
::selection { background: rgba(249,115,22,0.3); color: white; }
input:focus-visible, button:focus-visible { outline: 2px solid rgba(0,212,255,0.5); outline-offset: 2px; }
pre, code { font-family: 'JetBrains Mono', 'Fira Code', monospace; }

/* ============================================================
   基础动画
   ============================================================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseSlow { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.3; } 100% { transform: translateY(-100vh) translateX(20px); opacity: 0; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.7s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
.animate-pulse-slow { animation: pulseSlow 6s ease-in-out infinite; }
#toast { animation: slideUp 0.3s ease-out; }

/* 粒子 — 混合橙色和青色 */
.particles-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle { position: absolute; width: 3px; height: 3px; background: rgba(249,115,22,0.3); border-radius: 50%; animation: float linear infinite; }
.particle:nth-child(even) { width: 2px; height: 2px; background: rgba(0,212,255,0.25); }
.particle:nth-child(3n) { width: 4px; height: 4px; background: rgba(249,115,22,0.15); box-shadow: 0 0 6px rgba(249,115,22,0.2); }
.particle:nth-child(5n) { background: rgba(148,163,184,0.2); }

/* 导航链接 */
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(90deg, transparent, #F97316, #00D4FF, transparent); transition: width 0.3s ease; border-radius: 1px; }
.nav-link:hover::after { width: 60%; }

.skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px; }

/* ============================================================
   ★ 导航栏 Logo — 轻微呼吸 + 发光边缘
   ============================================================ */
.nav-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo-glow {
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse at 30% 50%, rgba(249,115,22,0.15) 0%, rgba(148,163,184,0.08) 50%, transparent 75%);
  border-radius: 40%;
  z-index: 0;
  animation: navLogoBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes navLogoBreath {
  0%, 100% { opacity: 0.25; transform: scale(0.96); }
  50% { opacity: 0.65; transform: scale(1.08); }
}

.nav-logo-wrapper:hover .nav-logo-glow {
  animation-duration: 1.5s;
  opacity: 0.9;
}

/* ============================================================
   ★ Footer Logo
   ============================================================ */
.footer-logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-glow {
  position: absolute;
  inset: -4px;
  background: radial-gradient(ellipse at 30% 50%, rgba(249,115,22,0.1) 0%, transparent 70%);
  border-radius: 40%;
  z-index: 0;
  animation: navLogoBreath 5s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================================
   ★★★ Hero 巨型 Logo — 动态飞跃效果 ★★★
   鲸鱼从左下向右上飞跃的动感姿态
   ============================================================ */

.hero-logo-section {
  perspective: 1200px;
}

/* 容器尺寸 - 适配宽扁鲸鱼(约1.7:1) */
.hero-logo-container {
  position: relative;
  width: 300px;
  height: 180px;
  transition: transform 0.4s ease-out;
  cursor: pointer;
}

@media (min-width: 640px) {
  .hero-logo-container {
    width: 420px;
    height: 250px;
  }
}

@media (min-width: 768px) {
  .hero-logo-container {
    width: 520px;
    height: 310px;
  }
}

/* Logo 核心 - 动态飞跃! */
.hero-logo-core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.hero-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* ★ 核心飞跃动画 — 多属性复合 */
  animation: whaleLeap 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  /* 双色发光: 左橙右银 */
  filter: drop-shadow(-8px 4px 15px rgba(249,115,22,0.2))
          drop-shadow(8px -4px 20px rgba(148,163,184,0.15))
          drop-shadow(0 0 40px rgba(249,115,22,0.08));
  transition: filter 0.5s ease;
}

/* ★ 鲸鱼飞跃关键帧 — 模拟鲸鱼跃出水面的弧线 */
@keyframes whaleLeap {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  15% {
    transform: translate(8px, -18px) rotate(-3deg) scale(1.02);
  }
  30% {
    transform: translate(12px, -28px) rotate(-5deg) scale(1.04);
  }
  45% {
    /* 最高点 - 微微向右倾斜,身体舒展 */
    transform: translate(10px, -32px) rotate(-4deg) scale(1.05);
  }
  60% {
    transform: translate(6px, -22px) rotate(-2deg) scale(1.03);
  }
  75% {
    transform: translate(2px, -8px) rotate(1deg) scale(1.01);
  }
  85% {
    /* 回落时尾鳍微扬 */
    transform: translate(-2px, 4px) rotate(2deg) scale(0.99);
  }
  95% {
    transform: translate(-1px, 2px) rotate(0.5deg) scale(1);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* Hover: 加速飞跃 + 增强发光 */
.hero-logo-container:hover .hero-logo-img {
  filter: drop-shadow(-12px 6px 25px rgba(249,115,22,0.35))
          drop-shadow(10px -6px 30px rgba(148,163,184,0.25))
          drop-shadow(0 0 60px rgba(249,115,22,0.15));
  animation-duration: 4s;
}

/* 飞跃轨迹尾迹 (光影拖尾) */
.hero-logo-core::before {
  content: '';
  position: absolute;
  inset: 5% 15% 15% 5%;
  background: linear-gradient(135deg,
    rgba(249,115,22,0.06) 0%,
    rgba(249,115,22,0.02) 30%,
    transparent 60%
  );
  border-radius: 50%;
  filter: blur(20px);
  animation: trailPulse 8s ease-in-out infinite;
  z-index: -1;
}

@keyframes trailPulse {
  0%, 100% { opacity: 0.3; transform: translate(0, 0) scale(1); }
  30% { opacity: 0.8; transform: translate(-10px, 10px) scale(1.1); }
  45% { opacity: 0.6; transform: translate(-15px, 15px) scale(1.15); }
  70% { opacity: 0.2; transform: translate(-5px, 5px) scale(0.95); }
}

/* ---- 旋转光环 - 用橙+银双色 ---- */
.hero-logo-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
  pointer-events: none;
}

/* 内环 — 暖橙 */
.hero-logo-ring-1 {
  inset: -15%;
  border-color: rgba(249,115,22,0.06);
  border-top-color: rgba(249,115,22,0.3);
  border-right-color: rgba(249,115,22,0.12);
  animation: ringRotate 10s linear infinite;
}

/* 中环 — 银灰 */
.hero-logo-ring-2 {
  inset: -8%;
  border-color: rgba(148,163,184,0.04);
  border-bottom-color: rgba(148,163,184,0.2);
  border-left-color: rgba(148,163,184,0.08);
  animation: ringRotate 7s linear infinite reverse;
}

/* 外环 — 虚线 */
.hero-logo-ring-3 {
  inset: -25%;
  border-color: rgba(249,115,22,0.02);
  border-top-color: rgba(249,115,22,0.08);
  border-right-color: rgba(148,163,184,0.06);
  animation: ringRotate 18s linear infinite;
  border-style: dashed;
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hero-logo-container:hover .hero-logo-ring-1 {
  border-top-color: rgba(249,115,22,0.55);
  animation-duration: 5s;
}
.hero-logo-container:hover .hero-logo-ring-2 {
  border-bottom-color: rgba(148,163,184,0.4);
  animation-duration: 3.5s;
}

/* ---- 能量节点 — 双色 ---- */
.hero-logo-nodes {
  position: absolute;
  inset: -18%;
  z-index: 5;
  pointer-events: none;
}

/* 橙色节点 */
.hero-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F97316;
  box-shadow: 0 0 6px rgba(249,115,22,0.5),
              0 0 15px rgba(249,115,22,0.2);
  animation: nodeGlow 2.5s ease-in-out infinite alternate;
  transform: translate(-50%, -50%);
}

/* 银色节点 */
.hero-node:nth-child(even) {
  width: 3px;
  height: 3px;
  background: rgba(148,163,184,0.8);
  box-shadow: 0 0 5px rgba(148,163,184,0.4),
              0 0 12px rgba(148,163,184,0.15);
}

/* 大亮点 */
.hero-node:nth-child(3n+1) {
  width: 5px;
  height: 5px;
  background: #FB923C;
  box-shadow: 0 0 8px rgba(251,146,60,0.6),
              0 0 20px rgba(251,146,60,0.25);
}

@keyframes nodeGlow {
  0% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
}

/* 节点连线 - 橙→灰渐变 */
.hero-node-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(249,115,22,0.25), rgba(148,163,184,0.1));
  transform-origin: 0 0;
  animation: lineFlicker 3s ease-in-out infinite alternate;
}

@keyframes lineFlicker {
  0% { opacity: 0.1; }
  50% { opacity: 0.35; }
  100% { opacity: 0.1; }
}

/* ---- 扫描线 — 用橙色 ---- */
.hero-logo-scanline {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
}

.hero-logo-scanline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(249,115,22,0.0) 10%,
    rgba(249,115,22,0.3) 40%,
    rgba(148,163,184,0.2) 70%,
    transparent 100%
  );
  animation: scanDown 5s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(249,115,22,0.2),
              0 0 25px rgba(249,115,22,0.08);
}

@keyframes scanDown {
  0%   { top: -5%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* Hover 加速 */
.hero-logo-container:hover .hero-node { animation-duration: 1.2s; }
.hero-logo-container:hover .hero-node-line { animation-duration: 1s; }
.hero-logo-container:hover .hero-logo-scanline::after { animation-duration: 2.5s; }

/* ---- 水面波纹 (鲸鱼跃出产生的涟漪) ---- */
.hero-logo-container::after {
  content: '';
  position: absolute;
  bottom: -8%;
  left: 10%;
  right: 10%;
  height: 30%;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(249,115,22,0.06) 0%,
    rgba(148,163,184,0.03) 40%,
    transparent 70%
  );
  border-radius: 50%;
  animation: ripple 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes ripple {
  0%, 100% { transform: scaleX(1) scaleY(0.4); opacity: 0.3; }
  45% { transform: scaleX(1.3) scaleY(0.6); opacity: 0.7; }
  55% { transform: scaleX(1.25) scaleY(0.55); opacity: 0.6; }
  85% { transform: scaleX(0.95) scaleY(0.35); opacity: 0.2; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 640px) {
  .animate-fade-in-up { animation-duration: 0.5s; }
  .particle { display: none; }
  .particle:nth-child(-n+10) { display: block; }
  .hero-logo-ring-3 { display: none; }
  .hero-node-line { display: none; }
  .hero-logo-container::after { display: none; }
  @keyframes whaleLeap {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    45% { transform: translate(5px, -16px) rotate(-3deg) scale(1.03); }
    85% { transform: translate(-1px, 2px) rotate(1deg) scale(0.99); }
  }
}