/* Devaka Dabare — personal site.
   The default rules ARE the finished site (no-JS and reduced-motion visitors get this).
   site.js turns each section and .wf box into a .blk and adds .s2 … .s6 to it as it is
   built; each STAGE block below strips one layer from a block that lacks that class. */

/* ---------- 1. Tokens (finished state) ---------- */
:root {
  --bg: #0B0D0C;
  --surface: #121614;
  --surface-2: #1A1F1C;
  --line: #2A312D;
  --text: #ECEFEA;
  --muted: #A3ADA6;
  --accent: #7EE0A1;
  --on-accent: #06140C;
  --btn-bg: var(--accent);
  --gold: #E8C27A;
  --gold-bg: rgba(232, 194, 122, .12);
  --accent-bg: rgba(126, 224, 161, .12);
  --chip-bg: var(--surface-2);
  --wf: #5E6B64;
  --wf-ink: #8E9992;
  --focus: var(--accent);
  --link: var(--accent);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --serif: "Times New Roman", Times, serif;
  --head: var(--sans);
  --body: var(--sans);
  --label: var(--mono);

  --r: 18px;
  --r-sm: 10px;
  --pill: 999px;
  --shadow: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25);
  --glow: 1;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --wrap: 1120px;
  --pad: clamp(4rem, 10vw, 8rem);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-anchor: none; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { transition: opacity .2s ease; }
/* animated tech background (bg.js): fixed behind everything, never interactive */
.bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
@media print { .bg { display: none; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--head); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--btn-bg); color: var(--on-accent); border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wf { position: relative; }
.muted { color: var(--muted); }

/* ---------- 3. Header ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top__in { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--text); }
.brand__mark { width: 40px; height: 40px; flex: none; transition: transform .5s var(--ease); }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
.brand__role { font: 500 .66rem/1.4 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.top__nav { display: flex; align-items: center; gap: clamp(.75rem, 2.5vw, 2rem); }
.nav { display: flex; gap: clamp(.75rem, 2vw, 1.6rem); }
.nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .95rem; padding: 0 .1rem; transition: color .25s; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.top__cta {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .45rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--pill);
  color: var(--accent); font-weight: 600; font-size: .9rem; white-space: nowrap;
  transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.top__cta:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.top__progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #7EE0A1, #E8C27A); transform: scaleX(var(--sp, 0)); transform-origin: left;
}

/* ---------- 4. Sections ---------- */
.sec { position: relative; padding-block: var(--pad); border-top: 1px solid var(--line); }
.sec--tight { padding-block: calc(var(--pad) * .7); }
.sec__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 42rem; }
.label {
  font: 500 .8125rem/1.4 var(--label); text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin-bottom: .9rem;
}
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 3rem); line-height: 1.1; font-weight: 650; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
h4 { font-size: 1.05rem; line-height: 1.35; font-weight: 600; }
.lead { font-size: clamp(1.125rem, 1vw + .9rem, 1.375rem); color: var(--muted); max-width: 36rem; }
.sec-tag { display: none; }

/* Hero */
.hero { border-top: 0; padding-block: clamp(3rem, 8vw, 6.5rem) var(--pad); overflow: hidden; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.25fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.eyebrow { font: 500 .8125rem/1.5 var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.25rem; }
.display { font-size: clamp(2.75rem, 6vw + 1rem, 6rem); line-height: 1; font-weight: 700; letter-spacing: -.035em; margin-bottom: 1.5rem; }
.hero .lead { margin-bottom: 2.25rem; }
.cta { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .8rem 1.4rem; border-radius: var(--pill); font-weight: 600; font-size: 1rem;
  border: 1px solid var(--line);
  transition: transform .25s var(--ease), background-color .6s, color .6s, border-color .6s, box-shadow .3s, border-radius .5s;
}
.btn--primary { background: var(--btn-bg); color: var(--on-accent); border-color: transparent; }
.btn--ghost { color: var(--text); }
.btn:hover { transform: translateY(-2px); }
.hint { display: none; margin-top: 2.5rem; font: .85rem/1.4 var(--label); color: var(--muted); align-items: center; gap: .6rem; }
.hint__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hero__photo { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); }
.hero__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 25%; }
.hero__aurora { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; opacity: calc(var(--glow) * .9); transition: opacity 1.2s; }
.hero__aurora span { position: absolute; border-radius: 50%; filter: blur(70px); }
.hero__aurora span:nth-child(1) { width: 46vw; height: 46vw; left: 48%; top: 0; background: rgba(126, 224, 161, .22); }
.hero__aurora span:nth-child(2) { width: 30vw; height: 30vw; left: 70%; top: 30%; background: rgba(232, 194, 122, .12); }
.hero__aurora span:nth-child(3) { width: 36vw; height: 36vw; left: -8%; top: 20%; background: rgba(126, 224, 161, .07); }

