/* ====== VARIABLES ====== */
:root {
  --bg: #08080e;
  --text: #e8e8e8;
  --text-dim: #888;
  --text-bright: #fff;
  --accent: #c8c8d0;
  --font-hero: 'Chakra Petch', sans-serif;
  --font-body: 'Syne', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;
  --font-mono: 'Space Mono', monospace;
  --nav-height: 60px;
}

/* ====== RESET ====== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--text-bright); }

/* ====== TWINKLING STARS (Pure CSS) ====== */
.stars, .stars-medium, .stars-large {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.stars {
  animation: twinkle1 4s ease-in-out infinite alternate;
  box-shadow:
    24px 89px #fff, 130px 210px #fff, 250px 45px #fff,
    390px 180px #fff, 520px 70px #fff, 680px 290px #fff,
    45px 350px #fff, 170px 420px #fff, 310px 500px #fff,
    460px 380px #fff, 600px 510px #fff, 740px 120px #fff,
    80px 600px #fff, 200px 680px #fff, 350px 750px #fff,
    500px 640px #fff, 650px 720px #fff, 780px 430px #fff,
    55px 820px #fff, 190px 900px #fff, 330px 870px #fff,
    470px 950px #fff, 620px 860px #fff, 760px 940px #fff,
    100px 1050px #fff, 260px 1120px #fff, 410px 1080px #fff,
    560px 1150px #fff, 700px 1020px #fff, 820px 200px #fff,
    880px 350px #fff, 950px 80px #fff, 1020px 500px #fff,
    1100px 150px #fff, 1180px 420px #fff, 1260px 300px #fff,
    920px 680px #fff, 1050px 750px #fff, 1150px 620px #fff,
    1280px 850px #fff, 870px 920px #fff, 1000px 1000px #fff,
    1130px 890px #fff, 1250px 1050px #fff, 1350px 180px #fff,
    1400px 460px #fff, 1300px 650px #fff, 1380px 900px #fff,
    35px 1200px #fff, 180px 1350px #fff, 320px 1280px #fff,
    480px 1400px #fff, 630px 1300px #fff, 800px 1380px #fff,
    960px 1200px #fff, 1100px 1350px #fff, 1240px 1250px #fff,
    1380px 1150px #fff, 70px 1500px #fff, 220px 1580px #fff,
    400px 1520px #fff, 580px 1600px #fff, 720px 1480px #fff,
    900px 1550px #fff, 1060px 1500px #fff, 1200px 1580px #fff;
}

.stars-medium::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 2px; height: 2px;
  background: transparent;
  animation: twinkle2 5s ease-in-out infinite alternate;
  box-shadow:
    80px 140px #fff, 320px 90px #fff, 550px 250px #fff,
    150px 480px #fff, 420px 360px #fff, 700px 500px #fff,
    60px 720px #fff, 280px 650px #fff, 500px 800px #fff,
    730px 700px #fff, 900px 150px #fff, 1050px 340px #fff,
    850px 550px #fff, 1150px 200px #fff, 1000px 680px #fff,
    200px 1000px #fff, 450px 1100px #fff, 680px 1050px #fff,
    1100px 900px #fff, 1280px 400px #fff, 370px 1350px #fff,
    820px 1250px #fff, 1050px 1150px #fff, 1300px 750px #fff,
    120px 1450px #fff, 560px 1500px #fff, 950px 1400px #fff;
}

.stars-large::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: transparent;
  animation: twinkle3 7s ease-in-out infinite alternate;
  box-shadow:
    200px 120px rgba(255,255,255,0.9),
    600px 300px rgba(255,255,255,0.85),
    450px 600px rgba(255,255,255,0.9),
    900px 200px rgba(255,255,255,0.8),
    1100px 500px rgba(255,255,255,0.85),
    350px 900px rgba(255,255,255,0.9),
    750px 800px rgba(255,255,255,0.8),
    1200px 700px rgba(255,255,255,0.85),
    100px 1200px rgba(255,255,255,0.9),
    550px 1100px rgba(255,255,255,0.8),
    1000px 1000px rgba(255,255,255,0.85),
    800px 1350px rgba(255,255,255,0.9);
}

@keyframes twinkle1 {
  0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.4; }
}
@keyframes twinkle2 {
  0% { opacity: 0.5; } 50% { opacity: 0.9; } 100% { opacity: 0.3; }
}
@keyframes twinkle3 {
  0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.5; }
}

/* ====== SHOOTING STARS ====== */
.shooting-star {
  position: fixed;
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
}

.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%; right: 100%;
  width: 80px; height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,0.7), rgba(255,255,255,0.2) 30%, transparent);
  transform: translateY(-50%);
}

.shooting-star:nth-child(1) {
  top: 12%; left: 10%;
  animation: shoot1 55s linear infinite;
  animation-delay: 8s;
}
.shooting-star:nth-child(2) {
  top: 8%; left: 55%;
  animation: shoot2 70s linear infinite;
  animation-delay: 30s;
}
.shooting-star:nth-child(3) {
  top: 25%; left: 5%;
  animation: shoot3 80s linear infinite;
  animation-delay: 50s;
}

@keyframes shoot1 {
  0%, 95%  { opacity: 0; transform: translate(0, 0) rotate(-25deg); }
  96%      { opacity: 1; }
  100%     { opacity: 0; transform: translate(85vw, 25vh) rotate(-25deg); }
}
@keyframes shoot2 {
  0%, 96%  { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
  97%      { opacity: 1; }
  100%     { opacity: 0; transform: translate(40vw, 30vh) rotate(-35deg); }
}
@keyframes shoot3 {
  0%, 97%  { opacity: 0; transform: translate(0, 0) rotate(-20deg); }
  97.5%    { opacity: 1; }
  100%     { opacity: 0; transform: translate(70vw, 18vh) rotate(-20deg); }
}

/* ====== NAVIGATION ====== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
  background: rgba(8,8,14,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.nav-logo {
  font-family: var(--font-hero);
  font-size: 16px; font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.nav-links {
  display: flex; gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--text-bright);
  transition: width 0.3s ease;
}

.nav-links a:hover { color: var(--text-bright); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.active { color: var(--text-bright); }
.nav-links a.active::after { width: 100%; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none; border: none;
  padding: 4px;
  z-index: 110;
}

.hamburger span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8,8,14,0.97);
  z-index: 105;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.mobile-menu.active { display: flex; }

.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--text-dim);
  letter-spacing: 2px;
}

.mobile-menu a:hover { color: var(--text-bright); }
.mobile-menu a.active { color: var(--text-bright); }

/* ====== CONTENT WRAPPER ====== */
.content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ====== PAGE HEADER (shared across sub-pages) ====== */
.page-header {
  padding-top: calc(var(--nav-height) + 80px);
  padding-bottom: 60px;
}

.page-title {
  font-family: var(--font-hero);
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
}

.page-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.page-divider {
  width: 48px; height: 1px;
  background: var(--text-dim);
  margin: 32px 0;
}

/* ====== FOOTER ====== */
.footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 48px 0;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(136,136,136,0.5);
}

/* ====== SHARED UTILITIES ====== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .navbar { padding: 0 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .content { padding: 0 24px; }
  .footer-links { gap: 20px; }
  .page-header { padding-top: calc(var(--nav-height) + 48px); padding-bottom: 40px; }
}