/* Combined stylesheet: main styles + background particle canvas */

/* -------------------------
   Theme variables & reset
   ------------------------- */

:root{
  --bg-1: #05060a;
  --bg-2: #0b0f1a;
  --accent: #6EE7B7;
  --accent-2: #7dd3fc;
  --muted: #9aa3b2;
  --glow: 0 12px 48px rgba(110,231,183,0.07), 0 0 20px rgba(125,211,252,0.03);
  --glass-blur: 8px;
  --radius: 14px;
  --max-width: 1200px;
  --gutter: clamp(18px, 3vw, 48px);
  --side-width: clamp(220px, 24vw, 360px);

  /* reserve size hint for meta bar to compute bottom padding */
  --meta-height: clamp(56px, 6.5vh, 84px);
}

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

/* Make the page container itself non-scrollable so scroll is confined to .card.
   This ensures margins/gutters never scroll and only the card's content scrolls. */
html, body {
  overflow: hidden;
}

/* Page background and base typography */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(110,231,183,0.03), transparent),
    radial-gradient(900px 500px at 90% 90%, rgba(125,211,252,0.02), transparent),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  color: #e6eef6;
  line-height: 1.45;
}

/* -------------------------
   Background particle canvas
   (place <canvas class="bg-canvas"> as first child of body)
   ------------------------- */

/* Canvas container - fixed full-screen and non-interactive */
.bg-canvas {
  position: fixed;
  inset: 0;                /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  z-index: 0;              /* stay behind normal content added later in DOM */
  pointer-events: none;    /* don't interfere with clicks */
  mix-blend-mode: screen;  /* subtle brightening effect (optional) */
  opacity: 0.95;
  /* small performance hint: keep it on a separate layer */
  will-change: transform;
}

/* If you prefer the animation more subtle or want to keep stronger page backgrounds */
.bg-canvas--muted {
  opacity: 0.6;
  mix-blend-mode: normal;
}

/* Make sure the rest of your content is above the canvas.
   The script adds the canvas as the first child of body so most content will naturally render above it.
   If you have very particular stacking contexts, set the site root to z-index:1:
*/
.site-root,
main,
#app,
.container {
  position: relative;
  z-index: 1; /* ensures primary content is above the background canvas */
}

/* Responsive behavior for canvas */
@media (max-width: 520px) {
  .bg-canvas {
    opacity: 0.9;
    mix-blend-mode: normal;
  }
}

/* Accessibility: reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
  .bg-canvas { display: none; }
  /* Optionally also hide the starfield:
     .stars { display: none; }
  */
}

/* -------------------------
   Decorative starfield
   ------------------------- */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.06) 0, transparent 40%),
    radial-gradient(1px 1px at 68% 8%, rgba(255,255,255,0.04) 0, transparent 40%),
    radial-gradient(1px 1px at 44% 78%, rgba(255,255,255,0.03) 0, transparent 40%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* -------------------------
   Main card
   ------------------------- */
.card {
  position: relative; /* required for absolute-positioned .meta */
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--max-width);
  margin: var(--gutter) auto;
  height: calc(100vh - (var(--gutter) * 2)); /* fixed visible area for card */
  background: linear-gradient(180deg, rgba(255,255,255,0.014), rgba(255,255,255,0.008));
  border-radius: var(--radius);
  padding: clamp(20px, 3.2vw, 48px);
  /* reserve extra bottom padding so flow content doesn't get covered by absolute .meta */
  padding-bottom: calc(var(--meta-height) + clamp(18px, 3vh, 36px));
  box-shadow: var(--glow);
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);

  /* this is the only scrollable container */
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  z-index: 1;
  /* page transition starting state (scripts toggle .enter/.exit) */
  opacity: 0;
  transform: translateY(6px) scale(0.999);
  transition: opacity 420ms cubic-bezier(.2,.9,.2,1), transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

/* On the home page we previously wanted no scroll; keep that behavior: */
body[data-page="home"] .card {
  overflow: hidden;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE and Edge */
}
body[data-page="home"] .card::-webkit-scrollbar {
  display: none;               /* WebKit */
}

/* Transition classes controlled by script.js */
.card.enter { opacity: 1; transform: none; }
.card.exit { opacity: 0; transform: translateY(6px) scale(0.995); transition-duration: 320ms; }

/* -------------------------
   Top navigation
   ------------------------- */
.top-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  border: 1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.top-nav .tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(12px, 1.2vw, 14px);
  background: transparent;
  border: 1px solid transparent;
  transition: transform .12s ease, color .12s ease, background .12s ease, box-shadow .12s ease;
}
.top-nav .tab:hover, .top-nav .tab:focus { color: var(--accent); transform: translateY(-3px); outline: none; }
.top-nav .tab.active {
  color: #041014;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(110,231,183,0.08);
  border: 1px solid rgba(255,255,255,0.04);
  transform: none;
}

/* -------------------------
   Card content wrapper
   ------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr minmax(180px, var(--side-width));
  gap: clamp(16px, 3vw, 36px);
  align-items: start;
}

/* Responsive stack */
@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; }
}

/* -------------------------
   Title and subtitle
   ------------------------- */
