/* ══════════════ 胶卷挑选条（作品 / 收藏） ══════════════
   细节做了这些：
   · 上下两条片基，齿孔是圆角的（radial-gradient 冲出来的椭圆孔）
   · 齿孔之间印着画幅编号 01 02 03…
   · 片基上有竖向拉丝纹 + 一道斜向反光
   · 每格是"画幅"：内描边 + 四角裁切标记
   · 自动从右往左过片，鼠标放上去停住
*/

.reel {
  position: relative;
  padding: 0;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .62)) drop-shadow(0 2px 0 rgba(255, 240, 214, .05));
}

/* ── 片基 ── */
.reel__track {
  --strip-h: 36px;          /* 上下片基高度 */
  --hole-gap: 22px;         /* 齿孔间距 */
  --holes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='36'><rect x='3.5' y='12' width='15' height='12' rx='3.5' fill='%2305030a'/><rect x='21' y='0' width='1' height='36' fill='rgba(255,255,255,0.05)'/></svg>");
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: calc(var(--strip-h) + 12px) 22px;
  margin: 0;
  scrollbar-width: none;
  cursor: grab;
  position: relative;
  outline: none;

  background-color: #17100c;
  /* 上/下片基各两层：齿孔图 + 片基底色。
     background-attachment: local 是关键 —— 背景跟着滚动内容走、并且覆盖整条可滚动宽度；
     之前把孔画在 ::before/::after 上（left:0;right:0 只有可视宽度那么大），
     一往右滚带子就滚到边界外，看着就像"齿孔断掉了"。 */
  background-image:
    var(--holes), linear-gradient(#191110, #191110),
    var(--holes), linear-gradient(#191110, #191110);
  background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
  background-size: 22px var(--strip-h), 100% var(--strip-h), 22px var(--strip-h), 100% var(--strip-h);
  background-position: 0 0, 0 0, 0 100%, 0 100%;
  background-attachment: local, local, local, local;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, .06),
    inset 0 -1px 0 rgba(255, 240, 214, .06);
  background-image:
    /* 灰尘 / 划痕：几个固定的浅色小点，不规则 */
    radial-gradient(circle at 17% 12%, rgba(255,244,225,.16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 63% 78%, rgba(255,244,225,.13) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 26%, rgba(255,244,225,.11) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 62%, rgba(255,244,225,.09) 0 1px, transparent 1.5px),
    /* 乳剂颗粒：两个互质周期的极淡纹理叠在一起，不会形成可见网格 */
    repeating-linear-gradient(90deg, rgba(255,232,200,.02) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(0deg, rgba(255,232,200,.014) 0 2px, transparent 2px 9px),
    /* 一道很淡的斜向反光 */
    linear-gradient(101deg, transparent 34%, rgba(255, 233, 196, .055) 46%, rgba(255, 233, 196, .015) 54%, transparent 64%),
    /* 片基：暖棕到深紫的纵向渐变（胶片片基是暖的） */
    linear-gradient(180deg, #3a2718 0%, #1f1512 36%, #150e12 64%, #2a1a1e 100%);

  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 214, .12),
    inset 0 8px 18px rgba(0, 0, 0, .5),
    inset 0 -8px 18px rgba(0, 0, 0, .5);
}
.reel__track::-webkit-scrollbar { height: 0; }
.reel__track.dragging { cursor: grabbing; }
.reel__track:focus-visible { box-shadow: inset 0 0 0 1px rgba(56, 225, 255, .55); }

/* 片基与画幅之间的一道压影（齿孔本身已经画在 .reel__track 的背景里了） */
.reel__track::before,
.reel__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(rgba(0, 0, 0, .45), transparent);
}
.reel__track::before { top: var(--strip-h); }
.reel__track::after { bottom: var(--strip-h); transform: scaleY(-1); }

/* 齿孔带和画幅之间的一道浅影，做出"片基压住画幅"的层次 */
.reel__track > .reel-card { margin-top: 0; }

/* 缩略图是 120×75 的 canvas，被 CSS 放大到卡片宽度：
   不加 image-rendering，浏览器会用平滑插值放大，像素画就糊了 */
.reel-card canvas,
.reel__track canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;
}

/* ── 画幅 ── */
.reel-card {
  flex: 0 0 auto;
  width: 236px;
  position: relative;
  background: #0b0714;
  padding: 0 0 0;
  border: 1px solid rgba(168, 85, 247, .22);
  /* 片门：画幅外面一圈深色，别让内容贴到框上 */
  outline: 5px solid #0d0810;
  outline-offset: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 240, 214, .06) inset;
  transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
/* 画幅四角的裁切标记 */
.reel-card::before,
.reel-card::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  pointer-events: none;
  border: 1px solid rgba(255, 246, 235, .68);
  opacity: .9;
  transition: border-color .24s ease, opacity .24s ease;
}
.reel-card::before { top: 3px; left: 3px; border-right: 0; border-bottom: 0; }
.reel-card::after  { bottom: 3px; right: 3px; border-left: 0; border-top: 0; }

