/* ===================================================================
   hcnotes — DedSec / Watch_Dogs flavoured theme
   black canvas · toxic cyan/white/pink accents · render glitches
   =================================================================== */

:root {
  --bg:        #03050a;
  --bg-soft:   #070b14;
  --fg:        #c8f7f9;
  --fg-dim:    #5b7a82;
  --cyan:      #2de2e6;
  --pink:      #ff2e97;
  --white:     #eafdff;
  --line:      rgba(45, 226, 230, 0.16);
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 17.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink); }
::selection { background: var(--pink); color: var(--bg); }

/* ---- background layers --------------------------------------------- */
#aleph-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  /* let the centre breathe so foreground text stays legible */
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.78) 55%, #000 100%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.78) 55%, #000 100%);
}

/* scanlines + vignette + faint grid, all non-interactive overlays */
.fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.fx-overlay.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  animation: scan-drift 8s linear infinite;
}
.fx-overlay.vignette {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.fx-overlay.flicker { animation: bg-flicker 7s steps(1) infinite; background: rgba(45,226,230,0.012); }

@keyframes scan-drift { from { background-position-y: 0; } to { background-position-y: 8px; } }
@keyframes bg-flicker {
  0%, 96%, 100% { opacity: 0; }
  97% { opacity: 0.5; transform: translateX(-2px); }
  98% { opacity: 0; transform: translateX(2px); }
  99% { opacity: 0.35; }
}

/* everything above the field */
.shell { position: relative; z-index: 2; }

/* ---- navbar -------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(to bottom, rgba(3,5,10,0.92), rgba(3,5,10,0.35) 70%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(2px);
}
.nav__brand {
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--white);
  text-transform: uppercase;
  font-size: 1.05rem;
}
.nav__brand::before { content: "▚ "; color: var(--cyan); }
.nav__links { display: flex; gap: 1.4rem; align-items: center; }
.nav__links a {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.84rem;
  position: relative;
  padding-bottom: 2px;
}
.nav__links a:hover { color: var(--cyan); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--pink);
  transition: width 0.18s ease;
}
.nav__links a:hover::after { width: 100%; }

/* ---- hero ---------------------------------------------------------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.25rem 3rem;
}

.terminal {
  width: 100%;
  max-width: 700px;
  background: rgba(4, 7, 13, 0.62);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255,46,151,0.06), 0 24px 60px -20px rgba(0,0,0,0.9);
  backdrop-filter: blur(3px);
}
.terminal__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--fg-dim);
  letter-spacing: 0.1em;
}
.terminal__bar .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot--c { background: var(--cyan); }
.dot--p { background: var(--pink); }
.dot--w { background: var(--white); }
.terminal__bar .path { margin-left: auto; opacity: 0.7; }
.terminal__body { padding: 2.1rem 1.95rem 2.25rem; text-align: left; }

/* glitch wordmark */
.glitch {
  font-size: clamp(3rem, 12vw, 5.6rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0 0 1.35rem;
  color: var(--white);
  position: relative;
  text-transform: uppercase;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
}
/* both halves share one 3s timeline and glitch at the SAME instants,
   sliding in opposite directions for a coherent torn RGB-split */
.glitch::before { color: var(--cyan); clip-path: inset(0 0 50% 0); animation: glitch-top 3.6s steps(1) infinite; }
.glitch::after  { color: var(--pink); clip-path: inset(50% 0 0 0); animation: glitch-bottom 3.6s steps(1) infinite; }
@keyframes glitch-top {
  0%, 89% { transform: translate(0, 0); }          /* long quiet pause */
  90%   { transform: translate(-4px, -2px); }       /* fast burst ↓ */
  91.2% { transform: translate(3px, 1px); }
  92.4% { transform: translate(-3px, -1px); }
  93.6% { transform: translate(2px, -2px); }
  94.8% { transform: translate(-2px, 1px); }
  96%   { transform: translate(1px, -1px); }
  97%, 100% { transform: translate(0, 0); }         /* settle */
}
@keyframes glitch-bottom {
  0%, 89% { transform: translate(0, 0); }
  90%   { transform: translate(4px, 2px); }
  91.2% { transform: translate(-3px, -1px); }
  92.4% { transform: translate(3px, 1px); }
  93.6% { transform: translate(-2px, 2px); }
  94.8% { transform: translate(2px, -1px); }
  96%   { transform: translate(-1px, 1px); }
  97%, 100% { transform: translate(0, 0); }
}

.glitch--404 { font-size: clamp(4rem, 18vw, 8rem); letter-spacing: 0.04em; }

/* terminal lines */
.line { margin: 0.15rem 0; }
.prompt { color: var(--pink); }
.prompt::before { content: "› "; color: var(--cyan); }
.cmd { color: var(--white); }
.cmd--link { border-bottom: 1px dashed rgba(45, 226, 230, 0.55); transition: color 0.15s ease, border-color 0.15s ease; }
.cmd--link:hover { color: var(--cyan); border-color: var(--cyan); }
.intro { color: var(--fg); font-size: 1.04rem; line-height: 1.7; margin: 0 0 1.5rem; }
.intro a { color: var(--cyan); border-bottom: 1px solid rgba(45, 226, 230, 0.5); }
.intro a:hover { color: var(--pink); border-color: var(--pink); }
.out { color: var(--fg); padding-left: 0.2rem; }
.out .sep { color: var(--fg-dim); }
.muted { color: var(--fg-dim); }
.k-cyan { color: var(--cyan); }
.k-pink { color: var(--pink); }

.role { margin: 0.25rem 0 1.2rem; font-size: 1.18rem; }
.role b { color: var(--white); font-weight: 600; }

.contact { margin-top: 0.4rem; }
.reveal {
  color: var(--pink);
  cursor: pointer;
  border-bottom: 1px dashed rgba(255,46,151,0.5);
}
.reveal:hover { color: var(--cyan); border-color: var(--cyan); }
.caret {
  display: inline-block;
  width: 0.6ch; height: 1.05em;
  background: var(--cyan);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* credit / footer strip */
.credit {
  margin-top: 1.6rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  max-width: 700px;
  text-align: center;
  background: rgba(2, 4, 8, 0.78);
  border: 1px solid var(--line);
  padding: 0.7rem 1rem;
}
.credit a { color: var(--fg-dim); border-bottom: 1px solid var(--line); }
.credit a:hover { color: var(--cyan); }

/* optional notes/transmissions list (AICMF articles, when present) */
.notes {
  width: 100%; max-width: 700px; margin: 2.4rem auto 0; text-align: left;
  background: rgba(2, 4, 8, 0.86);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255,46,151,0.05), 0 20px 50px -22px rgba(0,0,0,0.9);
  backdrop-filter: blur(3px);
  padding: 1.4rem 1.6rem 1.5rem;
}
.notes__h { font-size: 0.82rem; letter-spacing: 0.2em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 1rem; }
.notes__h::before { content: "// "; color: var(--pink); }
.notes ul { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.notes li:last-child { border-bottom: none; padding-bottom: 0; }
.notes li a { color: var(--white); font-size: 1.06rem; }
.notes li a:hover { color: var(--cyan); }
.notes small { color: var(--fg-dim); display: block; font-size: 0.8rem; margin-top: 0.3rem; }
.tag { color: var(--cyan); margin-right: 0.5rem; }
.tag::before { content: "#"; opacity: 0.6; }

/* ---- article / prose (keeps AICMF article pages on-theme) ---------- */
.prose {
  max-width: 800px;
  margin: 6.5rem auto 4rem;
  padding: 2.6rem 2.6rem 3rem;
  position: relative; z-index: 2;
  background: rgba(2, 4, 8, 0.88);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(255,46,151,0.05), 0 26px 64px -26px rgba(0,0,0,0.92);
  backdrop-filter: blur(3px);
  font-size: 1.02rem;
  line-height: 1.78;
}
.prose h1 { color: var(--white); font-size: clamp(1.8rem, 5vw, 2.6rem); margin-top: 0; }
.prose h2, .prose h3 { color: var(--cyan); }
.prose a { border-bottom: 1px solid var(--line); }
.prose small { color: var(--fg-dim); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; }
.prose blockquote {
  border-left: 2px solid var(--pink);
  margin: 1.2rem 0; padding: 0.2rem 1rem; color: var(--fg-dim);
}
.prose pre {
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 1rem; overflow-x: auto;
}
.prose code { background: var(--bg-soft); padding: 1px 5px; color: var(--cyan); }
.prose pre code { background: none; padding: 0; color: inherit; }
.back { display: inline-block; margin-top: 2rem; color: var(--fg-dim); }
.back:hover { color: var(--pink); }

/* ---- about page ---------------------------------------------------- */
.about { max-width: 820px; margin: 0 auto; padding: 7rem 1.25rem 4rem; position: relative; z-index: 2; }
.about .terminal { max-width: 100%; margin-bottom: 2.4rem; }
.about__head {
  display: flex; align-items: center; gap: 1.2rem;
  margin: 0.7rem 0 1.3rem;
}
.avatar {
  flex: 0 0 auto;
  width: 92px; height: 92px;
  position: relative;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 0 1px rgba(255,46,151,0.4), 0 0 18px -4px rgba(45,226,230,0.5);
}
.avatar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.18) 3px, transparent 4px);
  mix-blend-mode: multiply;
}
/* spinning loader shown behind the image until it finishes loading */
.avatar::before {
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(45, 226, 230, 0.22);
  border-top-color: var(--cyan);
  animation: avatar-spin 0.8s linear infinite;
}
.avatar.is-loaded::before,
.avatar.is-error::before { animation: none; opacity: 0; }
.avatar img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  color: transparent;                 /* hide alt text while loading */
  filter: grayscale(0.35) contrast(1.05);
  transition: filter 0.3s ease, opacity 0.4s ease;
}
.avatar:not(.is-loaded) img { opacity: 0; }   /* JS reveals on load; img is opaque and covers the spinner */
.avatar:hover img { filter: grayscale(0) contrast(1.1); }
@keyframes avatar-spin { to { transform: rotate(360deg); } }
.about__headtext { min-width: 0; }
.about__name {
  font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  margin: 0 0 0.35rem;
}
.about__handle { margin: 0; color: var(--fg-dim); font-size: 0.86rem; letter-spacing: 0.04em; }
.about__handle .sep { opacity: 0.6; }
.about__bio { font-size: 1.06rem; line-height: 1.78; color: var(--fg); }
.about__bio p { margin: 0 0 1rem; }
.about__bio p:last-child { margin-bottom: 0; }
.about__bio a { border-bottom: 1px solid var(--line); }
.about__bio a:hover { border-color: var(--pink); }

