/* ===== RESET & BASE ===== */

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

html.lenis, html.lenis body {

  height: auto;

}

.lenis.lenis-smooth {

  scroll-behavior: auto !important;

}

.lenis.lenis-smooth [data-lenis-prevent] {

  overscroll-behavior: contain;

}

.lenis.lenis-stopped {

  overflow: hidden;

}

.lenis.lenis-scrolling iframe {

  pointer-events: none;

}



html, body { height: 100%; }

html { 

  scroll-behavior: smooth; 

  overflow-x: hidden; 

  background: #000;

}

body { 

  background: #000; 

  color: #fff; 

  font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif; 

  -webkit-font-smoothing: antialiased; 

}



/* completely removed film grain */



/* ===== SLIDE SECTIONS ===== */

.slide {

  width: 100vw;

  height: 100vh;

  height: 100dvh;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #000;

}

.slide-bg {

  position: absolute;

  inset: 0;

  background-color: #000;

  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

  opacity: 0;

  transform: scale(1.05); /* initial scale for cinematic reveal */

}

.slide.animate-in .slide-bg {

  opacity: 1;

  transform: scale(1);

}



.slide-bg img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  pointer-events: none;

  user-select: none;

  opacity: 0;

  transition: opacity 0.5s ease;

}

.slide-bg img.loaded {

  opacity: 1;

}



/* GIF slides - cover full viewport */

.slide--gif .slide-bg img {

  object-fit: cover;

}



/* ===== COVER SLIDE ===== */

.slide--cover {

  cursor: pointer;

}

.slide--cover .cover-overlay {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  padding: 8vh 6vw;

  z-index: 2;

}

.slide--cover .cover-overlay img.logo-overlay {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.9;

  pointer-events: none;

}

.slide--cover .scroll-hint {

  position: absolute;

  bottom: 6vh;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  animation: pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  opacity: 0.6;

}

.slide--cover .scroll-hint span {

  font-size: 11px;

  letter-spacing: 4px;

  text-transform: uppercase;

}

@keyframes pulse {

  0%, 100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }

  50% { opacity: 0.8; transform: translateX(-50%) translateY(8px); }

}



/* ===== NAVIGATION DOTS ===== */

.nav-dots {

  position: fixed;

  right: 24px;

  top: 50%;

  transform: translateY(-50%);

  z-index: 100;

  display: flex;

  flex-direction: column;

  gap: 8px;

  transition: opacity 0.4s ease;

}

.nav-dots.hidden { opacity: 0; pointer-events: none; }

.nav-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: rgba(255,255,255,0.2);

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  border: none;

  padding: 0;

  position: relative;

}

.nav-dot::after {

  content: '';

  position: absolute;

  inset: -6px;

  border-radius: 50%;

}

.nav-dot:hover { background: rgba(255,255,255,0.7); transform: scale(1.5); }

.nav-dot.active { 

  background: #fff; 

  transform: scale(2); 

  box-shadow: 0 0 10px rgba(255,255,255,0.5);

}

.nav-dot[data-section]::before {

  content: attr(data-label);

  position: absolute;

  right: 24px;

  top: 50%;

  transform: translateY(-50%);

  white-space: nowrap;

  font-size: 10px;

  letter-spacing: 1.5px;

  opacity: 0;

  transition: opacity 0.3s, transform 0.3s;

  pointer-events: none;

  background: rgba(0,0,0,0.85);

  backdrop-filter: blur(4px);

  padding: 4px 10px;

  border-radius: 4px;

  border: 1px solid rgba(255,255,255,0.1);

}

.nav-dot:hover::before { opacity: 1; transform: translateY(-50%) translateX(-4px); }



/* ===== TOP BAR (GLASSMORPHISM) ===== */

.top-bar {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 99;

  padding: 20px 36px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);

  opacity: 0;

  transition: opacity 0.6s ease, transform 0.6s ease;

  transform: translateY(-10px);

  pointer-events: none;

}

.top-bar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.top-bar .brand {

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  text-shadow: 0 2px 10px rgba(0,0,0,0.5);

}