/* About */
.split { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(2rem, 6vw, 5rem); }
.prose p + p { margin-top: 1.1rem; }
.prose { font-size: 1.125rem; max-width: 40rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; }
.stat { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.stat strong { display: block; font: 700 clamp(1.75rem, 2vw + 1rem, 2.5rem)/1 var(--head); color: var(--gold); letter-spacing: -.02em; }
.stat span { display: block; margin-top: .5rem; font-size: .9rem; color: var(--muted); }

/* Timeline */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(var(--accent), var(--line) 85%); transform-origin: top;
}
.role { position: relative; padding-bottom: 3rem; }
.role:last-child { padding-bottom: 0; }
.role::after {
  content: ""; position: absolute; left: calc(-2rem + 0px); top: .45rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.role__when { font: 500 .8125rem/1.4 var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.role__title { font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); }
.role__at { color: var(--muted); font-weight: 500; }
.role__sum { margin-top: .6rem; color: var(--muted); max-width: 46rem; }
.builds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1rem; margin-top: 1.4rem; }
.build {
  padding: 1.25rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .3s, transform .3s var(--ease), background-color .6s, border-radius .5s, box-shadow .6s;
}
.build:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.build h4 { margin-bottom: .4rem; }
.tagline { display: block; font: 500 .78rem/1.4 var(--label); color: var(--accent); letter-spacing: .04em; margin-top: .2rem; }
.build p { font-size: .95rem; color: var(--muted); }
.tech { margin-top: .7rem; font: .78rem/1.55 var(--label); color: var(--text); opacity: .75; }
.other { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px dashed var(--line); }
.other h3 { color: var(--muted); font-size: 1rem; font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }

/* Cards (education, projects, tiles) */
.card {
  position: relative; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s, background-color .6s, border-radius .5s;
}
.card h3 { margin-bottom: .5rem; }
.card > p + p { margin-top: .6rem; }
.edu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.badge {
  display: inline-block; margin-bottom: 1rem; padding: .3rem .7rem; border-radius: var(--pill);
  font: 500 .75rem/1.3 var(--label); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
}
.card > .badge + h3 { margin-top: 0; }
.proj .badge { align-self: flex-start; }
.badge--gold { color: var(--gold); background: var(--gold-bg); border-color: transparent; }
.badge--accent { color: var(--accent); background: var(--accent-bg); border-color: transparent; }
.tile .badge { margin: 1.1rem 0 0; }

/* Skills */
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 2.5rem; }
.skill-group h3 { font: 500 .8125rem/1.4 var(--label); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--chip-bg);
  font-size: .92rem; transition: border-color .25s, color .25s, background-color .6s, border-radius .5s, opacity .5s, transform .5s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: .45rem; }
.chip__i { width: 16px; height: 16px; flex: none; color: var(--accent); transition: opacity .4s; }
.chip__i--line { width: 16px; height: 16px; }
.chip:hover .chip__i { color: inherit; }
.bico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: .85rem;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--accent);
}
.bico svg { width: 22px; height: 22px; transition: opacity .5s, transform .6s var(--ease); }

