/* ═══════════════════════════════════════════════════════════
   VAELUND — Old-school Blizzard aesthetic, 2004 edition
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #000;
  color: #c0b8a8;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ── Ambient edge particles ──────────────────────────────── */

#edge-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.edge-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #80d0ff;
  box-shadow: 0 0 6px #80d0ff, 0 0 12px rgba(0, 200, 255, 0.6);
  opacity: 0;
  animation: float-up linear infinite;
}

/* Left edge — distributed top to bottom */
.ep-l1  { left: 3%;   top: 5%;  animation-duration: 8s;  animation-delay: 0s;    }
.ep-l2  { left: 7%;   top: 20%; animation-duration: 11s; animation-delay: 1.2s;  }
.ep-l3  { left: 4%;   top: 35%; animation-duration: 9s;  animation-delay: 2.5s;  }
.ep-l4  { left: 6%;   top: 50%; animation-duration: 13s; animation-delay: 0.8s;  }
.ep-l5  { left: 2%;   top: 65%; animation-duration: 10s; animation-delay: 3.1s;  }
.ep-l6  { left: 8%;   top: 80%; animation-duration: 7s;  animation-delay: 1.7s;  }
.ep-l7  { left: 5%;   top: 90%; animation-duration: 12s; animation-delay: 4s;    }
.ep-l8  { left: 3.5%; top: 95%; animation-duration: 9s;  animation-delay: 2.1s;  }

/* Right edge */
.ep-r1  { right: 3%;   top: 8%;  animation-duration: 9s;  animation-delay: 0.5s;  }
.ep-r2  { right: 7%;   top: 22%; animation-duration: 12s; animation-delay: 1.8s; }
.ep-r3  { right: 5%;   top: 38%; animation-duration: 8s;  animation-delay: 3.2s; }
.ep-r4  { right: 4%;   top: 52%; animation-duration: 11s; animation-delay: 0.3s; }
.ep-r5  { right: 6%;   top: 68%; animation-duration: 10s; animation-delay: 2.2s; }
.ep-r6  { right: 2%;   top: 82%; animation-duration: 7s;  animation-delay: 4.5s; }
.ep-r7  { right: 8%;   top: 92%; animation-duration: 13s; animation-delay: 1.1s; }
.ep-r8  { right: 3.5%; top: 97%; animation-duration: 9s;  animation-delay: 2.8s; }

@keyframes float-up {
  0%   { transform: translateY(0)     scale(0.5); opacity: 0; }
  5%   { opacity: 0.7; transform: translateY(-20px) scale(1); }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-105vh) scale(0.3); opacity: 0; }
}

/* ── Links ───────────────────────────────────────────────── */

a { color: #c0b8a8; text-decoration: none; }
a:hover { color: #c0b8a8; }
a:visited { color: #8a8070; }

#logo:hover { text-decoration: none; }

/* ── Header bar ──────────────────────────────────────────── */

#header {
  background: #0a0a0a;
  border-bottom: 3px solid #2a2a2a;
  padding: 0;
  text-align: center;
  position: relative;
  z-index: 200;
}

#header-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 20px 8px;
  border-bottom: 1px solid #1a1a1a;
  position: relative;
}

#logo {
  display: block;
  margin: 0 auto 4px;
  text-align: center;
  position: relative;
}

#logo:hover #logo-title {
  text-decoration: none;
}

#logo-img {
  height: 240px;
  width: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

#logo-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: bold;
  color: #c070ff;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #000, 0 0 15px rgba(0, 200, 255, 0.6);
  margin-top: 4px;
  display: block;
  position: relative;
  z-index: 50;
}

/* ── Logo hover glow + particles ───────────────────────── */

#logo-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 34px;
  font-weight: bold;
  color: #c070ff;
  letter-spacing: 4px;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 200, 255, 0.5);
  margin-top: 4px;
  display: block;
  position: relative;
  transition: filter 0.2s;
}

/* === Background aura === */
#logo-title .aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 0, 255, 0.5) 0%, rgba(120, 0, 200, 0.2) 40%, rgba(80, 0, 160, 0.05) 60%, transparent 80%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -2;
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  opacity: 0;
}

