/* This layer holds everything on the work page EXCEPT the "Selected work"
   gallery. It slides in alongside the track during the landing->work
   transition (so it arrives in sync with the gallery), then js/horizontal-scroll.js
   clamps it in place for the rest of the scroll -- the gallery is the only
   piece that keeps moving after that. */
.work-fixed-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 1440px;
  height: 100vh;
  transform: translateX(1440px);
  pointer-events: none;
}

.work-fixed-layer .tag {
  pointer-events: auto;
}

/* ---------- bio ---------- */
.work-bio {
  position: absolute;
  left: 160px;
  top: 80px;
  width: 311px;
  height: 240px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 26px;
  background: var(--bg);
  pointer-events: auto;
}

.work-bio__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--font-impact);
  font-size: 14.3px;
  color: var(--blue);
  letter-spacing: -0.429px;
  line-height: normal;
  white-space: pre-wrap;
}

.work-bio__text p {
  margin: 0;
}

.work-bio__text p + p {
  margin-top: 6px;
}

.work-bio .tag {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--bg);
  border: 0.317px solid var(--red);
  border-radius: 3.165px;
  padding: 2.11px;
  font-family: "Monomaniac One", sans-serif;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--red);
  text-align: center;
  white-space: nowrap;
}

/* Figma's own coordinates for these two tags line up with its internal text
   engine, but the browser falls back to the system "Impact" font (no
   licensed Impact font file is available), which wraps a hair differently --
   these positions are nudged to match where the words actually land in the
   live DOM (measured via Range.getClientRects on the real text), not
   Figma's raw numbers. */
.work-bio .tag--intuit {
  left: 39px;
  top: 34px;
  width: 32.5px;
  height: 19.5px;
}

.work-bio .tag--platform-team {
  left: 23.4px;
  top: 52px;
  width: 81.9px;
  height: 19.5px;
}

/* Figma's own transform on this vector is rotate(180deg) + scaleY(-1), which
   algebraically cancels to a pure horizontal mirror (x negated, y untouched)
   -- scaleX(-1) reproduces that exactly with one transform instead of two. */
.work-bio__leader {
  position: absolute;
  left: 86.5px;
  top: 159.5px;
  width: 94px;
  height: 521.5px;
  pointer-events: auto;
}

.work-bio__leader-flip {
  position: relative;
  width: 94px;
  height: 521.5px;
  transform: scaleX(-1);
}

/* Figma's raw vector layout bounds (94x521.5) don't match the artwork's own
   stroke bounds (its viewBox is 102.638x531.638) -- rather than stretch the
   SVG to fit 94x521.5 (which would distort the dash spacing), it's placed at
   its natural size and nudged up by the same 1.5px Figma's own inset offset
   implies, so the dashes render undistorted. */
.work-bio__leader-img {
  position: absolute;
  left: 0;
  top: -1.5px;
  width: 102.638px;
  height: 531.638px;
  display: block;
  max-width: none;
}

/* ---------- side label (single pill) ---------- */
.work-side-label-divider {
  position: absolute;
  left: 1400px;
  top: -7px;
  width: 1px;
  height: 47.5px;
  background: var(--red);
}

.work-side-label-pill {
  position: absolute;
  left: 1391px;
  top: 40px;
  width: 18px;
  height: 120px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 1px;
  background: var(--bg);
  border: 0.3px solid var(--red);
  border-radius: 3px;
}

.work-side-label-pill p {
  flex: none;
  transform: rotate(-90deg);
  font-family: "Monomaniac One", sans-serif;
  font-size: 11px;
  color: var(--red);
  letter-spacing: -0.33px;
  text-align: right;
  white-space: pre;
}

/* Sits outside .track, after .work-fixed-layer in DOM, so its own stacking
   context paints above the fixed layer -- panned by its own GSAP tween in
   js/horizontal-scroll.js, kept in lockstep with .track. */
.gallery-layer {
  position: fixed;
  top: 0;
  left: 0;
}

/* ---------- floating "Intuit" badge (stays with the gallery, not the fixed layer) ----------
   Plain rotated white/red-bordered sticker, no ribbon graphic -- the earlier
   blue ribbon fill was a wrong guess made before an actual reference screenshot
   was available. */
.work-floating-tag {
  position: absolute;
  left: calc(var(--work-x) + 50px);
  top: 664px;
  width: 64px;
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1.5px solid var(--red);
  border-radius: 10px;
  transform: rotate(-20deg);
  z-index: 3;
}

.work-floating-tag__label {
  font-family: "Monomaniac One", sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.42px;
  color: var(--red);
  text-align: center;
}

/* ---------- selected projects (the only piece that keeps moving) ---------- */
.selected-projects {
  position: absolute;
  left: calc(var(--work-x) + 60px);
  top: 514px;
  width: 1789px;
  height: 286px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 0 20px;
}