.top-bar .actions {

  display: flex;

  gap: 16px;

  align-items: center;

}

.top-bar .actions button {

  background: rgba(255,255,255,0.05);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  border: 1px solid rgba(255,255,255,0.1);

  color: #fff;

  padding: 8px 16px;

  border-radius: 6px;

  font-size: 12px;

  letter-spacing: 1px;

  cursor: pointer;

  transition: all 0.3s ease;

  font-family: inherit;

  display: flex;

  align-items: center;

  gap: 8px;

}

.top-bar .actions button:hover {

  background: rgba(255,255,255,0.15);

  border-color: rgba(255,255,255,0.3);

  transform: translateY(-1px);

}

.top-bar .actions button i {

  width: 14px;

  height: 14px;

}



.slide-counter {

  font-size: 12px;

  opacity: 0.7;

  letter-spacing: 2px;

  font-variant-numeric: tabular-nums;

  margin-right: 8px;

}



/* ===== PROGRESS BAR ===== */

.progress-bar {

  position: fixed;

  top: 0;

  left: 0;

  height: 2px;

  background: rgba(255,255,255,0.8);

  box-shadow: 0 0 10px rgba(255,255,255,0.5);

  z-index: 101;

  transition: width 0.1s linear; /* Responsive to scroll */

}



/* ===== LIGHTBOX ===== */

.lightbox {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.98);

  backdrop-filter: blur(10px);

  z-index: 200;

  display: none;

  align-items: center;

  justify-content: center;

  cursor: zoom-out;

  opacity: 0;

  transition: opacity 0.4s ease;

}

.lightbox.active { display: flex; opacity: 1; }

.lightbox img {

  max-width: 95vw;

  max-height: 95vh;

  object-fit: contain;

  transform: scale(0.95);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.lightbox.active img {

  transform: scale(1);

}

.lightbox .close-btn {

  position: absolute;

  top: 32px;

  right: 32px;

  width: 44px;

  height: 44px;

  background: rgba(255,255,255,0.1);

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;

  font-size: 24px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}

.lightbox .close-btn:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }



/* ===== KEYBOARD HINTS ===== */

.keyboard-hint {

  position: fixed;

  bottom: 32px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 98;

  display: flex;

  gap: 20px;

  opacity: 0;

  transition: opacity 0.8s ease;

  pointer-events: none;

}

.keyboard-hint.visible { opacity: 0.4; }

.keyboard-hint span {

  display: flex;

  align-items: center;

  gap: 8px;

}

.keyboard-hint kbd {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 28px;

  height: 26px;

  padding: 0 8px;

  background: rgba(255,255,255,0.1);

  border: 1px solid rgba(255,255,255,0.2);

  border-radius: 4px;

  font-size: 11px;

  font-family: inherit;

  color: #fff;

  box-shadow: 0 2px 0 rgba(0,0,0,0.5);

}

.keyboard-hint .hint-label {

  font-size: 10px;

  letter-spacing: 1px;

  text-transform: uppercase;

}



/* ===== CINEMATIC LOADER ===== */

.loader {

  position: fixed;

  inset: 0;

  background: #000;

  z-index: 999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.loader.done { opacity: 0; transform: scale(1.05); pointer-events: none; }

.loader-counter {

  font-size: 48px;

  font-weight: 300;

  letter-spacing: 8px;

  font-variant-numeric: tabular-nums;

  margin-bottom: 24px;

  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.3) 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.loader-bar {

  width: 240px;

  height: 1px;

  background: rgba(255,255,255,0.1);

  position: relative;

  overflow: hidden;

}

.loader-bar-fill {

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  background: #fff;

  transition: width 0.3s ease;

  box-shadow: 0 0 10px #fff;

}

.loader-text {

  margin-top: 24px;

  font-size: 10px;

  letter-spacing: 6px;

  text-transform: uppercase;

  opacity: 0.4;

}



/* ===== OVERVIEW MODE (STAGGERED ANIMATION) ===== */

.overview {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.95);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  z-index: 150;

  display: none;

  flex-direction: column;

  overflow-y: auto;

  opacity: 0;

  transition: opacity 0.5s ease;

}

