/* ============================================================
   SHAUN BADDOCK PORTFOLIO — styles.css
   Edit this file to change colors, fonts, spacing
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #080c14;
  color: #e2e8f0;
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography helpers ───────────────────────────────────── */
.syne  { font-family: 'Syne', sans-serif; }
.mono  { font-family: 'Space Mono', monospace; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: #080c14; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,.45); border-radius: 2px; }

/* ── Grid background ──────────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.06) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes glow    { 0%,100% { opacity:.4; transform:scale(1) }   50% { opacity:.7; transform:scale(1.05) } }
@keyframes float   { 0%,100% { transform:translateY(0) }          50% { transform:translateY(-8px) } }
@keyframes shimmer { 0% { background-position:-200% center }      100% { background-position:200% center } }

.anim-fade-up { animation: fadeUp .7s ease both; }
.anim-glow    { animation: glow 4s ease-in-out infinite; pointer-events:none; }
.anim-float   { animation: float 4s ease-in-out infinite; }

.d1 { animation-delay:.10s } .d2 { animation-delay:.20s }
.d3 { animation-delay:.30s } .d4 { animation-delay:.38s }
.d5 { animation-delay:.46s } .d6 { animation-delay:.56s }

/* ── Shimmer text ─────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg,#e2e8f0 0%,#a5b4fc 30%,#6ee7b7 50%,#a5b4fc 70%,#e2e8f0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Pill tags ────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .04em;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); color: #a5b4fc;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: rgba(10,16,30,.85);
  border: 1px solid rgba(99,102,241,.12);
  border-radius: 14px;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(99,102,241,.4);
  box-shadow: 0 16px 48px rgba(99,102,241,.12);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px;
  background: linear-gradient(135deg,#6366f1,#4f46e5);
  border: none; color: #fff;
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 0 30px rgba(99,102,241,.3);
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(99,102,241,.45); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px; border-radius: 10px;
  background: transparent; border: 1px solid rgba(99,102,241,.3);
  color: #a5b4fc; font-family: 'Syne', sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: rgba(99,102,241,.7); background: rgba(99,102,241,.08); }

/* ── Accent divider ───────────────────────────────────────── */
.accent-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.5), rgba(16,185,129,.3), transparent);
}

/* ── Section label ────────────────────────────────────────── */
.section-label {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 14px;
}

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-card {
  opacity: 0; transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-card.in { opacity: 1; transform: translateY(0); }

/* ── Navigation ───────────────────────────────────────────── */
.nav-link {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: #64748b; text-decoration: none; transition: color .2s; cursor: pointer;
}
.nav-link:hover { color: #a5b4fc; }

/* ── Roadmap ──────────────────────────────────────────────── */
.roadmap-btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700;
  border: 2px solid; transition: all .3s;
}

/* ── Era cards (Sitecore timeline) ────────────────────────── */
.era-card {
  padding: 18px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(99,102,241,.1); transition: all .3s;
}
.era-card.active { background: rgba(99,102,241,.07); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .desktop-nav          { display: none !important; }
  .two-col              { grid-template-columns: 1fr !important; }
  .roadmap-detail-grid  { grid-template-columns: 1fr !important; }
  .phase-label          { display: none !important; }
  .metrics-grid         { grid-template-columns: 1fr !important; }
}