/* ==========================================================
   BASE — token warna, font, reset
   ========================================================== */

:root {
  /* Latar luar & tinta */
  --void: #000000;
  --ink: #1c1c1c;
  --ink-soft: rgba(28, 28, 28, 0.62);
  --ink-faint: rgba(28, 28, 28, 0.38);
  --line: rgba(28, 28, 28, 0.16);

  /* Warna tiap lembar map (tab) */
  --c-about: #e3e8ea;
  --c-works: #cdd6e1;
  --c-github: #d4dac8;
  --c-tools: #e8e0cc;
  --c-education: #d8d2e2;
  --c-contact: #c2b6c0;

  /* Warna highlight label */
  --hl-blue: #cdd6e1;
  --hl-sage: #c8cdb8;
  --hl-rose: #c9b3bd;

  /* Font */
  --f-sans: "Switzer", "Switzer Placeholder", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-script: "Pinyon Script", "Instrument Serif", cursive;
  --f-hand: "Reenie Beanie", "Comic Sans MS", cursive;
  --f-serif: "Instrument Serif", Georgia, serif;

  /* Ukuran map */
  --gap: 20px;
  --folder-w: min(760px, calc(100vw - 2 * var(--gap) - 44px));
  --tab-w: 46px;
  /* 6 tab (saling tumpang 10px) harus muat setinggi map, dengan sisa ±24px
     di bawah supaya tab CONTACT tidak menyentuh/melewati sudut bawah lembar */
  --tab-h: min(136px, calc((100vh - 2 * var(--gap) + 16px) / 6));
  --radius: 4px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Tekstur kertas (noise SVG) */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Tanda "+" kecil di grid */
  --cross: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><path d='M60 57.5v5M57.5 60h5' stroke='%231c1c1c' stroke-opacity='.45' stroke-width='1'/></svg>");
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* noise halus di latar hitam */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.08;
  pointer-events: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 1.5px dashed var(--ink);
  outline-offset: 3px;
}

.mono {
  font-family: var(--f-mono);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Kursor pensil + goresan grafit ---------- */
@media (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g transform='rotate(45 14 14)'><rect x='11' y='-1' width='6' height='19' rx='1' fill='%23f2d64b' stroke='%231c1c1c' stroke-width='1.1'/><rect x='11' y='-1' width='6' height='4' rx='1' fill='%23e8a0a8' stroke='%231c1c1c' stroke-width='1.1'/><path d='M11 18 L14 26 L17 18 Z' fill='%23f4e2c4' stroke='%231c1c1c' stroke-width='1.1' stroke-linejoin='round'/><path d='M13 23.3 L14 26 L15 23.3 Z' fill='%231c1c1c'/></g></svg>") 5 22, crosshair;
  }
}

.pencil-trail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ---------- Scrollbar disembunyikan di semua halaman (tetap bisa di-scroll) ---------- */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ---------- Noise bergerak (film grain) ----------
   Tekstur noise di latar, lembar, dan preloader bergeser sedikit secara
   patah-patah (bukan meluncur), ±2–3 kali per detik — terasa seperti butiran
   film yang hidup tanpa mengganggu. Lapisannya dibuat lebih besar dari
   wadahnya supaya tepinya tidak pernah terlihat saat bergeser. */
@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-22px, 14px); }
  33%  { transform: translate(16px, -24px); }
  50%  { transform: translate(-12px, -8px); }
  67%  { transform: translate(24px, 18px); }
  83%  { transform: translate(-18px, 26px); }
  100% { transform: translate(0, 0); }
}

/* selektor lebih spesifik: aturan noise asli ada di layout.css (dimuat setelah file ini) */
body::before,
#preloader::after,
.sheets .sheet::after {
  inset: -40px;
  animation: grain 2.2s steps(1, end) infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  #preloader::after,
  .sheets .sheet::after {
    animation: none !important;
  }
}