.title-wrap { display: flex; flex-direction: column; gap: 8px; }
.title {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(20px, 4.8vw, 44px);
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(110,231,183,0.08), 0 0 20px rgba(125,211,252,0.04);
  line-height: 1.05;
  word-break: break-word;
}
.subtitle {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.6vw, 15px);
  display: flex;
  gap: 10px;
  align-items: center;
}
.subtitle .cursor {
  width: 10px;
  height: 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  animation: blink 1s steps(2,end) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* -------------------------
   Links
   ------------------------- */
.links {
  display: flex;
  gap: clamp(8px, 2vw, 16px);
  flex-wrap: wrap;
  margin-top: clamp(16px, 2.6vw, 26px);
}
.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: clamp(8px, 1.4vw, 12px) clamp(12px, 2.6vw, 18px);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(13px, 1.6vw, 15px);
  border: 1px solid rgba(110,231,183,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.32);
  cursor: pointer;
}
.link-btn:hover, .link-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(110,231,183,0.06);
}
.link-btn .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 10px rgba(125,211,252,0.08), 0 0 8px rgba(110,231,183,0.04);
}

/* ------------------------
   Tools grid & buttons (Fixed)
   ------------------------ */
/* Tools grid: keep responsive columns, restore proper gap sizing */
.tools-grid {
  display: grid;
  /* grid defines how many columns fit and their min width */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;   /* make grid rows size to content */
  justify-items: center; /* center the button inside its column */
}

/* let the grid control the width; make the button a square */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;            /* fill grid column width */
  aspect-ratio: 1 / 1;    /* keep it square (height = width) */
  max-width: 220px;       /* optional cap if you want a max size */

  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.01));
  border: 1px solid rgba(110,231,183,0.10);
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Images fill the button area without causing overflow */
.tool-btn img,
.tool-btn .tool-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* or "contain" if you prefer letterboxing */
  display: block;
  pointer-events: none;
  filter: none;
}

/* Mobile adjustments: keep columns smaller, grid handles reflow */
@media (max-width: 520px) {
  .tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  .tool-btn {
    max-width: 160px;
    border-radius: 12px;
  }
  .tool-label { font-size: 12px; }
}
.tool-btn:hover, .tool-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(110,231,183,0.06);
}

/* -------------------------
   Side column
   ------------------------- */
.side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  border-radius: 10px;
  padding: clamp(12px, 1.6vw, 16px);
  background: linear-gradient(180deg, rgba(255,255,255,0.009), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.02);
  font-size: clamp(13px, 1.2vw, 14px);
  color: var(--muted);
  min-width: 140px;
  box-sizing: border-box;
}
@media (max-width: 880px) {
  .side { align-items: flex-start; width: 100%; }
}

/* -------------------------
   Content blocks and forms
   ------------------------- */
.content-block {
  margin-top: clamp(14px, 2.2vw, 22px);
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.6;
}
.contact-form label { display: block; margin-top: 10px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: clamp(8px, 1.2vw, 12px);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
  color: #e6eef6;
  font-size: clamp(14px, 1.3vw, 15px);
  box-sizing: border-box;
}
.project-list { list-style: none; padding-left: 0; margin-top: 12px; }
.project-list li { padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.02); }

/* -------------------------
   Pill and utilities
   ------------------------- */
.pill {
  font-size: clamp(11px, 1vw, 13px);
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  color: var(--muted);
}
.sr { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Focus styles */
.top-nav .tab:focus { outline: 3px solid rgba(125,211,252,0.12); outline-offset: 4px; }
.link-btn:focus { outline: 3px solid rgba(125,211,252,0.12); outline-offset: 4px; }

/* --------------------
   The pinned meta bar
   -------------------- */
.card .meta {
  position: absolute;
  left: clamp(20px, 3.2vw, 48px);   /* aligns with card padding */
  right: clamp(20px, 3.2vw, 48px);
  bottom: clamp(18px, 3vh, 36px);
  height: var(--meta-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 6;
  margin: 0;
  pointer-events: auto;
  /* keep visual style unchanged */
  color: var(--muted);
  background: transparent;
}

/* small screens: fall back to normal flow so meta stacks and doesn't overlap */
@media (max-width: 880px) {
  .card {
    height: auto;
    min-height: calc(100vh - (var(--gutter) * 2));
    padding-bottom: calc(clamp(20px, 2.8vh, 40px)); /* reduce reserved bottom space on small screens */
  }
  .card .meta {
    position: static;
    height: auto;
    margin-top: clamp(12px, 2vw, 18px);
    justify-content: flex-start;
    gap: 8px;
  }
}

/* Extra small screens tweaks */
@media (max-width: 560px) {
  .card { padding: 16px; border-radius: 10px; }
  .title { font-size: clamp(18px, 6.5vw, 26px); }
  .top-nav .tab { padding: 8px 10px; font-size: 13px; }
  .links { margin-top: 12px; }
}

/* Optional helper class if you need the card to be slightly taller than viewport on some pages */
.card.taller {
  /* increases the visible card area (still confined to viewport; use sparingly) */
  height: calc(100vh - (var(--gutter) * 2) + 120px);
}

/* Accessibility note:
   - With html/body overflow:hidden the browser page scrollbar is removed; all scroll occurs inside .card.
   - This pattern keeps margins/gutters/static background visible at all times while content scrolls inside the card.
*/

/* -------------------------
   Expl0its grid (same behaviour as tools)
   ------------------------- */
.expl0its-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  justify-items: center;
}
.expl0its-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 220px;

  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.008), rgba(255,255,255,0.01));
  border: 1px solid rgba(110,231,183,0.10);
  box-shadow: 0 8px 28px rgba(0,0,0,0.32);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  overflow: hidden;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.expl0its-btn img,
.expl0its-btn .tool-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  filter: none;
}
@media (max-width: 520px) {
  .expl0its-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
  .expl0its-btn {
    max-width: 160px;
    border-radius: 12px;
  }
  .expl0its-label { font-size: 12px; }
}
.expl0its-btn:hover, .expl0its-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(110,231,183,0.06);
}