/* Allison Portfolio — pixel-matched to Figma */

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

html {
  margin: 0;
  padding: 0;
  background: #fff;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f4f7fb;
  font-family: Georgia, "Times New Roman", serif;
}

/*
  Home — fixed Figma canvas 1440×2330, uniformly scaled to the viewport.
  No per-element % / vw sizing (that warps stickers when aspect differs).
*/
body:has(.canvas-wrapper) {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #14243b;
}

.canvas-wrapper {
  position: relative;
  width: 100vw;
  /* height set in JS to scaled canvas height */
  overflow: visible;
  background: #14243b;
}

.design-canvas {
  position: absolute;
  left: 0; /* centered via JS left offset + scale(top-left) */
  top: 0;
  width: 1440px;
  height: 2968.32px; /* Figma page incl. new footer */
  margin-left: 0;
  background: #14243b;
  overflow: visible; /* allow sticker hover scale to peek out */
}

/* Landing frame — scrolls normally; snap handled by scripts/home-snap.js */
.home-hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 812px;
  z-index: 6;
  background: #14243b;
}

.home-hero__art {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 812px;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Intro · Figma Frame 17 · x:78 y:493 · 617×176 */
.home-intro {
  position: absolute;
  left: 78px;
  top: 493px;
  width: 617px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
  background: #14243b; /* cover baked PNG text */
  color: #ffffff;
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  pointer-events: none;
}

.home-intro__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0;
}

.home-intro__name {
  margin: 0;
  width: 100%;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  color: #ffffff;
}

.home-intro__role {
  margin: 0;
  width: 100%;
  font-size: 28px;
  font-weight: 300;
  line-height: normal;
  color: #ffffff;
}

.home-intro__role strong {
  font-weight: 700;
}

.home-intro__lede {
  margin: 0;
  width: 617px;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  line-height: normal;
  color: #ffffff;
}

.design-canvas__art {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 2968.32px;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  Lace · Figma 32:17053 · x:1108 w:332 h:812 (+ bow overflow -54 → 386 wide).
  Exact Figma length — do not extend below 812.
*/
.home-lace {
  position: absolute;
  left: 1054px; /* 1108 - 54 */
  top: 0;
  width: 386px;
  height: 812px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.home-lace__hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 386px;
  height: 812px;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.design-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.design-anchor {
  position: absolute;
  pointer-events: none;
}

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

.design-hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  line-height: 0;
  z-index: 3;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.design-hotspot--stamp {
  z-index: 5;
}

.design-hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.design-hotspot:hover {
  transform: translateY(-4px) scale(1.06);
}

.design-hotspot:active {
  transform: translateY(-1px) scale(1.02);
  transition-duration: 120ms;
}

.design-hotspot:focus-visible {
  outline: 2px solid #e1f1fd;
  outline-offset: 2px;
  transform: translateY(-4px) scale(1.06);
}

/* Home project cards · Figma Frame 20 / 19 — HTML (single surface, no PNG stack) */
.home-card {
  position: absolute;
  z-index: 4;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  transform-origin: center center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-card__inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 32px;
  background: #fff;
  border-radius: 30px;
  /* No border/shadow — navy page bg provides edge contrast (avoids double rim) */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.home-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 568 / 318.648; /* Figma media · 568×318.65 (Brilliant 576×323.14 same ratio) */
  border-radius: 21.2px;
  overflow: hidden;
  background: #e8e8e8;
  flex-shrink: 0;
}

.home-card__video,
.home-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Videos are 2000×2000; Figma FILL-crops them into the wide media slot from the top */
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.home-card__video {
  z-index: 1;
}

.home-card__body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.home-card__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-card__title {
  margin: 0;
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #14243b;
}

.home-card__desc {
  margin: 0;
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.35;
  color: #14243b;
}

.home-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Figma Frame 22/23 · 35 tall, 8px padding, stadium ends */
.home-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 35px;
  padding: 0 8px;
  border: 1px solid #14243b;
  border-radius: 16px; /* Figma Frame 22/23 tag pills */
  background: #fff;
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  color: #14243b;
  white-space: nowrap;
}

.home-card:hover {
  transform: scale(1.035);
}

.home-card:active {
  transform: scale(1.015);
  transition-duration: 120ms;
}

.home-card:focus-visible {
  outline: 2px solid #e1f1fd;
  outline-offset: 4px;
  transform: scale(1.035);
}

/*
  Card grid · Figma Frame 29 · My work px 64, pt 40, title→cards +84,
  cards 632×563.65 (rows 1–2), Brilliant 640×546.14 centered at x 400
*/
.home-card--terraform {
  left: 64px;
  top: 936px;
  width: 632px;
  height: 563.65px;
}

.home-card--anda {
  left: 744px;
  top: 936px;
  width: 632px;
  height: 563.65px;
}

.home-card--ose {
  left: 64px;
  top: 1539.65px;
  width: 632px;
  height: 563.65px;
}

.home-card--nabu {
  left: 744px;
  top: 1539.65px;
  width: 632px;
  height: 563.65px;
}

.home-card--brilliant {
  left: 400px;
  top: 2143.3px;
  width: 640px;
  height: 546.14px;
}

/* ---------- Custom cursor · Figma #14243B / #FFFFFF / #EDF2F5 ---------- */

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * {
    cursor: none !important;
  }
}

.custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
}

.custom-cursor.is-on {
  opacity: 1;
}

.custom-cursor__dot {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff; /* on navy / dark */
}

.custom-cursor.is-light .custom-cursor__dot {
  background: #14243b; /* on white / light (#EDF2F5, etc.) */
}

.custom-cursor.is-dot .custom-cursor__dot {
  display: block;
}