/* === Orbiting ring === */
/* 6 dots on an ellipse */
/* Position dots on ellipse ring */
/* === Sparkle floating layer === */
#logo-title .sparkle-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}

/* === 16 floating sparkle dots === */
#logo-title .sp {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c070ff;
  box-shadow: 0 0 4px #c070ff, 0 0 8px rgba(192, 112, 255, 0.8);
  opacity: 0;
  pointer-events: none;
}

/* === 12 orbiting particles === */
#logo-title .particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c070ff;
  box-shadow: 0 0 8px #c070ff, 0 0 16px rgba(192, 112, 255, 1);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Particles scattered at various positions */
#logo-title .p1  { transform: translate(-50%,-50%) translateX(60px)  translateY(-30px); }
#logo-title .p2  { transform: translate(-50%,-50%) translateX(80px)  translateY(10px); }
#logo-title .p3  { transform: translate(-50%,-50%) translateX(50px)  translateY(40px); }
#logo-title .p4  { transform: translate(-50%,-50%) translateX(-60px) translateY(-30px); }
#logo-title .p5  { transform: translate(-50%,-50%) translateX(-80px) translateY(10px); }
#logo-title .p6  { transform: translate(-50%,-50%) translateX(-50px) translateY(40px); }
#logo-title .p7  { transform: translate(-50%,-50%) translateX(30px)  translateY(-70px); }
#logo-title .p8  { transform: translate(-50%,-50%) translateX(-30px) translateY(-70px); }
#logo-title .p9  { transform: translate(-50%,-50%) translateX(70px)  translateY(-60px); }
#logo-title .p10 { transform: translate(-50%,-50%) translateX(-70px) translateY(-60px); }
#logo-title .p11 { transform: translate(-50%,-50%) translateX(20px)  translateY(60px); }
#logo-title .p12 { transform: translate(-50%,-50%) translateX(-20px) translateY(60px); }

/* === Keyframes === */

to   { transform: translate(-50%, -50%) rotate(360deg); }
}

30%  { opacity: 1;   transform: translateX(-50%) translateY(-90px) scale(1.3); }
  70%  { opacity: 0.8; transform: translateX(-50%) translateY(-90px) scale(1); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-90px) scale(0.5); }
}

/* Aura expansion */
@keyframes aura-grow {
  0%   { width: 0;     height: 0;     opacity: 0; }
  30%  { opacity: 1; }
  100% { width: 400px; height: 400px; opacity: 0.6; }
}

/* Particle flicker-in and drift */
@keyframes particle-flicker {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(0); }
  15%  { opacity: 1;   transform: translate(-50%,-50%) scale(1.2); }
  85%  { opacity: 0.8; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(0.5); }
}

/* Sparkle float up */
@keyframes sparkle-float {
  0%   { transform: translateY(0)     scale(0); opacity: 0; }
  15%  { transform: translateY(-10px) scale(1); opacity: 1; }
  85%  { transform: translateY(-80px) scale(0.8); opacity: 0.6; }
  100% { transform: translateY(-100px) scale(0); opacity: 0; }
}

/* Hardcore glow pulse — layered cyan/violet text-shadow */
@keyframes glow-hardcore {
  0%, 100% {
    text-shadow:
      0 0 5px  #fff,
      0 0 10px #80d0ff,
      0 0 20px #80d0ff,
      0 0 40px #00b4ff,
      0 0 70px #00b4ff,
      0 0 100px #0070ff,
      0 0 140px #0070ff,
      0 0 200px #0040c0,
      0 0 280px #002080;
    filter: brightness(1);
  }
  50% {
    text-shadow:
      0 0 5px  #fff,
      0 0 15px #a0e8ff,
      0 0 30px #80d0ff,
      0 0 60px #00d0ff,
      0 0 100px #00b4ff,
      0 0 150px #0080ff,
      0 0 220px #0060ff,
      0 0 320px #0040c0,
      0 0 420px #002080;
    filter: brightness(1.5);
  }
}