.overview.active { display: flex; opacity: 1; }



.overview-header {

  position: sticky;

  top: 0;

  padding: 24px 40px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);

  z-index: 2;

  border-bottom: 1px solid rgba(255,255,255,0.05);

}

.overview-title {

  font-size: 13px;

  letter-spacing: 4px;

  text-transform: uppercase;

  font-weight: 600;

  opacity: 0.8;

}

.overview-close {

  background: rgba(255,255,255,0.1);

  border: 1px solid rgba(255,255,255,0.2);

  color: #fff;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}

.overview-close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }



.overview-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 24px;

  padding: 40px;

}

.overview-item {

  aspect-ratio: 16 / 9;

  background: #111;

  border-radius: 6px;

  overflow: hidden;

  cursor: pointer;

  position: relative;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

  border: 1px solid rgba(255,255,255,0.05);

  opacity: 0;

  transform: translateY(20px);

}

.overview.active .overview-item {

  animation: staggerFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}

@keyframes staggerFadeUp {

  to { opacity: 1; transform: translateY(0); }

}



.overview-item:hover {

  transform: translateY(-8px) scale(1.02);

  box-shadow: 0 20px 40px rgba(0,0,0,0.8);

  border-color: rgba(255,255,255,0.2);

  z-index: 10;

}

.overview-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease, filter 0.6s ease;

  filter: brightness(0.8);

}

.overview-item:hover img {

  transform: scale(1.05);

  filter: brightness(1);

}

.overview-item .overview-caption {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  padding: 24px 16px 12px;

  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);

  font-size: 12px;

  letter-spacing: 1px;

  transform: translateY(10px);

  opacity: 0;

  transition: all 0.3s ease;

}

.overview-item:hover .overview-caption {

  transform: translateY(0);

  opacity: 1;

}

.overview-item .overview-num {

  position: absolute;

  top: 12px;

  left: 12px;

  font-size: 10px;

  opacity: 0.9;

  font-variant-numeric: tabular-nums;

  background: rgba(0,0,0,0.6);

  backdrop-filter: blur(4px);

  padding: 4px 8px;

  border-radius: 4px;

}



/* ===== SLIDE 1 & SLIDE 2 CINEMATIC TYPE ===== */

.slide--code .slide-bg {

  background: #000; /* Deep black void */

}



/* Slide 1 (Cover) */

.cinematic-cover {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  padding: 8vh 6vw;

  z-index: 10;

  color: #fff;

}

.cover-top-nav {

  display: flex;

  justify-content: space-between;

  text-transform: uppercase;

  font-size: 11px;

  letter-spacing: 2px;

  font-weight: 500;

  opacity: 0;

  transform: translateY(-20px);

  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);

  transition-delay: 0.8s;

}

.slide.animate-in .cover-top-nav {

  opacity: 0.8;

  transform: translateY(0);

}

.cover-top-nav .nav-item {

  display: flex;

  align-items: center;

}



.cover-middle {

  margin: auto 0;

  display: flex;

  flex-direction: column;

  gap: 32px;

}

.cover-year {

  font-size: 14px;

  font-weight: 600;

  opacity: 0;

  transform: translateX(-30px);

  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);

  transition-delay: 0.4s;

}

.slide.animate-in .cover-year {

  opacity: 0.9;

  transform: translateX(0);

}

.cover-title {

  font-size: clamp(60px, 12vw, 150px);

  line-height: 0.9;

  letter-spacing: -2px;

  font-weight: 700;

  margin: 0;

  filter: blur(20px);

  opacity: 0;

  transform: scale(0.95) translateY(20px);

  transition: filter 1.6s cubic-bezier(0.16,1,0.3,1), opacity 1.6s cubic-bezier(0.16,1,0.3,1), transform 1.6s cubic-bezier(0.16,1,0.3,1);

  transition-delay: 0.1s;

}

.slide.animate-in .cover-title {

  filter: blur(0px);

  opacity: 1;

  transform: scale(1) translateY(0);

}



.cover-footer {

  margin-top: auto;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1);

  transition-delay: 1s;

}

