/* ——— page loader ——— */
#page-loader{
  position:fixed; inset:0; z-index:1000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  /* CSS fallback: always dismiss at 5s even if JS never runs */
  animation:loaderFadeOut .5s ease 5s forwards;
  transition:opacity .5s ease .1s, visibility .5s ease .1s;
}
#page-loader.done{
  /* JS fast path: dismiss immediately when JS adds .done */
  opacity:0; visibility:hidden; pointer-events:none;
  animation:none;
}
.loader-bar{
  position:absolute; bottom:0; left:0;
  width:0; height:4px;
  background:#EBCFB2;
  animation:loaderBarGrow 4.2s ease forwards;
}
.loader-logo{
  display:block; width:400px; height:auto; overflow:visible;
}
.lp-ghost, .lp-ink{
  font-family: var(--brand);
  font-size:90px;
}
.lp-ghost{
  fill:none; stroke:#EBCFB2; stroke-width:0.7px; stroke-opacity:0.22;
}
.lp-ink{
  fill:#EBCFB2;
}
#lp-rect{
  transform-origin:0 0;
  /* CSS fallback: ink reveal always plays even if JS never runs */
  animation:inkReveal 2.78s cubic-bezier(.25,0,.08,1) .4s both;
}
@keyframes loaderBarGrow{ to{ width:100%; } }
@keyframes inkReveal{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes loaderFadeOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

:root{
  --ink: rgb(74,74,74);
  --ink-strong: rgb(0,0,0);
  --ink-soft: rgb(151,151,151);
  --paper: #fff;
  --btn: rgb(44,44,44);
  --border: rgb(202,202,202);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --brand: "Liu Jian Mao Cao", "Caveat", "Segoe Script", cursive;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:#fff; color:var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
body{ display:flex; justify-content:center; }

.frame{
  width:100%; max-width:1680px;
  min-height:100vh; height:100vh; position:relative; background:#fff;
  margin:0 auto; overflow:hidden;
  display:flex;
}

/* ——— left column ——— */
.left{
  position:relative; width:60%; height:100%;
  padding:clamp(48px, 8vh, 90px) clamp(32px, 4vw, 80px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(40px, 6vh, 82px);
  z-index:2;
}
.left::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at -20% -10%, rgba(0,0,0,.02), transparent 60%),
    radial-gradient(800px 600px at 100% 110%, rgba(0,0,0,.015), transparent 60%);
}

.intro{ display:flex; flex-direction:column; gap:2px; width:100%; max-width:672px; }
.intro > *{ margin:0; }
.intro .hand{
  font-family: var(--brand);
  font-size:32px; line-height:1; color:#000; letter-spacing:.5px;
  min-height:36px;
}
.intro .tagline{
  font-weight:900; font-size:66px; line-height:1.05; color:#000;
  letter-spacing:-.01em; max-width:640px;
}
.intro .subtitle{
  font-size:15px; line-height:1.4; color:var(--ink);
  min-height:1.4em; max-width:640px;
  margin-top:4px;
}
.intro .subtitle .caret{
  display:inline-block; width:2px; height:1em; background:var(--ink);
  vertical-align:-2px; margin-left:2px;
  animation: blink 1s steps(1) infinite;
}
.intro .subtitle.done .caret{ display:none; }
@keyframes blink{ 50%{ opacity:0; } }

.tags{ display:flex; flex-wrap:wrap; gap:8px 6px; position:relative; margin-top:8px; }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px; border-radius:100px;
  border:1px solid var(--border);
  background:#fff; color:var(--ink);
  font-weight:500; font-size:13px;
  letter-spacing:.02em; cursor:default;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  position:relative;
}
.tag:hover{ background:rgb(44,44,44); color:#fff; border-color:rgb(44,44,44); }
.tag .dot{
  width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:.55;
}
.tip{
  position:absolute; bottom:calc(100% + 10px); left:50%;
  width:220px; padding:10px 12px; border-radius:6px;
  background:rgb(50,47,53); color:#f5eff7;
  font-size:12px; line-height:1.4;
  letter-spacing:.02em;
  opacity:0; pointer-events:none;
  transform:translate(-50%, 4px);
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  z-index:5;
}
.tip::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgb(50,47,53);
}
.tag:hover .tip{ opacity:1; transform:translate(-50%, 0); }
.no-tips .tip{ display:none !important; }

