/* =========================
   Micah Novak — Site Styles
   ========================= */

/* --- Theme tokens --- */
:root{
  --bg:#0b0d10;
  --panel:#12151a;
  --ink:#e8eef6;
  --muted:#a9b4c2;
  --brand:#68c1ff;   /* sky blue */
  --brand-2:#8fffca; /* mint accent */
  --card:#161a20;
  --border:#212733;
}
/* Ensure the haze sits above the body background but below content */
body{
  position: relative;
  z-index: 0;            /* create stacking context for ::before */
  background: var(--bg); /* keep your dark background */
}

/* Haze layer */
body::before{
  /* keep your existing gradients … */
  z-index: 0;            /* was -1 — move it above the body background */
  position: fixed;       /* already set in the earlier CSS */
  pointer-events: none;
}

/* Put page content above the haze */
header, main, footer{
  position: relative;
  z-index: 1;
}

/* --- Global reset --- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  scroll-behavior:smooth;
}
img{max-width:100%; display:block; border-radius:12px}

/* === Soft blue haze background (animated) === */
body::before{
  content:"";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(600px circle at 12% 18%, rgba(104,193,255,0.18), transparent 55%),
    radial-gradient(800px circle at 88% 22%, rgba(99,102,241,0.14), transparent 60%),
    radial-gradient(700px circle at 22% 86%, rgba(34,211,238,0.12), transparent 60%);
  filter: blur(42px) saturate(110%);
  transform: translate3d(0,0,0);
  animation: haze-float 28s ease-in-out infinite alternate;
}
@keyframes haze-float{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-18px,0) scale(1.02); }
}

/* --- Layout primitives --- */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.section{padding:72px 0; border-top:1px solid var(--border)}
.section.alt{background:var(--panel)}
.section h2{margin:0 0 12px; font-size:32px}
.section-sub{margin:0 0 24px; color:var(--muted)}

/* --- Header & Nav --- */
.site-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px;
}
.brand{
  font-weight:800; text-decoration:none; color:var(--ink); font-size:20px;
  border:2px solid var(--ink); padding:4px 8px; border-radius:10px;
}
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  color:var(--ink); padding:6px 10px; border-radius:10px;
}
.nav-links{display:flex; gap:16px; list-style:none; margin:0; padding:0}
.nav-links a{
  color:var(--ink); text-decoration:none; padding:8px 10px; border-radius:10px;
  position:relative;
}
.nav-links a:hover{background:rgba(255,255,255,0.06)}
.btn-link{border:1px solid var(--border)}

/* underline accent for nav links */
.nav-links a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* --- Hero --- */
.hero{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:28px; align-items:center;
  padding:40px 20px 60px;
}
.hero h1{font-size:42px; margin:0 0 8px}
.lead{color:var(--muted); margin:0 0 18px}
.hero-photo img{
  width:260px; height:260px; object-fit:cover; margin-left:auto;
  border-radius:28px; border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

/* --- Buttons (snappier + glow) --- */
.btn{
  display:inline-block; background:var(--brand); color:#001016;
  text-decoration:none; padding:10px 14px; border-radius:12px; font-weight:700;
  box-shadow:0 0 0 rgba(104,193,255,0);
  transition:transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(104,193,255,.22);
}
.btn-ghost{
  background:transparent; border:1px solid var(--border); color:var(--ink);
}
.btn-ghost:hover{ box-shadow:0 8px 20px rgba(255,255,255,.06); }

/* --- Grids --- */
.grid{display:grid; gap:18px}
.grid.cards{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.gallery{grid-template-columns:repeat(3,1fr)}

/* --- Cards (lift + border glow on hover) --- */
.card{
  background:var(--card); border:1px solid var(--border);
  padding:16px; border-radius:16px;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(104,193,255,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(104,193,255,.15) inset;
}
.card h3{margin:0 0 8px}
.card p{margin:0 0 12px; color:var(--muted)}
.tags{display:flex; gap:8px; list-style:none; margin:0 0 12px; padding:0}
.tags li{
  border:1px solid var(--border); padding:4px 8px; border-radius:999px;
  color:var(--ink); font-size:12px;
}
.card-actions{display:flex; gap:12px}
.card-actions a{color:var(--brand); text-decoration:none; position:relative}
.card-actions a:hover{ text-decoration:none }
.card-actions a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.card-actions a:hover::after{ transform:scaleX(1); }

/* --- Lists / timeline --- */
.list{margin:0; padding-left:18px; color:var(--ink)}
.list li{margin:6px 0}
.timeline{display:grid; gap:14px; border-left:2px solid var(--border); padding-left:16px}
.time-item h3{margin:0 0 4px}
.meta{color:var(--muted); font-size:14px}

/* --- Footer --- */
.site-footer{border-top:1px solid var(--border); padding:28px 0; text-align:center; color:var(--muted)}
.back-to-top{display:inline-block; margin-left:8px; color:var(--brand); text-decoration:none}
.back-to-top:hover{text-decoration:underline}

/* --- Responsive --- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-photo img{margin:0}
  .grid.cards{grid-template-columns:1fr}
  .grid.two{grid-template-columns:1fr}
  .grid.gallery{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-block}
  .nav-links{
    display:none; flex-direction:column; position:absolute; right:16px; top:56px;
    background:var(--panel); padding:12px; border:1px solid var(--border); border-radius:12px;
  }
  .nav-links.open{display:flex}
}