/* ------------------------------------------------------------------
   Arpita Parajuli — portfolio cover page.
   The page is a 1440 × 1024 artboard (the size of the Illustrator file) that
   scales to the width of the window. All positions below are in artboard px.
------------------------------------------------------------------- */

@font-face { font-family: "Dashing Unicorn"; src: url(/fonts/DashingUnicorn.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "Paint Marker"; src: url(/fonts/PaintMarker.otf) format("opentype"); font-display: block; }
@font-face { font-family: "Please Write Me A Song"; src: url(/fonts/PleaseWriteMeASong.ttf) format("truetype"); font-display: block; }
@font-face { font-family: "Source Sans Variable"; src: url(/fonts/SourceSansVariable.otf) format("opentype"); font-weight: 200 900; font-display: block; }

:root {
  --s: 1;                 /* artboard scale, set by js/app.js */
  --sage: #8fbcac;
  --cream: #fff2e8;
  --blue: #2f6d9a;
  --ink-warm: #30301b;
  --text: #000;           /* all Source Sans text */
  --explore-hover: #ffcc5a; /* "Explore My Work" colour while hovered (white at rest) */
  --field: #f3cbb7;
  --orange: #fba918;
  --red: #95261e;
}

html { background: var(--sage); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sage); overflow-x: hidden; }

.viewport {
  position: relative;
  width: calc(1440px * var(--s));
  height: calc(1024px * var(--s));
  margin: 0 auto;
  overflow: hidden;       /* the paper shapes bleed past the artboard, as in the design */
}

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 1024px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  /* defaults for body copy */
  --ff: "Source Sans Variable", "Source Sans 3", system-ui, sans-serif;
  --k: .8555;             /* baseline offset in em for line-height:1 (see .ln) */
  --fs: 14;
  --c: var(--text);
}

.base { position: absolute; left: 0; top: 0; width: 1440px; height: 1024px; display: block; }

/* ---- hover effects ----------------------------------------------------- */

/* "Explore My Work": white -> --explore-hover while the pointer is over the heading */
.explore {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  color: #fff;
  transition: color .25s ease;
}
.explore svg { display: block; width: 100%; height: 100%; overflow: visible; }
.explore:hover { color: var(--explore-hover); }

/* Cartoon portrait: while hovered it tilts left twice, pauses, and repeats; stops when the pointer
   leaves. The artwork (.shake) moves; the invisible outline (.hit) stays put so the hover target is
   stable. */
.avatar {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  pointer-events: none;
}
.avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.avatar .hit { fill: none; pointer-events: all; cursor: pointer; }
.avatar .shake { transform-box: fill-box; transform-origin: 50% 100%; }
.avatar:has(.hit:hover) .shake { animation: tilt 1.6s ease-in-out infinite; }

@keyframes tilt {
  0%, 60%, 100% { transform: rotate(0deg); }
  15%, 45% { transform: rotate(-9deg); }   /* tilt left, twice */
  30% { transform: rotate(0deg); }          /* back upright between the two tilts */
}                                           /* 60%-100%: pause */

/* ---- text -----------------------------------------------------------
   Illustrator gives each text run as a baseline origin (--x, --y). With
   line-height:1 the baseline sits --k em below the top of the box, where
   k = (1 − (ascent + descent)) / 2 + ascent for the font, so
   top = y − k·fontSize puts the baseline exactly on y. */
.ln {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc((var(--y) - var(--k) * var(--fs)) * 1px);
  margin: 0;
  font-family: var(--ff);
  font-size: calc(var(--fs) * 1px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--c);
  text-decoration: none;
}
.r { font-weight: 700; }   /* titles and years: originally Regular in the design, now Bold */

.rot { transform: rotate(var(--r)); transform-origin: 0 calc(var(--k) * var(--fs) * 1px); }