/* === HOVER STATE === */
#logo:hover #logo-title {
  animation: glow-hardcore 1.8s ease-in-out infinite;
  text-decoration: none;
}

#logo:hover #logo-title .aura {
  animation: aura-grow 2.5s ease-out infinite;
}

#logo:hover #logo-title .particle {
  animation: particle-flicker 2s ease-in-out infinite;
}

#logo:hover #logo-title .p1  { animation-delay: 0s; }
#logo:hover #logo-title .p2  { animation-delay: 0.17s; }
#logo:hover #logo-title .p3  { animation-delay: 0.34s; }
#logo:hover #logo-title .p4  { animation-delay: 0.51s; }
#logo:hover #logo-title .p5  { animation-delay: 0.68s; }
#logo:hover #logo-title .p6  { animation-delay: 0.85s; }
#logo:hover #logo-title .p7  { animation-delay: 1.02s; }
#logo:hover #logo-title .p8  { animation-delay: 1.19s; }
#logo:hover #logo-title .p9  { animation-delay: 1.36s; }
#logo:hover #logo-title .p10 { animation-delay: 1.53s; }
#logo:hover #logo-title .p11 { animation-delay: 1.7s; }
#logo:hover #logo-title .p12 { animation-delay: 1.87s; }

#logo:hover #logo-title .sparkle-layer {
  animation: sparkle-layer-appear 2s ease-in-out infinite;
}

@keyframes sparkle-layer-appear {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}

#logo:hover #logo-title .sp {
  animation: sparkle-float 3s ease-in-out infinite;
}
#logo:hover #logo-title .sp1  { animation-delay: 0s;     }
#logo:hover #logo-title .sp2  { animation-delay: 0.19s; }
#logo:hover #logo-title .sp3  { animation-delay: 0.38s; }
#logo:hover #logo-title .sp4  { animation-delay: 0.57s; }
#logo:hover #logo-title .sp5  { animation-delay: 0.76s; }
#logo:hover #logo-title .sp6  { animation-delay: 0.95s; }
#logo:hover #logo-title .sp7  { animation-delay: 1.14s; }
#logo:hover #logo-title .sp8  { animation-delay: 1.33s; }
#logo:hover #logo-title .sp9  { animation-delay: 1.52s; }
#logo:hover #logo-title .sp10 { animation-delay: 1.71s; }
#logo:hover #logo-title .sp11 { animation-delay: 1.9s;  }
#logo:hover #logo-title .sp12 { animation-delay: 2.09s; }
#logo:hover #logo-title .sp13 { animation-delay: 2.28s; }
#logo:hover #logo-title .sp14 { animation-delay: 2.47s; }
#logo:hover #logo-title .sp15 { animation-delay: 2.66s; }
#logo:hover #logo-title .sp16 { animation-delay: 2.85s; }

/* Stagger the sparkle positions */
#logo:hover #logo-title .sp1  { left: 40px;  top: 20px;  }
#logo:hover #logo-title .sp2  { left: -30px; top: 10px;  }
#logo:hover #logo-title .sp3  { left: 60px;  top: -10px; }
#logo:hover #logo-title .sp4  { left: -50px; top: -20px; }
#logo:hover #logo-title .sp5  { left: 20px;  top: -30px; }
#logo:hover #logo-title .sp6  { left: -20px; top: 30px;  }
#logo:hover #logo-title .sp7  { left: 70px;  top: 0px;   }
#logo:hover #logo-title .sp8  { left: -65px; top: 5px;   }
#logo:hover #logo-title .sp9  { left: 35px;  top: -40px; }
#logo:hover #logo-title .sp10 { left: -35px; top: -40px; }
#logo:hover #logo-title .sp11 { left: 10px;  top: 40px;  }
#logo:hover #logo-title .sp12 { left: -10px; top: 45px;  }
#logo:hover #logo-title .sp13 { left: 50px;  top: 15px;  }
#logo:hover #logo-title .sp14 { left: -55px; top: -10px; }
#logo:hover #logo-title .sp15 { left: 0px;   top: -50px; }
#logo:hover #logo-title .sp16 { left: -60px; top: 25px;  }


