/* ============================================================
   rappqy — kaca cair
   Palet diturunkan dari foto pelabuhan Kota Kinabalu pada malam:
   lampu sodium (amber), laut malam (teal), jersi Malaysia (merah, hemat).
   ============================================================ */

:root {
  /* Ground — putih dingin, bukan putih mati */
  --paper: oklch(97.2% 0.006 235);

  /* Ink — arang bernada biru, tidak pernah hitam murni */
  --ink:    oklch(25% 0.024 254);
  --ink-2:  oklch(44% 0.028 250);   /* ~5.2:1 di atas --paper */
  --ink-3:  oklch(48% 0.028 248);   /* ~4.5:1 — batas aman terkecil */

  /* Aksen.
     --amber dan --amber-deep untuk isian dan cahaya, bukan untuk teks.
     Teks berwarna hangat memakai --amber-ink, yang lulus 4.5:1 di atas
     ground putih maupun di atas kartu bernada amber. */
  --amber:      oklch(79% 0.148 76);
  --amber-deep: oklch(66% 0.152 62);
  --amber-ink:  oklch(46% 0.135 50);
  --teal:       oklch(56% 0.092 205);
  --teal-deep:  oklch(43% 0.086 208);

  /* Kaca */
  --glass-tint: oklch(100% 0 0 / 0.30);
  --glass-blur: 26px;
  --spec:       oklch(100% 0 0 / 0.92);   /* sorot spekular */
  --glass-flat: oklch(88% 0.03 210);      /* kaca versi datar, tanpa WebGL */

  /* Isian tipis untuk tag — diturunkan dari kedua kutub cahaya */
  --teal-wash:  oklch(62% 0.10 206 / 0.12);
  --amber-wash: oklch(79% 0.148 76 / 0.18);

  /* Bayangan — satu nada, empat kepekatan. Sebelumnya sepuluh nilai
     satu-kali yang hampir sama; itu drift, bukan sistem. */
  --shade-1: oklch(36% 0.040 250 / 0.08);  /* garis sentuh */
  --shade-2: oklch(34% 0.040 250 / 0.16);  /* badan ambien */
  --shade-3: oklch(31% 0.045 250 / 0.24);  /* pendaratan jauh */
  --shade-4: oklch(30% 0.040 250 / 0.32);  /* di bawah permukaan arang */

  /* Ritme — satu tangga, dipakai di seluruh halaman */
  --s1: 0.5rem;  --s2: 0.75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;    --s6: 3rem;    --s7: 4.5rem; --s8: 7rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw: 76rem;
  --r-md: 22px; --r-lg: 30px; --r-pill: 999px;

  /* Sinyal dari mesin scroll (diisi oleh JS) */
  --vel: 0;      /* kecepatan scroll, −1..1 */
  --prog: 0;     /* progres halaman, 0..1 */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-jelly: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Onest, ui-sans-serif, sans-serif;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .nav__mark, .foot__mark, .skill__num, .path__when {
  font-family: 'Bricolage Grotesque', ui-sans-serif, sans-serif;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; list-style: none; }

svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ico-brand svg, svg.ico-brand { stroke: none; fill: currentColor; }

.sr, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; z-index: 100; inset: var(--s3) auto auto var(--s3);
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s4); border-radius: var(--r-pill);
}

:focus-visible {
  outline: 2.5px solid var(--teal-deep);
  outline-offset: 3px;
  /* garis fokus mengikuti radius elemennya sendiri; jangan ditimpa */
}