.custom-cursor__label {
  display: none;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 999px;
  background: #14243b;
  color: #ffffff;
  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.custom-cursor.is-label .custom-cursor__label {
  display: block;
}

/* Footer contact links — invisible hotspots over the baked footer art */
.footer-link {
  position: absolute;
  display: block;
  z-index: 4;
  cursor: pointer;
  background: transparent;
}

.footer-link:focus-visible {
  outline: 2px solid #e1f1fd;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .design-hotspot,
  .home-card {
    transition: none;
  }

  .design-hotspot:hover,
  .design-hotspot:active,
  .design-hotspot:focus-visible,
  .home-card:hover,
  .home-card:active,
  .home-card:focus-visible {
    transform: none;
  }
}

/* ---------- Work page · Figma frame 1512×1524 (scrollable) ---------- */

body:has(.work) {
  height: auto;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
}

.work {
  position: relative;
  display: block;
  width: 100%;
  /* Keep Figma proportions — width drives height (no viewport warp) */
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  overflow: visible; /* allow tab hover scale to peek out */
}

.work__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1512 / 1524;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Project cards · Frame 3 + brilliant cities */
.work-card {
  position: absolute;
  z-index: 1;
  display: block;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  transform-origin: center center;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.work-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.work-card:hover {
  transform: scale(1.035);
}

.work-card:focus-visible {
  outline: 2px solid #14243b;
  outline-offset: 4px;
  transform: scale(1.035);
}

/* Frame 3 · NABU · abs ≈ 210.01, 359.08, 1095×306.80 */
.work-card--nabu {
  left: calc(100% * 210.009353 / 1512);
  top: calc(100% * 359.075286 / 1524);
  width: calc(100% * 1095 / 1512);
  height: calc(100% * 306.803985 / 1524);
}

/* brilliant cities · abs ≈ 207.51, 829.15, 1095×309 */
.work-card--brilliant {
  left: calc(100% * 207.509338 / 1512);
  top: calc(100% * 829.150543 / 1524);
  width: calc(100% * 1095 / 1512);
  height: calc(100% * 309 / 1524);
}

@media (prefers-reduced-motion: reduce) {
  .work-card {
    transition: none;
  }

  .work-card:hover,
  .work-card:focus-visible {
    transform: none;
  }
}

.work-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.work-hotspot {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 2;
}

.work-hotspot--tab {
  line-height: 0;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.work-hotspot--tab img {
  display: block;
  width: 100%;
  height: auto; /* keep native aspect — never stretch/warp */
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.work-hotspot--tab:hover {
  transform: translateY(-4px) scale(1.06);
}

.work-hotspot--tab:active {
  transform: translateY(-1px) scale(1.02);
  transition-duration: 120ms;
}

.work-hotspot:focus-visible {
  outline: 2px solid #14243b;
  outline-offset: 2px;
}

.work-hotspot--tab:focus-visible {
  transform: translateY(-4px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .work-hotspot--tab {
    transition: none;
  }

  .work-hotspot--tab:hover,
  .work-hotspot--tab:active,
  .work-hotspot--tab:focus-visible {
    transform: none;
  }
}

/* home · Group 2 · x:57 y:0 w:140 — height from native asset aspect (no warp) */
.work-hotspot--home {
  left: calc(100% * 57 / 1512);
  top: calc(100% * 0 / 1524);
  width: calc(100% * 140 / 1512);
  height: auto;
}

/* about me · Group 4 — width-driven, native aspect (padded stamp 182.5×73) */
.work-hotspot--about {
  left: calc(100% * 237 / 1512);
  top: calc(100% * 0 / 1524);
  width: calc(100% * 174.5 / 1512);
  height: auto;
}

.work-hotspot--stamp {
  z-index: 5;
  line-height: 0;
  transform-origin: center center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.work-hotspot--stamp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.work-hotspot--stamp:hover {
  transform: translateY(-4px) scale(1.06);
}

.work-hotspot--stamp:active {
  transform: translateY(-1px) scale(1.02);
  transition-duration: 120ms;
}

/* footer linkedin · Frame 10 y:1356 + stamp y:72 → 1428 */
.work-hotspot--linkedin {
  left: calc(100% * 1336 / 1512);
  top: calc(100% * 1428 / 1524);
  width: calc(100% * 62 / 1512);
  height: calc(100% * 67 / 1524);
}

/* footer email · Frame 10 y:1356 + stamp y:73 → 1429 */
.work-hotspot--email {
  left: calc(100% * 1408 / 1512);
  top: calc(100% * 1429 / 1524);
  width: calc(100% * 61 / 1512);
  height: calc(100% * 67 / 1524);
}

@media (prefers-reduced-motion: reduce) {
  .work-hotspot--stamp {
    transition: none;
  }

  .work-hotspot--stamp:hover,
  .work-hotspot--stamp:active {
    transform: none;
  }
}

/* ---------- Inner pages (legacy placeholder; about uses styles/about.css) ---------- */

.page {
  min-height: 100svh;
  padding: 2rem clamp(1.25rem, 4vw, 3rem) 4rem;
}

.page__header {
  margin-bottom: 3rem;
}

.page__back {
  display: inline-block;
  width: min(148px, 28vw);
  line-height: 0;
  transition: transform 160ms ease;
}

.page__back img {
  width: 100%;
  height: auto;
}

.page__back:hover,
.page__back:focus-visible {
  transform: scale(1.04);
}

.page__back:focus-visible {
  outline: 2px solid #e1f1fd;
  outline-offset: 4px;
}

.page__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9eb6c4;
}

.page__title {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.page__lead {
  margin: 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #b7c4d6;
}