#logo-tagline {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #8a8070;
  letter-spacing: 2px;
  margin-top: 2px;
  display: block;
}

/* ── Nav ────────────────────────────────────────────────── */

#nav {
  background: #0d0d0d;
  border-bottom: 2px solid #1a1a1a;
  padding: 0;
  text-align: center;
}

#nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.nav-sep {
  display: inline-block;
  width: 2px;
  height: 28px;
  background: #2a2a2a;
  vertical-align: middle;
}

.nav-link {
  display: inline-block;
  padding: 8px 18px;
  color: #c0b8a8;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-right: 1px solid #1a1a1a;
  background: #0d0d0d;
  cursor: pointer;
}

.nav-link:first-child {
  border-left: 1px solid #1a1a1a;
}

.nav-link:hover {
  background: #111111;
  color: #80d0ff;
  text-decoration: none;
}

.nav-link.active {
  background: #111111;
  color: #80d0ff;
}

.nav-discord {
  margin-left: auto;
  padding: 8px 16px;
  border-left: 1px solid #1a1a1a;
  border-right: none;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #111825;
  border: 1px solid #2a3560;
  border-radius: 3px;
}

.nav-discord:hover {
  background: #1a2040;
  border-color: #4a60a0;
}
.nav-discord-icon {
  height: 16px;
  width: auto;
  vertical-align: middle;
  filter: invert(1);
}

/* ── Main ────────────────────────────────────────────────── */

#main {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  padding: 0 20px;
}

/* ── Section boxes ───────────────────────────────────────── */

.box {
  border: 2px solid #2a2a2a;
  margin: 20px 0;
  background: #080808;
}

.box-title {
  background: #111;
  border-bottom: 2px solid #2a2a2a;
  padding: 6px 12px;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: bold;
  color: #c0b8a8;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.box-title .accent {
  color: #c0b8a8;
  font-weight: normal;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.box-body {
  padding: 16px;
}

/* ── Hero section ─────────────────────────────────────────── */

#hero {
  border: 2px solid #2a2a2a;
  margin: 20px 0;
  background: #080808;
}

#hero-inner {
  display: table;
  width: 100%;
}

#hero-left {
  display: table-cell;
  width: 50%;
  padding: 20px;
  vertical-align: top;
  border-right: 1px solid #1a1a1a;
}

#hero-right {
  display: table-cell;
  width: 50%;
  padding: 20px;
  vertical-align: middle;
  text-align: center;
}

#hero-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: bold;
  color: #c0b8a8;
  line-height: 1.3;
  margin-bottom: 12px;
  text-shadow: 1px 1px 0 #000;
}

#hero-desc {
  font-size: 14px;
  color: #8a8070;
  line-height: 1.7;
  margin-bottom: 16px;
}

#hero-lore {
  font-family: Georgia, serif;
  font-size: 14px;
  font-style: italic;
  color: #8a8070;
  border-left: 3px solid #3a1a4a;
  padding-left: 10px;
  margin-top: 12px;
  line-height: 1.7;
}

#hero-img-placeholder {
  width: 100%;
  height: 200px;
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #404040;
  font-size: 12px;
}

#hero-img-placeholder .big {
  font-size: 48px;
  line-height: 1;
  filter: hue-rotate(260deg) saturate(2);
  opacity: 0.6;
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 8px 16px;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border: 2px outset #2a2a2a;
  background: #111111;
  color: #80d0ff;
  text-align: center;
}

.btn:hover {
  background: #111111;
  color: #a0d8ff;
  text-decoration: none;
}

.btn:active {
  border-style: inset;
  background: #111111;
}

.btn-primary {
  background: #1a0033;
  border-color: #4a2080;
  color: #c090ff;
}

.btn-primary:hover {
  background: #2a0050;
  color: #d8b0ff;
}

.btn-primary:active {
  background: #100022;
}

/* ── Email form ───────────────────────────────────────────── */

#email-form-wrap {
  border: 1px solid #2a2a2a;
  background: #0a0a0a;
  padding: 14px 16px;
}

#email-form-wrap p {
  font-size: 14px;
  color: #8a8070;
  margin-bottom: 10px;
  line-height: 1.5;
}

