/* 負責匯入各個拆分好的模組樣式檔案 */
@import url(_layout.css);
@import url(_typography.css);
@import url(_nav.css);
@import url(_media.css);
@import url(_table.css);
@import url(_helper.css);
@import url(_theme.css);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #182022;
  background-color: #0b0b0b; /* 配合科技藝術風格改成質感深色底 */
}

.site-logo {
  letter-spacing: 0.08em;
}

/* ===== 開場首頁 Intro ===== */
html.intro-lock,
html.intro-lock body {
  overflow: hidden;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.intro-screen.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-slideshow,
.intro-slide,
.intro-shade {
  position: absolute;
  inset: 0;
}

.intro-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  animation: introFade 16s infinite;
}

/* 把你的作品照片放進 img 資料夾後，改下面這幾個檔名即可 */
.intro-slide-1 { background-image: url("img/work-1.jpg"); animation-delay: 0s; }
.intro-slide-2 { background-image: url("img/work-2.jpg"); animation-delay: 4s; }
.intro-slide-3 { background-image: url("img/work-3.jpg"); animation-delay: 8s; }
.intro-slide-4 { background-image: url("img/work-4.jpg"); animation-delay: 12s; }

.intro-shade {
  background:
    radial-gradient(circle at center, rgba(0,0,0,.18), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.7));
}

.intro-content {
  position: relative;
  z-index: 2;
  text-align: center;
  letter-spacing: .08em;
  animation: introNameIn 1.4s ease both;
}

.intro-name-cn {
  font-size: clamp(42px, 8vw, 108px);
  font-weight: 900;
  line-height: 1.05;
}

.intro-name-en {
  margin-top: 18px;
  font-size: clamp(18px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: .22em;
}

.intro-line {
  width: 0;
  height: 2px;
  margin: 28px auto 0;
  background: #fff;
  animation: introLine 1.2s ease .7s both;
}

.intro-enter {
  margin-top: 34px;
  padding: 12px 34px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  color: #fff;
  font-weight: 700;
  letter-spacing: .18em;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.intro-enter:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

.page-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}

body.intro-done .page-content {
  opacity: 1;
  transform: translateY(0);
}

@keyframes introFade {
  0% { opacity: 0; transform: scale(1.08); }
  8% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes introNameIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes introLine {
  to { width: min(360px, 70vw); }
}

@media (max-width: 768px) {
  .intro-enter { margin-top: 28px; }
}

/* ===== 2026 update: intro + new inner homepage ===== */
.intro-screen {
  transition: opacity 1.4s ease, visibility 1.4s ease;
}

.intro-slide {
  animation: introFade 24s infinite;
}

.intro-slide-1 { animation-delay: 0s; }
.intro-slide-2 { animation-delay: 6s; }
.intro-slide-3 { animation-delay: 12s; }
.intro-slide-4 { animation-delay: 18s; }

.intro-content {
  animation: introNameIn 2.4s cubic-bezier(.16, 1, .3, 1) both;
}

.intro-enter:disabled {
  opacity: .28;
  cursor: not-allowed;
  transform: none;
}

.intro-hint {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.65);
}

.home-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.09), rgba(0,0,0,0) 34%),
    #050505;
  color: #fff;
  text-align: center;
  padding: 120px 24px 80px;
}