/* Projects */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.proj { display: flex; flex-direction: column; }
.proj p:not(.badge) { color: var(--muted); }
.proj__link { margin-top: auto; padding-top: 1.4rem; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; }
.proj__link::after { content: ""; position: absolute; inset: 0; } /* whole card is the target */
.proj--feature { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
.proj::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(126, 224, 161, .14), transparent 60%);
  transition: opacity .3s;
}
.proj:hover, .proj:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.proj:hover::before, .proj:focus-within::before { opacity: var(--glow); }

/* Live previews in the project cards: a browser frame with a slow crossfade */
.pv { margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.pv__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 .6rem; border-bottom: 1px solid var(--line); font: 10.5px/1 var(--mono); color: var(--muted); }
.pv__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.pv__bar span { margin-left: .35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pv__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; }
.pv__screen img:first-child { opacity: 1; }
.pv { --pvd: 0s; }
.pv--d1 { --pvd: -.5s; } .pv--d2 { --pvd: -1s; } .pv--d3 { --pvd: -1.5s; } .pv--d4 { --pvd: -2s; } .pv--d5 { --pvd: -2.5s; }
.js .pv--3 img { animation: pv3 9.6s linear infinite both paused; }
.js .pv--2 img { animation: pv2 6.4s linear infinite both paused; }
.js :is(.pv--2, .pv--3) img:nth-child(1) { animation-delay: calc(var(--pvd) - .6s); }
.js :is(.pv--2, .pv--3) img:nth-child(2) { animation-delay: calc(var(--pvd) + 2.6s); }
.js .pv--3 img:nth-child(3) { animation-delay: calc(var(--pvd) + 5.8s); }
.js .pv.play img { animation-play-state: running; }
.js .proj:is(:hover, :focus-within) .pv img, .pv-paused :is(.pv img, .hero__aurora span) { animation-play-state: paused !important; }
@keyframes pv3 { 0% { opacity: 0; } 6.25%, 33.33% { opacity: 1; } 39.58%, 100% { opacity: 0; } }
@keyframes pv2 { 0% { opacity: 0; } 9.4%, 50% { opacity: 1; } 59.4%, 100% { opacity: 0; } }
.pv-toggle { margin-top: .75rem; font-size: .9rem; }

/* Beyond code */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.tile--wide { grid-column: span 2; }
.ico {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.2rem;
  border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent);
}
.ico svg { width: 30px; height: 30px; transition: opacity .5s, transform .6s var(--ease); }
.tile p:not(.badge) { color: var(--muted); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.shot { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease), opacity .5s; }
.shot--contain img { object-fit: contain; background: var(--surface-2); }
.shot--wide { grid-column: 1 / -1; }
.shot--wide img { aspect-ratio: 1280 / 853; }
.shot figcaption { padding: .9rem 1.1rem; font-size: .92rem; color: var(--muted); }
.credit { display: block; font: .75rem/1.5 var(--label); color: var(--muted); opacity: .8; margin-top: .15rem; }
.shot:not(.shot--contain):hover img { transform: scale(1.03); }

/* Contact */
.contact { text-align: left; }
.contact__in { padding-block: 1rem; }
.contact h2 { font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height: 1; margin-bottom: 1.2rem; }
.links { display: grid; gap: .75rem; margin-top: 2.5rem; }
.biglink {
  position: relative; display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--text);
  transition: border-color .3s, transform .35s var(--ease), background-color .6s, border-radius .5s, box-shadow .35s;
}
.biglink__k { font-weight: 650; font-size: 1.2rem; }
.biglink__v { color: var(--muted); font-family: var(--label); font-size: .92rem; overflow-wrap: anywhere; }
.biglink__arr { color: var(--accent); font-size: 1.3rem; transition: transform .3s var(--ease); }
.biglink:hover { border-color: var(--accent); transform: translateX(4px); }
.biglink:hover .biglink__arr { transform: translate(3px, -3px); }

