/* ============================================================
   style.css — SHARED / BASE STYLES
   This file is loaded by ALL four pages (index, game-design,
   it-skills, web-design). It contains:
     1. Google Font import
     2. CSS custom properties (variables) — colours, fonts
     3. A reset so every browser starts from zero
     4. Small utility classes used across every page
     5. The navigation bar (top bar on every page)
     6. The footer (bottom bar on every page)
     7. Shared animation keyframes
     8. The scroll-reveal system
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS
   We import three fonts from Google:
   - Bebas Neue   → used for big display headings (all-caps, impact)
   - Space Mono   → used for labels, tags, buttons (code/terminal feel)
   - DM Sans      → used for body text (clean and readable)
   The font-display=swap means text shows instantly in a fallback
   font while the custom font is downloading — no blank page.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES (variables)
   These are stored on :root so they're available everywhere.
   To change the whole colour scheme, edit just this block.
   Usage: color: var(--text);  background: var(--bg);
   ============================================================ */
:root {
  /* --- Background colours (darkest to slightly lighter) --- */
  --bg:        #05050a;   /* the very darkest background, used on most sections */
  --bg2:       #0d0d18;   /* slightly lighter dark, used on inner cards/elements */
  --surface:   #111120;   /* used for card/panel backgrounds */

  /* --- Border --- */
  --border:    rgba(255,255,255,0.08); /* subtle white border at 8% opacity */

  /* --- Text colours --- */
  --text:      #e8e8f0;   /* main body text — near white with a slight blue tint */
  --muted:     #555570;   /* secondary/label text — dimmer, used for less important info */

  /* --- Brand blue (used across all pages as the unifying accent) --- */
  --blue:      #2563eb;
  --blue-glow: rgba(37,99,235,0.35);  /* for glow/shadow effects */
  --blue-dim:  rgba(37,99,235,0.15);  /* for very subtle blue tints on backgrounds */

  /* --- Typography — which font to use where --- */
  --font-display: 'Bebas Neue', sans-serif; /* BIG headings */
  --font-mono:    'Space Mono', monospace;  /* labels, tags, nav, buttons */
  --font-body:    'DM Sans', sans-serif;    /* paragraphs, descriptions */
}


/* ============================================================
   3. RESET
   By default, different browsers add their own margin/padding
   and handle box sizing differently. This block zeroes everything
   out so we start from a consistent baseline on every browser.
   ============================================================ */

/* Apply border-box to everything:
   This means width/height includes padding and border,
   so a 200px box with 20px padding stays 200px wide total. */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Enable smooth scrolling when clicking anchor links (e.g. #projects) */
html {
  scroll-behavior: smooth;
  font-size: 16px; /* base font size — rem units are relative to this */
}

/* Set the default look of the whole page */
body {
  background: var(--bg);      /* dark background */
  color: var(--text);          /* near-white text */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;           /* comfortable reading line spacing */
  overflow-x: hidden;          /* prevent horizontal scrollbar from appearing */
  -webkit-font-smoothing: antialiased; /* makes text look sharper on Mac/Chrome */
}

/* Remove underlines from all links by default (we add them back where wanted) */
a { color: inherit; text-decoration: none; }

/* Images: never overflow their container, and display as block (removes
   the tiny gap that inline images get at the bottom) */
img { max-width: 100%; display: block; }

/* Remove bullet points from all lists — we style them manually */
ul { list-style: none; }


/* ============================================================
   4. UTILITY CLASSES
   Small reusable classes you can drop onto any element.
   ============================================================ */

/* Force monospace / code font on any element */
.mono { font-family: var(--font-mono); }

/* Small uppercase label style — used for "// Game Designer" type tags */
.tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;  /* spaced-out letters for readability */
  text-transform: uppercase;
}

/* Centers content horizontally and adds side padding.
   Wrap your section content in <div class="container"> */
.container {
  max-width: 1160px;   /* stops content getting too wide on large screens */
  margin: 0 auto;      /* centres the container */
  padding: 0 2rem;     /* 32px breathing room on each side */
}

