:root {
  --gunmetal: #2d333b;
  --whiteout: #ffffff;
}

body { 
  margin: 0; 
  background-color: var(--gunmetal); 
  font-family: sans-serif;
  transition: background-color 2.5s ease-in-out; 
  overflow: hidden; 
}

body.storm { background-color: var(--whiteout); }

/* Header & Menu Alignment */
.topbar { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 50; display: flex; align-items: center; justify-content: center; }
.header-content { position: relative; width: min(1200px, 90vw); display: flex; align-items: center; justify-content: space-between; }

.brand { color: #888; text-decoration: none; font-weight: 800; display: flex; align-items: center; gap: 12px; transition: color 2.5s; }
body:not(.storm) .brand { color: white; }
.top-logo { height: 36px; width: auto; transition: filter 2.5s ease-in-out; }
body.storm .top-logo { filter: invert(1); }

.menu-btn { 
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); 
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  cursor: pointer; backdrop-filter: blur(5px);
  transition: all 0.3s ease, border-color 2.5s, background 2.5s;
}
.menu-btn span { display: block; height: 2px; width: 22px; margin: 3px auto; background: #888; transition: background 2.5s; }
body:not(.storm) .menu-btn span { background: white; }
body.storm .menu-btn { border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.05); }

/* The Dropdown Menu */
.nav { 
  display: none; 
  position: absolute; 
  top: 70px; 
  right: 0; 
  background: rgba(10, 13, 16, 0.95); 
  padding: 20px; 
  border-radius: 14px; 
  z-index: 100; /* Ensured this stays on top of everything */
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav.open { display: flex; flex-direction: column; gap: 15px; }
.nav a { color: white; text-decoration: none; font-weight: 700; padding: 8px; border-radius: 8px; transition: background 0.2s; }
.nav a:hover { background: rgba(255,255,255,0.1); }

/* The Central Area Limits */
.main-content-area { position: relative; width: min(1200px, 90vw); margin: 0 auto; }
.hero { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; z-index: 2; }

/* Canvas positioned securely behind content */
#smokeCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Circles and Bears with GLOW effects */
.logo-stage { position: relative; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; z-index: 2; }
.uneven-circle { position: absolute; transition: border-color 2.5s ease-in-out, box-shadow 2.5s ease-in-out; }

.circle-1 { 
  width: 100%; height: 100%; border: 4px solid rgba(255, 255, 255, 0.6); 
  box-shadow: 0 0 20px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.4);
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: spinBlob 8s linear infinite; 
}
body.storm .circle-1 { border-color: rgba(0, 0, 0, 0.6); box-shadow: 0 0 20px rgba(0,0,0,0.4), inset 0 0 20px rgba(0,0,0,0.4); }

.circle-2 { 
  width: 105%; height: 105%; border: 8px solid var(--gunmetal); 
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: spinBlobReverse 10s linear infinite; transition: border-color 2.5s; 
}
body.storm .circle-2 { border-color: var(--whiteout); }

.circle-3 { 
  width: 90%; height: 90%; border: 3px solid #000000; 
  box-shadow: 0 0 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.5);
  border-radius: 50% 40% 60% 40% / 50% 60% 40% 60%; animation: spinBlobAlt 12s linear infinite reverse; 
}
body.storm .circle-3 { border-color: rgba(0,0,0,0.7); }

.bear-wrapper { position: relative; width: 220px; height: 120px; }
.bear-logo { width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 2.5s ease-in-out; }
.black-bear { opacity: 0; }
.white-bear { opacity: 1; }
body.storm .black-bear { opacity: 1; }
body.storm .white-bear { opacity: 0; }

@keyframes spinBlob { 0% { transform: rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 100% { transform: rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } }
@keyframes spinBlobReverse { 0% { transform: rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 50% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 100% { transform: rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } }
@keyframes spinBlobAlt { 0% { transform: rotate(0deg); border-radius: 50% 40% 60% 40% / 50% 60% 40% 60%; } 50% { border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; } 100% { transform: rotate(360deg); border-radius: 50% 40% 60% 40% / 50% 60% 40% 60%; } }

/* --- Private Page UI --- */
body.private-page { background-color: var(--gunmetal); overflow-y: auto; }
.panel-wrap { min-height: 100vh; display: grid; place-items: center; padding: 120px 22px 60px; color: white; }
.glass-card { width: min(800px, 94vw); background: rgba(19, 24, 29, 0.72); border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 40px; backdrop-filter: blur(22px); box-shadow: 0 25px 80px rgba(0,0,0,.35); z-index: 5; position: relative; }
.eyebrow { color: #dff8ff; text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 900; margin: 0 0 10px 0; }
.glass-card h1 { margin: 0 0 30px 0; font-size: 2.5rem; letter-spacing: 0.02em; }

.project-list { display: flex; flex-direction: column; gap: 16px; }
.project-link { display: flex; align-items: center; gap: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 20px 24px; border-radius: 16px; text-decoration: none; color: white; transition: all 0.3s ease; }
.project-link:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.2); }
.project-link .icon { font-size: 2rem; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 12px; }
.project-info h3 { margin: 0 0 6px 0; font-size: 1.2rem; }
.project-info p { margin: 0; color: #a8b3bd; font-size: 0.95rem; line-height: 1.4; }

@media (max-width: 760px) { .project-link { flex-direction: column; text-align: center; } }