.slide.animate-in .cover-footer {

  opacity: 0.6;

  transform: translateY(0);

}

.footer-copy {

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 12px;

}

.footer-legal {

  font-size: 11px;

  line-height: 1.6;

  max-width: 800px;

}



/* Slide 2 (Intro Typewriter) */

.cinematic-intro {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8vh 10vw;

  z-index: 10;

  color: #fff;

  text-align: center;

}

.typewriter-text {

  font-size: clamp(26px, 5.2vw, 72px);

  line-height: 1.12;

  letter-spacing: 0;

  font-weight: 600;

  text-transform: uppercase;

  margin: 0;

  white-space: pre-line;

  max-width: 900px;

  /* Glowing text */

  text-shadow: 0 0 20px rgba(255,255,255,0.4);

}

.typewriter-cursor {

  font-size: clamp(24px, 4vw, 56px);

  line-height: 1;

  font-weight: 400;

  color: #fff;

  animation: blink 1s step-end infinite;

  margin-left: 8px;

  vertical-align: baseline;

}

@keyframes blink {

  0%, 100% { opacity: 1; }

  50% { opacity: 0; }

}



/* ===== CINEMATIC BIO (Slide 3) ===== */

.cinematic-bio {

  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10vh 10vw;

  gap: 8vw;

  /* subtle frosted glass container if needed, but going floating is cinematic */

}

.bio-portrait {

  flex: 0 0 35%;

  max-width: 450px;

  aspect-ratio: 3 / 4;

  border-radius: 4px;

  overflow: hidden;

  box-shadow: 0 30px 60px rgba(0,0,0,0.5);

  transform: translateY(40px);

  opacity: 0;

  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s ease-out;

}

.animate-in .bio-portrait {

  transform: translateY(0);

  opacity: 1;

}

.bio-portrait img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(100%) contrast(1.1);

  transition: filter 0.5s, transform 3s ease-out;

}

.bio-portrait:hover img {

  filter: grayscale(20%) contrast(1.1);

  transform: scale(1.03);

}



