/* ===========================================================
   style.css — TWN graphite theme + background presets + fade
   - Charcoal shell (less abrasive)
   - Graphite cards (not pure black)
   - Optional image backgrounds (bg1–bg3) or flat (bg0)
   - Page reveal: blur+fade once bg is ready (via bg-preload.js)
   =========================================================== */

/* ---------- Theme tokens ---------- */
:root{
  /* Shell (“paper”) — charcoal */
  --bg:   #2C2C2C;
  --bg-2: #262626;

  /* Text on light-ish shell */
  --fg:    #EAEAEA;     /* default body text */
  --muted: #B5B5B5;     /* secondary text */

  /* Cards / panels (graphite, not pure black) */
  --surface:   #15181B;
  --surface-2: #1B2025;     /* hover/elevated */
  --border:    #2A2F36;

  /* Text on graphite */
  --on-surface:   #F4F4F4;  /* “Ice White” */
  --on-surface-2: #B3B3B3;  /* “Cloud Grey” */

  /* Accents / focus */
  --accent: #C0C0C0;        /* “Silver Graphite” */
  --ring:   #C0C0C0;

  /* Terminal */
  --terminal-bg:     #121720;  /* window body */
  --terminal-header: #0E141B;  /* top bar */
  --terminal-ink:    var(--on-surface);
  --terminal-link:   var(--accent);

  /* Background image controls (defaults = off) */
  --bg-image: none;                                    /* url(...) */
  --bg-overlay: color-mix(in srgb, black 0%, transparent);
  --bg-blur: 0px;                                      /* 0–3px */
  --bg-brightness: 100%;                               /* 85–100% */
  --bg-size: cover;
  --bg-position: center center;
  --bg-repeat: no-repeat;
}

/* ---------- Base / resets ---------- */
* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--bg); }
img, svg, video { max-width: 100%; height: auto; display: block; }

body{
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Arial", sans-serif;
  color: var(--fg);
}

h1,h2,h3,h4,h5,h6{ color: var(--fg); margin: 0 0 .35em; }
h1{ font-size: 2rem; }
p{
  color: var(--muted);
  font-size: 15px;
  margin: 5px 0 10px;
}

/* ---------- Graphite utility button (for “Contact Me”, etc.) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:.5rem;
  background:var(--surface); color:var(--on-surface);
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:background .2s, transform .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{ background:var(--surface-2); transform:translateY(-1px); }

/* ---------- Cards (graphite) ---------- */
.card{
  max-width: 620px;
  margin: 0 auto;
  padding: 16px;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{
  background: var(--surface-2);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}
.card p{ color: var(--on-surface-2); }
.card p:last-child{ margin-bottom: 0; }

/* Links inside cards */
.card a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--border);
}
.card a:hover{
  color: var(--on-surface);
  border-bottom-color: var(--accent);
}

/* Graphite <details> expander inside cards */
.card details.cl-expander{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  color: var(--on-surface-2) !important;
}
.card details.cl-expander > summary{
  padding:.5rem .75rem;
  background: transparent !important;
  color: var(--on-surface) !important;
  list-style:none; cursor:pointer; user-select:none;
}
.card details.cl-expander > summary::-webkit-details-marker{ display:none }
.card details.cl-expander .cl-expander-inner{
  background: color-mix(in srgb, var(--surface) 88%, white 12%);
  border-top: 1px dashed var(--border);
  padding: 0 .75rem .75rem .75rem;
}
.card details.cl-expander .cl-expander-inner li{ color: var(--on-surface-2); }

/* Win against lingering utilities without per-page edits */
[class*="card"]{
  background: var(--surface);
  color: var(--on-surface);
  border-color: var(--border);
}
[class*="card"]:hover{ background: var(--surface-2); }

/* Focus ring */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
  border-radius: 8px;
}