.home-name-cn {
  font-size: clamp(54px, 10vw, 150px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .14em;
}

.home-name-en {
  margin-top: 24px;
  font-size: clamp(18px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: .24em;
}

.works-section {
  min-height: 100vh;
  padding: 120px 6vw 140px;
  background: #0b0b0b;
  color: #fff;
}

.works-title {
  text-align: center;
  font-size: clamp(36px, 6vw, 88px);
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 70px;
}

.works-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.work-card {
  margin: 0;
  background: #161616;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.work-card h2 {
  margin: 0;
  padding: 18px 20px 22px;
  font-size: 16px;
  letter-spacing: .08em;
  color: #fff;
}

.work-img {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.28);
  background-color: #222;
}

.work-img-1 { background-image: url("img/work-1.jpg"); }
.work-img-2 { background-image: url("img/work-2.jpg"); }
.work-img-3 { background-image: url("img/work-3.jpg"); }
.work-img-4 { background-image: url("img/work-4.jpg"); }
.work-img-5 { background-image: url("img/work-5.jpg"); }
.work-img-6 { background-image: url("img/work-6.jpg"); }

.js-reveal {
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 1s ease, transform 1s ease;
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-name {
  padding: 60px 24px;
  text-align: center;
  color: rgba(255,255,255,.5);
  letter-spacing: .2em;
}

@media (max-width: 900px) {
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .works-grid { grid-template-columns: 1fr; }
  .home-name-cn { letter-spacing: .08em; }
  .home-name-en { letter-spacing: .14em; }
}

/* ===== 2026-06-10 user update ===== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 28px;
}

.site-logo {
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .08em;
}

.site-header-toggle {
  display: none !important;
}

.site-menu.pull-right {
  float: none;
}

.intro-slide-main {
  background-image: url("img/intro-bg.jpg");
  opacity: 1;
  animation: introSlowZoom 18s ease both;
}

.intro-enter {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.intro-enter:hover {
  background: #fff;
  color: #000;
  transform: translateY(-2px);
}

.intro-enter:disabled {
  background: #fff;
  color: #000;
  opacity: .35;
}

.home-hero {
  justify-content: center;
  gap: clamp(36px, 7vw, 110px);
  text-align: left;
}

.home-name {
  transform: translateX(-4vw);
}

.home-name-cn {
  letter-spacing: .08em;
}

.hero-photo {
  width: min(36vw, 460px);
  min-width: 280px;
  margin: 0;
  opacity: 0;
  transform: translateY(70px);
  animation: heroPhotoIn 1.2s ease 2.7s both;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255,255,255,.18);
  object-fit: cover;
}

.work-img-profile { background-image: url("img/profile-work.jpg"); }
.work-img-intro { background-image: url("img/intro-bg.jpg"); }

.info-page {
  min-height: calc(100vh - 72px);
  padding: 150px 8vw 100px;
  background: #050505;
  color: #fff;
}

.info-page h1 {
  margin: 0 0 70px;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: .12em;
}

.info-block {
  width: min(860px, 100%);
  margin-bottom: 56px;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 28px;
}

.info-block h2 {
  margin: 0 0 20px;
  font-size: 26px;
  letter-spacing: .12em;
}

.info-block p,
.info-block li,
.contact-note {
  color: rgba(255,255,255,.72);
  line-height: 2;
  font-size: 16px;
}

.contact-list {
  display: grid;
  gap: 22px;
  width: min(520px, 100%);
}

.contact-list a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.25);
  padding: 22px 26px;
  font-size: 24px;
  letter-spacing: .12em;
  transition: background .25s ease, color .25s ease;
}

.contact-list a:hover {
  background: #fff;
  color: #000;
}

@keyframes introSlowZoom {
  from { transform: scale(1.08); filter: brightness(.75); }
  to { transform: scale(1); filter: brightness(.9); }
}

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

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
    gap: 18px;
    flex-direction: column;
    padding: 20px 22px;
  }

  .home-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .home-name {
    transform: none;
  }

  .hero-photo {
    width: 100%;
    min-width: 0;
  }
}


/* ===== 2026-06-11 update: brighter intro + contact/about content ===== */
.intro-shade {
  background:
    radial-gradient(circle at center, rgba(0,0,0,.06), rgba(0,0,0,.38)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.36));
}

.intro-slide-main {
  filter: brightness(1.08) contrast(1.08);
}

@keyframes introSlowZoom {
  from { transform: scale(1.08); filter: brightness(1.02) contrast(1.08); }
  to { transform: scale(1); filter: brightness(1.15) contrast(1.08); }
}

.about-text p {
  margin: 0 0 24px;
  text-align: justify;
}

.contact-address {
  margin-bottom: 42px;
}

.contact-line {
  position: relative;
  color: #fff;
  background: transparent;
  text-align: left;
  border: 1px solid rgba(255,255,255,.25);
  padding: 22px 26px;
  font-size: 24px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}

.contact-line:hover,
.contact-line.is-show-id {
  background: #fff;
  color: #000;
}

.contact-line .line-id {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  letter-spacing: .06em;
  font-size: 18px;
  transition: opacity .25s ease;
}

.contact-line.is-show-id .line-id {
  opacity: 1;
}

@media (max-width: 640px) {
  .contact-line .line-id {
    position: static;
    display: block;
    transform: none;
    margin-top: 10px;
  }
}

.intro-slide-main{background-image:url('img/intro-bg.jpg')!important;opacity:1;}
.intro-shade{background:radial-gradient(circle,rgba(0,0,0,.1),rgba(0,0,0,.55));}
.intro-enter{background:#fff;color:#000;border:none;transition:all .4s cubic-bezier(.22,1,.36,1);}
.intro-enter:hover,.nav-link:hover,.work-card:hover{transform:translateY(-3px);}
.nav-link,.work-card,.site-logo,.intro-enter,.hero-photo img{transition:all .35s cubic-bezier(.22,1,.36,1);}
.home-hero{position:relative;}
.hero-bg{width:45%;height:80vh;background:url('img/hero-bg.jpg') center/cover;filter:brightness(.85);}
.works-section{background:linear-gradient(to bottom,transparent,#000 20%,#000);}
.custom1{background:url('img/work1.jpg') center/cover;}
.custom2{background:url('img/work2.jpg') center/cover;}
.custom3{background:url('img/work3.jpg') center/cover;}
.site-footer .footer-name{letter-spacing:.08em}

/* ===== v5 smooth optimization: name-side photo + abstract background + soft transition ===== */
html {
  scroll-behavior: smooth;
}

* {
  -webkit-tap-highlight-color: transparent;
}

a,
button,
.work-card,
.hero-photo,
.contact-list a,
.contact-line {
  transition: transform .55s cubic-bezier(.22,1,.36,1),
              opacity .55s cubic-bezier(.22,1,.36,1),
              background .55s cubic-bezier(.22,1,.36,1),
              color .55s cubic-bezier(.22,1,.36,1),
              border-color .55s cubic-bezier(.22,1,.36,1),
              filter .55s cubic-bezier(.22,1,.36,1);
}

button:active,
a:active,
.work-card:active {
  transform: translateY(1px) scale(.985);
}

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 105vh;
  justify-content: center;
  gap: clamp(42px, 8vw, 128px);
  background: #030303;
  isolation: isolate;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("img/hero-abstract-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: .46;
  filter: brightness(.72) contrast(1.08) saturate(1.08);
  transform: scale(1.06);
  animation: slowBgDrift 22s cubic-bezier(.22,1,.36,1) infinite alternate;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 62% 48%, rgba(255,255,255,.04), rgba(0,0,0,0) 32%),
    linear-gradient(90deg, rgba(0,0,0,.74), rgba(0,0,0,.44) 46%, rgba(0,0,0,.7)),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.4) 72%, rgba(0,0,0,1));
}

.home-name {
  position: relative;
  z-index: 2;
  transform: translateX(-2vw);
  filter: drop-shadow(0 18px 44px rgba(0,0,0,.55));
}

.home-name:hover {
  transform: translateX(-2vw) translateY(-4px);
}

.name-side-photo {
  width: min(38vw, 500px);
  min-width: 300px;
  height: min(72vh, 760px);
  margin: 0;
  background-image: url("img/name-side.jpg");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 34px 100px rgba(0,0,0,.55);
  opacity: 0;
  transform: translateY(60px) scale(.985);
  animation: heroPhotoInV5 1.65s cubic-bezier(.22,1,.36,1) .42s both;
}

.name-side-photo:hover {
  transform: translateY(-6px) scale(1.015);
  filter: brightness(1.08);
}

.hero-to-works {
  height: 46vh;
  margin-top: -1px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(3,3,3,.96) 22%, rgba(6,6,6,.84) 48%, rgba(8,8,8,.96) 76%, rgba(11,11,11,1) 100%),
    url("img/hero-abstract-bg.jpg") center bottom / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.hero-to-works::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 42%);
  opacity: .45;
}