/* Default vertical padding for full page sections */
.section { padding: 6rem 0; }

/* A thin horizontal rule to separate sections */
.divider {
  height: 1px;
  background: var(--border);
  margin: 0;
}


/* ============================================================
   5. NAVIGATION BAR
   Fixed to the top of the viewport — always visible as you scroll.
   Uses a frosted-glass effect (backdrop-filter blur).
   ============================================================ */

.nav {
  position: fixed;      /* stays at top even when scrolling */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;         /* sits above all page content */
  padding: 1.1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, links right */
  background: rgba(5,5,10,0.85);  /* semi-transparent dark bg */
  backdrop-filter: blur(14px);    /* blurs whatever is behind the nav */
  border-bottom: 1px solid var(--border);
}

/* The MC.PORTFOLIO logo text on the left */
.nav__logo {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.05em;
}
/* The blue dot between MC and PORTFOLIO */
.nav__logo span { color: var(--blue); }

/* The row of links on the right side of the nav */
.nav__links {
  display: flex;
  gap: 2rem;
  align-items: center;
}

/* Individual nav link style */
.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);          /* dimmed by default */
  transition: color 0.2s;       /* smooth colour change on hover */
}

/* Hover and active (current page) states */
.nav__links a:hover,
.nav__links a.active { color: var(--text); }       /* brighten on hover */
.nav__links a.active { color: var(--blue); }        /* blue for current page */

/* The "Contact" button in the nav — outlined style */
.nav__cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue) !important; /* force blue even when .active is also applied */
  border: 1px solid var(--blue);
  padding: 0.4rem 0.9rem;
  transition: background 0.2s, color 0.2s !important;
}
.nav__cta:hover { background: var(--blue); color: #fff !important; }

/* --- Mobile hamburger button (three lines icon) ---
   Hidden on desktop, shown on screens below 768px */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: 0.3s;
}

/* --- Mobile full-screen nav overlay ---
   Hidden until hamburger is clicked — JS adds class .open */
.nav__mobile {
  display: none;              /* hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--bg);
  z-index: 99;                /* below .nav (100) but above everything else */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
/* JS adds this class to show the overlay */
.nav__mobile.open { display: flex; }

.nav__mobile a {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}
.nav__mobile a:hover { color: var(--text); }

/* The X close button inside the mobile overlay */
.nav__mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
}


/* ============================================================
   6. FOOTER
   Sits at the very bottom of each page.
   flex-wrap: wrap means on narrow screens the two halves stack.
   ============================================================ */
.footer {
  padding: 3rem 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer__copy {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.footer__links { display: flex; gap: 1.5rem; }
.footer__links a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  transition: color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer__links a:hover { color: var(--text); }


/* ============================================================
   7. ANIMATION KEYFRAMES
   These define the motion patterns — they don't animate
   anything on their own. You reference them with animation:.
   ============================================================ */

/* Slides an element up from 28px below its resting position while fading in */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* A simple blink — used for the cursor in the terminal typewriter */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Moves an element from top to bottom — used for the scan line on game-design hero */
@keyframes scan {
  0%   { top: 0; }
  100% { top: 100%; }
}

/* --- Fade-up utility classes ---
   Add class="fade-up" to any element to play the entrance animation.
   Add d1–d5 to stagger multiple elements (each delays a bit longer). */
.fade-up { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.fade-up.d1 { animation-delay: 0.1s;  }
.fade-up.d2 { animation-delay: 0.22s; }
.fade-up.d3 { animation-delay: 0.36s; }
.fade-up.d4 { animation-delay: 0.5s;  }
.fade-up.d5 { animation-delay: 0.65s; }


/* ============================================================
   8. SECTION LABEL
   The small "// What I Do" labels above headings.
   The ::before pseudo-element draws a short line before the text.
   ============================================================ */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.2rem;
}
/* The short horizontal line that appears before the label text */
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--blue);
}