/* ============================================================
   Latar ambien — cahaya yang dibiaskan kaca
   ============================================================ */

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.ambient__lamp, .ambient__sea {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.ambient__lamp {
  width: 58vmax; aspect-ratio: 1;
  top: -18vmax; right: -12vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(85% 0.14 78 / 0.62), oklch(85% 0.14 78 / 0.16) 46%, transparent 68%);
  transform: translate3d(0, calc(var(--prog) * -8vmax), 0);
}
.ambient__sea {
  width: 66vmax; aspect-ratio: 1;
  bottom: -34vmax; left: -22vmax;
  background: radial-gradient(circle at 50% 50%,
    oklch(64% 0.09 206 / 0.34), oklch(64% 0.09 206 / 0.08) 48%, transparent 70%);
  transform: translate3d(0, calc(var(--prog) * 10vmax), 0);
}
.ambient__grain {
  position: absolute; inset: 0; opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ============================================================
   Kaca — material, bukan hiasan
   Empat lapis: isi bernada, kabur latar, tepi dispersi, bayangan berjarak.
   ============================================================ */

.glass {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-lg);
  background:
    linear-gradient(168deg, oklch(100% 0 0 / 0.72) 0%, oklch(100% 0 0 / 0.34) 42%,
                            oklch(100% 0 0 / 0.52) 100%),
    var(--glass-tint);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
  box-shadow:
    /* bayangan berjarak, dengan offset dan kabur */
    0 1px 2px var(--shade-1),
    0 12px 28px -10px var(--shade-2),
    0 34px 60px -32px var(--shade-3),
    /* sorot spekular di dalam */
    inset 0 1px 0 var(--spec),
    inset 0 -1px 1px oklch(100% 0 0 / 0.35);
}

/* Tepi dispersi: amber di satu sisi, teal di sisi lain */
.glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    oklch(100% 0 0 / 0.95) 0%,
    oklch(84% 0.13 78 / 0.55) 22%,
    oklch(100% 0 0 / 0.25) 50%,
    oklch(64% 0.10 206 / 0.55) 78%,
    oklch(100% 0 0 / 0.85) 100%);
  /* Cat mask: hanya kanal alfa yang dibaca, jadi warnanya tidak pernah
     terlihat. Memakai token yang sudah tercatat supaya tidak ada literal
     warna liar di sistem. */
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0);
  mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Kilau yang bergeser saat halaman bergerak — kaca menangkap cahaya */
.glass::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    calc(120deg + var(--vel) * 40deg),
    transparent 34%,
    oklch(100% 0 0 / 0.38) 47%,
    oklch(100% 0 0 / 0.06) 56%,
    transparent 66%);
  opacity: calc(0.4 + var(--vel) * var(--vel) * 3);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.5s var(--ease-out);
}

.glass--pill { border-radius: var(--r-pill); }

/* Jelly: kaca ini punya massa. Ia menekuk saat halaman direm. */
[data-jelly] {
  --jelly: 0;
  transform:
    translate3d(0, 0, 0)
    scaleY(calc(1 + var(--jelly) * 0.05))
    scaleX(calc(1 - var(--jelly) * 0.028));
  transition: transform 0.75s var(--ease-jelly);
}
/* will-change itu mahal kalau menetap: ia memaksa lapisan komposit untuk
   setiap panel sepanjang umur halaman. Mesin scroll menyalakannya hanya
   selama benar-benar ada gerak. */
.is-moving [data-jelly],
.is-moving .ambient__lamp,
.is-moving .ambient__sea { will-change: transform; }

/* ============================================================
   Navigasi
   ============================================================ */

.nav {
  position: fixed; z-index: 40;
  top: max(var(--s3), env(safe-area-inset-top));
  left: 50%; translate: -50% 0;
  width: min(100% - var(--gutter) * 1.2, var(--maxw));
}

.nav__inner {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
}

.nav__mark { font-size: 1.05rem; margin-right: auto; }
.nav__mark span { display: block; }

.nav__list { display: flex; gap: var(--s1); }
.nav__list a {
  display: block; position: relative; z-index: 3;
  padding: var(--s1) var(--s3);
  font-size: 0.9375rem; color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: color 0.3s, background-color 0.3s;
}
.nav__list a:hover { color: var(--ink); background: oklch(100% 0 0 / 0.6); }
.nav__list a.is-active {
  color: var(--ink);
  background: oklch(100% 0 0 / 0.85);
  box-shadow: 0 1px 3px var(--shade-1), inset 0 1px 0 var(--spec);
}