.bio-text {

  flex: 1;

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.bio-role {

  font-family: var(--font-primary);

  font-size: 14px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: rgba(255,255,255,0.6);

  margin-bottom: 24px;

  transform: translateY(20px);

  opacity: 0;

  transition: transform 1s ease-out 0.2s, opacity 1s 0.2s;

}

.bio-name {

  margin: 0;

  font-family: var(--font-secondary); /* Serif logic */

  display: flex;

  align-items: baseline;

  gap: 16px;

  transform: translateY(20px);

  opacity: 0;

  transition: transform 1s ease-out 0.3s, opacity 1s 0.3s;

}

.bio-name .cn {

  font-size: clamp(32px, 4vw, 56px);

  font-weight: 500;

  letter-spacing: 8px;

}

.bio-name .en {

  font-family: var(--font-primary);

  font-size: clamp(16px, 1.5vw, 24px);

  font-weight: 300;

  letter-spacing: 2px;

  color: rgba(255,255,255,0.8);

}

.bio-divider {

  width: 0;

  height: 1px;

  background: rgba(255,255,255,0.2);

  margin: 40px 0;

  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.4s;

}

.animate-in .bio-divider {

  width: 100%;

}

.animate-in .bio-role,

.animate-in .bio-name {

  transform: translateY(0);

  opacity: 1;

}



.bio-titles {

  list-style: none;

  padding: 0;

  margin: 0;

}

.bio-titles li {

  font-family: var(--font-primary);

  font-size: clamp(14px, 1.2vw, 18px);

  color: rgba(255,255,255,0.7);

  margin-bottom: 16px;

  letter-spacing: 1px;

  transform: translateY(20px);

  opacity: 0;

  transition: transform 1s ease-out, opacity 1s;

}

.animate-in .bio-titles li:nth-child(1) { transition-delay: 0.5s; }

.animate-in .bio-titles li:nth-child(2) { transition-delay: 0.6s; }

.animate-in .bio-titles li:nth-child(3) { transition-delay: 0.7s; }

.animate-in .bio-titles li:nth-child(4) { transition-delay: 0.8s; }



.animate-in .bio-titles li {

  transform: translateY(0);

  opacity: 1;

}



/* ===== CINEMATIC ABOUT (Slide 5) ===== */

.cinematic-about {

  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  color: #1a1a1a;

  padding: 10vh 12vw;

  align-items: center;

  justify-content: space-between;

  gap: 8vw;

}

.about-left {

  flex: 0 0 35%;

  position: relative;

  transform: translateX(-40px);

  opacity: 0;

  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s ease-out;

}

.animate-in .about-left {

  transform: translateX(0);

  opacity: 1;

}

.about-title {

  font-size: clamp(36px, 4vw, 72px);

  letter-spacing: 2px;

  line-height: 1.1;

  font-weight: 400;

  margin: 0;

}

.about-watermark {

  font-size: clamp(12px, 1.2vw, 16px);

  letter-spacing: 4px;

  position: absolute;

  top: 10vh;

  right: 12vw;

  font-weight: 400;

  color: rgba(26,26,26,0.6);

  opacity: 0;

  transition: opacity 1.5s ease 0.8s;

}

.animate-in .about-watermark {

  opacity: 1;

}

.about-right {

  flex: 1;

  max-width: 600px;

  transform: translateY(40px);

  opacity: 0;

  transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s, opacity 1.2s ease-out 0.3s;

}

.animate-in .about-right {

  transform: translateY(0);

  opacity: 1;

}

.about-zh {

  font-size: clamp(15px, 1.2vw, 18px);

  line-height: 2.2;

  font-weight: 300;

  letter-spacing: 1.5px;

  color: #1a1a1a;

  margin-bottom: 40px;

  text-align: justify;

}

.about-en {

  font-size: clamp(13px, 1vw, 16px);

  line-height: 1.8;

  font-weight: 300;

  color: rgba(26,26,26,0.5);

  text-align: justify;

}



/* ===== CINEMATIC WORKS (Slide 6) ===== */

.works-grid-bg {

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 35%;

  background-image: 

    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 40px 40px;

  z-index: 1;

  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

  opacity: 0;

  transition: opacity 2s ease;

}

.animate-in .works-grid-bg {

  opacity: 1;

}

.cinematic-works {

  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding-left: 45%;

  padding-right: 8vw;

}

.works-header {

  margin-bottom: 60px;

  transform: translateY(20px);

  opacity: 0;

  transition: transform 1s ease-out 0.2s, opacity 1s 0.2s;

}

.animate-in .works-header {

  transform: translateY(0);

  opacity: 1;

}

.works-title {

  font-size: clamp(20px, 1.5vw, 32px);

  letter-spacing: 4px;

  font-weight: 600;

  color: #fff;

  margin: 0 0 16px 0;

}

.works-line {

  height: 1px;

  background: rgba(255,255,255,0.2);

  width: 0;

  transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

}

.animate-in .works-line {

  width: 100px;

}



.works-list-container {

  display: flex;

  gap: 6vw;

}

.works-col {

  list-style: none;

  padding: 0;

  margin: 0;

  flex: 1;

}

.works-col li {

  color: rgba(255,255,255,0.6);

  margin-bottom: 20px;

  font-size: clamp(14px, 1.1vw, 17px);

  letter-spacing: 1px;

  font-weight: 300;

  cursor: pointer;

  transform: translateX(-20px);

  opacity: 0;

  transition: transform 0.8s ease-out, opacity 0.8s, color 0.3s;

}

.works-col li[data-xpc-id]::after {

  content: "↗";

  display: inline-block;

  margin-left: 8px;

  color: rgba(255,255,255,0.28);

  font-size: 0.82em;

  transform: translateY(-1px);

}

.works-col li[data-xpc-id]:focus-visible {

  outline: 2px solid rgba(255,255,255,0.65);

  outline-offset: 4px;

  border-radius: 4px;

}

.animate-in .works-col li {

  transform: translateX(0);

  opacity: 1;

}

.animate-in .works-col li:nth-child(1) { transition-delay: 0.3s; }

.animate-in .works-col li:nth-child(2) { transition-delay: 0.4s; }

.animate-in .works-col li:nth-child(3) { transition-delay: 0.5s; }

.animate-in .works-col li:nth-child(4) { transition-delay: 0.6s; }

.animate-in .works-col li:nth-child(5) { transition-delay: 0.7s; }

.animate-in .works-col li:nth-child(6) { transition-delay: 0.8s; }

.animate-in .works-col li:nth-child(7) { transition-delay: 0.9s; }

.animate-in .works-col li:nth-child(8) { transition-delay: 1.0s; }

.animate-in .works-col li:nth-child(9) { transition-delay: 1.1s; }

.animate-in .works-col li:nth-child(n+10) { transition-delay: 1.2s; }



.works-col li:hover {

  color: #fff;

  transform: translateX(8px) !important;

  text-shadow: 0 0 10px rgba(255,255,255,0.3);

}

.works-col li[data-xpc-id]:hover::after {

  color: rgba(255,255,255,0.75);

}





/* ===== EXHIBITION BUMPER (Slide 7) ===== */

.bumper-quadrants {

  position: absolute;

  inset: 0;

  z-index: 10;

}

.quadrant {

  position: absolute;

  width: 50%;

  height: 50%;

  background-image: url('assets/slides/slide-07.jpg');

  background-size: 200% 200%;

  opacity: 0;

  transform: scale(0.95);

  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.5s ease-out;

}

.animate-in .quadrant {

  transform: scale(1);

  opacity: 1;

}

.q-tl { top: 0; left: 0; background-position: 0 0; transition-delay: 0.1s; }

.q-tr { top: 0; left: 50%; background-position: 100% 0; transition-delay: 0.2s; }

.q-bl { top: 50%; left: 0; background-position: 0 100%; transition-delay: 0.3s; }

.q-br { top: 50%; left: 50%; background-position: 100% 100%; transition-delay: 0.4s; }



/* ===== PROJECT SHOWCASE TEMPLATE (e.g. Slide 9) ===== */

.project-showcase {

  background-color: #0f1011;

}

.showcase-container {

  position: absolute;

  inset: 0;

  display: flex;

  z-index: 10;

}

.showcase-left {

  width: 35%;

  height: 100%;

  padding: 8vh 4vw;

  display: flex;

  flex-direction: column;

  position: relative;

  background-color: #0a0a0a;

}

.showcase-poster {

  height: 35vh;

  margin-bottom: 4vh;

  background-image: url('assets/slides/slide-09.jpg');

  background-size: 300% 300%;

  background-position: 5% 15%;

  opacity: 0;

  transform: translateY(-20px);

  transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;

}

.animate-in .showcase-poster { transform: translateY(0); opacity: 1; }



.showcase-meta {

  opacity: 0;

  transform: translateX(-20px);

  transition: all 1s ease 0.5s;

}

.animate-in .showcase-meta { opacity: 1; transform: translateX(0); }



.showcase-title {

  font-size: clamp(20px, 1.5vw, 24px);

  font-weight: 500;

  margin-bottom: 24px;

}

.showcase-specs p {

  font-size: 13px;

  color: rgba(255,255,255,0.6);

  margin-bottom: 8px;

  letter-spacing: 1px;

}

.showcase-specs span {

  display: inline-block;

  width: 80px;

  font-weight: 500;

  color: #fff;

}



.showcase-snapshot-header {

  margin-top: auto;

  font-size: 12px;

  letter-spacing: 2px;

  color: rgba(255,255,255,0.5);

  margin-bottom: 12px;

}

.showcase-mini-poster {

  height: 20vh;

  background-image: url('assets/slides/slide-09.jpg');

  background-size: 400% 400%;

  background-position: 10% 85%;

  opacity: 0;

  transform: scale(0.95);

  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.7s;

}

.animate-in .showcase-mini-poster { opacity: 1; transform: scale(1); }



.showcase-right {

  flex: 1;

  height: 100%;

  background-image: url('assets/slides/slide-09.jpg');

  background-position: 80% 50%;

  background-size: 180% 150%;

  position: relative;

  opacity: 0;

  transform: translateX(40px);

  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.2s;

}

.animate-in .showcase-right { opacity: 1; transform: translateX(0); }

/* ===== PROJECT LIBRARY ===== */
.project-library {
  min-height: 100vh;
  height: auto;
  align-items: stretch;
  justify-content: flex-start;
  background: #050505;
}

.project-library-bg {
  background:
    radial-gradient(circle at 14% 18%, rgba(218, 34, 47, 0.18), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(22, 114, 126, 0.2), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 34%),
    #050505;
}

.project-library-shell {
  position: relative;
  z-index: 2;
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 9vh 5vw 8vh;
}

.library-kicker {
  color: rgba(255,255,255,0.52);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}

.library-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
}