.works-section {
  margin-top: -1px;
  background: linear-gradient(to bottom, #0b0b0b 0%, #050505 100%);
}

.work-card {
  border-radius: 2px;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.work-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 72px rgba(0,0,0,.36);
  border-color: rgba(255,255,255,.2);
}

.work-card:hover .work-img {
  transform: scale(1.035);
  filter: brightness(1.06) contrast(1.04);
}

.work-img {
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1);
}

.footer-name:hover {
  color: #fff;
  letter-spacing: .14em;
}

@keyframes slowBgDrift {
  from { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
  to { transform: scale(1.12) translate3d(1.2%, 1%, 0); }
}

@keyframes heroPhotoInV5 {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .home-hero {
    gap: 34px;
    min-height: auto;
    padding-top: 130px;
  }

  .home-name,
  .home-name:hover {
    transform: none;
  }

  .name-side-photo {
    width: min(100%, 520px);
    height: 64vh;
    min-width: 0;
  }

  .hero-to-works {
    height: 32vh;
  }
}

/* ===== v6: clearer inner background, softer transition, clickable works + detail pages ===== */
.home-hero::before {
  opacity: .74;
  filter: brightness(.92) contrast(1.1) saturate(1.1);
}

.home-hero::after {
  background:
    radial-gradient(circle at 68% 50%, rgba(255,255,255,.05), rgba(0,0,0,0) 34%),
    linear-gradient(90deg, rgba(0,0,0,.58), rgba(0,0,0,.32) 46%, rgba(0,0,0,.62)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22) 68%, rgba(0,0,0,.82));
}

