/* 参考图版：固定导航与五张同排影片卡片。 */
.ref-header {
  position: fixed;
  background: rgba(12, 13, 17, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.reference-home .section-shell,
.reference-home .work-row { scroll-margin-top: 110px; }
.film-stage { height: min(38vh, 375px); }
.film-deck { gap: 10px; align-items: flex-end; }
.film-card {
  width: clamp(125px, 13.4vw, 230px);
  height: min(29vh, 300px);
  border-radius: 20px 20px 0 0;
  transform: none;
  opacity: 1;
}
.film-card:hover { transform: translateY(-8px) !important; }
.film-one, .film-five {
  height: min(32vh, 330px);
  background: linear-gradient(145deg, rgba(27, 29, 38, .72), rgba(13, 14, 20, .55));
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.film-one { border-radius: 25px 20px 0 0; }
.film-five { border-radius: 20px 25px 0 0; }
.film-two {
  height: min(30vh, 310px);
  background: radial-gradient(ellipse at 44% 52%, #b5374b 0, #67111d 45%, #27090f 83%);
}
.film-three {
  height: min(28vh, 290px);
  background: radial-gradient(ellipse at 49% 49%, #d98b47 0, #ad4e27 48%, #4b1f1c 88%);
}
.film-four {
  height: min(30vh, 310px);
  background: radial-gradient(ellipse at 46% 54%, #a82342 0, #510b1c 49%, #1e111b 86%);
}
.film-two, .film-three, .film-four { border-color: rgba(255, 255, 255, .15); }
.film-one:before, .film-five:before { opacity: .04; }
.film-two:before, .film-three:before, .film-four:before { opacity: .2; }
.film-orbit {
  width: 70%;
  height: auto;
  aspect-ratio: 1;
  top: 25%;
  left: 15%;
  border-color: rgba(255, 255, 255, .25);
}
.light-streaks {
  inset: 24% -10% 0;
  filter: blur(8px);
  background: linear-gradient(178deg, transparent 30%, rgba(249, 111, 60, .8) 31%, transparent 33%),
    linear-gradient(182deg, transparent 43%, rgba(228, 42, 105, .68) 44%, transparent 46%),
    linear-gradient(176deg, transparent 58%, rgba(129, 111, 248, .58) 59%, transparent 61%);
}
/* 侧卡的弧顶以 SVG 曲线裁切；五张卡共享底边，不旋转卡面。 */
.film-clip-definitions { position: absolute; overflow: hidden; }
.film-stage { height: min(42vh, 390px); }
.film-deck { gap: clamp(7px, 1vw, 14px); }
.film-card {
  width: clamp(115px, 16.3vw, 230px);
  height: auto;
  aspect-ratio: 150 / 218;
  border: 0;
  border-radius: 0;
  padding: clamp(13px, 1.3vw, 21px);
  transform: none;
}
.film-one, .film-five {
  height: auto;
  aspect-ratio: 150 / 235;
  background: linear-gradient(145deg, rgba(26, 27, 34, .82), rgba(19, 20, 28, .6));
}
.film-two, .film-four { height: auto; aspect-ratio: 150 / 216; }
.film-three { height: auto; aspect-ratio: 150 / 201; }
.film-one, .film-two { clip-path: url(#film-wave-left); }
.film-three { clip-path: url(#film-center); }
.film-four, .film-five { clip-path: url(#film-wave-right); }
.film-one .film-top, .film-five .film-top { color: #e2e2e7; }
.film-top { padding-top: 8%; }
.film-card .film-orbit { opacity: .4; }
.film-one .film-orbit, .film-five .film-orbit { opacity: .18; }
.film-two { background: radial-gradient(ellipse at 40% 62%, #a20d22 0, #5d080d 52%, #24070b 95%); }
.film-three { background: radial-gradient(ellipse at 46% 45%, #df8540 0, #bd5527 52%, #62201c 96%); }
.film-four { background: radial-gradient(ellipse at 53% 64%, #8b0928 0, #380918 52%, #09080e 95%); }
.film-two:before, .film-three:before, .film-four:before {
  opacity: .25;
  background: repeating-linear-gradient(130deg, transparent 0 2px, rgba(255,255,255,.45) 3px, transparent 4px);
}
.film-card:hover { transform: translateY(-7px) !important; }
/* 将五张卡片铺向页面两侧，底边留出空间以完整露出圆角。 */
.ref-hero { border-bottom: 0; }
.prism-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, #20152e 0, #101321 36%, #0c0d11 72%);
}
.prism-canvas { display: block; width: 100%; height: 100%; }
.prism-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 6, 12, .32), rgba(5, 6, 12, .22) 44%, rgba(5, 6, 12, .48));
}
.film-stage { z-index: 1; }
.hero-text h1 { white-space: nowrap; }
.film-deck {
  width: calc(100% - 10vw);
  margin: 0 auto;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 24px;
}
.film-one {
  background: radial-gradient(ellipse at 42% 55%, #553261 0, #28203f 52%, #161727 96%);
}
.film-five {
  background: radial-gradient(ellipse at 57% 55%, #28566a 0, #1c3045 52%, #151a2c 96%);
}
.film-one:before, .film-five:before { opacity: .16; }
@media (max-width: 800px) {
  .hero-text h1 { font-size: clamp(23px, 6.5vw, 52px); }
  .reference-home .section-shell,
  .reference-home .work-row { scroll-margin-top: 84px; }
  .film-stage { height: 250px; }
  .film-deck {
    width: calc(100% - 24px);
    min-width: 0;
    gap: 5px;
    padding-bottom: 18px;
  }
  .film-card { width: calc((100% - 20px) / 5); min-width: 0; height: auto; padding: 8px; }
  .film-one, .film-five, .film-two, .film-four, .film-three { height: auto; }
  .film-orbit { left: 15%; width: 70%; height: auto; }
  .film-top { font-size: 9px; }
  .film-top i, .film-label small { display: none; }
  .film-label { padding-top: 6px; }
  .film-label strong { font-size: clamp(9px, 2.2vw, 12px); line-height: 1.25; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .film-card:hover { transform: none !important; }
}

/* 入场与循环轨道仅在脚本成功初始化后启用。 */
.film-stage.is-carousel { touch-action: pan-y; cursor: grab; }
.film-stage.is-dragging { cursor: grabbing; user-select: none; }
.film-stage.is-carousel .film-deck {
  position: absolute;
  left: 0;
  bottom: 0;
  width: max-content;
  min-width: 0;
  margin: 0;
  justify-content: flex-start;
  gap: clamp(30px, 7.3vw, 140px);
  will-change: transform;
}
.film-stage.is-carousel .film-card {
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 150 / 235;
  transform-origin: center bottom;
  transform: scaleY(var(--slot-scale, 1));
  transition: filter .2s, border-color .2s;
  user-select: none;
  -webkit-user-drag: none;
}
.film-stage.is-carousel .film-card:hover { transform: translateY(-7px) scaleY(var(--slot-scale, 1)) !important; }
.film-stage.is-carousel .film-card.is-entering { animation: film-enter .8s cubic-bezier(.2,.7,.2,1) both; }
.film-stage.is-carousel .film-three.is-entering { animation-delay: 0s; --entry-x: 0px; }
.film-stage.is-carousel .film-two.is-entering { animation-delay: .12s; --entry-x: 60px; }
.film-stage.is-carousel .film-four.is-entering { animation-delay: .12s; --entry-x: -60px; }
.film-stage.is-carousel .film-one.is-entering { animation-delay: .24s; --entry-x: 120px; }
.film-stage.is-carousel .film-five.is-entering { animation-delay: .24s; --entry-x: -120px; }
@keyframes film-enter { from { opacity: 0; transform: translate3d(var(--entry-x), 75px, 0) scaleY(var(--slot-scale, 1)); } to { opacity: 1; transform: translate3d(0, 0, 0) scaleY(var(--slot-scale, 1)); } }
.film-pause {
  position: absolute;
  z-index: 4;
  right: 2%;
  bottom: 4px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px;
  background: rgba(12,13,17,.8);
  color: #e7e7ed;
  font: 11px var(--sans);
  cursor: pointer;
}
@media (max-width: 800px) {
  .film-stage.is-carousel .film-deck { gap: 5px; }
  .film-stage.is-carousel .film-card { width: calc((100vw - 44px) / 5); }
  .film-pause { right: 12px; bottom: 0; font-size: 10px; padding: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-stage.is-carousel .film-card.is-entering { animation: none; }
  .film-stage.is-carousel .film-card:hover { transform: scaleY(var(--slot-scale, 1)) !important; }
}

/* 真正的圆柱透视环：由每张卡片的 3D 坐标形成自然的边缘透视。 */
.film-stage.is-carousel {
  /* 扩大顶部裁切范围；圆环仍以原来的底边为基准。 */
  height: min(58vh, 560px);
  perspective: none;
}
.film-stage.is-carousel .film-deck {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  transform: none !important;
  transform-style: preserve-3d;
  perspective: var(--ring-perspective, 810px);
  perspective-origin: 50% calc(100% + 160px);
}
.film-stage.is-carousel .film-card {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: clamp(125px, 17.5vw, 250px);
  height: auto;
  aspect-ratio: 150 / 218;
  border-radius: 14px;
  clip-path: none;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12);
}
.film-stage.is-carousel .film-card:hover { transform: var(--ring-transform) !important; filter: brightness(1.1) !important; }
.film-stage.is-carousel .film-card.is-entering {
  animation: ring-rise .9s cubic-bezier(.2,.7,.2,1) var(--entrance-delay, 0s) both;
}
@keyframes ring-rise { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 800px) {
  .film-stage.is-carousel { height: 315px; }
  .film-stage.is-carousel .film-card { width: min(26vw, 145px); bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-stage.is-carousel .film-card.is-entering { animation: none; }
  .film-stage.is-carousel .film-card:hover { transform: var(--ring-transform) !important; }
}

/* 恢复深灰作品占位卡样式，保留圆环交互。 */
.film-stage.is-carousel .film-card {
  width: clamp(125px, 17.5vw, 285px);
  aspect-ratio: 333 / 395;
  background: #19191b;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  box-shadow: none;
}
.film-stage.is-carousel .film-card:before { display: none; }
.film-stage.is-carousel .film-orbit {
  top: 19%;
  left: 15%;
  width: 70%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--card-ring);
  opacity: .85;
}
.film-stage.is-carousel .film-orbit:after { display: none; }
.film-one { --card-ring: #4dbce8; }
.film-two { --card-ring: #b8d8da; }
.film-three { --card-ring: #d2b55d; }
.film-four { --card-ring: #8e9ddd; }
.film-five { --card-ring: #d6d6d2; }
.film-stage.is-carousel .film-top {
  position: absolute;
  left: 20px;
  top: 44%;
  padding: 0;
  color: #82daff;
}
.film-stage.is-carousel .film-top i { color: #9d9d98; }
.film-stage.is-carousel .film-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 28px;
  padding-top: 18px;
  border-color: rgba(255,255,255,.18);
}
.film-stage.is-carousel .film-label strong { font-size: 19px; }
.film-stage.is-carousel .film-label small { display: none; }
.film-stage.is-carousel .film-label:after { content: '↗'; position: absolute; right: 0; bottom: 0; font-size: 21px; }
@media (max-width: 800px) {
  .film-stage.is-carousel .film-card { width: min(27vw, 155px); }
  .film-stage.is-carousel .film-top { left: 10px; font-size: 9px; }
  .film-stage.is-carousel .film-label { left: 10px; right: 10px; bottom: 12px; padding-top: 8px; }
  .film-stage.is-carousel .film-label strong { font-size: clamp(10px, 2.4vw, 13px); }
  .film-stage.is-carousel .film-label:after { font-size: 14px; }
}

/* 静态五列作品卡：不启用轮播、拖拽或自动移动。 */
.film-stage { height: min(58vh, 560px); cursor: auto; }
.film-deck {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  width: calc(100% - 7vw);
  height: 100%;
  margin: 0 auto;
  padding-bottom: 24px;
  gap: 14px;
  perspective: none;
}
.film-deck .film-card {
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 333 / 395;
  padding: 20px;
  background: #19191b;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
}
.film-deck .film-card:hover { transform: none !important; border-color: rgba(130,218,255,.62); }
.film-deck .film-card:before { display: none; }
.film-deck .film-orbit { top: 19%; left: 15%; width: 70%; height: auto; aspect-ratio: 1; border: 1px solid var(--card-ring); opacity: .85; }
.film-deck .film-orbit:after { display: none; }
.film-deck .film-top { position: absolute; left: 20px; top: 44%; padding: 0; color: #82daff; }
.film-deck .film-top i { color: #9d9d98; }
.film-deck .film-label { position: absolute; left: 20px; right: 20px; bottom: 28px; padding-top: 18px; border-color: rgba(255,255,255,.18); }
.film-deck .film-label strong { font-size: 19px; }
.film-deck .film-label small { display: none; }
.film-deck .film-label:after { content: '↗'; position: absolute; right: 0; bottom: 0; font-size: 21px; }
@media (max-width: 800px) {
  .ref-hero { height: auto; min-height: 0; }
  .film-stage { position: relative; height: auto; margin-top: 40px; overflow: visible; }
  .film-deck { position: relative; left: auto; bottom: auto; width: calc(100% - 40px); min-width: 0; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transform: none; }
  .film-deck .film-card { width: 100%; padding: 12px; }
  .film-deck .film-top { left: 12px; font-size: 9px; }
  .film-deck .film-label { left: 12px; right: 12px; bottom: 12px; padding-top: 9px; }
  .film-deck .film-label strong { font-size: 13px; }
  .film-deck .film-label:after { font-size: 14px; }
}

/* 将五类作品从首屏分离为独立目录，保持静态卡片与分类跳转。 */
.ref-hero { height: clamp(540px, 65vh, 700px); min-height: 0; background: #000; }
.prism-background { background: #000; }
.reference-home .grain { display: none; }
.work-directory { border-bottom: 1px solid var(--line); }
.work-directory .film-stage { position: relative; height: auto; margin-top: 52px; overflow: visible; }
.work-directory .light-streaks { display: none; }
.work-directory .film-deck { position: relative; left: auto; bottom: auto; width: 100%; height: auto; margin: 0; padding: 0; transform: none; }
.work-directory .directory-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s ease; }
.work-directory .film-one .directory-cover { object-position: 50% 45%; }
.work-directory .film-two .directory-cover { object-position: 43% 50%; }
.work-directory .film-card { border-radius: 14px; overflow: hidden; box-shadow: none; }
.work-directory .film-card::before { content: ""; display: block; position: absolute; inset: 0; z-index: 1; opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 16%, rgba(0,0,0,.25) 30%, transparent 43%); pointer-events: none; }
.work-directory .film-card:hover .directory-cover { transform: scale(1.035); }
.work-directory .film-label { z-index: 2; }
.ref-nav { isolation: isolate; }
.ref-nav a { position: relative; z-index: 1; }
.nav-indicator { display: none; }
.ref-nav.nav-ready .nav-indicator {
  display: block;
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  border-radius: 22px;
  background: #f4f4f5;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.22,.8,.22,1), width .34s cubic-bezier(.22,.8,.22,1);
}
.ref-nav.nav-ready a.selected { background: transparent; color: #111217; }
.hero-text h1 { letter-spacing: -.045em; }
.reference-home .contact h2 { line-height: 1.04; }
@media (max-width: 800px) {
  .ref-hero { height: auto; min-height: 0; padding-bottom: 90px; }
  .work-directory .film-stage { margin-top: 36px; }
  .work-directory .film-deck { width: 100%; }
}
@media (max-width: 420px) {
  .ref-nav a:nth-child(3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-nav.nav-ready .nav-indicator { transition: none; }
}