.library-title {
  font-size: clamp(44px, 8vw, 120px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0;
}

.library-subtitle {
  max-width: 680px;
  margin-top: 18px;
  color: rgba(255,255,255,0.66);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.7;
}

.library-stats {
  white-space: nowrap;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  letter-spacing: 2px;
  padding-bottom: 10px;
}

.library-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 390px) 1fr;
  align-items: center;
  gap: 16px;
  margin: 0 0 30px;
}

.library-search {
  position: relative;
  min-height: 44px;
}

.library-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.52);
  pointer-events: none;
}

.library-search input {
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 42px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  outline: 0;
  background: rgba(255,255,255,0.07);
  color: #fff;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0;
}

.library-search input::placeholder {
  color: rgba(255,255,255,0.42);
}

.library-search input:focus {
  border-color: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}

.library-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.library-filter {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.045);
  color: rgba(255,255,255,0.78);
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 1.2px;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.library-filter:hover,
.library-filter.active {
  border-color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.project-card {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  transform: translateY(22px);
  transition: transform .45s ease, opacity .45s ease, border-color .25s ease, background .25s ease;
}

.animate-in .project-card {
  opacity: 1;
  transform: translateY(0);
}

.project-card:hover {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.085);
}

.project-card--hero {
  grid-column: span 2;
  grid-row: span 2;
}