/* ——— work section ——— */
.work{ position:relative; display:flex; flex-direction:column; gap:20px; width:100%; max-width:672px; }
.section-h{
  font-weight:900;
  font-size:15px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); margin:0 0 14px;
}
.list{ display:flex; flex-direction:column; gap:10px; padding-left:16px; }
.item{
  font-size:14px; line-height:1.3;
  color:var(--ink);
  position:relative; display:inline-block; width:fit-content;
  padding:0 8px; cursor:pointer;
  transition:color .2s ease;
}
.item .head{ position:relative; display:inline-block; }
.item.active .head::before{
  content:""; position:absolute; left:-2px; right:-2px;
  top:50%; transform:translateY(-50%) scaleX(1);
  transform-origin:left center;
  height:14px; background:var(--hl, rgba(226,242,245,1));
  z-index:-1; border-radius:2px;
  animation: hl-in .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes hl-in{
  from{ transform:translateY(-50%) scaleX(0); }
  to  { transform:translateY(-50%) scaleX(1); }
}
.item.active{ color:var(--hl-ink, rgb(71,121,157)); font-weight:600; font-size:14px; }
.item .hash{ font-size:12px; opacity:.85; }
.item.active .hash{ font-size:12px; font-weight:500; opacity:1; }
.item:hover{ color:var(--hl-ink, rgb(71,121,157)); }

.actions{ display:flex; gap:12px; margin-top:8px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 16px; border-radius:17px;
  background:var(--btn); color:#fff; border:none;
  font-size:14px;
  cursor:pointer; text-decoration:none;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{ background:#000; transform:translateY(-1px); }
.btn svg{ width:16px; height:16px; stroke:#fff; fill:none; }
.btn-contact:hover{ background:#1a1a2e; }

.link{
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 4px;
  color:#222; text-decoration:none;
  font-size:14px; font-weight:500;
  transition:color .15s ease;
}
.link svg{ width:16px; height:16px; stroke:#222; fill:none; transition:stroke .15s ease; }
.link-connect:hover{ color:#0a66c2; }
.link-connect:hover svg{ stroke:#0a66c2; }
.link-resume:hover{ color:#47799d; }
.link-resume:hover svg{ stroke:#47799d; }

/* ——— right column (project detail) ——— */
.right{
  position:relative; width:40%; height:100%;
  overflow:hidden; flex-shrink:0;
  display:flex; flex-direction:column;
}
.bg-color{
  position:absolute; right:0; top:0; width:75%; height:100%;
  background:var(--panel, rgb(242,247,248));
  transition:background .5s ease;
}
.preview-wrap{
  position:relative; width:100%;
  height:60vh; flex:0 0 60vh;
  overflow:hidden;
}
.bg-texture{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:opacity .5s ease;
}
.bg-texture.b1{ background-image:url(../images/bg-1.jpg); }
.bg-texture.b2{ background-image:url(../images/bg-2.jpg); }
.bg-texture.b3{ background-image:url(../images/bg-3.png); }
.bg-texture.b4{ background-image:url(../images/bg-4.jpg); }
.bg-texture.bs{ background-image:url(../images/bg-secret.jpg); }

.imac{
  position:absolute;
  left:50%; top:50%;
  width:min(520px, 80%); aspect-ratio: 520 / 438;
  transform:translate(-50%, -50%);
  background:url(../images/imac.png) center/contain no-repeat;
  transition:opacity .35s ease;
}
.imac .screen{
  position:absolute;
  left:4.6%; top:4.6%; width:90.4%; height:62.3%;
  overflow:hidden; background:rgb(216,216,216);
}
.imac .screen img{ width:100%; display:block; }
.imac .screen .scroller{
  position:absolute; inset:0;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}

.photo{
  position:absolute; right:10%; top:6%; width:55%; aspect-ratio: 326 / 512;
  background:url(../images/zhonghe.png) center/cover no-repeat;
  border-radius:2px;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease, transform .5s ease;
}
.thumbs{
  position:absolute; left:6%; bottom:8%; width:40%;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
  opacity:0; transform:translateY(8px);
  transition:opacity .45s .08s ease, transform .5s .08s ease;
}
.thumb{
  aspect-ratio:4/3; border-radius:2px; overflow:hidden;
  background:#eee7d6; background-size:cover; background-position:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  position:relative;
}
.thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; pointer-events:none;
}
.thumb .lbl{
  position:absolute; left:8px; bottom:6px;
font-size:10px; color:#3a2f12;
  letter-spacing:.02em;
  background:rgba(246,245,238,.88); padding:2px 6px; border-radius:2px;
}

.is-secret .imac{ opacity:0; pointer-events:none; transform:translateY(6px); }
.is-secret .photo,
.is-secret .thumbs{ opacity:1; transform:translateY(0); }

/* content footer of right col */
.details{
  position:relative; z-index:1;
  width:75%; align-self:flex-end;
  padding:20px 28px clamp(24px, 5vh, 46px);
  text-align:right; color:var(--ink);
  flex-shrink:0;
}
.details h3{
  font-weight:700; font-size:14px;
  margin:0 0 14px; letter-spacing:.02em; text-transform:uppercase;
}
.details .desc{
  font-size:12px;
  line-height:1.75; color:var(--ink);
  margin:0 0 14px; letter-spacing:.01em;
}
.details .row{
  font-size:13px; line-height:1.5;
  color:var(--ink); margin-bottom:2px;
}
.details .row b{
  font-weight:700; color:#222; letter-spacing:.02em;
  font-size:12px; text-transform:uppercase; margin-right:6px;
}
.details a.view{
  display:inline-block; margin-top:18px;
  font-size:15px;
  color:var(--hl-ink, rgb(71,121,157)); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity .2s ease, transform .2s ease;
}
.details a.view:hover{ transform:translateX(-3px); }

/* ——— tweaks panel ——— */
.tweaks{
  position:fixed; right:18px; bottom:18px; width:260px; z-index:50;
  background:#111; color:#eee; border-radius:12px; padding:14px 14px 12px;
  font-size:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:none;
}
.tweaks.on{ display:block; }
.tweaks h4{
  margin:0 0 10px; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; opacity:.7;
}
.tweaks label{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:6px 0;
}
.tweaks input[type="checkbox"]{ accent-color:#fff; }
.tweaks select,
.tweaks input[type="text"]{
  background:#222; color:#eee; border:1px solid #333;
  border-radius:6px; padding:4px 6px; font-size:12px;
}

.mobile-stack{ display:none; }

/* ——— mobile (≤ 768px) ——— */
@media (max-width: 768px){
  body{ overflow-y:auto; }
  .frame{
    flex-direction:column;
    height:auto; min-height:100vh; overflow:visible;
  }
  .left{
    width:100% !important; height:auto; min-height:auto;
    padding:48px 28px 28px !important;
    justify-content:flex-start;
    gap:40px;
  }
  .intro .tagline{
    font-size:clamp(40px, 11vw, 56px); line-height:1.05;
  }
  .intro .subtitle{ font-size:14px; }
  .work{ max-width:100%; }
  .list{ padding-left:4px; }
  .item{ white-space:normal; line-height:1.45; }
  .item .head{ display:inline; }

  /* Hide desktop right column on mobile */
  .right{ display:none; }

  /* Stacked project cards */
  .mobile-stack{
    display:flex; flex-direction:column;
    width:100%;
    gap:0;
  }
  .m-card{
    position:relative;
    background:var(--panel, rgb(242,247,248));
    padding:0 0 40px;
    display:flex; flex-direction:column;
  }
  .m-preview{
    position:relative; width:100%; height:60vh;
    background-size:cover; background-position:center;
    overflow:hidden;
    margin-bottom:28px;
  }
  .m-preview.b1{ background-image:url(../images/bg-1.jpg); }
  .m-preview.b2{ background-image:url(../images/bg-2.jpg); }
  .m-preview.b3{ background-image:url(../images/bg-3.png); }
  .m-preview.b4{ background-image:url(../images/bg-4.jpg); }
  .m-preview.bs{ background-image:url(../images/bg-secret.jpg); }

  .m-imac{
    position:absolute; left:50%; top:50%;
    width:80%; aspect-ratio: 520 / 438;
    transform:translate(-50%, -50%);
    background:url(../images/imac.png) center/contain no-repeat;
  }
  .m-imac .m-screen{
    position:absolute; left:4.6%; top:4.6%;
    width:90.4%; height:62.3%;
    overflow:hidden; background:rgb(216,216,216);
  }
  .m-imac .m-screen img{ width:100%; display:block; }

  .m-photo{
    position:absolute; left:50%; top:50%;
    transform:translate(-50%, -50%);
    width:60%; aspect-ratio: 326 / 512;
    background:url(../images/zhonghe.png) center/cover no-repeat;
    box-shadow:0 16px 40px rgba(0,0,0,.18);
  }

  .m-body{
    padding:0 28px;
  }
  .m-card h3{
    margin:0 0 14px;
    font-weight:700;
    font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    color:#222;
  }
  .m-desc{
    margin:0 0 18px;
    font-size:13px; line-height:1.7; color:var(--ink);
  }
  .m-row{
    font-size:13px; line-height:1.5;
    color:var(--ink); margin-bottom:2px;
  }
  .m-row b{
    font-weight:700; color:#222; letter-spacing:.02em;
    font-size:12px; text-transform:uppercase; margin-right:6px;
  }
  .m-view{
    display:inline-block; margin-top:18px;
    font-size:15px;
    color:var(--ink); text-decoration:none;
    border-bottom:1px solid currentColor; padding-bottom:2px;
  }

  .tweaks{ left:12px; right:12px; width:auto; bottom:12px; }
}