爱情苦海

/* ========================================
   Theme: Dark & Moody — 苦海深渊
   Deep blues, purples, atmospheric darkness
   ======================================== */

:root {
  --bg-primary: #0a0e17;
  --bg-hero-start: #0a0e17;
  --bg-hero-end: #0f1724;
  --bg-interlude-start: #0c1220;
  --bg-interlude-mid: #0a1628;
  --bg-interlude-end: #081430;
  --text-primary: #d0d8e8;
  --text-body: #a0aec0;
  --accent: #5b8fd9;
  --accent-light: #6a5acd;
  --border: #1e2a3a;
}

/* --- Hero --- */
.hero {
  background: linear-gradient(180deg, #0a0e17 0%, #0f1724 60%, #121d33 100%);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 85%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 90%, rgba(255,255,255,0.3) 0%, transparent 100%);
  z-index: 0;
  animation: starsTwinkle 6s ease-in-out infinite alternate;
}

@keyframes starsTwinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* --- Dark Wave Overrides --- */
.wave-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180'%3E%3Cpath fill='%231a2744' d='M0,80 C250,140 350,0 500,80 C650,160 750,20 1000,80 L1000,180 L0,180Z'/%3E%3C/svg%3E");
}

.wave-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180'%3E%3Cpath fill='%23162040' d='M0,100 C200,40 400,140 600,80 C800,20 900,120 1000,100 L1000,180 L0,180Z'/%3E%3C/svg%3E");
}

.wave-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 180'%3E%3Cpath fill='%23121d33' d='M0,120 C150,60 350,150 500,100 C650,50 850,130 1000,120 L1000,180 L0,180Z'/%3E%3C/svg%3E");
}

/* --- Interlude Waves --- */
.interlude {
  background: linear-gradient(180deg, #0c1220 0%, #0a1628 40%, #0d1a35 100%);
}

.ocean-wave-1 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%231a2744' d='M0,100 C300,20 400,160 600,100 C800,40 900,150 1200,100 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

.ocean-wave-2 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23152050' d='M0,120 C200,60 500,160 700,100 C900,40 1100,140 1200,120 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

.ocean-wave-3 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23291d50' d='M0,80 C150,140 350,40 600,100 C850,160 950,60 1200,80 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

.ocean-wave-4 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%230d1a35' d='M0,130 C250,70 450,160 650,110 C850,60 1050,150 1200,130 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

/* --- Glow Effects --- */
.hero-title {
  text-shadow: 0 0 40px rgba(91,143,217,0.15);
}

.quote-text {
  text-shadow: 0 0 30px rgba(106,90,205,0.2);
}

.poem-divider {
  background: linear-gradient(90deg, transparent, #6a5acd, transparent);
}

/* --- Theme Switcher --- */
.theme-toggle {
  background: #121d33;
  border-color: #1e2a3a;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.theme-panel {
  background: #0f1724;
  border-color: #1e2a3a;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.theme-option:hover,
.theme-option.active {
  background: #1e2a3a;
}

/* --- About border --- */
.about-english {
  border-top-color: #1e2a3a;
}