:root {
  --design-scale: 1;
  --navy: #003b7d;
  --blue: #1c62fe;
  --neon: #00efa8;
}

@font-face {
  font-family: "Saira Extra Condensed";
  src: url("./assets/fonts/SairaExtraCondensed-Thin.ttf") format("truetype");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--navy);
  background: #fff;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
}

button,
a { font: inherit; }

img { display: block; }

.portfolio { width: 100%; background: #fff; }

.design-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

.canvas {
  position: relative;
  width: 1920px;
  transform: translateX(max(0px, calc((100vw - 1920px) / 2))) scale(var(--design-scale));
  transform-origin: top left;
}

.portfolio-canvas {
  height: 4000px;
  overflow: hidden;
  background: #fff;
}

.background,
.hero-divider,
.hero-portrait,
.hero-title,
.hero-name,
.hero-star,
.hero-years,
.hero-cover,
.contact,
.paper-flight,
.experience-heading,
.experience-portrait,
.experience-name,
.experience-star,
.profile-list,
.experience-card,
.skills-block,
.contents-stage,
.contents-heading,
.work-card { position: absolute; }

.background { z-index: 0; pointer-events: none; }
.experience-background { left: -2px; top: 674px; width: 1920px; height: 4602px; }
.experience-line { z-index: 1; pointer-events: none; }
.line-one { left: 0; top: 1078px; width: 1564px; height: 1137px; }
.line-two { left: 0; top: 1799px; width: 1134px; height: 1503px; }
.hero-background { z-index: 2; left: 0; top: 0; width: 813px; height: 753px; }

/* Hero - exact Figma page coordinates */
.hero-divider { z-index: 3; left: 0; top: 833px; width: 1920px; height: 20px; transform-origin: left center; }
.hero-portrait { z-index: 4; left: 1531px; top: 604px; width: 128px; height: 367px; transform-origin: 50% 38%; }
.hero-title { z-index: 3; left: 240px; top: 0; width: 1388px; height: 849px; transform-origin: left center; }
.hero-name { z-index: 5; left: 934px; top: 657px; width: 434px; height: 131px; transform-origin: center; }
.hero-years { z-index: 4; left: 335px; top: 521px; width: 503px; height: 166px; transform-origin: center; }
.hero-cover { z-index: 5; left: 1267px; top: 223px; width: 270px; height: 231px; }

.hero-star { z-index: 4; pointer-events: none; transform-origin: center; }
.star-one { left: 1220px; top: 54px; width: 25px; height: 25px; animation-delay: .7s; }
.star-two { left: 1628px; top: 266px; width: 12px; height: 12px; animation-delay: 1.2s; }
.star-three { left: 1765px; top: 626px; width: 12px; height: 13px; animation-delay: .2s; }
.star-four { left: 1561px; top: 440px; width: 24px; height: 25px; animation-delay: 1s; }
.star-five { left: 1022px; top: 130px; width: 81px; height: 81px; animation-delay: .5s; }
.star-six { left: 1640px; top: 422px; width: 98px; height: 99px; animation-delay: .8s; }
.star-seven { left: 1426px; top: 68px; width: 254px; height: 247px; }

.contact {
  z-index: 5;
  top: 874px;
  height: 45px;
  margin: 0;
  color: var(--navy);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 45px;
  letter-spacing: 0;
}

.contact a,
.contact > span { position: relative; display: block; height: 45px; color: inherit; text-decoration: none; white-space: nowrap; }
.contact img { position: absolute; object-fit: contain; }
.contact a > span,
.contact > span > span { position: absolute; top: 0; }
.contact-phone { left: 335px; width: 267px; }
.contact-phone img { left: 0; top: 6px; width: 33px; height: 33px; }
.contact-phone a > span { left: 55px; }
.contact-wechat { left: 743px; width: 190px; }
.contact-wechat img { left: 0; top: 6px; width: 41px; height: 33px; }
.contact-wechat > span > span { left: 61px; }
.contact-email { left: 1073px; width: 387px; }
.contact-email img { left: 0; top: 9px; width: 35px; height: 28px; }
.contact-email a > span { left: 58px; }
.contact a { transition: color .22s cubic-bezier(.16, 1, .3, 1); }
.contact a:hover { color: var(--neon); }
.contact a:focus-visible { color: var(--neon); outline: 2px solid var(--neon); outline-offset: 8px; }

/* Scroll-linked paper flight between the introduction and experience areas. */
.paper-flight {
  z-index: 4;
  left: 240px;
  top: 815px;
  width: 1920px;
  height: 560px;
  overflow: visible;
  pointer-events: none;
}

.paper-flight__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.paper-flight__guide {
  fill: none;
  stroke: none;
}

.paper-flight__trail {
  fill: none;
  stroke: #85a5c0;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  visibility: hidden;
  vector-effect: non-scaling-stroke;
}

.paper-flight__plane {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: auto;
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 50%;
}

.paper-flight__plane path {
  fill: url(#paper-flight-plane-fill);
  stroke: #85a5c0;
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.paper-flight__plane .paper-flight__fold {
  fill: none;
}

.paper-flight__wing {
  transform-box: fill-box;
  transform-origin: 88% 50%;
}

/* Experience - exact Figma page coordinates */
.experience-heading { z-index: 3; left: 243px; top: 1182px; width: 365.5px; height: 61.5px; }
.experience-portrait { z-index: 3; left: 243px; top: 1347px; width: 275px; height: 253px; }
.experience-name { z-index: 3; left: 575px; top: 1339px; width: 394px; height: 66px; }

.profile-list {
  z-index: 3;
  top: 1439px;
  left: 575px;
  width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--navy);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.profile-list li { position: relative; height: 37px; padding-left: 26px; white-space: nowrap; }
.profile-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon);
}

.experience-star { z-index: 4; pointer-events: none; transform-origin: center; }
.star-jm { left: 426px; top: 1666px; width: 82px; height: 83px; animation-delay: .6s; }
.star-mms { left: 1463px; top: 1384px; width: 128px; height: 86px; animation-delay: 1.1s; }
.star-ys { left: 1345px; top: 2085px; width: 155px; height: 139px; animation-delay: .25s; }

.experience-card {
  z-index: auto;
  isolation: auto;
  color: var(--navy);
  font-family: "Alibaba PuHuiTi 2.0", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.card-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transform-origin: center; }
.card-copy { position: absolute; z-index: 4; transform-origin: left top; }
.card-copy p { margin: 0; }
.role { height: 94px; white-space: nowrap; }
.role strong { color: var(--blue); font-size: 36px; font-weight: 900; line-height: 42px; }
.role span { margin-left: 25px; color: var(--navy); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 24px; font-weight: 700; line-height: 34px; vertical-align: 4px; }
.card-copy h2 { position: absolute; left: 0; top: 48px; margin: 0; color: var(--navy); font-size: 32px; font-weight: 900; line-height: 42px; white-space: nowrap; }
.description { position: absolute; margin: 0; color: var(--navy); font-size: 22px; font-weight: 400; line-height: 34px; letter-spacing: 0; }

.card-first { left: 869px; top: 1470px; width: 864px; height: 557px; }
.card-first .card-copy { left: 165px; top: 71px; width: 540px; }
.card-first .description { left: 0; top: 100px; width: 540px; font-size: 22px; line-height: 32px; }

.card-second { left: 177px; top: 1749px; width: 943px; height: 662px; }
.card-second .card-copy { left: 211px; top: 91px; width: 625px; }
.card-second .description { left: 0; top: 100px; width: 625px; font-size: 22px; line-height: 32px; }

.card-third { left: 815px; top: 2220px; width: 918px; height: 610px; }
.card-third .card-copy { left: 175px; top: 73px; width: 620px; }
.card-third .description { left: 0; top: 100px; width: 620px; font-size: 22px; line-height: 32px; }

.skills-block { z-index: 3; left: 243px; top: 2475px; width: 504px; }
.skills-heading { width: 192px; height: 67px; }
.skills-chart { position: absolute; left: 138px; top: 67px; width: 366.5px; height: 389px; }

/* Contents - exact values copied from the 1920 × 2053 Figma frame */
.contents-stage {
  z-index: 3;
  left: 0;
  top: 2645px;
  width: 1920px;
  height: 2053px;
}

.contents-heading {
  z-index: 4;
  left: 240px;
  top: 419px;
  width: 434px;
  height: 80px;
}

.work-card {
  z-index: 4;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), filter .32s cubic-bezier(.16, 1, .3, 1);
  touch-action: manipulation;
}