.reel-card:hover,
.reel-card:focus-within {
  border-color: var(--acc, #38e1ff);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .6);
}
.reel-card:hover::before, .reel-card:hover::after,
.reel-card:focus-within::before, .reel-card:focus-within::after {
  border-color: var(--acc, #38e1ff);
  opacity: 1;
}
.reel-card.in-view { border-color: rgba(56, 225, 255, .45); }

/* 缩略图 */
.reel-shot {
  position: relative;
  aspect-ratio: 120 / 75;
  overflow: hidden;
  background: #0b0714;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .55);
}
.reel-shot canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: filter .3s ease, transform .3s ease;
}
/* 悬停：画面虚化 */
.reel-card:hover .reel-shot canvas,
.reel-card:focus-within .reel-shot canvas {
  filter: blur(3.5px) saturate(.7) brightness(.62);
  transform: scale(1.04);
}

/* 介绍，悬停时浮出 */
.reel-intro {
  position: absolute;
  inset: 0;          /* 相对 .reel-shot（画幅），所以不会盖到底部名字条 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .24s ease, transform .24s ease;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 5, 14, .95) 32%, rgba(8, 5, 14, .55) 72%, transparent);
}
.reel-card:hover .reel-intro,
.reel-card:focus-within .reel-intro { opacity: 1; transform: translateY(0); }
.reel-intro p { margin: 0; font-size: 11px; line-height: 1.65; color: #e6dcff; }
.reel-go {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: .12em;
  padding: 2px 7px;
  color: #0a0612;
  background: var(--acc, #38e1ff);
}

/* 画幅底下的名字条：像片边上写的标注 */
.reel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
  padding: 7px 6px 8px;
  border-top: 1px solid rgba(168, 85, 247, .16);
  background: linear-gradient(180deg, rgba(168, 85, 247, .05), transparent);
}
/* 名字和状态都必须单行：卡片只有 236px 宽，
   meta 一长（SRC: TOOL · ORIGIN: UNKNOWN 这种）就会折成两行，把卡片顶高、跟别的卡错位 */
.reel-meta b {
  font-size: 12.5px;
  font-weight: 600;
  color: #efe6ff;
  letter-spacing: .04em;
  flex: 0 0 auto;      /* 名字绝不缩、绝不省略；要省就省状态 */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-meta span {
  font-size: 10px;
  letter-spacing: -.01em;
  color: #8d7fb0;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* 片边上印的画幅编号（JS 插进来，贴在画幅上沿的片基上） */
.reel-card > .reel__num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .2em;
  color: rgba(255, 246, 235, .42);
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
/* 下沿也印一份，倒着的，像真的片边编码 */
.reel-card > .reel__num--b {
  top: auto;
  bottom: -19px;
  transform: translateX(-50%) rotate(180deg);
  color: rgba(255, 246, 235, .26);
}

/* 胶卷两端渐隐，暗示还在继续 */
.reel::before,
.reel::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 52px;
  pointer-events: none;
  z-index: 5;
}
.reel::before {
  left: 0;
  background: linear-gradient(to right, #0a0612 0%, rgba(10, 6, 18, .92) 26%, rgba(10, 6, 18, .45) 62%, transparent 100%);
}
.reel::after {
  right: 0;
  background: linear-gradient(to left, #0a0612 0%, rgba(10, 6, 18, .92) 26%, rgba(10, 6, 18, .45) 62%, transparent 100%);
}

/* 声音开关 */
.reel__sfx {
  appearance: none;
  background: none;
  border: 1px solid rgba(168, 85, 247, .35);
  color: #b7a6dd;
  font: inherit;
  font-size: 10.5px;
  letter-spacing: .1em;
  padding: 2px 8px;
  margin-left: auto;
  cursor: pointer;
}
.reel__sfx:hover { color: #38e1ff; border-color: #38e1ff; }

/* 像素字模式下尺寸抬到 16px 网格 */
html[data-font="pixel"] .reel-intro p { font-size: 16px; line-height: 1.5; }
html[data-font="pixel"] .reel-go { font-size: 16px; }
html[data-font="pixel"] .reel-meta b { font-size: 16px; }
html[data-font="pixel"] .reel-meta span { font-size: 16px; }
html[data-font="pixel"] .reel__sfx { font-size: 16px; }
html[data-font="pixel"] .reel-card { width: 300px; }
html[data-font="pixel"] .reel__num { font-size: 16px; }

/* ── paper：冲洗出来的相纸，齿孔变浅色 ── */
html[data-scheme="paper"] .reel__track {
  background-color: #efece2;
  background-image:
    linear-gradient(101deg, transparent 36%, rgba(255,255,255,.55) 46%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(120,100,60,.03) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #f6f2e6, #eae5d6 45%, #f3efe2 100%);
  box-shadow: inset 0 0 0 1px rgba(29, 32, 41, .1);
}
html[data-scheme="paper"] .reel__track::before,
html[data-scheme="paper"] .reel__track::after {
  background-color: #efece2;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='30'><rect x='3' y='10' width='15' height='11' rx='3.2' fill='%23d9d4c6'/></svg>"),
    linear-gradient(90deg, transparent 0 21px, rgba(29,32,41,.07) 21px 22px, transparent 22px 22px),
    linear-gradient(180deg, rgba(29,32,41,.05), transparent 60%);
  background-size: 22px 100%, 22px 100%, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
}
html[data-scheme="paper"] .reel-card { background: #fbf9f3; border-color: rgba(29,32,41,.18); }
html[data-scheme="paper"] .reel-meta { border-top-color: rgba(29,32,41,.12); background: linear-gradient(180deg, rgba(29,32,41,.04), transparent); }
html[data-scheme="paper"] .reel-meta b { color: #1d2029; }
html[data-scheme="paper"] .reel-meta span { color: #635f57; }
html[data-scheme="paper"] .reel-intro { background: linear-gradient(to top, rgba(251,249,243,.97) 32%, rgba(251,249,243,.6) 72%, transparent); }
html[data-scheme="paper"] .reel-intro p { color: #1d2029; }
html[data-scheme="paper"] .reel::before { background: linear-gradient(to right, #ece8de 0%, rgba(236,232,222,.9) 26%, rgba(236,232,222,.4) 62%, transparent); }
html[data-scheme="paper"] .reel::after { background: linear-gradient(to left, #ece8de 0%, rgba(236,232,222,.9) 26%, rgba(236,232,222,.4) 62%, transparent); }
html[data-scheme="paper"] .reel { filter: drop-shadow(0 16px 26px rgba(120, 100, 70, .3)); }
html[data-scheme="paper"] .reel__num { color: rgba(29,32,41,.3); }
html[data-scheme="paper"] .reel__sfx { color: #635f57; border-color: rgba(29,32,41,.22); }

/* ── ib：玻璃底片 ── */
html[data-scheme="ib"] .reel__track {
  background-color: rgba(255, 255, 255, .55);
  background-image:
    linear-gradient(102deg, transparent 38%, rgba(255,255,255,.35) 46%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(80,128,176,.035) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(236,242,250,.5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 16px 40px rgba(110,150,210,.14);
}
html[data-scheme="ib"] .reel__track::before,
html[data-scheme="ib"] .reel__track::after {
  background-color: rgba(255, 255, 255, .5);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='30'><rect x='3' y='10' width='15' height='11' rx='3.2' fill='%23aec6e0'/></svg>"),
    linear-gradient(90deg, transparent 0 21px, rgba(80,128,176,.09) 21px 22px, transparent 22px 22px),
    linear-gradient(180deg, rgba(255,255,255,.5), transparent 60%);
  background-size: 22px 100%, 22px 100%, 100% 100%;
  background-repeat: repeat-x, repeat-x, no-repeat;
}
html[data-scheme="ib"] .reel-card {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 12px 30px rgba(110, 150, 210, .16);
}
html[data-scheme="ib"] .reel-meta { border-top-color: rgba(80,128,176,.16); background: linear-gradient(180deg, rgba(255,255,255,.5), transparent); }
html[data-scheme="ib"] .reel-meta b { color: #16305f; }
html[data-scheme="ib"] .reel-meta span { color: #5f739b; }
html[data-scheme="ib"] .reel-intro { background: linear-gradient(to top, rgba(255,255,255,.96) 32%, rgba(255,255,255,.6) 72%, transparent); }
html[data-scheme="ib"] .reel-intro p { color: #16305f; }
html[data-scheme="ib"] .reel::before { background: linear-gradient(to right, #eef2f8 0%, rgba(238,242,248,.9) 26%, rgba(238,242,248,.4) 62%, transparent); }
html[data-scheme="ib"] .reel::after { background: linear-gradient(to left, #eef2f8 0%, rgba(238,242,248,.9) 26%, rgba(238,242,248,.4) 62%, transparent); }
html[data-scheme="ib"] .reel { filter: drop-shadow(0 18px 30px rgba(110, 150, 210, .28)); }
html[data-scheme="ib"] .reel__num { color: rgba(22,48,95,.28); }
html[data-scheme="ib"] .reel__sfx { color: #5080b0; border-color: rgba(80,128,176,.3); }

@media (prefers-reduced-motion: reduce) {
  .reel-card, .reel-shot canvas, .reel-intro { transition: none; }
}


/* 片边上的印字，像 "SISONG 400 / 24 EXP" */
.reel__code {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 8px;
  letter-spacing: .34em;
  max-height: 132px;
  overflow: hidden;
  color: rgba(255, 240, 214, .3);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  pointer-events: none;
  z-index: 6;
  white-space: nowrap;
}
.reel__code--l { left: 6px; }
.reel__code--r { right: 6px; transform: translateY(-50%) rotate(180deg); }
html[data-scheme="paper"] .reel__code { color: rgba(29, 32, 41, .3); text-shadow: none; }
html[data-scheme="ib"] .reel__code { color: rgba(22, 48, 95, .3); text-shadow: none; }

/* 能点开的卡片：光标 + 悬停时那片"OPEN ->"亮起来 */
.reel-card--link { cursor: pointer; }
.reel-card--link:hover .reel-go { color: var(--acc, #38e1ff); }
.reel-card--link:focus-visible { outline: 1px solid var(--acc, #38e1ff); outline-offset: 2px; }

/* 可点卡片：画幅右上角常驻一个 OPEN 角标，不悬停也知道能点 */
.reel-open-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 2px 6px;
  color: #0a0612;
  background: var(--acc, #38e1ff);
  opacity: .92;
  pointer-events: none;
  transition: opacity .2s ease;
}
.reel-card--link:hover .reel-open-badge { opacity: 0; }   /* 悬停后由简介层里的 OPEN 接管 */

/* 简介层里的 OPEN 永远压在最后一层，别被任何东西盖住 */
.reel-intro .reel-go { position: relative; z-index: 2; }

/* 常驻的 OPEN 行：名字条下面一条，字号按正文来，永远可见、可点 */
.reel-open-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px 7px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--acc, #38e1ff);
  border-top: 1px solid color-mix(in srgb, var(--acc, #38e1ff) 30%, transparent);
  background: color-mix(in srgb, var(--acc, #38e1ff) 10%, transparent);
}
.reel-open-line b { font-weight: 600; }
.reel-open-line span {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--acc, #38e1ff) 62%, #cfc6e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-card--link:hover .reel-open-line { background: color-mix(in srgb, var(--acc, #38e1ff) 20%, transparent); }

/* 空位那张：[NULL] 行压暗，别抢戏 */
.reel-open-line--null {
  color: rgba(141, 127, 176, .75);
  border-top-color: rgba(168, 85, 247, .14);
  background: rgba(168, 85, 247, .04);
}
.reel-open-line--null span { color: rgba(141, 127, 176, .5); }