.project-card--hero .project-media {
  aspect-ratio: 16 / 10;
}

.project-card--hero .project-card-body {
  padding: 22px;
}

.project-card--hero h3 {
  min-height: auto;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25;
}

.project-card--hero .project-eyebrow,
.project-card--hero .project-meta-row {
  font-size: 12px;
}

.project-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #111;
  overflow: hidden;
  cursor: pointer;
  touch-action: manipulation;
}

.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: transform .4s ease, filter .4s ease;
}

.project-card:hover .project-media img {
  transform: scale(1.06);
  filter: brightness(0.72) saturate(1.08);
}

.project-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(10px);
  transition: transform .22s ease, background .22s ease;
}

.project-media:hover .project-play {
  transform: scale(1.08);
  background: rgba(255,255,255,0.16);
}

.project-play svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

.project-card-body {
  padding: 16px;
}

.project-eyebrow {
  color: rgba(255,255,255,0.48);
  font-size: 11px;
  letter-spacing: 1.4px;
  margin-bottom: 10px;
}

.project-card h3 {
  min-height: 3.1em;
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0;
}

.library-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.045);
}

.project-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: rgba(255,255,255,0.44);
  font-size: 11px;
  line-height: 1.4;
}

.project-meta-row span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(18px);
}

.project-modal.active {
  display: flex;
}

.project-modal-panel {
  width: min(1180px, 100%);
  max-height: 92vh;
  background: #080808;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.project-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  color: #fff;
  background: rgba(0,0,0,0.55);
  cursor: pointer;
}

.project-modal-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  background: #000;
  object-fit: contain;
}

.project-modal-meta {
  padding: 22px 24px 24px;
}