/* ============================================================
   9. SCROLL REVEAL SYSTEM
   Elements with class="reveal" start invisible and off-position.
   JavaScript (in main.js) watches them with IntersectionObserver —
   when they scroll into view it adds class="visible", which
   triggers the transition below.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);  /* starts 30px lower than final position */
  transition: opacity 0.6s ease, transform 0.6s ease;
}
/* JS adds this class when element enters the viewport */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);     /* moves up to final position */
}


/* ============================================================
   10. RESPONSIVE BREAKPOINTS (shared)
   At 768px and below (tablets, phones):
   - Hide the desktop nav links
   - Show the hamburger button instead
   - Reduce section vertical padding
   ============================================================ */
@media (max-width: 768px) {
  .nav__links    { display: none; }    /* hide desktop links */
  .nav__hamburger { display: flex; }   /* show hamburger icon */
  .section        { padding: 4rem 0; } /* slightly less vertical space */
}


/* ============================================================
   RECRUITER-FOCUSED COMPONENTS
   High-visibility elements designed to land in the first 6
   seconds of a recruiter's scan of the page.
   ============================================================ */

/* --- Credentials ticker bar ---
   Sits inside the hero. A horizontal strip of key facts:
   company, degree, team size, availability.
   The ::before line on each item separates them visually. */
.creds-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 3rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.cred-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.8rem;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.cred-item:last-child { border-right: none; }
.cred-item__icon { font-size: 1rem; }
.cred-item__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: block;
}
.cred-item__value {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 700;
  display: block;
  margin-top: 0.1rem;
}
/* The "live" item gets a green pulse to draw the eye */
.cred-item.live .cred-item__value {
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cred-item.live .cred-item__value::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 640px) {
  .creds-bar { flex-direction: column; }
  .cred-item { border-right: none; border-bottom: 1px solid var(--border); }
  .cred-item:last-child { border-bottom: none; }
}

/* --- Contrast callout banner ---
   A full-width panel between hero and main content.
   Left: a bold statement. Right: a supporting data point.
   Used on the game design page. */
.callout-banner {
  background: var(--blue);
  padding: 2.5rem 0;
  position: relative;
  overflow: hidden;
}
/* Faint diagonal stripe pattern for texture */
.callout-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    rgba(255,255,255,0.03) 20px,
    rgba(255,255,255,0.03) 21px
  );
}
.callout-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.callout-banner__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  color: #fff;
  line-height: 1.15;
  max-width: 640px;
}
.callout-banner__text em {
  color: rgba(255,255,255,0.55);
  font-style: normal;
}
.callout-banner__stat {
  text-align: right;
  flex-shrink: 0;
}
.callout-banner__stat-num {
  font-family: var(--font-display);
  font-size: 4rem;
  color: #fff;
  line-height: 1;
}
.callout-banner__stat-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-top: 0.3rem;
}

/* --- Featured role card ---
   A prominent card at the top of the work section that
   highlights the current / most impressive role before
   the timeline begins. */
.featured-role {
  background: var(--surface);
  border: 1px solid var(--accent);
  padding: 2rem 2.5rem;
  margin-bottom: 3rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
/* Glow strip at the top edge */
.featured-role::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 20px var(--accent);
}
.featured-role__badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  padding: 0.25rem 0.7rem;
  display: inline-block;
  margin-bottom: 0.8rem;
}
.featured-role__title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 0.3rem;
}
.featured-role__company {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 1rem;
}
.featured-role__bullets { list-style: none; }
.featured-role__bullets li {
  font-size: 0.88rem;
  color: var(--muted);
  padding: 0.3rem 0;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.5;
}
.featured-role__bullets li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.7rem;
}
.featured-role__period {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  align-self: flex-start;
  white-space: nowrap;
}

/* --- Live proof strip ---
   3 large stats on the web design page, before the portfolio.
   Each has a number, a label, and a supporting note. */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: 4rem;
}
.proof-item {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  position: relative;
}
.proof-item:last-child { border-right: none; }
.proof-item__num {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.proof-item__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.proof-item__note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .proof-strip { grid-template-columns: 1fr; }
  .proof-item { border-right: none; border-bottom: 1px solid var(--border); }
}