.nav__cta {
  display: inline-flex; align-items: center; gap: var(--s1);
  position: relative; z-index: 3;
  padding: var(--s2) var(--s2) var(--s2) var(--s3);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--paper);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  border-radius: var(--r-pill);
  box-shadow: 0 2px 6px var(--shade-3), inset 0 1px 0 oklch(100% 0 0 / 0.22);
  transition: transform 0.4s var(--ease-jelly), box-shadow 0.4s;
}
.nav__cta svg { width: 18px; height: 18px; }
.nav__cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 16px var(--shade-4), inset 0 1px 0 oklch(100% 0 0 / 0.3);
}

.nav__toggle {
  display: none; position: relative; z-index: 3;
  width: 42px; height: 42px; padding: 0;
  background: oklch(100% 0 0 / 0.7); border: 0;
  border-radius: var(--r-pill); cursor: pointer;
  box-shadow: inset 0 1px 0 var(--spec);
}
.nav__toggle-bars { display: grid; gap: 5px; place-content: center; height: 100%; }
.nav__toggle-bars i {
  display: block; width: 17px; height: 1.8px;
  background: var(--ink); border-radius: var(--r-pill);
  transition: transform 0.4s var(--ease-jelly);
}
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(3.4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child  { transform: translateY(-3.4px) rotate(-45deg); }

.nav__panel {
  margin-top: var(--s2);
  padding: var(--s2);
  display: grid; gap: 2px;
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  position: relative; z-index: 3;
  padding: var(--s3) var(--s3);
  border-radius: var(--r-md);
  font-size: 1.0625rem; color: var(--ink-2);
}
.nav__panel a:hover { background: oklch(100% 0 0 / 0.62); color: var(--ink); }

/* ============================================================
   Beranda
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: end;
  padding: calc(var(--s8) + 4rem) var(--gutter) var(--s7);
  max-width: var(--maxw); margin-inline: auto;
}

.hero__stage {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero__canvas { width: 100%; height: 100%; display: block; }

/* Cadangan tanpa WebGL — R kaca versi CSS */
.hero__fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
/* Tanpa WebGL, huruf ini tampil datar dan apa adanya. Meniru kaca dengan
   text-shadow justru memalsukan material yang jalur sungguhannya render —
   lebih baik satu tanda tenang yang tidak berpura-pura. */
.hero__fallback span {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-size: min(58vh, 44vw);
  line-height: 1;
  color: var(--glass-flat);
  transform: rotate(-6deg);
}
.js .hero__fallback { display: none; }
.js.no-webgl .hero__fallback { display: grid; }

.hero__body { max-width: 40rem; }

.hero__mark {
  font-size: clamp(3.25rem, 13vw, 6rem);
  margin-bottom: var(--s4);
}

.hero__thesis {
  font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink-2);
  max-width: 30ch;
  margin-bottom: var(--s5);
}

.hero__facts {
  display: flex; flex-wrap: wrap; gap: var(--s5) var(--s6);
  margin-bottom: var(--s5);
}
.hero__facts dt {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--teal-deep); margin-bottom: 2px;
}
.hero__facts dd { font-weight: 600; font-size: 1.0625rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 0.9375rem;
  background: oklch(100% 0 0 / 0.6);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 3px var(--shade-1),
              0 10px 22px -14px var(--shade-4),
              inset 0 1px 0 var(--spec);
  transition: transform 0.45s var(--ease-jelly), box-shadow 0.4s;
}
.btn svg { width: 19px; height: 19px; }
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 10px var(--shade-2),
              0 18px 34px -18px var(--shade-4),
              inset 0 1px 0 var(--spec);
}
.btn--solid {
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  color: var(--paper);
  box-shadow: 0 2px 8px var(--shade-3), inset 0 1px 0 oklch(100% 0 0 / 0.2);
}

