/* ============================================================
   掌荷 AI · 影像作品集
   Dark editorial / film-archive aesthetic
   ============================================================ */

:root{
  --bg:        #0a0907;
  --bg-soft:   #12100c;
  --ink:       #efeae1;
  --ink-dim:   #b6ad9f;
  --muted:     #7d7467;
  --line:      rgba(239,234,225,.13);
  --line-soft: rgba(239,234,225,.07);
  --accent:    #e0a94f;
  --accent-dim:#8a6428;

  --sans: "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif: "Instrument Serif","Iowan Old Style","Times New Roman","Songti SC","STSong",serif;

  --pad: clamp(20px, 4vw, 64px);
  --max: 1680px;
  --ease: cubic-bezier(.22,.68,0,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,video{ display:block; max-width:100%; }

::selection{ background:var(--accent); color:#0a0907; }

/* film grain -------------------------------------------------- */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  background:linear-gradient(to bottom, rgba(10,9,7,.86), rgba(10,9,7,0));
  backdrop-filter:blur(6px);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  padding:12px var(--pad);
  background:rgba(10,9,7,.9);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px);
}

.brand{ display:flex; align-items:baseline; gap:10px; }
.brand__mark{
  width:9px; height:9px; background:var(--accent);
  border-radius:1px; transform:translateY(-1px) rotate(45deg);
}
.brand__name{ font-size:15px; letter-spacing:.14em; font-weight:600; }
.brand__sub{
  font-size:11px; letter-spacing:.24em; color:var(--muted);
  padding-left:10px; border-left:1px solid var(--line);
}

.nav__links{ display:flex; gap:6px; }
.nav__links a{
  font-size:12px; letter-spacing:.18em; color:var(--ink-dim);
  padding:8px 14px; border-radius:999px;
  transition:color .3s, background .3s;
}
.nav__links a:hover{ color:var(--ink); background:rgba(239,234,225,.06); }

.nav__cta{
  font-size:12px; letter-spacing:.14em;
  border:1px solid var(--line);
  padding:9px 20px; border-radius:999px;
  transition:border-color .3s, background .3s, color .3s;
}
.nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:#0a0907; }

/* ── HERO ────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(110px, 14vh, 180px) var(--pad) clamp(60px, 8vh, 110px);
  overflow:hidden;
}
.hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 32%, rgba(224,169,79,.16), transparent 62%),
    radial-gradient(45% 45% at 12% 78%, rgba(120,86,48,.12), transparent 70%),
    linear-gradient(180deg, #0a0907 0%, #0c0b08 55%, #0a0907 100%);
}
.hero__glow::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 1px, rgba(239,234,225,.022) 1px 2px);
  mask-image:linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:clamp(32px,6vw,96px);
  align-items:center;
}

.eyebrow{
  margin:0 0 26px;
  font-size:10.5px; letter-spacing:.34em; color:var(--accent);
  text-transform:uppercase;
}

.hero__title{
  margin:0;
  font-size:clamp(46px, 7.4vw, 108px);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-.015em;
}
.hero__title .line{ display:block; }
.line--accent{
  color:var(--accent);
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.01em;
}

.hero__lede{
  max-width:34em;
  margin:32px 0 0;
  color:var(--ink-dim);
  font-size:clamp(13.5px,1.15vw,16px);
  line-height:1.95;
  letter-spacing:.01em;
}

/* stats */
.stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,56px);
  margin:clamp(34px,5vh,54px) 0 0;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.stat dt{
  font-size:10px; letter-spacing:.26em; color:var(--muted);
  margin-bottom:6px;
}
.stat dd{
  margin:0; display:flex; align-items:baseline; gap:5px;
  font-family:var(--serif); font-size:32px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat dd small{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; color:var(--muted); }

/* hero reel */
.hero__reel{
  position:relative;
  justify-self:end;
  width:min(100%, 318px);
}
.reel-card{
  position:relative; margin:0;
  aspect-ratio:9/16;
  border:1px solid rgba(239,234,225,.16);
  background:#15120d;
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
}
.reel-card video{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.04);
}
.reel-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:64px 16px 16px;
  display:flex; flex-direction:column; gap:5px;
  background:linear-gradient(to top, rgba(6,5,4,.94) 0%, rgba(6,5,4,.72) 42%, transparent 100%);
}
.reel-card__tag{ font-size:9.5px; letter-spacing:.22em; color:var(--accent); }
.reel-card__name{ font-size:12px; letter-spacing:.06em; color:var(--ink-dim); }

.reel-card--back{
  position:absolute; inset:0;
  transform:translate(18px,-18px) rotate(3.2deg);
  opacity:.55;
  background:linear-gradient(150deg, rgba(224,169,79,.18), rgba(20,17,12,.35) 55%, rgba(224,169,79,.06));
  border:1px solid rgba(224,169,79,.22);
  z-index:-1;
}