.section { margin: 2.6rem 0; }
.section__h {
  font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 1.1rem;
}
.section__h::before { content: "// "; color: var(--pink); }

/* image cards (experience + games) */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
/* full-width, image-less bar (e.g. AI) — .cards prefix beats base .card rules */
.cards .card--wide {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  background: rgba(2, 4, 8, 0.86);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1.4rem;
  padding: 1rem 1.2rem;
}
.cards .card--wide::after { content: none; }     /* no scanline veil — no photo under it */
.card--wide .card__title { white-space: nowrap; }
.card--wide .card__badges { line-height: 1.9; text-align: right; }
.card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
}
.card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.28) brightness(0.82) contrast(1.04);
  transition: filter 0.35s ease, transform 0.5s ease;
}
.card:hover img { filter: grayscale(0) brightness(1) contrast(1.08); transform: scale(1.04); }
.card::after {
  /* toxic scanline veil so cards read as part of the theme */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.14) 3px, transparent 4px);
  mix-blend-mode: multiply;
}
.card__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 0.5rem; padding: 0.9rem 1rem;
  /* darker at both ends so top labels and the bottom title both stay legible */
  background: linear-gradient(to top, rgba(2,4,8,0.88) 0%, rgba(2,4,8,0.18) 50%, rgba(2,4,8,0.5) 100%);
}
.card__top { display: flex; justify-content: flex-end; }
.card__title {
  color: var(--white); font-size: 0.92rem; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__title::before { content: "› "; color: var(--cyan); }
.card__badges { line-height: 1.95; }
.card__badges .badge {
  font-size: 0.72rem; padding: 0.16rem 0.5rem; margin: 0.16rem 0.28rem 0.16rem 0;
}

.badge {
  --bc: var(--cyan);
  display: inline-block; font-size: 0.84rem;
  padding: 0.22rem 0.65rem; margin: 0.22rem 0.32rem 0.22rem 0;
  letter-spacing: 0.02em;
  color: var(--bc);
  border: 1px solid color-mix(in srgb, var(--bc) 50%, transparent);
  background: color-mix(in srgb, var(--bc) 9%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--bc) 38%, transparent);
}
/* generic accents (kept for reuse) */
.badge--c { --bc: var(--cyan); }
.badge--p { --bc: var(--pink); }
.badge--w { --bc: var(--white); }
/* per-technology toxic hues — brand colour pushed into the neon register */
.b-php    { --bc: #b388ff; }   /* indigo  → toxic violet  */
.b-js     { --bc: #f4ff3a; }   /* yellow  → toxic lime    */
.b-sql    { --bc: #38c5ff; }   /* blue    → electric blue */
.b-go     { --bc: #2de2e6; }   /* gopher cyan             */
.b-node   { --bc: #57ff3a; }   /* green   → toxic green   */
.b-cs     { --bc: #c77dff; }   /* purple  → toxic magenta-violet */
.b-mongo  { --bc: #2dff9e; }   /* green   → toxic mint    */
.b-dynamo { --bc: #6c8bff; }   /* AWS blue → neon indigo  */
.b-docker { --bc: #36b6ff; }   /* docker blue → toxic sky */
.b-k8s    { --bc: #8a8cff; }   /* k8s blue → periwinkle   */
.b-gitlab { --bc: #ff8a3d; }   /* orange  → toxic orange  */
.b-jenkins{ --bc: #ff4d6d; }   /* red     → toxic red     */
.b-aws    { --bc: #ffb02e; }   /* amber   → toxic amber   */
.b-c      { --bc: #8aa6ff; }   /* steel   → neon steel    */
.b-cpp    { --bc: #3a9bff; }   /* blue    → toxic azure   */
.b-esp    { --bc: #ff3b3b; }   /* espressif red           */
.b-claude { --bc: #ff8a6b; }   /* Anthropic coral → toxic */
.b-mcp    { --bc: #2de2e6; }   /* protocol cyan           */
.b-agy    { --bc: #9b8cff; }   /* Antigravity violet-blue */

.game__tag {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(45,226,230,0.4);
  padding: 0.12rem 0.5rem; white-space: nowrap;
}
.game__tag--alt { color: var(--pink); border-color: rgba(255,46,151,0.45); }

.section-note { margin: 0.9rem 0 0; font-size: 0.74rem; color: var(--fg-dim); letter-spacing: 0.02em; }
.links-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.btn-link {
  padding: 0.5rem 1rem;
  color: var(--cyan); letter-spacing: 0.06em; font-size: 0.82rem;
  background: rgba(2, 4, 8, 0.88);
  border: 1px solid rgba(45, 226, 230, 0.45);
  backdrop-filter: blur(3px);
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.btn-link:hover {
  border-color: var(--pink); color: var(--pink);
  background: rgba(255, 46, 151, 0.08);
}

.about__footer {
  margin-top: 2.8rem; text-align: center; color: var(--fg-dim); font-size: 0.82rem;
  background: rgba(2, 4, 8, 0.7); border: 1px solid var(--line); padding: 0.7rem 1rem;
}
.about__footer a { color: var(--fg-dim); border-bottom: 1px solid var(--line); }
.about__footer a:hover { color: var(--cyan); }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 540px) {
  .nav { padding: 0.7rem 1rem; }
  .nav__links { gap: 1rem; }
  .terminal__body { padding: 1.3rem 1.1rem 1.5rem; }
  body { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  .card--wide { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .card--wide .card__badges { text-align: left; }
  .about { padding-top: 6rem; }
  .about__head { gap: 0.9rem; }
  .avatar { width: 70px; height: 70px; }
  .prose { margin-top: 5.5rem; padding: 1.6rem 1.3rem 2rem; }
}

/* respect reduced motion: kill the CSS animations (canvas self-stills) */
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after,
  .fx-overlay.scanlines, .fx-overlay.flicker,
  .caret { animation: none; }
  .glitch::before { clip-path: none; opacity: 0; }
  .glitch::after  { clip-path: none; opacity: 0; }
}