.hero__cue {
  position: absolute; left: var(--gutter); bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s2);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3);
}
.hero__cue i {
  display: block; width: 1px; height: 28px;
  background: linear-gradient(var(--ink-3), transparent);
  animation: cue 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  45%      { transform: scaleY(1);    opacity: 1; }
}

/* ============================================================
   Kerangka bagian
   ============================================================ */

.sec {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--s8) var(--gutter);
  /* nav melayang di atas; beri ruang supaya judul tidak tertutup */
  scroll-margin-top: 6.5rem;
}

.sec__title {
  font-size: clamp(2rem, 1.4rem + 3.2vw, 3.75rem);
  margin-bottom: var(--s5);
}
.sec__note {
  color: var(--ink-2);
  max-width: 46ch;
  margin-top: calc(var(--s5) * -1 + var(--s3));
  margin-bottom: var(--s6);
}

/* ── Tentang ── */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s6);
  align-items: center;
}
.about__photo { padding: var(--s2); overflow: hidden; }
.about__photo img {
  border-radius: calc(var(--r-lg) - 8px);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
}
.about__photo figcaption {
  position: relative; z-index: 3;
  padding: var(--s3) var(--s2) var(--s1);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-deep);
}
.about__text { padding-block: var(--s2); }
.lede {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 500; font-stretch: 100%;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.34; letter-spacing: -0.02em;
  margin-bottom: var(--s4);
}
.about__text p:not(.lede) { color: var(--ink-2); }
.about__text strong { font-weight: 600; color: var(--ink); }

/* ── Karya ── */

.work {
  padding: var(--s5);
  display: grid; align-content: start; gap: var(--s3);
}
.work--lead {
  padding: var(--s6);
  margin-bottom: var(--s4);
  background:
    linear-gradient(150deg, oklch(100% 0 0 / 0.74) 0%, oklch(88% 0.06 78 / 0.28) 55%,
                            oklch(100% 0 0 / 0.5) 100%),
    var(--glass-tint);
}
.work__head {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap;
  position: relative; z-index: 3;
}
.work__head .ico { width: 30px; height: 30px; color: var(--teal-deep); flex: none; }
.work--lead .work__head .ico { width: 38px; height: 38px; color: var(--amber-deep); }
.work__head h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  margin-right: auto;
}
.work--lead .work__head h3 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.75rem); }
.work p { position: relative; z-index: 3; color: var(--ink-2); max-width: 58ch; }
.work--lead p { font-size: 1.0625rem; max-width: 52ch; }

.tag {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s2);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--teal-wash);
  border-radius: var(--r-pill);
}
.tag--live { color: var(--amber-ink); background: var(--amber-wash); }
.tag--live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber-deep);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.work__link {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--teal-deep);
  border-bottom: 1px solid oklch(56% 0.092 205 / 0.3);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s, gap 0.3s var(--ease-out);
}
.work__link svg { width: 15px; height: 15px; }
.work__link:hover { color: var(--ink); border-color: var(--ink); gap: 10px; }
.work--lead .work__link { color: var(--amber-ink); border-color: oklch(66% 0.152 62 / 0.4); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4);
}

/* ── Kemahiran ── */

.skills { display: grid; gap: var(--s3); }

.skill {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s2) var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
}
.skill__name {
  position: relative; z-index: 3;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.skill__num {
  position: relative; z-index: 3;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  color: var(--teal-deep);
  font-variant-numeric: tabular-nums;
}
.skill__num b { font-weight: 800; }

/* Tabung cairan — kaca yang terisi, bukan bilah abu-abu */
.skill__tube {
  grid-column: 1 / -1;
  position: relative; z-index: 3;
  display: block; height: 12px;
  border-radius: var(--r-pill);
  background: var(--shade-1);
  box-shadow: inset 0 1px 2px var(--shade-2),
              inset 0 -1px 0 oklch(100% 0 0 / 0.7);
  overflow: hidden;
}
.skill__fluid {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--pct) * 1%);
  /* tumbuh lewat scaleX, bukan width: menganimasi width memicu layout
     tiap bingkai. Lebar akhirnya tetap angka yang sesungguhnya. */
  transform-origin: left center;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal-deep), var(--teal) 62%, var(--amber) 100%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.45),
              0 0 14px -2px oklch(56% 0.092 205 / 0.5);
}
/* riak permukaan cairan */
.skill__fluid::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, oklch(100% 0 0 / 0.3) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: ripple 4.5s linear infinite;
}
@keyframes ripple { from { background-position: 180% 0; } to { background-position: -80% 0; } }