.reel-note{
  margin:20px 0 0; text-align:right;
  font-size:10.5px; letter-spacing:.16em; line-height:2;
  color:var(--muted);
}

.hero__scroll{
  position:absolute; left:var(--pad); bottom:128px; z-index:3;
  display:flex; align-items:center; gap:14px;
  font-size:9.5px; letter-spacing:.3em; color:var(--muted);
}
.hero__scroll i{
  display:block; width:56px; height:1px; background:var(--line);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:translateX(-100%); animation:scrollLine 3.2s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform:translateX(-100%); }
  55%,100%{ transform:translateX(100%); }
}

/* bottom film strip */
.hero__strip{
  position:absolute; left:0; right:0; bottom:0; height:96px;
  overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to top, #000 20%, rgba(0,0,0,.55) 65%, transparent);
  mask-image:linear-gradient(to top, #000 20%, rgba(0,0,0,.55) 65%, transparent);
}
.hero__strip-track{
  display:flex; gap:5px; width:max-content;
  animation:stripMove 70s linear infinite;
  opacity:.42;
}
.hero__strip-track img{
  width:52px; height:92px; object-fit:cover;
  filter:grayscale(.35) brightness(.85);
  border:1px solid rgba(239,234,225,.1);
}
@keyframes stripMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* reveal animation */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ── WORKS ───────────────────────────────────────────────── */
.works{
  position:relative;
  padding:clamp(60px,10vh,120px) var(--pad) clamp(60px,9vh,110px);
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg, #0a0907, #0b0a08 40%, #0a0907);
}
.works__head{
  max-width:var(--max); margin:0 auto clamp(34px,5vh,56px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.section-title{
  margin:0;
  font-size:clamp(26px,3vw,44px);
  font-weight:600; letter-spacing:.02em;
}
.section-sub{ margin:0; font-size:11.5px; letter-spacing:.2em; color:var(--muted); }

.works__body{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:210px minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

/* rail */
.rail{ position:sticky; top:104px; }
.rail__label{
  margin:0 0 18px; font-size:9.5px; letter-spacing:.3em; color:var(--muted);
}
.rail__list{ list-style:none; margin:0; padding:0; }
.rail__item{ border-top:1px solid var(--line-soft); }
.rail__item:last-child{ border-bottom:1px solid var(--line-soft); }

.rail__btn{
  width:100%; display:flex; align-items:baseline; gap:10px;
  padding:11px 2px; text-align:left;
  color:var(--ink-dim);
  transition:color .35s, padding .35s var(--ease);
  position:relative;
}
.rail__btn:hover{ color:var(--ink); padding-left:8px; }
.rail__no{
  font-family:var(--serif); font-size:11px; color:var(--muted);
  width:18px; flex:none; font-variant-numeric:tabular-nums;
}
.rail__name{ font-size:13px; letter-spacing:.04em; }
.rail__en{
  display:block; font-size:8.5px; letter-spacing:.24em; color:var(--muted);
  margin-top:2px;
}
.rail__count{
  margin-left:auto; font-size:10px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.rail__btn.is-active{ color:var(--accent); }
.rail__btn.is-active .rail__no,
.rail__btn.is-active .rail__en,
.rail__btn.is-active .rail__count{ color:var(--accent-dim); }
.rail__btn.is-active::before{
  content:""; position:absolute; left:-14px; top:16px; bottom:16px;
  width:2px; background:var(--accent);
}

.rail__foot{
  margin-top:26px; padding-top:18px;
  display:flex; gap:10px; align-items:flex-start;
  border-top:1px solid var(--line-soft);
}
.rail__foot p{ margin:0; font-size:10px; line-height:1.9; letter-spacing:.06em; color:var(--muted); }
.rail__dot{
  width:5px; height:5px; border-radius:50%; background:var(--accent);
  margin-top:6px; flex:none;
  box-shadow:0 0 0 4px rgba(224,169,79,.12);
}

/* gallery */
.gallery{ min-width:0; }

.track-head{
  grid-column:1/-1;
  display:flex; align-items:baseline; gap:16px;
  margin:38px 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.track-head:first-child{ margin-top:0; }
.track-head__no{
  font-family:var(--serif); font-size:13px; color:var(--accent);
}
.track-head__name{
  margin:0; font-size:clamp(18px,1.7vw,23px); font-weight:600; letter-spacing:.03em;
}
.track-head__en{
  font-size:9px; letter-spacing:.26em; color:var(--muted); text-transform:uppercase;
}
.track-head__count{
  margin-left:auto; font-size:10px; letter-spacing:.18em; color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(172px, 1fr));
  gap:clamp(10px,1.1vw,16px);
}

.card{
  position:relative;
  aspect-ratio:9/16;
  background:#14110c;
  border:1px solid var(--line-soft);
  overflow:hidden;
  text-align:left;
  width:100%;
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .5s;
}
.card.is-in{ opacity:1; transform:none; }
.card:hover{ border-color:rgba(224,169,79,.45); }

.card__poster{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) brightness(.98);
  transform:scale(1.001);
  transition:transform 1.1s var(--ease), filter .6s;
}
.card:hover .card__poster{
  transform:scale(1.055);
  filter:saturate(1.02) brightness(1);
}

.card__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(7,6,4,.9) 0%, rgba(7,6,4,.35) 34%, transparent 58%),
    linear-gradient(to bottom, rgba(7,6,4,.55), transparent 26%);
  pointer-events:none;
}

.card__top{
  position:absolute; top:10px; left:11px; right:11px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:9px; letter-spacing:.18em; color:rgba(239,234,225,.72);
  font-variant-numeric:tabular-nums;
}
.card__no{ padding-left:0; }
.card__dur{
  border:1px solid rgba(239,234,225,.28);
  border-radius:999px; padding:2px 7px;
  backdrop-filter:blur(4px);
  background:rgba(8,7,5,.35);
}

.card__bottom{
  position:absolute; left:12px; right:12px; bottom:11px;
  display:flex; flex-direction:column; gap:5px;
}
.card__title{
  font-size:13.5px; font-weight:500; letter-spacing:.03em;
  color:var(--ink);
  transition:transform .5s var(--ease);
}
.card__cat{
  font-size:8.5px; letter-spacing:.24em; color:var(--accent);
  text-transform:uppercase;
  opacity:.72; transition:opacity .4s;
}
.card:hover .card__title{ transform:translateY(-2px); }
.card:hover .card__cat{ opacity:1; }

.card__play{
  position:absolute; top:50%; left:50%;
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border:1px solid rgba(239,234,225,.5);
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(8,7,5,.28);
  backdrop-filter:blur(3px);
  opacity:0; transform:scale(.82);
  transition:opacity .4s var(--ease), transform .5s var(--ease), background .4s;
}
.card:hover .card__play{ opacity:1; transform:scale(1); background:rgba(224,169,79,.92); border-color:transparent; }
.card__play svg{ fill:var(--ink); transition:fill .3s; }
.card:hover .card__play svg{ fill:#0a0907; }

.card__line{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease);
}
.card:hover .card__line{ transform:scaleX(1); }

/* ── ABOUT ───────────────────────────────────────────────── */
.about{
  padding:clamp(70px,10vh,130px) var(--pad);
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(50% 60% at 80% 10%, rgba(224,169,79,.07), transparent 65%),
    var(--bg);
}
.about__inner{ max-width:var(--max); margin:0 auto; }
.about__title{
  margin:0 0 clamp(40px,6vh,70px);
  font-size:clamp(28px,4vw,58px);
  line-height:1.18; font-weight:600; letter-spacing:.01em;
}
.about__grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,54px);
}
.about__item{
  padding-top:20px; border-top:1px solid var(--line);
}
.about__no{
  font-family:var(--serif); font-size:12px; color:var(--accent);
  letter-spacing:.1em;
}
.about__item h3{
  margin:14px 0 10px; font-size:17px; font-weight:600; letter-spacing:.03em;
}
.about__item p{
  margin:0; color:var(--ink-dim); font-size:13px; line-height:1.95;
}

