/* 纹理层 - 星空主题 */

/* 噪点覆盖层 */
.noise-overlay {
  position: fixed;
  inset: 0;
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* 背景渐变层 - 深空色调 */
.portfolio::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 1) 0%, #020617 100%);
  pointer-events: none;
}

/* 网格线 - 星图感 */
.portfolio::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(139, 92, 246, 0.02) 0px, transparent 1px, transparent 80px),
    repeating-linear-gradient(90deg, rgba(139, 92, 246, 0.02) 0px, transparent 1px, transparent 80px);
  opacity: 0.5;
}

/* 浮动装饰元素 */
.deco-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.1;
}

.deco-circle {
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.3);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.deco-cross {
  width: 20px;
  height: 20px;
  position: relative;
}

.deco-cross::before,
.deco-cross::after {
  content: '';
  position: absolute;
  background: rgba(139, 92, 246, 0.4);
}

.deco-cross::before {
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.deco-cross::after {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

.deco-dot {
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.6);
  box-shadow: 0 0 10px rgba(212, 165, 116, 0.4);
}

/* 卡片表面纹理 */
.paper-texture {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    linear-gradient(225deg, rgba(0, 0, 0, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 20%, rgba(139, 92, 246, 0.05) 0%, transparent 40%),
    var(--bg-card);
}

/* 装饰性线条 */
.deco-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
  pointer-events: none;
}

/* 发光效果 */
.glow-effect {
  position: relative;
}

.glow-effect::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #d4a574, #8b5cf6, #d4a574);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(10px);
}

.glow-effect:hover::before {
  opacity: 0.5;
}