/* ==========================================================
   gallery.css — 电影殿堂 / 音乐殿堂
   ========================================================== */
.gallery-body { background: var(--night); color: #f5f3ee; }
.gallery-body .footer { background: var(--night); color: rgba(245,243,238,0.45); border-top-color: rgba(255,255,255,0.08); }

.g-hero {
  position: relative; min-height: 100vh; display: grid; place-items: center; text-align: center; overflow: hidden;
  padding: 120px var(--gutter) 80px;
}
.g-hero__bg { position: absolute; inset: -10%; background-size: cover; background-position: center; filter: blur(40px) saturate(1.3) brightness(0.45); transform: scale(1.1); }
.g-hero__veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(11,8,18,0.2), rgba(11,8,18,0.95) 75%); }
.g-hero__inner { position: relative; z-index: 2; }
.g-hero__title { margin: 0; font-size: clamp(46px, 9vw, 140px); line-height: 1.08; font-weight: 600; letter-spacing: -0.01em; }
.g-hero__sub { margin-top: 26px; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: 0.3em; color: rgba(245,243,238,0.7); }
.g-back {
  display: inline-flex; margin-top: 44px; font-size: 14px; letter-spacing: 0.1em; padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); transition: background 0.3s, color 0.3s;
}
.g-back:hover { background: #f5f3ee; color: var(--ink); }

/* ---------- 电影：每部作品一个吸顶场景 ---------- */
.scene { position: relative; height: 170vh; }
.scene__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.scene__bg {
  position: absolute; inset: -6%; background-size: cover; background-position: center;
  filter: blur(26px) brightness(0.32) saturate(1.2); transform: scale(1.15); will-change: transform, opacity;
}
.scene__grid {
  position: relative; z-index: 2; width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.scene:nth-child(even) .scene__poster { order: 2; }
.scene__poster { position: relative; will-change: transform; }
.scene__poster img {
  width: 100%; max-height: 72vh; object-fit: cover; aspect-ratio: 2 / 3; border-radius: 22px;
  box-shadow: 0 60px 100px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.08);
}
.scene__poster::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 45%, transparent 60%);
  background-size: 250% 100%; background-position: var(--sheen, 120%) 0;
}
.scene__rank {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.4em; color: #c9b4ff;
}
.scene__num {
  font-size: clamp(90px, 14vw, 220px); line-height: 0.9; font-weight: 600; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(201, 180, 255, 0.5);
  position: absolute; right: var(--gutter); top: 9vh; z-index: 1; opacity: 0.6;
}
.scene__title { margin: 14px 0 0; font-size: clamp(38px, 5.4vw, 78px); line-height: 1.12; font-weight: 600; }
.scene__cn { font-size: clamp(20px, 2.2vw, 28px); color: rgba(245,243,238,0.65); margin-top: 6px; letter-spacing: 0.12em; }
.scene__meta { margin: 30px 0 0; padding: 0; list-style: none; font-size: 16px; }
.scene__meta li { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.scene__meta li span:first-child { flex: none; width: 7em; color: rgba(245,243,238,0.5); }
.scene__quote {
  margin: 34px 0 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.9; letter-spacing: 0.05em; max-width: 26em;
}
.scene__quote .fc { color: rgba(245,243,238,0.16); transition: color 0.3s, text-shadow 0.3s; }
.scene__quote .fc.is-lit { color: #f5f3ee; text-shadow: 0 0 18px rgba(155,123,240,0.45); }
.scene__text > * { opacity: 0; transform: translateY(40px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.scene.is-in .scene__text > * { opacity: 1; transform: none; }
.scene.is-in .scene__text > *:nth-child(2) { transition-delay: 0.08s; }
.scene.is-in .scene__text > *:nth-child(3) { transition-delay: 0.16s; }
.scene.is-in .scene__text > *:nth-child(4) { transition-delay: 0.24s; }
.scene.is-in .scene__text > *:nth-child(5) { transition-delay: 0.32s; }

.movie-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 80; display: flex; flex-direction: column; gap: 10px; }
.movie-dots a { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: transform 0.4s var(--ease-spring), background 0.3s; }
.movie-dots a.is-active { background: #c9b4ff; transform: scale(1.6); }

@media (max-width: 820px) {
  .scene { height: auto; }
  .scene__pin { position: relative; height: auto; padding: 90px 0; }
  .scene__grid { grid-template-columns: 1fr; }
  .scene:nth-child(even) .scene__poster { order: 0; }
  .scene__poster img { max-height: 60vh; width: auto; margin: 0 auto; }
  .movie-dots { display: none; }
}

/* ---------- 音乐：分级唱片墙 ---------- */
.tier { position: relative; padding: clamp(80px, 10vw, 140px) 0; overflow: hidden; }
.tier__head { display: flex; align-items: baseline; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; }
.tier__id {
  font-size: clamp(90px, 14vw, 200px); line-height: 0.9; font-weight: 600; letter-spacing: -0.04em;
  background: var(--grad-text); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradFlow 10s linear infinite;
}
.tier__name { font-size: clamp(22px, 2.8vw, 36px); letter-spacing: 0.08em; color: rgba(245,243,238,0.82); }
.tier__glow { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(80px); opacity: 0.35; z-index: -1; }
.tier:nth-child(1) .tier__glow { background: #6e4bd8; left: -20vw; top: -10vw; }
.tier:nth-child(2) .tier__glow { background: #da7756; right: -25vw; top: 10vw; opacity: 0.22; }
.tier:nth-child(3) .tier__glow { background: #4a2fa3; left: 10vw; bottom: -30vw; }

.albums { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.album {
  --mx: 50%; --my: 50%;
  position: relative; border-radius: 22px; padding: 14px 14px 20px; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out), background 0.5s, border-color 0.5s;
}
.album::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(400px circle at var(--mx) var(--my), rgba(155,123,240,0.3), transparent 50%);
}
.album:hover::before { opacity: 1; }
.album:hover { border-color: rgba(201,180,255,0.35); }
.album__art { position: relative; aspect-ratio: 1; border-radius: 14px; }
.album__art img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; position: relative; z-index: 2; transition: transform 0.8s var(--ease-out); box-shadow: 0 24px 40px -20px rgba(0,0,0,0.8); }
.album__disc {
  position: absolute; inset: 6%; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle, var(--accent) 0 12%, #111 13% 14%, transparent 15%), repeating-radial-gradient(circle, #1c1922 0 2px, #0c0a10 2px 4px);
  transition: transform 0.9s var(--ease-out); animation: discSpin 5s linear infinite;
}
.album:hover .album__art img { transform: translateX(-18%) rotate(-4deg); }
.album:hover .album__disc { transform: translateX(26%); }
.album__title { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.4; }
.album__sub { font-size: 13px; color: rgba(245,243,238,0.55); margin-top: 2px; line-height: 1.6; }
.album__meta { margin-top: 12px; font-size: 13px; line-height: 1.8; color: rgba(245,243,238,0.78); }
.album__meta b { font-weight: 400; color: rgba(201,180,255,0.85); margin-right: 6px; }