.about__cta{
  margin-top:clamp(44px,6vh,72px);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.btn{
  display:inline-block;
  background:var(--accent); color:#0a0907;
  font-size:12px; letter-spacing:.18em;
  padding:14px 34px; border-radius:999px;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px rgba(224,169,79,.7);
}
.about__hint{ font-size:11px; letter-spacing:.14em; color:var(--muted); }

.foot{
  padding:26px var(--pad) 30px;
  border-top:1px solid var(--line-soft);
}
.foot__row{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:10px; letter-spacing:.2em; color:var(--muted);
}

/* ── LIGHTBOX ────────────────────────────────────────────── */
.lb{
  position:fixed; inset:0; z-index:200;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  background:rgba(6,5,4,.96);
  backdrop-filter:blur(16px);
  opacity:0;
  transition:opacity .35s var(--ease);
}
.lb[hidden]{ display:none; }
.lb.is-open{ opacity:1; }

.lb__stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,2vw,28px);
  padding:clamp(16px,4vh,48px);
  min-height:0;
}
.lb__frame{
  margin:0;
  height:min(84vh, 900px);
  aspect-ratio:9/16;
  background:#000;
  border:1px solid rgba(239,234,225,.14);
  box-shadow:0 40px 120px -40px #000;
  position:relative;
  max-width:100%;
}
.lb__frame.is-wide{ aspect-ratio:16/9; height:auto; width:min(84vw,1000px); }
.lb__frame video{ width:100%; height:100%; object-fit:contain; background:#000; }

.lb__nav{
  width:44px; height:44px; flex:none;
  border:1px solid rgba(239,234,225,.18);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-dim);
  transition:background .3s, color .3s, border-color .3s;
}
.lb__nav:hover{ background:rgba(239,234,225,.1); color:var(--ink); }