/* Optional helpers */
.section-band{ background: var(--bg-2); }
.badge{
  background: transparent;
  color: var(--on-surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .6rem;
}
.badge:hover{ border-color: var(--accent); color: var(--on-surface); }

/* ---------- Terminal skin (works with terminal.js) ---------- */
.code-font{
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
}
.terminal{
  background: var(--terminal-bg);
  color: var(--terminal-ink);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.terminal .bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem;
  background: var(--terminal-header);
  border-bottom: 1px solid var(--border);
}
.terminal .bar .dot{ width:12px; height:12px; border-radius:50% }
.terminal .bar .dot.red{ background:#ff5f56 }
.terminal .bar .dot.yellow{ background:#ffbd2e }
.terminal .bar .dot.green{ background:#27c93f }
.terminal .bar .title{ font-size:12px; opacity:.7 }

.terminal .terminal-body{
  padding: 1rem;
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Terminal link color only (layout handled by terminal.js markup) */
.terminal-body a{ color: var(--terminal-link); }
.terminal-body a:hover{ color: var(--on-surface); }

/* caret blink */
@keyframes term-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.terminal .terminal-cursor{
  display:inline-block; width:10px; height:20px;
  background: var(--accent);
  animation: term-blink 1s steps(1,end) infinite;
}

/* ---------- Background image layer system (opt-in) ---------- */
body.has-bg{ background: var(--bg); }
body.has-bg::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-repeat: var(--bg-repeat);
  filter: brightness(var(--bg-brightness)) blur(var(--bg-blur));
  transform: translateZ(0);
}
body.has-bg::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background: var(--bg-overlay);
  pointer-events:none;
}

/* ===========================================================
   Background presets (apply to <body> with .has-bg + .bgX)
   - bg0: flat charcoal (no image), good default
   - bg1–bg3: single .webp asset each
   =========================================================== */

/* Flat charcoal */
.bg0{
  --bg-image: none;
  --bg-overlay: color-mix(in srgb, black 0%, transparent);
  --bg-blur: 0px;
  --bg-brightness: 100%;
}

/* Text brightening on any background preset */
body.has-bg.bg0 h1,
body.has-bg.bg0 h2,
body.has-bg.bg0 h3,
body.has-bg.bg1 h1,
body.has-bg.bg1 h2,
body.has-bg.bg1 h3,
body.has-bg.bg2 h1,
body.has-bg.bg2 h2,
body.has-bg.bg2 h3,
body.has-bg.bg3 h1,
body.has-bg.bg3 h2,
body.has-bg.bg3 h3{
  color: var(--on-surface) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
body.has-bg.bg0 header p,
body.has-bg.bg1 header p,
body.has-bg.bg2 header p,
body.has-bg.bg3 header p{
  color: var(--on-surface-2) !important;
  opacity: 1 !important;
}
body.has-bg.bg0 footer,
body.has-bg.bg0 footer p,
body.has-bg.bg0 footer a,
body.has-bg.bg1 footer,
body.has-bg.bg1 footer p,
body.has-bg.bg1 footer a,
body.has-bg.bg2 footer,
body.has-bg.bg2 footer p,
body.has-bg.bg2 footer a,
body.has-bg.bg3 footer,
body.has-bg.bg3 footer p,
body.has-bg.bg3 footer a{
  color: var(--on-surface) !important;
}
body.has-bg.bg0 footer a:hover,
body.has-bg.bg1 footer a:hover,
body.has-bg.bg2 footer a:hover,
body.has-bg.bg3 footer a:hover{
  color: var(--accent) !important;
}

/* Image presets */
.bg1{
  --bg-image: url("/img/bg1.webp");
  --bg-size: cover;
  --bg-position: center center;
  --bg-brightness: 100%;
  --bg-blur: 1px;
  --bg-overlay: color-mix(in srgb, black 10%, transparent);
}
.bg2{
  --bg-image: url("/img/bg2.webp");
  --bg-size: cover;
  --bg-position: center center;
  --bg-brightness: 96%;
  --bg-blur: 0px;
  --bg-overlay: color-mix(in srgb, black 10%, transparent);
}
.bg3{
  --bg-image: url("/img/bg3.webp");
  --bg-size: cover;
  --bg-position: center center;
  --bg-brightness: 98%;
  --bg-blur: 0px;
  --bg-overlay: color-mix(in srgb, black 6%, transparent);
}

/* ---- Page reveal: blur + fade once background is ready ---- */
/* Wrap all visible content in <div class="page-shell"> inside <body> */
.page-shell{
  opacity: 0;
  filter: blur(14px);
  transform: translateY(8px);
  transition:
    opacity .65s cubic-bezier(.22,.61,.36,1),
    filter .65s cubic-bezier(.22,.61,.36,1),
    transform .65s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, filter, transform;
}

/* bg-preload.js adds .bg-ready on <body> when flat/bg image is ready */
.bg-ready .page-shell{
  opacity: 1;
  filter: none;
  transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-shell{ transition: none; filter:none; transform:none; }
}

/* ---------- Small layout niceties ---------- */
/* Keep footer from revealing a different color on tall phones */
body::marker{ content:""; } /* avoid list-marker repaint glitches on Safari */