.work-card-flight-cue {
  position: fixed;
  z-index: 45;
  top: 0;
  left: 0;
  display: block;
  width: 58px;
  height: 36px;
  color: #85a5c0;
  pointer-events: none;
  will-change: transform, opacity;
}

.work-card-flight-cue svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-card-flight-cue__trail {
  stroke-width: 1;
}

.work-card-flight-cue__plane {
  fill: url(#work-card-flight-fill);
  stroke-width: 1.4;
}

.work-card-flight-cue__fold {
  stroke-width: 1.15;
}

.work-card-visual {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  transform-origin: inherit;
}

.work-card-line,
.work-card-panel-back,
.work-card-label,
.work-card-photo,
.work-card-info,
.work-card-booklet,
.work-card-cover {
  position: absolute;
  display: block;
}

.work-card-line {
  z-index: 0;
  height: 0;
  border-top: solid #013b7d;
  pointer-events: none;
}

.work-card-info {
  z-index: 1;
  object-fit: fill;
  pointer-events: none;
}

.work-card-booklet {
  z-index: 2;
  width: 235.778px;
  height: 223.994px;
  cursor: pointer;
}

.work-card-panel-back {
  z-index: 1;
  left: 5.976px;
  top: 16.376px;
  width: 185.395px;
  height: 207.619px;
  border: .714px solid #003b7d;
  border-radius: 10.713px 0 0 12.856px;
  background: linear-gradient(73.747deg, #baecfd 35.336%, #fff 99.009%);
}

.work-card-photo {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.work-card-photo > span {
  position: relative;
  display: block;
  overflow: hidden;
  flex: none;
}

.work-card-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.work-card-cover {
  z-index: 3;
  left: 6.11px;
  top: 1px;
  width: 175.188px;
  height: 222.423px;
  transform-origin: left center;
  pointer-events: none;
}

.work-card-cover > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.work-card-label {
  z-index: 1;
  left: -.11px;
  top: 27px;
  display: flex;
  width: 92px;
  height: 176px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.work-card-label > span {
  color: transparent;
  background: linear-gradient(90deg, #003b7d 61.06%, rgba(0, 59, 125, 0));
  background-clip: text;
  font-family: "Saira Extra Condensed", sans-serif;
  font-size: 58.484px;
  font-weight: 100;
  line-height: 92px;
  letter-spacing: -.5848px;
  white-space: nowrap;
  transform: rotate(90deg);
}

.work-card:focus-visible { outline: 2px solid var(--neon); outline-offset: 5px; }

.work-card-1 {
  left: 240px;
  top: 691px;
  width: 684.778px;
  height: 225.394px;
  transform-origin: center;
}
.work-card-1 .work-card-line { left: 0; top: 6px; width: 434px; border-top-width: .714px; }
.work-card-1 .work-card-info { left: 0; top: 24px; width: 363.332px; height: 201.394px; }
.work-card-1 .work-card-booklet { left: 449px; top: 0; }
.work-card-1 .photo-a { left: 96.32px; top: 24px; width: 125.14px; height: 147.641px; }
.work-card-1 .photo-a > span { width: 91.977px; height: 126.085px; transform: rotate(17.19deg); }
.work-card-1 .photo-a img { height: 129.6%; }
.work-card-1 .photo-b { left: 94.11px; top: 50.8px; width: 139.937px; height: 147.461px; }
.work-card-1 .photo-b > span { width: 92.201px; height: 116.203px; transform: rotate(32.19deg); }
.work-card-1 .photo-b img { height: 140.89%; }

.work-card-2 {
  left: 240px;
  top: 970px;
  width: 684.778px;
  height: 230.491px;
  transform-origin: center;
}
.work-card-2 .work-card-line { left: 0; top: 0; width: 434px; border-top-width: .714px; }
.work-card-2 .work-card-info { left: 0; top: 18px; width: 400.733px; height: 212.491px; }
.work-card-2 .work-card-booklet { left: 449px; top: 8px; }
.work-card-2 .photo-a { left: 78.71px; top: 28.75px; width: 134.657px; height: 139.85px; }
.work-card-2 .photo-a > span { width: 112.237px; height: 118.994px; transform: rotate(12.08deg); }
.work-card-2 .photo-a img { top: -39.27%; height: 646.06%; }
.work-card-2 .photo-b { left: 64.58px; top: 42.34px; width: 162.278px; height: 161.245px; }
.work-card-2 .photo-b > span { width: 121.4px; height: 119.026px; transform: rotate(27.08deg); }
.work-card-2 .photo-b img { height: 308.98%; }

.work-card-3 {
  left: 985px;
  top: 422px;
  width: 717.778px;
  height: 223.994px;
  transform-origin: center;
}
.work-card-3 .work-card-line { left: 0; top: 3px; width: 466px; border-top-width: .74px; }
.work-card-3 .work-card-info { left: 0; top: 20px; width: 450.054px; height: 199.75px; }
.work-card-3 .work-card-booklet { left: 482px; top: 0; }
.work-card-3 .photo-a { left: 98.37px; top: 16.93px; width: 124.213px; height: 126.608px; }
.work-card-3 .photo-a > span { width: 97.87px; height: 101.56px; transform: rotate(17.77deg); }
.work-card-3 .photo-b { left: 98.94px; top: 48.06px; width: 136.835px; height: 138.11px; }
.work-card-3 .photo-b > span { width: 97.35px; height: 101.57px; transform: rotate(32.77deg); }

.work-card-4 {
  left: 985px;
  top: 696px;
  width: 719.778px;
  height: 223.994px;
  transform-origin: center;
}
.work-card-4 .work-card-line { left: 0; top: 0; width: 466px; border-top-width: .74px; }
.work-card-4 .work-card-info { left: 0; top: 17px; width: 333.739px; height: 202.216px; }
.work-card-4 .work-card-booklet { left: 484px; top: 0; }
.work-card-4 .photo-a { left: 92.63px; top: 21px; width: 134.906px; height: 134.906px; }
.work-card-4 .photo-a > span { width: 108.965px; height: 108.965px; transform: rotate(16.1deg); }
.work-card-4 .photo-b { left: 73px; top: 36.2px; width: 158.351px; height: 154.896px; }
.work-card-4 .photo-b > span { width: 119.174px; height: 109.009px; transform: rotate(31.1deg); }

.work-card-5 {
  left: 985px;
  top: 970px;
  width: 719.778px;
  height: 229.669px;
  transform-origin: center;
}
.work-card-5 .work-card-line { left: 0; top: 0; width: 466px; border-top-width: .74px; }
.work-card-5 .work-card-info { left: 0; top: 18px; width: 357.988px; height: 211.669px; }
.work-card-5 .work-card-booklet { left: 484px; top: 0; }
.work-card-5 .photo-a { left: 88.96px; top: 22px; width: 129.17px; height: 129.17px; }
.work-card-5 .photo-a > span { width: 105.734px; height: 105.734px; transform: rotate(14.75deg); }
.work-card-5 .photo-b { left: 79px; top: 29.9px; width: 156.695px; height: 151.37px; }
.work-card-5 .photo-b > span { width: 120.051px; height: 105.733px; transform: rotate(29.75deg); }

@media (hover: hover) {
  .hero-portrait:hover { transform: translate3d(-3px, -5px, 0) scale(1.045) rotate(1.5deg); }
  .experience-card:hover .card-art { transform: scale(1.012); }
  .experience-card:hover .card-copy { transform: translate3d(0, -4px, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-star,
  .hero-portrait,
  .work-card,
  .work-card-visual,
  .work-card-cover,
  .experience-card .card-art,
  .experience-card .card-copy,
  .experience-star,
  .paper-flight__plane,
  .paper-flight__wing { will-change: transform, opacity; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-flight,
  .work-card-flight-cue { display: none; }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}