.email-row {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.email-input {
  flex: 1;
  padding: 7px 10px;
  background: #111;
  border: 2px inset #2a2a2a;
  color: #c0b8a8;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  min-width: 0;
}

.email-input:focus {
  outline: none;
  border-color: #4a2060;
  background: #111111;
}

.email-input::placeholder {
  color: #606060;
}

.email-submit {
  padding: 7px 14px;
  border: 2px outset #3a2060;
  background: #1a0033;
  color: #c090ff;
  font-family: Verdana, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
}

.email-submit:hover {
  background: #2a0050;
  color: #d8b0ff;
}

.email-submit:active {
  border-style: inset;
  background: #100022;
}

.email-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.email-error {
  color: #c04040;
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.email-error.show {
  display: block;
}

.email-success {
  color: #60a060;
  font-size: 14px;
  margin-top: 8px;
  display: none;
}

.email-success.show {
  display: block;
}

.email-note {
  font-size: 12px;
  color: #606060;
  margin-top: 8px;
}

/* ── Features grid ────────────────────────────────────────── */

#features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.feature-item {
  border: 1px solid #2a2a2a;
  background: #080808;
  padding: 12px;
}

.feature-item h3 {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #c0b8a8;
  margin-bottom: 6px;
  font-weight: bold;
}

.feature-item p {
  font-size: 12px;
  color: #8a8070;
  line-height: 1.6;
}

/* ── Devlog ───────────────────────────────────────────────── */

#devlog-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.devlog-post {
  border-bottom: 1px solid #1a1a1a;
  padding: 16px 0;
}

.devlog-post:last-child {
  border-bottom: none;
}

.devlog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.devlog-date {
  font-size: 11px;
  color: #606060;
  letter-spacing: 1px;
}

.devlog-tag {
  font-size: 10px;
  padding: 2px 6px;
  background: #1a1a1a;
  color: #c070ff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.devlog-title {
  font-family: Georgia, serif;
  font-size: 15px;
  color: #c0b8a8;
  font-weight: bold;
  margin-bottom: 6px;
}

.devlog-excerpt {
  font-size: 12px;
  color: #8a8070;
  line-height: 1.6;
}

/* ── Footer ───────────────────────────────────────────────── */

#footer {
  max-width: 900px;
  margin: 24px auto 0;
  padding: 16px 20px;
  border-top: 2px solid #1a1a1a;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #606060;
  font-size: 12px;
}

#footer a { color: #8a8070; }
#footer a:hover { color: #80d0ff; }

.footer-brand {
  font-family: Georgia, serif;
  font-size: 14px;
  color: #9070c0;
  letter-spacing: 2px;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Toast ────────────────────────────────────────────────── */

#toast {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a0033;
  border: 2px solid #4a2080;
  color: #c090ff;
  padding: 8px 20px;
  font-size: 14px;
  z-index: 1000;
  display: none;
  white-space: nowrap;
}

#toast.show {
  display: block;
}

/* ── Responsive ─── */

@media (max-width: 700px) {
  #logo-img {
    height: 140px;
  }

  #header-inner {
    padding: 10px 12px 6px;
  }

  #nav-inner {
    flex-wrap: wrap;
    gap: 0;
    padding: 0 8px;
  }

  .nav-link {
    padding: 8px 10px;
    font-size: 12px;
    letter-spacing: 0;
  }

  .nav-sep {
    display: none;
  }

  #hero {
    padding: 20px 12px;
  }

  #hero-inner {
    display: block;
  }

  #hero-left, #hero-right {
    display: block;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #1a1a1a;
    padding: 0 0 20px;
  }

  #features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #cta-section {
    padding: 30px 12px;
  }

  .cta-inner {
    padding: 0;
  }

  .form-row {
    flex-direction: column;
    gap: 8px;
  }

  .form-row input {
    width: 100%;
  }

  .footer-inner {
    padding: 20px 12px;
  }

  #devlog-grid {
    gap: 0;
  }

  .devlog-post {
    padding: 12px 0;
  }
}

.hidden { display: none !important; }