/* Footer */
.foot { position: relative; border-top: 1px solid var(--line); padding: 2.5rem 0 7rem; color: var(--muted); font-size: .92rem; }
.foot__in { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; }
.foot__done { display: inline-flex; align-items: center; gap: .5rem; color: var(--accent); font-family: var(--label); font-size: .85rem; }
.tick { width: 20px; height: 20px; }
.tick path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.linkbtn { background: none; border: 0; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: .5rem 0; min-height: 44px; }

/* HUD (only exists in JS build mode) */
.hud { display: none; }
.is-building .hud {
  position: fixed; z-index: 60; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; max-width: calc(100% - 2rem);
  padding: .55rem .6rem .55rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--text);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: .8rem/1.3 var(--mono);
  transition: background-color .6s, border-color .6s, border-radius .5s, box-shadow .6s, opacity .4s, transform .4s var(--ease);
}
.hud__label { margin: 0; white-space: nowrap; }
.hud__bar { display: flex; gap: 3px; }
.hud__bar li { width: 14px; height: 6px; border-radius: 2px; background: var(--line); transition: background-color .4s; }
.hud__bar li.on { background: var(--accent); }
.hud__btn {
  min-height: 44px; padding: .35rem .8rem; border-radius: calc(var(--r-sm) - 3px); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit;
}
.hud__btn:hover { border-color: var(--accent); color: var(--accent); }
.hud--min .hud__label, .hud--min .hud__bar { display: none; }

/* ---------- 5. Responsive ---------- */
@media (max-width: 960px) {
  .cards, .tiles, .skills { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
}
@media (max-width: 720px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__photo { order: -1; width: 70%; max-width: 320px; }
  .edu, .cards, .tiles, .skills { grid-template-columns: 1fr; }
  .tile--wide { grid-column: auto; }
  .biglink { grid-template-columns: 1fr auto; }
  .biglink__v { grid-column: 1; grid-row: 2; }
  .biglink__arr { grid-row: 1 / span 2; grid-column: 2; }
  .is-building .hud { left: 50%; transform: translateX(-50%); bottom: calc(.6rem + env(safe-area-inset-bottom)); justify-content: center; padding: .4rem .5rem; gap: .5rem; }
  .is-building .hud__label { font-size: .72rem; }
  .hud__btn { min-height: 44px; }
  .hud__bar { display: none; }
  .touring .hud__label, .all-built .hud__label { display: none; }
  .is-building .hud { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; }
  .nav__opt { display: none; }
  .brand__role { display: none; }
  .nav { display: none; }
}
@media (max-width: 360px) {
  .top__in, .brand { gap: .5rem; }
  .brand__mark { width: 34px; height: 34px; }
  .top__cta { padding-inline: .7rem; }
}

/* =========================================================
   BUILD STAGES, per block.
   site.js marks every section and every .wf box as a .blk and adds
   .s2 … .s6 to it while it is built: the lower half of the viewport is
   blueprint, blocks are built as they cross the middle, and the upper
   half is finished. Blocks build in document order, so an outer block is
   always at least as far along as the blocks inside it.
   ========================================================= */

/* Build-only furniture */
.sec.blk:not(.s6) > .sec-tag,
.is-building .sec.blk:has(.wf.blk:not(.s6)) > .sec-tag {
  display: block; position: absolute; top: .75rem; right: 1rem; z-index: 2;
  font: .7rem/1.3 var(--mono); color: var(--wf-ink); letter-spacing: .02em; text-transform: none;
}
.is-building:not(.all-built) .hint { display: flex; }
.is-building:not(.all-built) .foot__done { visibility: hidden; }

/* Smooth hand-over between stages (zero-specificity so components keep their own transitions) */
:where(.is-building:not(.instant)) :where(body *) {
  transition: background-color .6s, color .6s, border-color .6s, border-radius .5s, box-shadow .6s, opacity .5s, outline-color .4s;
}
.instant *, .instant *::before, .instant *::after { transition: none !important; animation: none !important; }

/* s6 missing → no polish: shadows, gradients, glow, blur */
.blk:not(.s6) { --shadow: none; --glow: 0; }
.top.blk:not(.s6) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.proj--feature.blk:not(.s6) { background: var(--surface); }
.blk:not(.s6) .timeline::before { background: var(--line); }
.blk:not(.s6) .shimmer { background: none; -webkit-text-fill-color: currentColor; }
.blk:not(.s6) .pv img { animation: none; }

/* s5 missing → no images or icons, only placeholder boxes with an X */
:is(.blk:not(.s5) .ph, .ph.blk:not(.s5)) img,
.blk:not(.s5) :is(.ico svg, .chip svg, .bico svg) { opacity: 0; }
.blk:not(.s5) .ico svg { transform: scale(.6); }
.blk:not(.s5) .chip svg { width: 0; margin: 0; }
:is(.blk:not(.s5) .ph, .ph.blk:not(.s5)) { background: var(--surface-2); }
:is(.blk:not(.s5) .ph, .ph.blk:not(.s5))::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--wf) 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--wf) 50%, transparent calc(50% + 1px));
}
.blk:not(.s5) :is(.shot figcaption) { position: relative; z-index: 2; background: var(--surface); }
.blk:not(.s5) :is(.ico, .bico) { background: transparent; outline: 1px dashed var(--wf); outline-offset: -1px; }