.name, .hd, .tools { --ff: "Dashing Unicorn", cursive; --k: .8413; font-weight: 400; }
.name { --fs: 60.08; --c: var(--blue); }
.hd { --fs: 24; --c: var(--blue); }
.hd.lg { --fs: 36; }
.tools { --fs: 36; --c: #fff; }

.role { --ff: "Please Write Me A Song", cursive; --k: .826; --fs: 23.03; --c: var(--ink-warm); font-weight: 400; }
.hint { --fs: 11; --c: var(--text); }
.bio .ln { --c: var(--text); }

.c16 { --fs: 16.15; --c: var(--text); }
.lbl { font-weight: 700; }
a.val { cursor: pointer; }
a.val:hover, a.val:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.flink { --fs: 13.6; --c: var(--text); }
a.flink:hover, a.flink:focus-visible { --c: #0d3654; }

.cv ul, footer .footer-links { margin: 0; padding: 0; list-style: none; }
.cv li { list-style: none; }

/* ---- stickers -------------------------------------------------------- */
.sticker {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  display: block;
}
.sticker svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sticker .pm { font-family: "Paint Marker", "Marker Felt", cursive; font-weight: 400; font-synthesis: none; }

.deco { pointer-events: none; }

.work {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .28s cubic-bezier(.3, 1.6, .5, 1);
}
.work:hover, .work:focus-visible { transform: rotate(-3deg) scale(1.07); z-index: 5; }
.work:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 28px; }

.drag {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.drag svg { pointer-events: none; }
.drag.dragging { cursor: grabbing; z-index: 30; transform: scale(1.06) rotate(-2deg); transition: transform .12s ease-out; }
.drag:focus-visible { outline: 2px dashed var(--blue); outline-offset: 2px; border-radius: 12px; }

/* ---- contact form ---------------------------------------------------- */
.ctl {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 3.82px;
  background: var(--field);
  transform: rotate(2.029deg);
  transform-origin: 0 0;
  padding: 0 0 0 7.33px;
  font: 400 13.71px/1 "Source Sans Variable", system-ui, sans-serif;
  color: var(--text);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.ctl::placeholder { color: var(--text); opacity: .5; }
.ctl:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.ctl.invalid { box-shadow: 0 0 0 2px var(--red); }
.ctl.msg { resize: none; padding: 5.2px 7px 0 7.33px; line-height: 17px; overflow: auto; }

.send {
  background: var(--orange);
  color: var(--red);
  font-weight: 700;
  text-align: center;
  padding: 0 0 0 2.6px;   /* the design sets the label 1.3px right of centre */
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.send:hover { filter: brightness(1.06); }
.send:active { transform: rotate(2.029deg) translateY(1px); }
.send:disabled { cursor: progress; filter: saturate(.6); }

.form-status {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  margin: 0;
  transform: rotate(var(--r));
  transform-origin: 0 0;
  font: 400 13px/1.2 "Source Sans Variable", system-ui, sans-serif;
  color: var(--text);
}
.form-status.is-error { color: var(--red); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

@media (prefers-reduced-motion: reduce) {
  .work, .send, .drag.dragging, .explore, .to-top, .hot, .hot.home .pop { transition: none; }
  .avatar:has(.hit:hover) .shake { animation: none; }
  .work:hover, .work:focus-visible { transform: none; }
}

/* ---- Projects page and project pages --------------------------------------
   The Figma frames are exported as images (1440 css px wide) and laid on the same scaled
   artboard as the home page; the links on top are real <a> elements. */
html:has(body.work-page) { background: var(--page-bg, var(--sage)); }
body.work-page { background: var(--page-bg, var(--sage)); }
.work-page .viewport { height: calc(var(--ph) * 1px * var(--s)); }
.page-stage { height: calc(var(--ph) * 1px); }
.slice { display: block; width: 1440px; height: auto; }
.slices { display: block; }

.hot {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  display: block;
  color: #000;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hot:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Corner avatar: no ring; it just pops up a little on hover. .pop is a soft-edged copy of the page image under it. */
.hot.home .pop {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 1440px auto;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
  transition: transform .26s cubic-bezier(.3, 1.8, .5, 1);
}
.hot.home:hover .pop, .hot.home:focus-visible .pop { transform: scale(1.28) translateY(-2px); }

.hot.proj { border-radius: 12px; transition: box-shadow .22s ease, background-color .22s ease; }
.hot.proj:hover, .hot.proj:focus-visible {
  background: rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 3px rgba(47, 109, 154, .6), 0 16px 30px rgba(31, 70, 60, .2);
}

.hot.more, .hot.full { border-radius: 999px; transition: background-color .2s ease; }
.hot.more:hover, .hot.more:focus-visible, .hot.full:hover, .hot.full:focus-visible { background: rgba(0, 0, 0, .07); }
.hot.more.visible {
  display: grid;
  place-items: center;
  color: #fff;
  font: 400 15px/1 var(--ff);
  background: rgba(255, 255, 255, .14);
}
.hot.more.visible:hover, .hot.more.visible:focus-visible { background: rgba(255, 255, 255, .26); }

/* back-to-top button (shown after scrolling a little) */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top.show:hover { background: #245a82; transform: translateY(-2px); }
.to-top:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---- sub pages (work/:slug, 404) ------------------------------------- */
.subpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: "Source Sans Variable", system-ui, sans-serif;
  color: var(--text);
}
.card {
  width: min(560px, 100%);
  background: var(--cream);
  padding: 40px 44px 44px;
  box-sizing: border-box;
  border-radius: 6px 22px 8px 18px;
  box-shadow: 10px 12px 0 rgba(171, 85, 36, .07);
  transform: rotate(-.8deg);
}
.card h1 { margin: 6px 0 10px; font: 400 56px/1.05 "Dashing Unicorn", cursive; color: var(--blue); }
.card .crumb { margin: 0; font-weight: 400; }
.card .soon { margin: 0 0 22px; font-size: 18px; font-weight: 400; }
.card a { color: var(--blue); }
.card .back {
  display: inline-block;
  background: var(--orange);
  color: var(--red);
  padding: 8px 22px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 400;
}