.js .skill[data-reveal] .skill__fluid { transform: scaleX(0); }
.js .skill.is-in .skill__fluid {
  transform: none;
  transition: transform 1.35s var(--ease-out);
}

/* ── Perjalanan ── */

.path { display: grid; gap: var(--s5); }
.path__step {
  display: grid;
  grid-template-columns: 7.5rem 24px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.path__when {
  font-size: 1rem; color: var(--teal-deep);
  padding-top: var(--s4);
  text-align: right;
}
.path__dot {
  position: relative;
  width: 24px; padding-top: calc(var(--s4) + 0.35rem);
  justify-self: center;
  /* meregang setinggi baris, kalau tidak garisnya cuma jadi tonjolan
     pendek dan urutannya tidak terbaca sebagai satu perjalanan */
  align-self: stretch;
}
.path__dot::before {
  content: ''; position: absolute; top: calc(var(--s4) + 0.35rem);
  left: 50%; translate: -50% 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: oklch(100% 0 0 / 0.9);
  box-shadow: 0 0 0 1px oklch(56% 0.092 205 / 0.45),
              0 2px 6px var(--shade-3),
              inset 0 1px 0 var(--spec);
}
.path__dot::after {
  content: ''; position: absolute;
  top: calc(var(--s4) + 1.5rem); bottom: calc(var(--s5) * -1);
  left: 50%; translate: -50% 0;
  width: 1px;
  background: linear-gradient(oklch(56% 0.092 205 / 0.4), oklch(56% 0.092 205 / 0.04));
}
.path__step:last-child .path__dot::after { display: none; }
.path__dot--live::before {
  background: var(--amber);
  box-shadow: 0 0 0 1px oklch(66% 0.152 62 / 0.5),
              0 0 16px oklch(79% 0.148 76 / 0.7),
              inset 0 1px 0 oklch(100% 0 0 / 0.6);
}
.path__what { padding: var(--s4) var(--s5); }
.path__what h3 {
  position: relative; z-index: 3;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  margin-bottom: var(--s2);
}
.path__what p { position: relative; z-index: 3; color: var(--ink-2); }

/* ── Impian ── */

.sec--dream { padding-block: var(--s8); text-align: center; }
.dream p {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800; font-stretch: 100%;
  font-size: clamp(1.875rem, 1.2rem + 4.2vw, 4rem);
  line-height: 1.06; letter-spacing: -0.035em;
  margin: 0 auto var(--s5);
  max-width: 22ch;
}
.dream p span { display: block; }
.dream em {
  font-style: normal;
  color: var(--amber-ink);
}
.dream footer {
  color: var(--ink-2);
  max-width: 40ch; margin-inline: auto;
}

/* ── Kontak ── */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s4);
}
.contact__card {
  padding: var(--s5);
  display: grid; gap: var(--s1);
  transition: transform 0.5s var(--ease-jelly);
}
.contact__card .ico-brand {
  position: relative; z-index: 3;
  width: 30px; height: 30px; color: var(--teal-deep);
  margin-bottom: var(--s2);
}
.contact__label {
  position: relative; z-index: 3;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--teal-deep);
}
.contact__value {
  position: relative; z-index: 3;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-stretch: 100%;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  letter-spacing: -0.02em;
}
.contact__card:hover { transform: translateY(-4px) scale(1.012); }
.contact__card:hover .ico-brand { color: var(--amber-ink); }

/* ── Kaki ── */