.selected-projects__heading {
  flex: none;
  width: 220px;
  height: 100px;
  font-family: var(--font-impact);
  font-size: 60px;
  line-height: 50px;
  letter-spacing: -1.8px;
  color: var(--blue);
  white-space: nowrap;
}

.selected-projects__heading p {
  margin: 0;
}

/* align-self: flex-end (rather than the default stretch) keeps each card's
   own natural (unstretched) height bottom-anchored against the row -- so
   when project-card__image grows taller on hover, the card's height grows
   from that fixed bottom edge upward instead of overflowing downward past it. */
.project-card {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  align-self: flex-end;
}

/* The card's own chrome (bg/border/radius/padding/gap) stays fixed on hover --
   per Figma's own hover-state example, only the meta text and image inside
   scale up (2x), not the card shell itself. */
.project-card__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  box-sizing: border-box;
  background: #e3e9ff;
  border: 1px solid var(--blue);
  border-radius: 10px;
}

/* meta keeps its own fixed base width per card (set below) so it never
   overflows its image at rest; both the width and the padding-right double
   in lockstep with the 2x text/image growth on hover so it reads as one
   proportional scale-up, matching Figma's card-02 hover example. */
.project-card__meta {
  flex: none;
  width: var(--meta-w);
  padding-right: var(--meta-pr, 0px);
  box-sizing: border-box;
  font-family: "Monomaniac One", sans-serif;
  letter-spacing: -0.22px;
  text-transform: uppercase;
  line-height: 13px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-right 0.4s cubic-bezier(0.16, 1, 0.3, 1), line-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card__meta p {
  margin: 0;
  font-size: 11px;
  color: var(--blue);
  transition: font-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card__meta p.project-card__label {
  color: var(--red);
}

.project-card__image {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
  width: var(--img-w);
  height: var(--img-h);
  border-radius: var(--img-radius, 0px);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card__image img,
.project-card__image video {
  position: absolute;
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Chroma-keyed cards (green or white) and plain "crisp-video" cards alike:
   the raw video is just a hidden decode source -- js/project-video-chroma-key.js
   repaints it onto the canvas every frame (with the key color made
   transparent for the chroma-keyed ones), so only the canvas is seen. For
   crisp-video this also sidesteps a real hover-enlarge sharpness issue: the
   canvas redraws itself at the CURRENT size every frame, where the raw
   <video> being resized via layout (width/height, not transform) would
   otherwise get visibly softened by the browser's cheaper scaling filter
   while the resize transition is in progress. */
.chroma-key-green video,
.chroma-key-white video,
.crisp-video video {
  opacity: 0;
  pointer-events: none;
}

.chroma-key-green canvas,
.chroma-key-white canvas,
.crisp-video canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.project-card:hover .project-card__image {
  z-index: 2;
  width: calc(var(--img-w) * 2);
  height: calc(var(--img-h) * 2);
  border-radius: calc(var(--img-radius, 0px) * 2);
}

.project-card:hover .project-card__meta {
  width: calc(var(--meta-w) * 2);
  padding-right: calc(var(--meta-pr, 0px) * 2);
  line-height: 26px;
}

.project-card:hover .project-card__meta p {
  font-size: 22px;
}

.card-shadow {
  box-shadow:
    0 16px 32px -4px rgba(12, 12, 13, 0.1),
    0 4px 4px -4px rgba(12, 12, 13, 0.05);
}

/* ---------- card 1: Human Handoff ---------- */
/* --img-h matches the video's own aspect ratio (776x960) at --img-w exactly
   (151 * 960/776 = 186.8), so the box has no leftover letterbox space on
   any edge -- the video just fills it, full stop. */
.project-card--01 {
  --meta-w: 151px;
  --meta-pr: 30px;
  --img-w: 151px;
  --img-h: 186.8px;
  --img-radius: 8px;
}

/* ---------- card 2: done for you vision ---------- */
.project-card--02 {
  --meta-w: 243px;
  --meta-pr: 30px;
  --img-w: 243px;
  --img-h: 200px;
  --img-radius: 8px;
}

/* ---------- card 3: One Intuit app ---------- */
.project-card--03 {
  --meta-w: 165px;
  --meta-pr: 30px;
  --img-w: 165px;
  --img-h: 200px;
  --img-radius: 8px;
}

/* ---------- card 4: service blueprint ---------- */
.project-card--04 {
  --meta-w: 302px;
  --meta-pr: 30px;
  --img-w: 302px;
  --img-h: 200px;
}

/* ---------- card 5: launchpad ---------- */
.project-card--05 {
  --meta-w: 348px;
  --img-w: 348px;
  --img-h: 200px;
}

/* ---------- card 6: Intuit designer (emoji) ---------- */
.project-card--06 {
  --meta-w: 200px;
  --img-w: 200px;
  --img-h: 200px;
}