.hero-to-works {
  height: 70vh;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.82) 0%,
      rgba(0,0,0,.58) 18%,
      rgba(0,0,0,.40) 42%,
      rgba(0,0,0,.70) 72%,
      #0b0b0b 100%),
    url("img/hero-abstract-bg.jpg") center center / cover no-repeat;
  filter: saturate(1.06);
}

.hero-to-works::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(11,11,11,.9)),
    radial-gradient(circle at 44% 18%, rgba(255,255,255,.12), rgba(255,255,255,0) 40%);
  opacity: .72;
}

.work-card {
  display: block;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}

.work-card p {
  margin: -10px 20px 22px;
  color: rgba(255,255,255,.48);
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1.7;
}

.work-card::after {
  content: "VIEW WORK";
  display: block;
  padding: 0 20px 22px;
  color: rgba(255,255,255,.38);
  font-size: 11px;
  letter-spacing: .22em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}

.work-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.work-detail {
  min-height: 100vh;
  background: #050505;
  color: #fff;
  padding: 130px 7vw 110px;
}

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 48vw);
  gap: clamp(34px, 6vw, 90px);
  align-items: end;
  margin-bottom: 90px;
}

.detail-title h1 {
  margin: 0 0 28px;
  font-size: clamp(42px, 6vw, 96px);
  line-height: 1.05;
  letter-spacing: .06em;
}

.detail-meta {
  display: grid;
  gap: 16px;
  color: rgba(255,255,255,.68);
  line-height: 1.8;
  letter-spacing: .05em;
}

.detail-meta strong {
  display: block;
  color: #fff;
  font-size: 13px;
  letter-spacing: .22em;
  margin-bottom: 4px;
}

.detail-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
}

.detail-image.work1 { background-image: url("img/work1.jpg"); }
.detail-image.work2 { background-image: url("img/work2.jpg"); }
.detail-image.work3 { background-image: url("img/work3.jpg"); background-position: center top; }

.detail-statement {
  width: min(980px, 100%);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 48px;
}

.detail-statement h2 {
  margin: 0 0 32px;
  font-size: 22px;
  letter-spacing: .2em;
}

.detail-statement p {
  margin: 0 0 24px;
  color: rgba(255,255,255,.76);
  line-height: 2.05;
  font-size: 16px;
  text-align: justify;
}

.detail-back {
  display: inline-block;
  margin-top: 70px;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  padding: 14px 22px;
  letter-spacing: .14em;
  transition: all .55s cubic-bezier(.22,1,.36,1);
}

.detail-back:hover {
  background: #fff;
  color: #000;
  transform: translateY(-3px);
}

@media (max-width: 860px) {
  .detail-hero { grid-template-columns: 1fr; }
  .work-detail { padding-top: 110px; }
}


/* ===== v7 fix: clean single-image hero fade + un-cropped work 3 detail ===== */
.home-hero::before {
  opacity: .9 !important;
  filter: brightness(1.08) contrast(1.08) saturate(1.08) !important;
  background-image: url("img/hero-abstract-bg.jpg") !important;
}

.home-hero::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.44), rgba(0,0,0,.20) 46%, rgba(0,0,0,.52)),
    linear-gradient(180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.18) 48%,
      rgba(0,0,0,.68) 82%,
      #000 100%) !important;
}

.hero-to-works {
  height: 42vh !important;
  margin-top: -1px;
  background: linear-gradient(to bottom,
    #000 0%,
    #020202 30%,
    #060606 68%,
    #0b0b0b 100%) !important;
  filter: none !important;
}

.hero-to-works::after {
  background: linear-gradient(to bottom, rgba(255,255,255,.025), rgba(255,255,255,0) 50%) !important;
  opacity: .45 !important;
}

.works-section {
  background: #0b0b0b !important;
}

/* Work 3 is a vertical painting, so the detail page uses a full-image layout instead of a cropped background box. */
.work-detail.is-vertical .detail-hero {
  grid-template-columns: 1fr !important;
  align-items: start;
  gap: 48px;
}

.work-detail.is-vertical .detail-title {
  width: min(980px, 100%);
  margin: 0 auto;
}

.detail-full-image {
  display: block;
  width: auto;
  max-width: min(760px, 100%);
  max-height: 92vh;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  background: #050505;
}

@media (max-width: 860px) {
  .hero-to-works { height: 28vh !important; }
  .detail-full-image { max-height: none; max-width: 100%; }
}