/* s4 missing → no typography or styling: browser-default serif, default sizes, no radius, plain chips */
.blk:not(.s4) {
  --head: var(--serif); --body: var(--serif); --label: var(--serif);
  --r: 0px; --r-sm: 0px; --pill: 0px;
  --link: #8AB4F8; --focus: #1A73E8;
  --gold-bg: transparent; --accent-bg: transparent; --chip-bg: transparent;
}
.blk:not(.s4) :is(.display, h1, h2, .stat strong) { letter-spacing: 0; }
.blk:not(.s4) a { text-decoration: underline; }
.blk:not(.s4) :is(.chip, .badge) { border-color: transparent; }
.blk:not(.s4) .btn { font-weight: 400; }
.blk:not(.s4) .ico svg { transform: none; }
/* wireframe frame (a real element site.js adds) draws in at s1 and stays until real styling arrives */
/* the box is dragged out from a small square to full size, following the cursor */
.wf > .blk__frame {
  display: none; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: var(--fw, 100%); height: var(--fh, 100%); border: 1px dashed var(--wf);
  transition: width var(--drag, 650ms) var(--ease), height var(--drag, 650ms) var(--ease);
}
.blk.s1:not(.s4) > .blk__frame { display: block; }
.blk.dragging > .blk__frame { border-style: solid; border-color: #7EE0A1; background: rgba(126, 224, 161, .06); }
.blk.dragging > :not(.blk__frame), .blk.dragging::after { opacity: 0; }

/* s3 missing → no real text yet: everything is a grey mono wireframe label */
.blk:not(.s3) { --head: var(--mono); --body: var(--mono); --label: var(--mono); }
.blk:not(.s3) :where(h1, h2, h3, h4, strong) { font-weight: 400; }
.blk:not(.s3) a { text-decoration: none; }
.wf.blk:not(.s3)[data-wf]::after {
  content: attr(data-wf); content: attr(data-wf) / ""; position: absolute; top: 0; right: 0; z-index: 3;
  padding: 1px 6px; background: var(--tag-bg, var(--bg)); border-left: 1px dashed var(--wf); border-bottom: 1px dashed var(--wf);
  font: 11px/1.3 var(--mono); color: var(--wf-ink); pointer-events: none;
}
.blk:not(.s3) .timeline::before { opacity: 0; }
.role.blk:not(.s3)::after { left: auto; width: auto; height: auto; border: 0; border-left: 1px dashed var(--wf); border-bottom: 1px dashed var(--wf); border-radius: 0; }

/* s2 missing → no colour yet: grey wireframe lines and grey text on the dark page background
   (sections are painted first, so there is never any white) */
.blk:not(.s2) {
  --surface: transparent; --surface-2: #121614; --line: #2A312D; --btn-bg: transparent;
  --wf: #5E6B64; --wf-ink: #8E9992; --tag-bg: #0B0D0C;
  --text: #A3ADA6; --muted: #8E9992; --accent: #A3ADA6; --on-accent: #A3ADA6; --gold: #A3ADA6; --link: #A3ADA6;
  color: var(--text);
}
.wf.blk:not(.s2) { background-color: transparent; }
.blk:not(.s2) .btn--primary { border-color: var(--wf); }
.blk:not(.s2) .credit { opacity: 1; }

/* s1 missing → nothing at all yet: blank paper, no lines, no content.
   The text stays in the DOM (opacity only), so assistive tech and find-in-page still see it. */
.blk:not(.s1) { border-color: transparent; outline-color: transparent; box-shadow: none; }
.wf.blk:not(.s1) { background-color: transparent; }
.blk:not(.s1) > *, .blk:not(.s1)::before, .blk:not(.s1)::after { opacity: 0; }
.blk:not(.s5) .chip { gap: 0; }
.snap *, .snap *::before, .snap *::after { transition: none !important; animation: none !important; }

/* =========================================================
   THE BUILDER: fake cursor + live code bubble (aria-hidden)
   ========================================================= */
.cursor, .code { display: none; }
.is-building .cursor {
  display: block; position: fixed; left: 0; top: 0; z-index: 90; width: 26px; height: 26px; pointer-events: none;
  opacity: 0; transform: translate3d(var(--cx, 50vw), var(--cy, 60vh), 0);
  transition: transform var(--glide, 350ms) var(--ease), opacity .3s;
}
.cursor svg { width: 26px; height: 26px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
.cursor.on { opacity: 1; }
.cursor.down svg { transform: scale(.86); transform-origin: 4px 3px; }
.cursor::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #7EE0A1; opacity: 0; transform: scale(.4);
}
.cursor.click::after { animation: ripple .5s var(--ease); }
@keyframes ripple { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }

.is-building .code {
  display: block; position: fixed; left: 0; top: 0; z-index: 89; pointer-events: none;
  width: min(330px, calc(100vw - 1.5rem)); opacity: 0;
  transform: translate3d(var(--bx, 0), var(--by, 0), 0) scale(.96);
  transition: opacity .25s, transform var(--glide, 350ms) var(--ease);
  background: #0F1311; color: #ECEFEA; border: 1px solid #2A312D; border-radius: 12px;
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .75);
  font: 12.5px/1.5 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
.code.on { opacity: 1; transform: translate3d(var(--bx, 0), var(--by, 0), 0) scale(1); }
.code__bar { display: flex; align-items: center; gap: 6px; padding: .4rem .75rem; border-bottom: 1px solid #2A312D; color: #A3ADA6; font-size: 11px; }
.code__bar i { width: 8px; height: 8px; border-radius: 50%; background: #3A433E; }
.code__bar i:first-child { background: #E8C27A; }
.code__bar i:nth-child(3) { background: #7EE0A1; margin-right: .4rem; }
.code__body { margin: 0; padding: .55rem .8rem .7rem; height: 7.5em; overflow: hidden; }
.code__line { min-height: 1.5em; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.tk-sel { color: #8AB4F8; }
.tk-prop { color: #7EE0A1; }
.tk-val { color: #E8C27A; }
.tk-tag { color: #8AB4F8; }
.tk-punc { color: #A3ADA6; }
.tk-com { color: #6B756F; font-style: italic; }
.caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 1px; background: #7EE0A1; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 720px) {
  .is-building .code, .is-building .code.on { left: 50%; top: auto; bottom: calc(4.4rem + env(safe-area-inset-bottom)); transform: translateX(-50%); }
  .code__body { height: 4.5em; }
  .hud__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* =========================================================
   MOTION (on built blocks only, never with reduced motion)
   ========================================================= */
.hero.s6 .hero__aurora span { animation: drift 20s ease-in-out infinite alternate; }
.hero.s6 .hero__aurora span:nth-child(2) { animation-duration: 26s; animation-direction: alternate-reverse; }
.hero.s6 .hero__aurora span:nth-child(3) { animation-duration: 32s; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vw, 4vw, 0) scale(1.15); } }

.shimmer {
  background: linear-gradient(100deg, var(--text) 0%, var(--text) 40%, var(--accent) 50%, var(--gold) 56%, var(--text) 66%, var(--text) 100%);
  background-size: 250% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.is-building .s6 .shimmer { animation: shimmer 2.4s var(--ease) .2s 1 both; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (forced-colors: active) { .shimmer { background: none; -webkit-text-fill-color: currentColor; } }

/* a ring pulses out from each block the moment it is finished */
.blk.flash { animation: flash .8s var(--ease); }
@keyframes flash { from { box-shadow: 0 0 0 2px rgba(126, 224, 161, .9), var(--shadow); } to { box-shadow: 0 0 0 16px rgba(126, 224, 161, 0), var(--shadow); } }

.skill-group.s6.flash .chip { animation: pop .5s var(--ease) both; }
.chip:nth-child(2) { animation-delay: .04s; } .chip:nth-child(3) { animation-delay: .08s; }
.chip:nth-child(4) { animation-delay: .12s; } .chip:nth-child(5) { animation-delay: .16s; }
.chip:nth-child(6) { animation-delay: .2s; }  .chip:nth-child(7) { animation-delay: .24s; }
.chip:nth-child(8) { animation-delay: .28s; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.all-built .tick path { animation: draw .8s var(--ease) .2s both; }
@keyframes draw { from { stroke-dashoffset: 24; } }

.is-building:not(.all-built) .hint__dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }

/* Guided-tour prompt (non-modal) */
.tour { display: none; }
.is-building .tour:not([hidden]) {
  display: block; position: fixed; z-index: 95; right: 1.5rem; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 2rem)); padding: 1.25rem 1.35rem 1.35rem;
  background: #121614; color: #ECEFEA; border: 1px solid #2A312D; border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(126, 224, 161, .08);
  opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--ease);
  font-family: var(--sans);
}
.is-building .tour.on { opacity: 1; transform: none; }
@media (min-width: 721px) and (max-width: 960px) {
  .is-building .tour:not([hidden]) { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }   /* clear the HUD on narrow tablets */
}
@media (max-width: 720px) {
  /* on phones the bottom of the screen is where the build happens, so the prompt sits under the header */
  .is-building .tour:not([hidden]) { right: auto; left: 50%; top: calc(72px + .75rem); bottom: auto; transform: translate(-50%, -12px); }
  .is-building .tour.on { transform: translate(-50%, 0); }
}
.tour__title { font-weight: 650; font-size: 1.15rem; margin-bottom: .35rem; }
.tour__text { color: #A3ADA6; font-size: .95rem; line-height: 1.5; margin-bottom: 1rem; }
.tour__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.tour .btn { min-height: 44px; padding: .6rem 1.1rem; font: 600 .95rem/1.2 var(--sans); border-radius: 999px; background: transparent; cursor: pointer; }
.tour .btn--primary { background: #7EE0A1; color: #06140C; }
.tour .btn--ghost { color: #ECEFEA; border-color: #2A312D; }

/* Browsers without color-mix(): solid fallbacks (a var() inside color-mix would compute to transparent) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .top, .is-building .hud { background: var(--bg); }
  .proj--feature { background: var(--surface); }
  .top__cta { border-color: var(--accent); }
  .build:hover, .proj:hover, .proj:focus-within { border-color: var(--accent); }
}

@media print {
  .hud, .sec-tag, .hint, .hero__aurora, .skip, .cursor, .code { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}