:root { color-scheme: light; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #f5f2ea; }

body {
  min-width: 1100px;
  margin: 0;
  overflow-x: hidden;
  background: #f5f2ea;
}

button, a { font: inherit; }

.portfolio { scroll-snap-type: y proximity; }

.folio-page {
  position: relative;
  width: 100vw;
  min-width: 1100px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  scroll-snap-align: start;
  background: #f5f2ea;
}

.page-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Text remains part of the original artwork. These transparent zones do not draw frames on hover. */
.text-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  cursor: default;
  outline: none;
}

/* 封面直接使用原始成稿，保证版式与提供图片完全一致。 */
.page-cover {
  isolation: isolate;
  background: #f5f2ea;
}
.page-cover > .page-art { visibility: visible; }
.page-cover .text-hotspot { display: none; }
.page-cover .cover-piece { display: none; }
.cover-piece {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
}
.cover-title-piece { left: 10.9%; top: 38.4%; width: 23.7%; z-index: 3; }
.cover-subtitle-piece { left: 11.1%; top: 55.8%; width: 20.3%; z-index: 3; opacity: .94; }
.cover-wordmark-piece { left: -2.5%; bottom: -2.6%; width: 105%; z-index: 1; opacity: .81; }
.cover-horse { right: 5.9%; top: 38.8%; width: 32.7%; opacity: .82; transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.cover-birds { right: 8.4%; top: 55.2%; width: 31%; opacity: .77; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.cover-rabbits { left: 44.4%; top: 3.5%; width: 10.6%; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.page-cover:hover .cover-horse { transform: translate3d(-1.1%, -1.5%, 0) rotate(-1.3deg); opacity: .94; }
.page-cover:hover .cover-birds { transform: translate3d(-1.6%, -2.2%, 0) rotate(.4deg); opacity: .96; }
.page-cover:hover .cover-rabbits { animation: cover-bunny-bob 1.45s ease-in-out infinite alternate; }
@keyframes cover-bunny-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* Transparent page slices: their base images have no matching content, so each can move independently. */
.slice-piece {
  position: absolute;
  z-index: 3;
  display: block;
  height: auto;
  cursor: default;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  user-select: none;
  -webkit-user-drag: none;
}

.slice-piece:hover { transform: translateY(-7px) scale(1.012); }
.portrait-piece:hover { transform: translateY(-9px) rotate(-.8deg) scale(1.012); }
.skill-piece:hover { transform: translateY(-8px) scale(1.016); }
.contact-qr-piece:hover { transform: translateY(-8px) scale(1.018); }

/* Profile slices */
.profile-heading-piece { left: 33.5%; top: 6.6%; width: 33.2%; }
.profile-job-piece { width: 20.2%; }
.profile-job-one-piece { left: 4.5%; top: 24.6%; }
.profile-job-two-piece { left: 23.8%; top: 43.5%; }
.profile-job-three-piece { left: 4.5%; top: 62.3%; }
.profile-job-four-piece { left: 26.6%; top: 81.1%; }
.profile-tools-piece { left: 63.8%; top: 77.2%; width: 13.4%; }
.profile-photo-piece { left: 63.8%; top: 46.8%; width: 13.2%; }
.profile-facts-piece { left: 79.8%; top: 46.8%; width: 15.4%; }

/* Skills slices */
.skills-heading-piece { left: 43.1%; top: 10.8%; width: 17.1%; }
.skill-piece { top: 33.6%; width: 18.6%; }
.skill-one-piece { left: 7.7%; }
.skill-two-piece { left: 30.3%; }
.skill-three-piece { left: 53.9%; }
.skill-four-piece { left: 76.1%; }

/* Contact slices */
.contact-qr-piece { width: 17.3%; }
.contact-red-piece { left: 29%; top: 35.5%; }
.contact-wechat-piece { left: 53.9%; top: 35.7%; }
.contact-email-piece { left: 41.3%; top: 91.3%; width: 17.4%; }

/* Composite layers keep the static directory identical to the supplied artwork. */
.catalogue-card {
  position: absolute;
  z-index: 2;
  margin: 0;
  isolation: isolate;
}

.catalogue-composite,
.catalogue-piece img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.catalogue-card:hover { z-index: 5; }

/* Individual slices reveal on hover at their original positions, then move independently. */
.catalogue-piece {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform-origin: center bottom;
  transition: opacity 150ms ease, transform 400ms cubic-bezier(.2,.8,.2,1), filter 400ms ease;
}

.catalogue-card:hover .catalogue-piece,
.catalogue-card:focus-within .catalogue-piece {
  opacity: 1;
  pointer-events: auto;
}

.catalogue-intro { z-index: 1; top: 0; left: 14%; width: 78%; cursor: pointer; }
.catalogue-main { z-index: 2; top: 5%; left: 7%; width: 78%; cursor: pointer; }
.catalogue-meta { z-index: 3; top: 66%; left: 7%; width: 77%; cursor: default; }
.catalogue-version-one { z-index: 2; top: 2%; left: 13%; width: 78%; cursor: pointer; }
.catalogue-main-version-two { top: 8%; }

.catalogue-intro:hover,
.catalogue-intro:focus-visible {
  z-index: 7;
  transform: translate3d(var(--intro-x, 13px), var(--intro-lift, -48px), 0) rotate(var(--intro-rotate, 1.7deg)) scale(1.035);
  filter: drop-shadow(0 18px 15px rgba(42, 35, 25, .18));
}

.catalogue-main:hover,
.catalogue-main:focus-visible {
  z-index: 7;
  transform: translate3d(var(--main-x, 0), var(--main-lift, -17px), 0) rotate(var(--main-rotate, -.6deg)) scale(1.018);
  filter: drop-shadow(0 13px 12px rgba(42, 35, 25, .16));
}

.catalogue-meta:hover {
  z-index: 8;
  transform: translate3d(var(--meta-x, 0), var(--meta-lift, -10px), 0) rotate(var(--meta-rotate, .5deg)) scale(1.022);
  filter: drop-shadow(0 12px 10px rgba(42, 35, 25, .15));
}

.catalogue-version-one:hover,
.catalogue-version-one:focus-visible {
  z-index: 7;
  transform: translate3d(-10px, -30px, 0) rotate(-1.5deg) scale(1.025);
  filter: drop-shadow(0 15px 13px rgba(42, 35, 25, .18));
}

.catalogue-card-9 .catalogue-composite { transition: transform 380ms cubic-bezier(.2,.8,.2,1), filter 380ms ease; }
.catalogue-card-9:hover .catalogue-composite { transform: translate3d(2px, -13px, 0) rotate(-.55deg) scale(1.018); filter: drop-shadow(0 16px 12px rgba(42, 35, 25, .16)); }
.catalogue-more-link { display: block; text-decoration: none; }
.catalogue-more-link:focus-visible { outline: 2px solid rgba(112, 92, 72, .72); outline-offset: 8px; border-radius: 3px; }

.catalogue-card-1 { left: 11.719%; top: 15.799%; width: 16.504%; --intro-x: 15px; --intro-lift: -54px; --intro-rotate: 2deg; --main-lift: -17px; --main-rotate: -.7deg; --meta-lift: -12px; --meta-rotate: .55deg; }
.catalogue-card-2 { left: 32.129%; top: 16.059%; width: 16.504%; --intro-x: -11px; --intro-lift: -47px; --intro-rotate: -1.7deg; --main-x: 3px; --main-lift: -15px; --main-rotate: .65deg; --meta-lift: -13px; --meta-rotate: -.7deg; }
.catalogue-card-3 { left: 51.953%; top: 14.670%; width: 17.529%; --intro-x: 13px; --intro-lift: -50px; --intro-rotate: 1.6deg; --main-x: -2px; --main-lift: -18px; --main-rotate: -.55deg; --meta-x: 2px; --meta-lift: -14px; --meta-rotate: .65deg; }
.catalogue-card-4 { left: 72.607%; top: 16.059%; width: 16.650%; --intro-x: -12px; --intro-lift: -44px; --intro-rotate: -1.85deg; --main-x: 2px; --main-lift: -16px; --main-rotate: .6deg; --meta-lift: -11px; --meta-rotate: -.6deg; }
.catalogue-card-5 { left: 11.865%; top: 49.826%; width: 16.211%; --intro-x: 14px; --intro-lift: -48px; --intro-rotate: 1.8deg; --main-lift: -15px; --main-rotate: -.65deg; --meta-x: -2px; --meta-lift: -13px; --meta-rotate: .65deg; }
.catalogue-card-6 { left: 26.904%; top: 50.694%; width: 17.432%; --intro-x: -10px; --intro-lift: -46px; --intro-rotate: -1.65deg; --main-x: 3px; --main-lift: -16px; --main-rotate: .65deg; --meta-lift: -12px; --meta-rotate: -.6deg; }
.catalogue-card-7 { left: 42.432%; top: 50.868%; width: 17.529%; --intro-x: 14px; --intro-lift: -51px; --intro-rotate: 1.9deg; --main-x: -2px; --main-lift: -15px; --main-rotate: -.7deg; --meta-x: 2px; --meta-lift: -13px; --meta-rotate: .7deg; }
.catalogue-card-8 { left: 58.398%; top: 50.608%; width: 16.895%; --intro-x: -12px; --intro-lift: -48px; --intro-rotate: -1.8deg; --main-x: 3px; --main-lift: -16px; --main-rotate: .55deg; --meta-lift: -12px; --meta-rotate: -.65deg; }
.catalogue-card-9 { left: 75.342%; top: 54.427%; width: 14.111%; }

.modal {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 42px;
  background: rgba(19,17,15,.82);
  backdrop-filter: blur(8px);
}

.modal.is-open { display: flex; }

.modal-close {
  position: fixed;
  z-index: 12;
  top: 22px;
  right: 27px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #f4f1e9;
  background: rgba(0,0,0,.26);
  cursor: pointer;
  font-size: 31px;
  line-height: 33px;
}

.modal-frame { display: none; max-width: 100%; max-height: 100%; }
.modal-frame.is-visible { display: block; }
.modal-image-frame img { display: block; max-width: min(90vw, 1240px); max-height: 86vh; object-fit: contain; box-shadow: 0 25px 65px rgba(0,0,0,.35); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}