.project-modal-category {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.project-modal-title {
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.project-modal-detail {
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  line-height: 1.6;
  word-break: break-all;
  margin-bottom: 14px;
}

.project-modal-link {
  color: #fff;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}



.showcase-gallery-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(to right, #0a0a0a 0%, transparent 5%);

}

.showcase-sidebar {

  width: 50px;

  background-color: #111;

  border-left: 1px solid rgba(255,255,255,0.1);

  display: flex;

  align-items: center;

  justify-content: center;

}

.sidebar-text {

  writing-mode: vertical-rl;

  text-orientation: mixed;

  font-size: 10px;

  letter-spacing: 4px;

  color: rgba(255,255,255,0.4);

}



/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {

  .nav-dots { right: 12px; gap: 6px; }

  .top-bar { padding: 16px 20px; }

  .top-bar .actions button span { display: none; } /* Hide text on mobile, keep icon */

  .top-bar .actions button { padding: 8px; }

  .keyboard-hint { display: none; }

  .project-library-shell {
    padding: 88px 18px 56px;
  }

  .library-head {
    display: block;
  }

  .library-stats {
    margin-top: 18px;
    white-space: normal;
  }

  .library-toolbar {
    grid-template-columns: 1fr;
  }

  .library-controls {
    justify-content: flex-start;
    gap: 8px;
  }

  .library-filter {
    min-height: 42px;
    padding: 0 12px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .project-card--hero {
    grid-column: auto;
    grid-row: auto;
  }

  .project-card--hero .project-media {
    aspect-ratio: 16 / 9;
  }

  .project-card--hero .project-card-body {
    padding: 16px;
  }

  .project-card h3 {
    min-height: auto;
  }

  .project-modal {
    padding: 12px;
  }

  .project-modal-meta {
    padding: 18px;
  }

  .overview-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 24px; }

  .overview-header { padding: 16px 24px; }

  

  .cover-title {

    letter-spacing: -1px;

    font-size: 14vw;

  }

  

  /* Bio adjustments */

  .cinematic-bio {

    flex-direction: column;

    padding: 12vh 8vw;

    gap: 4vh;

  }

  .bio-portrait {

    flex: 0 0 auto;

    width: 60%;

    max-width: 200px;

    margin-bottom: 0;

  }

  .bio-text {

    align-items: center;

    text-align: center;

  }

  .bio-name {

    flex-direction: column;

    gap: 4px;

  }

  .bio-name .cn {

    font-size: 32px;

    letter-spacing: 4px;

  }

  .bio-divider {

    margin: 20px 0;

  }

  

  /* About Mobile */

  .cinematic-about {

    flex-direction: column;

    padding: 12vh 6vw;

    gap: 4vh;

    justify-content: flex-start;

  }

  .about-left {

    flex: 0 0 auto;

    width: 100%;

    margin-bottom: 20px;

  }

  .about-title {

    font-size: 48px;

  }

  .about-watermark {

    right: 6vw;

    top: 6vh;

  }

  .about-right {

    flex: 0 0 auto;

    width: 100%;

  }



  /* Works Mobile */

  .works-grid-bg {

    width: 100%;

    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);

    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 40%);

  }

  .cinematic-works {

    padding-left: 6vw;

    padding-right: 6vw;

    justify-content: flex-start;

    padding-top: 15vh;

  }

  .works-list-container {

    flex-direction: column;

    gap: 0;

  }

  .bio-signature {

    margin-top: 20px;

    width: 80px;

  }


@media print {
  @page {
    size: 1920px 1080px; /* Force 16:9 landscape aspect ratio */
    margin: 0;
  }
  html, body { 
    height: auto; 
    overflow: visible; 
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
    background-color: #000 !important;
  }
  html.lenis, html.lenis body { height: auto; }
  .nav-dots, .top-bar, .progress-bar, .keyboard-hint, .loader, .lightbox, .film-grain, .overview, button { display: none !important; }
  
  .slide {
    height: 1080px !important;
    min-height: 1080px !important;
    width: 1920px !important;
    max-width: 1920px !important;
    page-break-after: always !important;
    page-break-inside: avoid !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
  }
  
  .slide * {
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important; 
  }

  .slide .slide-bg { 
    opacity: 1 !important; 
    transform: none !important; 
    visibility: visible !important;
  }
  
  .slide .cinematic-bg {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    transform: none !important;
  }
  
  /* Stop CSS animations during print */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}