:root {
  --accent-home: #42c6a2;
  --accent-blackwall: #7ee787;
  --accent-mode7: #7aa2f7;
  --accent-neocms: #f4d35e;
  --accent-boris: #ff7b72;
  --accent-cipherworkbench: #7dd3fc;
  --accent-darkmatter: #c084fc;
  --accent-hexeditor: #fb7185;
  --accent-lookingglass: #22d3ee;
  --accent-sudoku: #f97316;
  --accent-survai: #10b981;
  --accent-unity: #60a5fa;
  --accent-wordle: #84cc16;
}

.hidden-cta {
  display: none;
}

body [id="about"],
body [id="projects"],
body [id="toys"],
body [id="opensource"],
body [id="contact"] {
  position: relative;
  border-radius: 14px;
  padding: 1.5rem;
  overflow: hidden;
}

body [id="about"]::before,
body [id="projects"]::before,
body [id="toys"]::before,
body [id="opensource"]::before,
body [id="contact"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 10% 5%, rgba(255, 255, 255, 0.08), transparent 55%);
  pointer-events: none;
}

body [id="about"] { border: 1px solid rgba(66, 198, 162, 0.35); }
body [id="projects"] { border: 1px solid rgba(122, 162, 247, 0.35); }
body [id="toys"] { border: 1px solid rgba(244, 211, 94, 0.35); }
body [id="opensource"] { border: 1px solid rgba(126, 231, 135, 0.35); }
body [id="contact"] { border: 1px solid rgba(255, 123, 114, 0.35); }

.sections-wrapper .section-box .mt-4 {
  max-width: 78ch;
}

.sections-wrapper p,
.sections-wrapper li {
  line-height: 1.75;
}

.sections-wrapper h1,
.sections-wrapper h2,
.sections-wrapper h3 {
  letter-spacing: -0.02em;
}

/* Project page vertical rhythm: keep heading/content blocks clearly separated */
body:not(.page-index) .sections-wrapper .section-box .mt-4 > h1 {
  margin-bottom: 1.2rem;
  line-height: 1.15;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.9rem;
  line-height: 1.2;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.65rem;
  line-height: 1.25;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > p + p {
  margin-top: 1rem;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > ul,
body:not(.page-index) .sections-wrapper .section-box .mt-4 > ol {
  margin-top: 0.95rem;
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > p + ul,
body:not(.page-index) .sections-wrapper .section-box .mt-4 > p + ol {
  margin-top: 0.6rem;
}

body:not(.page-index) .sections-wrapper .section-box .mt-4 > ul li + li,
body:not(.page-index) .sections-wrapper .section-box .mt-4 > ol li + li {
  margin-top: 0.45rem;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms ease, transform 480ms ease;
  will-change: transform, opacity;
}

.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.related-section {
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.related-link {
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease;
}

.related-link:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55);
}

body.page-blackwall .section-box { border-left: 4px solid var(--accent-blackwall); }
body.page-mode7 .section-box { border-left: 4px solid var(--accent-mode7); }
body.page-neocms .section-box { border-left: 4px solid var(--accent-neocms); }
body.page-boris .section-box { border-left: 4px solid var(--accent-boris); }
body.page-cipherworkbench .section-box { border-left: 4px solid var(--accent-cipherworkbench); }
body.page-darkmatter .section-box { border-left: 4px solid var(--accent-darkmatter); }
body.page-hexeditor .section-box { border-left: 4px solid var(--accent-hexeditor); }
body.page-lookingglass .section-box { border-left: 4px solid var(--accent-lookingglass); }
body.page-sudoku .section-box { border-left: 4px solid var(--accent-sudoku); }
body.page-survai .section-box { border-left: 4px solid var(--accent-survai); }
body.page-unity .section-box { border-left: 4px solid var(--accent-unity); }
body.page-wordle .section-box { border-left: 4px solid var(--accent-wordle); }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.reveal-in,
  .related-link,
  body [id="about"],
  body [id="projects"],
  body [id="toys"],
  body [id="opensource"],
  body [id="contact"] {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}