.lb__close{
  position:absolute; top:20px; right:20px; z-index:3;
  width:42px; height:42px;
  border:1px solid rgba(239,234,225,.18);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--ink-dim);
  transition:background .3s, color .3s;
}
.lb__close:hover{ background:rgba(239,234,225,.1); color:var(--ink); }

.lb__info{
  border-left:1px solid var(--line-soft);
  padding:clamp(28px,5vh,64px) 28px;
  display:flex; flex-direction:column;
  justify-content:center;
  gap:0;
  background:rgba(12,11,8,.6);
}
.lb__index{
  margin:0 0 18px;
  font-family:var(--serif); font-size:12px; letter-spacing:.2em; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.lb__info h2{
  margin:0 0 8px; font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:.02em;
}
.lb__cat{
  margin:0 0 26px; font-size:9.5px; letter-spacing:.26em; color:var(--muted);
  text-transform:uppercase;
}
.lb__meta{ margin:0 0 22px; border-top:1px solid var(--line-soft); }
.lb__meta div{
  display:flex; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
  font-size:12px;
}
.lb__meta dt{ color:var(--muted); letter-spacing:.14em; }
.lb__meta dd{ margin:0; color:var(--ink-dim); font-variant-numeric:tabular-nums; }

.lb__note{
  margin:0 0 30px; font-size:11.5px; line-height:1.9; color:var(--muted);
}
.lb__nextbtn{
  align-self:flex-start;
  font-size:12px; letter-spacing:.16em;
  border-bottom:1px solid var(--accent-dim);
  padding-bottom:4px;
  color:var(--accent);
  transition:border-color .3s, color .3s;
}
.lb__nextbtn:hover{ border-color:var(--accent); }

body.is-locked{ overflow:hidden; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 999px){
  .hero__inner{ grid-template-columns:minmax(0,1fr); gap:56px; }
  .hero__reel{ justify-self:start; width:min(74%,300px); }
  .reel-note{ text-align:left; }
  .works__body{ grid-template-columns:minmax(0,1fr); }
  .rail{ position:static; min-width:0; }
  .rail__list{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:8px;
    scrollbar-width:none; min-width:0; max-width:100%;
  }
  .rail__list::-webkit-scrollbar{ display:none; }
  .rail__item{ border:0; flex:none; }
  .rail__btn{
    border:1px solid var(--line); border-radius:999px;
    padding:8px 14px; gap:7px;
  }
  .rail__btn:hover{ padding-left:14px; }
  .rail__btn.is-active::before{ display:none; }
  .rail__en{ display:none; }
  .rail__foot{ display:none; }
  .about__grid{ grid-template-columns:1fr; }
  .lb{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .lb__info{
    border-left:0; border-top:1px solid var(--line-soft);
    padding:20px var(--pad) 28px;
    max-height:34vh; overflow-y:auto;
  }
  .lb__index{ margin-bottom:10px; }
  .lb__meta{ display:none; }
  .lb__note{ display:none; }
  .lb__nextbtn{ display:none; }
}

@media (max-width: 640px){
  body{ font-size:14px; }
  .nav__links{ display:none; }
  .brand__sub{ display:none; }
  .nav__cta{ padding:8px 16px; font-size:11px; }
  .works__head{ gap:6px; margin-bottom:26px; }
  .section-sub{ font-size:10.5px; letter-spacing:.14em; }
  .rail__label{ margin-bottom:12px; }
  .rail__list{
    -webkit-mask-image:linear-gradient(to right, #000 86%, transparent);
    mask-image:linear-gradient(to right, #000 86%, transparent);
  }
  .hero{ min-height:auto; padding-top:110px; }
  .hero__title{ font-size:clamp(38px,11vw,58px); }
  .stats{ gap:22px; }
  .stat dd{ font-size:26px; }
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .card__title{ font-size:12px; }
  .card__play{ display:none; }
  .lb__frame{ height:auto; width:100%; max-height:70vh; }
  .lb__nav{ position:absolute; bottom:12px; }
  .lb__nav--prev{ left:16px; }
  .lb__nav--next{ right:16px; }
  .lb__stage{ padding:60px 12px 76px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal], .card{ opacity:1 !important; transform:none !important; }
}