/* === Global === */
* { box-sizing: border-box; }
:root {
  --bg: #000000;
  --fg: #ffffff;
  --fg-soft: #e8e8e8;
  --gold: #F5D300;
  --gold-soft: rgba(245,211,0,0.6);
  --muted: #9aa0a6;
  --card: #0f0f0f;
  --line: rgba(255,255,255,0.08);
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ==== Intro Overlay (same as previous package) ==== */
#hero { position: fixed; inset: 0; background:#000; overflow:hidden; display:grid; place-items:center; z-index: 50; }
.silhouette-wrap { position:absolute; width:min(38vw,520px); aspect-ratio:1/1; top:18%; filter: drop-shadow(0 0 0 rgba(245,211,0,0)); animation: glowUp 1.8s ease forwards 0.6s; }
@keyframes glowUp { 0%{filter:drop-shadow(0 0 0 rgba(245,211,0,0)); opacity:0; transform:translateY(14px) scale(.98);} 60%{opacity:1;} 100%{filter:drop-shadow(0 0 24px rgba(245,211,0,.28)); opacity:1; transform:translateY(0) scale(1);} }
.silhouette { width:100%; height:100%; object-fit:contain; opacity:0; animation: silhouetteReveal 1.2s ease-out forwards 0.6s; }
@keyframes silhouetteReveal { 0%{opacity:0; filter:blur(6px);} 100%{opacity:1; filter:blur(0);} }
.rimlight { position:absolute; inset:0; background: linear-gradient(120deg, transparent 40%, rgba(245,211,0,.6) 50%, transparent 60%); mix-blend-mode: screen; opacity:0; animation: sweep 1.2s ease-out .9s forwards; }
@keyframes sweep { 0%{opacity:0; transform:translateX(-40%);} 20%{opacity:1;} 100%{opacity:0; transform:translateX(60%);} }
.titles { position:absolute; top:50%; width:100%; text-align:center; transform: translateY(-6%); }
.title-en { margin:0; font-family: Anton, Impact, sans-serif; letter-spacing:.06em; font-size: clamp(48px, 9vw, 140px); line-height:1; opacity:0; filter: blur(8px); animation: fadeSharp .8s ease-out forwards 1.8s;}
.title-zh { margin:10px 0 0 0; font-weight:700; font-size: clamp(28px, 5.5vw, 72px); color: var(--fg-soft); opacity:0; filter: blur(10px); animation: fadeSharp .95s ease-out forwards 2.2s;}
.slogan { margin-top: clamp(16px, 3.2vw, 32px); opacity:0; transform: translateY(8px); animation: riseIn .8s ease-out forwards 3.2s; }
.slogan .en { font-size: clamp(14px,2.4vw,28px); letter-spacing: .18em; color: var(--gold); text-transform: uppercase; text-indent:.18em; }
.slogan .zh { margin-top:6px; font-size: clamp(14px,2.1vw,24px); color:#fff; opacity:.92; }
@keyframes fadeSharp { 0%{opacity:0; filter:blur(16px); transform:translateY(8px);} 100%{opacity:1; filter:blur(0); transform:translateY(0);} }
@keyframes riseIn { 0%{opacity:0; transform:translateY(12px);} 100%{opacity:1; transform:translateY(0);} }
.skip { position:absolute; bottom:28px; right:28px; font-size:14px; color:var(--muted); padding:10px 14px; border:1px solid rgba(255,255,255,.14); border-radius:999px; cursor:pointer; user-select:none; transition: .2s; }
.skip:hover { color:#000; background:#fff; border-color:#fff; }

/* Reveal */
#site { opacity:0; transition: opacity .6s ease; }
#site.revealed { opacity:1; }

/* Sticky header */
.site-header { display:flex; justify-content:space-between; align-items:center; padding:22px clamp(16px, 4vw, 48px); position: sticky; top:0; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); z-index: 10; border-bottom: 1px solid var(--line); }
.site-header .brand { font-family: Anton, Impact, sans-serif; letter-spacing:.08em; }
.site-header nav a { color: var(--fg-soft); margin-left: 18px; text-decoration:none; font-weight:600; }
.site-header nav a:hover { color: var(--fg); }

/* Statement */
.statement { min-height: 36vh; display:grid; place-content:center; text-align:center; padding:60px 20px; }
.statement h2 { font-size: clamp(28px, 6vw, 64px); margin:0 0 6px; }
.statement .zh { color: var(--fg-soft); margin:0; font-size: clamp(14px, 3vw, 22px); }

/* Sections */
.section-head { display:flex; justify-content:space-between; align-items:end; gap:10px; padding: 0 clamp(16px,4vw,48px); margin-bottom: 12px; }
.section-head h3 { font-size: clamp(18px, 3.8vw, 28px); margin: 0; }
.section-head .more { color: var(--fg-soft); text-decoration:none; border-bottom: 1px solid transparent; }
.section-head .more:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* A2 Wide Cinematic Thumbnails with Gold Outline Hover */
.thumb-row { display:grid; grid-template-columns: repeat( auto-fill, minmax(280px, 1fr) ); gap: 16px; padding: 0 clamp(16px,4vw,48px) 24px; }
.card { position:relative; background: var(--card); border:1px solid var(--line); border-radius: 16px; overflow:hidden; }
.card .thumb { position:relative; padding-top: 56.25%; background:#111; overflow:hidden; }
.card .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .35s ease; }
.card:hover .thumb img { transform: scale(1.06); }
/* Hover style 2: gold outline */
.card::after { content:""; position:absolute; inset:0; border-radius: 16px; border:2px solid transparent; pointer-events:none; transition: border-color .25s ease, box-shadow .25s ease; }
.card:hover::after { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,211,0,0.18) inset; }
.card .meta { padding: 14px; }
.card .title { margin: 0 0 4px; font-weight: 700; font-size: 16px; line-height: 1.25; }
.card .title a { color:#fff; text-decoration:none; }
.card .title a:hover { text-decoration:underline; }
.card .chips { display:flex; gap:8px; flex-wrap: wrap; }
.chip { font-size:12px; color:#000; background: var(--gold); border-radius: 999px; padding: 6px 10px; font-weight: 700; }

/* Works shares row style with Latest */
.works { padding-bottom: 24px; }
.latest { padding-bottom: 24px; }

/* About */
.about { padding: 32px clamp(16px,4vw,48px) 48px; text-align:center; max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about p { margin: 0 0 8px; font-size: clamp(14px, 2.2vw, 18px); color: var(--fg-soft); }

/* Connect */
.connect { padding: 24px 0 48px; }
.icon-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) ); gap: 12px; padding: 0 clamp(16px,4vw,48px); }
.icon { display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius: 14px; padding: 18px; text-decoration:none; color:#fff; font-size: 28px; position: relative; transition: border-color .2s ease, transform .2s ease; }
.icon:hover { border-color: var(--gold); transform: translateY(-2px); }
.icon::after { content: attr(data-label); position:absolute; bottom:8px; font-size: 12px; color: var(--muted); }

/* Collab */
.collab { padding: 48px clamp(16px,4vw,48px) 64px; display:grid; place-content:center; }
.collab .box { max-width: 780px; margin: 0 auto; background: #0b0b0b; border: 1px solid var(--line); border-radius: 16px; padding: 24px; text-align:center; }
.collab h4 { margin: 0 0 8px; font-size: clamp(18px, 4.2vw, 28px); }
.collab p { margin: 0 0 16px; color: var(--fg-soft); }
.btn { display:inline-block; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 12px 18px; color: #fff; text-decoration: none; font-weight: 700; margin: 6px; }
.btn.primary { background: var(--gold); color: #000; border-color: var(--gold); }

/* Footer */
.footer { padding: 28px; text-align:center; color: var(--muted); border-top: 1px solid var(--line); }

/* Lightbox */
.lightbox { position: fixed; inset:0; background: rgba(0,0,0,0.9); display:grid; place-items:center; z-index: -9060; }
.lb-inner { width:min(92vw, 1080px); }
.lb-close { background:transparent; color:#fff; border:1px solid var(--line); border-radius: 999px; padding: 10px 14px; float:right; cursor:pointer;}
.lb-content { position: relative; margin-top: 12px; padding-top: 56.25%; }
.lb-content iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }


#site {
  opacity: 0;
  transition: opacity .6s ease;
}

#site.revealed {
  opacity: 1; /* <<< THIS is what brightens the page */
}