.foot {
  max-width: var(--maxw); margin-inline: auto;
  padding: var(--s5) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: baseline; justify-content: space-between;
  border-top: 1px solid oklch(56% 0.092 205 / 0.16);
}
.foot__mark { font-size: 1.25rem; }
.foot__meta { color: var(--ink-2); font-size: 0.875rem; }

/* ============================================================
   Animasi scroll — satu gerakan yang digarap, bukan efek berserak
   Konten terlihat secara bawaan; keadaan tersembunyi hanya saat JS aktif.
   ============================================================ */

.js [data-reveal] {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 26px, 0);
  clip-path: inset(0 0 8% 0);
  transition:
    opacity 0.95s var(--ease-out),
    filter 1.05s var(--ease-out),
    transform 1.05s var(--ease-out),
    clip-path 1.05s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in {
  opacity: 1; filter: blur(0); transform: none; clip-path: inset(0 0 0 0);
}

/* Pemisahan huruf pada judul */
.js [data-split] { display: block; }
.js [data-split] .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(11px);
  transform: translate3d(0, 0.5em, 0) scale(0.94);
  transition:
    opacity 0.7s var(--ease-out),
    filter 0.8s var(--ease-out),
    transform 0.85s var(--ease-jelly);
  transition-delay: var(--d, 0ms);
}
.js [data-split].is-in .ch { opacity: 1; filter: blur(0); transform: none; }

/* Pemisahan baris pada kutipan impian */
.js [data-split-lines] span {
  display: block;
  clip-path: inset(0 0 105% 0);
  opacity: 0;
  transform: translate3d(0, 0.32em, 0);
  transition:
    clip-path 1.1s var(--ease-out),
    opacity 0.8s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-split-lines].is-in span {
  clip-path: inset(0 0 -12% 0); opacity: 1; transform: none;
}

/* ============================================================
   Adaptasi
   ============================================================ */

@media (max-width: 60rem) {
  .about { grid-template-columns: 1fr; gap: var(--s5); }
  .about__photo { max-width: 24rem; }
  .path__step { grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); }
  .path__when {
    grid-column: 1 / -1;
    text-align: left; padding-top: 0;
    font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .path__dot { padding-top: 0.5rem; }
  .path__dot::before { top: 0.5rem; }
  .path__dot::after { top: 1.6rem; }
  .path__what { padding: var(--s4); }
}

@media (max-width: 48rem) {
  :root { --glass-blur: 20px; --s8: 5rem; --s7: 3.5rem; }
  .nav__list, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav__inner { padding: var(--s2) var(--s2) var(--s2) var(--s4); }
  .hero { align-content: end; padding-top: calc(var(--s8) + 5rem); }
  .hero__facts { gap: var(--s4) var(--s5); }
  .hero__facts > div { min-width: 8rem; }
  .work, .work--lead { padding: var(--s4); }
  .skill { padding: var(--s4); }
  .hero__cue { display: none; }
  .sec__note { margin-top: 0; }
}

@media (max-width: 30rem) {
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .skill { grid-template-columns: 1fr auto; }
}

/* Layar tinggi & sempit: R jangan menabrak teks */
@media (max-width: 48rem) and (min-height: 40rem) {
  .hero__stage { inset: 0 0 32% 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-split] .ch,
  .js [data-split-lines] span {
    opacity: 1 !important; filter: none !important;
    transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  [data-jelly] { transform: none !important; transition: none !important; }
  .glass::after { opacity: 0.4 !important; }
  .skill__fluid::after, .hero__cue i, .tag--live i { animation: none !important; }
  .js .skill.is-in .skill__fluid, .js .skill[data-reveal] .skill__fluid {
    transform: none; transition: none;
  }
  .ambient__lamp, .ambient__sea { transform: none !important; }
}

@media print {
  .nav, .ambient, .hero__stage, .hero__cue { display: none; }
  body { background: #fff; }
  .glass { box-shadow: none; border: 1px solid var(--ink-3); backdrop-filter: none; }
}