/**
 * 框架 91 · 蒸汽波 复古夕阳与格网 (Vaporwave Retro Sunset & Perspective Grid)
 * 尔湾云 (erwancloud.lol) 官方专属视觉系统
 */

:root {
  --vw-bg-dark: #090314;
  --vw-bg-deep: #130728;
  --vw-bg-card: rgba(22, 11, 46, 0.78);
  --vw-neon-pink: #ff71ce;
  --vw-neon-cyan: #01cdfe;
  --vw-neon-purple: #b967ff;
  --vw-sunset-gold: #ffb86c;
  --vw-sunset-orange: #ff5e36;
  --vw-grid-line: rgba(1, 205, 254, 0.45);
  --vw-grid-glow: rgba(255, 113, 206, 0.5);
  --vw-text-bright: #ffffff;
  --vw-text-muted: #c9b9e6;
  --vw-font-retro: 'Courier New', 'Consolas', 'Menlo', monospace;
}

/* 蒸汽波背景舞台容器 */
.vaporwave-stage {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  background: #080214;
}

/* 80s 复古夕阳 (Retro Striped Sun) */
.vaporwave-sun-wrapper {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 80vw);
  height: min(420px, 80vw);
  pointer-events: none;
  z-index: 1;
}

.retro-sun {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe259 0%, #ffa751 25%, #ff007f 60%, #7928ca 90%);
  box-shadow: 
    0 0 60px rgba(255, 0, 127, 0.6),
    0 0 120px rgba(255, 184, 108, 0.45),
    0 0 200px rgba(185, 103, 255, 0.3);
  position: relative;
  overflow: hidden;
  filter: drop-shadow(0 0 25px rgba(255, 113, 206, 0.8));
}

/* 夕阳经典横向遮罩切线 (Sunset Blinds) */
.retro-sun::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 6px,
    #080214 6px,
    #080214 10px,
    transparent 10px,
    transparent 17px,
    #080214 17px,
    #080214 23px,
    transparent 23px,
    transparent 32px,
    #080214 32px,
    #080214 40px,
    transparent 40px,
    transparent 51px,
    #080214 51px,
    #080214 62px,
    transparent 62px,
    transparent 75px,
    #080214 75px,
    #080214 90px
  );
  opacity: 0.95;
}

/* 远景地平线辉光 */
.horizon-glow {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  height: 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 113, 206, 0.35) 45%, rgba(1, 205, 254, 0.3) 70%, transparent 100%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 1;
}

/* 3D 透视格网地面 (Perspective Wireframe Grid) */
.perspective-grid-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 48%;
  perspective: 480px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.retro-grid-plane {
  position: absolute;
  top: -30%;
  left: -50%;
  width: 200%;
  height: 160%;
  transform: rotateX(72deg);
  transform-origin: center top;
  background-image: 
    linear-gradient(to right, var(--vw-grid-line) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--vw-grid-line) 1.5px, transparent 1.5px);
  background-size: 50px 50px;
  animation: gridMove 2.6s linear infinite;
  box-shadow: 0 -20px 40px rgba(1, 205, 254, 0.4) inset;
}

@keyframes gridMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

/* 格网淡入遮罩 */
.perspective-grid-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(180deg, #090314 0%, transparent 100%);
  pointer-events: none;
}

/* 蒸汽波风格卡片 (Neon Synth Card) */
.vw-card {
  background: var(--vw-bg-card);
  border: 1px solid rgba(255, 113, 206, 0.3);
  border-radius: 14px;
  position: relative;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(185, 103, 255, 0.12);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.vw-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vw-neon-pink), var(--vw-neon-cyan), transparent);
  opacity: 0.7;
}

.vw-card:hover {
  transform: translateY(-6px);
  border-color: rgba(1, 205, 254, 0.65);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(1, 205, 254, 0.3),
    0 0 15px rgba(255, 113, 206, 0.4);
}

/* 蒸汽波复古霓虹文字与徽章 */
.vw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-family: var(--vw-font-retro);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg, rgba(255, 113, 206, 0.22), rgba(1, 205, 254, 0.22));
  border: 1px solid rgba(255, 113, 206, 0.5);
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(255, 113, 206, 0.3);
}

.vw-neon-text-pink {
  color: var(--vw-neon-pink);
  text-shadow: 0 0 10px rgba(255, 113, 206, 0.8), 0 0 25px rgba(255, 113, 206, 0.5);
}

.vw-neon-text-cyan {
  color: var(--vw-neon-cyan);
  text-shadow: 0 0 10px rgba(1, 205, 254, 0.8), 0 0 25px rgba(1, 205, 254, 0.5);
}

.vw-neon-text-gold {
  color: var(--vw-sunset-gold);
  text-shadow: 0 0 10px rgba(255, 184, 108, 0.8), 0 0 25px rgba(255, 94, 54, 0.5);
}

/* 动效适配低功耗模式 */
@media (prefers-reduced-motion: reduce) {
  .retro-grid-plane {
    animation: none;
  }
  .vw-card {
    transition: none;
  }
}