/*
  Home hero — implemented from Figma "Portfolio / Desktop - 1" (1440 × 889).
  The composition is a fixed art-directed canvas: every element is placed in
  design pixels on .stage, and main.js scales the whole stage to fit the viewport.
  Rotations use transform-origin 0 0 so Figma's x / y / rotation map 1:1
  (Figma rotates counter-clockwise, CSS clockwise — hence the sign flip).
*/

:root {
  --ink: #000;
  --paper: #fff;
  --tag-fill: #c2c2c2;

  --font-display: "Inter", system-ui, sans-serif;
  --font-hand: "Amatic SC", "Comic Sans MS", cursive;
  --font-comic: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --stage-w: 1440px;
  --stage-h: 889px;
}

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

html,
body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
}

p,
h1 {
  margin: 0;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

img {
  display: block;
  max-width: none;
}

.viewport {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(var(--scale, 1));
}

.stage > *,
.stage nav > * {
  position: absolute;
}

/* Images that sit inside a wrapper box and bleed past it for stroke caps */
.ring img,
.crosshair-v img,
.crosshair-h img,
.dashed-arc img,
.tag__outline-wrap img {
  position: absolute;
  width: auto;
  height: auto;
}

/* ---------- Background linework ---------- */

/* Group exports are drawn in the group's local (unrotated) space */
.target-cross,
.sparkle,
.scratch-lines,
.dashed-arc {
  transform-origin: 0 0;
  transform: rotate(var(--rot));
}

.target-cross {
  --rot: -12.93deg;
  left: 347.74px;
  top: 488.22px;
  width: 214px;
  height: 259px;
}

.ring {
  left: 720.4px;
  top: 254.09px;
  width: 380px;
  height: 380px;
  transform: translate(-50%, -50%) rotate(26.02deg);
}

.ring img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.crosshair-v {
  left: 720px;
  top: -51px;
  width: 663px;
  height: 0;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

.crosshair-v img {
  inset: -1px 0 0.12px 0;
  width: 100%;
  height: calc(100% + 0.88px);
}

.crosshair-h {
  left: calc(50% - 2.23px);
  top: 256.5px;
  width: 445.55px;
  height: 0;
  transform: translateX(-50%) rotate(180deg);
}

.crosshair-h img {
  top: -3.68px;
  bottom: -3.68px;
  left: -0.11%;
  right: -0.13%;
  width: 100.24%;
  height: 7.36px;
}

/* ---------- Name + figure ---------- */

.name {
  left: 401px;
  top: 553px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 128px;
  line-height: 155px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Web Inter sets K→A ~10.5px looser than Figma's Inter; pull it back so the
   letters stay registered with the name-cutout overlay. */
.name__k {
  letter-spacing: -10.5px;
}

.figure {
  left: 471px;
  top: 166px;
  width: 498px;
  height: 723px;
}

.name-cutout {
  left: 605.17px;
  top: 583.91px;
  width: 173.33px;
  height: 93.09px;
  pointer-events: none;
}

/* ---------- Navigation tags ---------- */

.tag {
  display: block;
  color: var(--ink);
  text-decoration: none;
  transform-origin: 0 0;
  transform: rotate(var(--rot));
}

.tag__body {
  position: absolute;
  inset: 0;
  display: block;
}

.tag__label {
  position: absolute;
  white-space: nowrap;
}

.tag:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 6px;
  border-radius: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  .tag__body {
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .tag:hover .tag__body,
  .tag:focus-visible .tag__body {
    transform: translateY(-4px) rotate(-2deg);
  }
}

.tag--contact {
  --rot: -133deg;
  left: 396.3px;
  top: 309.4px;
  width: 128px;
  height: 51px;
}

.tag--contact .tag__outline {
  position: absolute;
  top: -2.13px;
  left: -0.94px;
  width: 130.44px;
  height: 50.51px;
}

.tag--contact .tag__label {
  left: 21px;
  top: 7px;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 24px;
  line-height: 33px;
}

.tag--projects {
  --rot: -56deg;
  left: 974px;
  top: 284.54px;
  width: 108px;
  height: 58px;
}

/* Figma strokes these rectangles on CENTER: the 4px border straddles the
   shape edge, so the box grows 2px outward and the outer radius is 18 + 2.
   Drawn on ::before so the wobble filter roughens the pill, not the label. */
.tag--projects .tag__body::before,
.tag--tech .tag__body::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: var(--fill, var(--paper));
  filter: url(#wobble);
}

.tag--projects {
  --fill: var(--tag-fill);
}

.tag--projects .tag__label {
  left: 13.44px;
  top: 11.91px;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

.tag--tech {
  --rot: -7.73deg;
  left: 278px;
  top: 478.05px;
  width: 129.84px;
  height: 58px;
}

.tag--tech .tag__label {
  left: 16.08px;
  top: 4.83px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
}

.tag--about {
  --rot: 47.35deg;
  left: 1052.56px;
  top: 396.16px;
  width: 184.56px;
  height: 107.54px;
}

.tag--about .tag__label {
  left: 67.11px;
  top: 48.18px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: 5.4px;
  transform-origin: 0 0;
  transform: rotate(-12.11deg);
}

.tag__outline-wrap {
  position: absolute;
  left: 26.41px;
  top: 3.32px;
  width: 151.45px;
  height: 97.09px;
  transform-origin: 0 0;
  transform: rotate(-1.67deg);
}

.tag__outline-wrap img {
  top: 0;
  right: -1.06%;
  bottom: -2.06%;
  left: -2.08%;
  width: 103.14%;
  height: 102.06%;
}

/* ---------- Sketch marks ---------- */

.sparkle {
  --rot: 21.98deg;
  left: 1264.54px;
  top: 51px;
  width: 73.99px;
  height: 74px;
}

.scratch-lines {
  --rot: -43.17deg;
  left: -226px;
  top: 118.17px;
  width: 435.86px;
  height: 374.34px;
}

.dashed-arc {
  --rot: 45.11deg;
  left: 27.37px;
  top: 612.71px;
  width: 442px;
  height: 97px;
}

.dashed-arc img {
  top: -0.5px;
  left: 0;
  width: 442.31px;
  height: 98px;
}

/* ---------- Notes ---------- */

.draft,
.draft-ghost {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: -0.72px;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(0.65deg);
}

.draft {
  left: 1320.51px;
  top: -1px;
}

/* White overprint that thins the "V01" strokes into a sketchy outline */
.draft-ghost {
  left: 1375.51px;
  top: 0;
  color: var(--paper);
}

.note {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

.note--learn {
  left: 1290px;
  top: 266px;
  font-weight: 500;
}

.note--backend {
  left: 1182px;
  top: 287.86px;
  width: 236.63px;
  font-weight: 400;
  text-align: right;
  transform-origin: 0 0;
  transform: rotate(-0.45deg);
}

.tagline,
.tagline-ghost {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: 5.4px;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(-12.5deg);
}

/* Tagline + its ghost share one box at the Figma origin so they scale together.
   Scaled down toward its bottom-right end so it reads as a scribbled margin note. */
.scribble {
  left: 1102px;
  top: 805.07px;
  width: 0;
  height: 0;
  transform-origin: 316px 80px;
  transform: scale(0.68);
  opacity: 0.85;
}

.scribble > * {
  position: absolute;
}

.tagline {
  left: 0;
  top: 0;
}

/* White overprint on "ser" of "user" — same sketchy-outline trick as V01 */
.tagline-ghost {
  left: 259px;
  top: -12.22px;
  color: var(--paper);
}

.mantra {
  left: 29.29px;
  top: 419px;
  width: 143.25px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 16px;
  line-height: 50px;
  letter-spacing: -0.32px;
  white-space: pre;
  transform-origin: 0 0;
  transform: rotate(20.81deg);
}

/* =====================================================================
   Mobile canvas — Figma "Mobile version" (390 × 844).
   Same conventions as desktop: Figma x / y / rotation, origin top-left.
   ===================================================================== */

.stage--mobile {
  --stage-w: 390px;
  --stage-h: 844px;
  display: none;
}

@media (max-width: 767px), (orientation: portrait) and (max-width: 1024px) {
  .stage--desktop {
    display: none;
  }

  .stage--mobile {
    display: block;
  }
}

.stage--mobile .m-r {
  transform-origin: 0 0;
  transform: rotate(var(--rot, 0deg));
}

.stage--mobile .tag__body > *,
.stage--mobile .m-contact-frame > *,
.stage--mobile .m-about-frame > * {
  position: absolute;
}

/* ---------- Background linework ---------- */

.m-ring {
  --rot: 26.02deg;
  left: 146.2px;
  top: 186.6px;
  width: 205.64px;
  height: 205.64px;
}

.m-ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.m-crosshair-v {
  --rot: 90deg;
  left: 193.28px;
  top: 159px;
  width: 358.78px;
  height: 0;
}

.m-crosshair-v img {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 0.88px;
}

.m-crosshair-h {
  --rot: 180deg;
  left: 312.63px;
  top: 325.4px;
  width: 241.11px;
  height: 0;
}

.m-crosshair-h img {
  position: absolute;
  top: -3.68px;
  left: -0.21%;
  width: 100.42%;
  height: 7.36px;
}

/* ---------- Name + figure ---------- */

.m-name {
  left: 25px;
  top: 547px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 64px;
  line-height: 77.5px;
  white-space: nowrap;
}

/* Same K→A kerning correction as desktop, at half the size */
.m-name__k {
  letter-spacing: -5.25px;
}

.m-figure {
  left: 31px;
  top: 267px;
  width: 327px;
  height: 577px;
}

.m-cutout {
  left: 137.34px;
  top: 562.45px;
  width: 96px;
  height: 46.55px;
  pointer-events: none;
}

/* ---------- Navigation tags ---------- */

/* Rounded pill with a CENTER-aligned 4px stroke (grows 2px outward) */
.m-rect::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 4px solid var(--ink);
  border-radius: 20px;
  background: var(--fill, var(--paper));
  filter: url(#wobble-sm);
}

.m-tech {
  --rot: 23.64deg;
  left: 20.77px;
  top: 258.27px;
  width: 97.48px;
  height: 48.36px;
}

.m-tech .m-rect {
  --rot: -0.73deg;
  left: 2.9px;
  top: 7.35px;
  width: 85.91px;
  height: 35.59px;
}

.m-tech .tag__label {
  left: 25.31px;
  top: 11.57px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
}

.m-contact-frame {
  --rot: -129.82deg;
  left: 77.54px;
  top: 267.05px;
  width: 138.26px;
  height: 138.76px;
}

.m-cross {
  --rot: 93.48deg;
  left: -316.09px;
  top: -52.01px;
  width: 128.49px;
  height: 155.51px;
}

.m-contact {
  --rot: 0deg;
  left: 15.87px;
  top: 43.32px;
  width: 96.35px;
  height: 44.59px;
}

.m-contact__outline {
  left: -0.9px;
  top: -2.02px;
  width: 99.24px;
  height: 47.99px;
}

.m-contact .tag__label {
  left: 21px;
  top: 11.5px;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}

.m-projects {
  --rot: -56deg;
  left: 259px;
  top: 198.39px;
  width: 96.97px;
  height: 53.65px;
}

.m-projects .m-rect {
  --fill: var(--tag-fill);
  left: 0;
  top: 0;
  width: 90.55px;
  height: 45.92px;
}

.m-projects .tag__label {
  left: 13.44px;
  top: 11.91px;
  font-family: var(--font-comic);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}

.m-about-frame {
  --rot: 16.4deg;
  left: 296.3px;
  top: 263px;
  width: 128.64px;
  height: 128.53px;
}

.m-about {
  --rot: 0deg;
  left: 3.31px;
  top: 28.45px;
  width: 98.34px;
  height: 63.05px;
}

.m-about .tag__label {
  --rot: -12.11deg;
  left: 33.45px;
  top: 27.36px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 2.4px;
}

.m-about__outline {
  --rot: -1.67deg;
  left: 0;
  top: 0;
  width: 98.34px;
  height: 63.05px;
}

.m-about__outline img {
  position: absolute;
  left: -3.14px;
  top: -0.1px;
  width: 103.09px;
  height: 65.15px;
}

/* ---------- Sketch marks ---------- */

.m-scratch {
  --rot: -43.17deg;
  left: -76px;
  top: 33.09px;
  width: 153.61px;
  height: 131.93px;
}

.m-sparkle {
  --rot: 21.98deg;
  left: 353.7px;
  top: 128px;
  width: 73.99px;
  height: 74px;
}

/* ---------- Notes ---------- */

/* Figma bounding boxes, content centred and rotated inside (as exported) */
.m-draft,
.m-draft-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-hand);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.m-draft p,
.m-draft-ghost p {
  transform: rotate(0.65deg);
}

.m-draft {
  left: 1px;
  top: 1px;
  width: 32.18px;
  height: 16.36px;
  font-size: 13px;
  letter-spacing: -0.26px;
}

.m-draft-ghost {
  left: 21.67px;
  top: 2px;
  width: 11.17px;
  height: 15.12px;
  font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--paper);
}

.m-note {
  font-family: var(--font-mono);
  font-size: 7px;
  line-height: 9px;
  letter-spacing: -0.14px;
  text-align: right;
  white-space: nowrap;
}

.m-learn {
  --rot: -90deg;
  left: 364px;
  top: 66px;
  width: 66px;
  font-weight: 500;
}

.m-backend {
  --rot: -90.45deg;
  left: 373.64px;
  top: 83px;
  width: 82px;
  font-weight: 400;
}

.m-tagline {
  --rot: -12.5deg;
  left: 295px;
  top: 715.18px;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 10px;
  line-height: 12.5px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  opacity: 0.85;
}

.m-mantra {
  --rot: 20.81deg;
  left: 7.12px;
  top: 705px;
  width: 143.25px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 17px;
  letter-spacing: -0.2px;
  white-space: pre;
}