/* ============================================================
   scene-brutal · 态度 · 野兽派海报 × 实验排版
   纸白底 #f2efe9 + 纯黑超大字体 + 荧光橙 #ff4d00
   ============================================================ */

.scene-brutal {
  --brutal-paper: #f2efe9;
  --brutal-ink: #111111;
  --brutal-accent: #ff4d00;
  background: var(--brutal-paper);
  color: var(--brutal-ink);
  font-family: 'Noto Sans SC', sans-serif;
}

.scene-brutal__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---- 错位网格：两套网格线故意错开，印刷对版失败感 ---- */
.scene-brutal__grid {
  position: absolute;
  inset: -2%;
  background-image:
    repeating-linear-gradient(0deg, rgba(17, 17, 17, 0.06) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.06) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(17, 17, 17, 0.045) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(90deg, rgba(17, 17, 17, 0.045) 0 1px, transparent 1px 88px);
  background-position: 0 0, 0 0, 17px 31px, 17px 31px;
}

/* ---- 海报四角小字 ---- */
.scene-brutal__meta {
  position: absolute;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.55rem, 1.1vw, 0.72rem);
  line-height: 1.55;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.scene-brutal__meta--tl { top: 18px; left: 20px; }
.scene-brutal__meta--tr { top: 18px; right: 20px; text-align: right; }
.scene-brutal__meta--bl { bottom: 18px; left: 20px; }
.scene-brutal__meta--br { bottom: 18px; right: 20px; text-align: right; }

/* ---- 左侧竖排 ---- */
.scene-brutal__side {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.5rem, 1vw, 0.68rem);
  letter-spacing: 0.35em;
  opacity: 0.6;
}

/* ---- 主标题：无限可能，拆字错位 ---- */
.scene-brutal__title {
  position: absolute;
  left: 3.5vw;
  top: 7vh;
  margin: 0;
  display: flex;
  align-items: flex-start;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 17vw, 20rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  user-select: none;
  -webkit-user-select: none;
}
.scene-brutal__char {
  display: inline-block;
  cursor: crosshair;
  will-change: transform;
}
/* 错位用 margin，transform 留给 gsap 抖动 */
.scene-brutal__char:nth-child(2) { margin-top: -0.07em; }
.scene-brutal__char:nth-child(3) { margin-top: 0.09em; }
.scene-brutal__char:nth-child(4) { margin-top: -0.04em; }

/* ---- 荧光橙小色块 ---- */
.scene-brutal__block {
  position: absolute;
  left: 57vw;
  top: 13vh;
  width: clamp(38px, 6.5vw, 88px);
  height: clamp(38px, 6.5vw, 88px);
  background: var(--brutal-accent);
}

/* ---- 巨大序号 No.∞ ---- */
.scene-brutal__no {
  position: absolute;
  right: 2vw;
  top: 9vh;
  transform: rotate(-3deg);
  font-family: 'Archivo Black', sans-serif;
  line-height: 0.78;
  text-align: right;
  user-select: none;
  -webkit-user-select: none;
}
.scene-brutal__no-solid {
  display: block;
  font-size: clamp(2rem, 6vw, 6rem);
  color: var(--brutal-ink);
  letter-spacing: -0.02em;
}
.scene-brutal__no-hollow {
  display: block;
  font-size: clamp(5rem, 15vw, 16rem);
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.25vw, 3px) var(--brutal-ink);
}

/* ---- 西文：一行实心一行描边镂空 ---- */
.scene-brutal__en {
  position: absolute;
  left: 4vw;
  bottom: 27vh;
}
.scene-brutal__en-line {
  margin: 0;
  font-family: 'Archivo Black', 'Noto Sans SC', sans-serif;
  font-size: clamp(1.6rem, 6.2vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.scene-brutal__en-line--solid { color: var(--brutal-ink); }
.scene-brutal__en-line--hollow {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.18vw, 2.5px) var(--brutal-ink);
}

/* ---- 荧光橙便签贴：宣言 ---- */
.scene-brutal__note {
  position: absolute;
  right: 6vw;
  bottom: 30vh;
  width: clamp(160px, 20vw, 232px);
  box-sizing: border-box;
  background: var(--brutal-accent);
  color: var(--brutal-ink);
  padding: 1.1em 1.1em 0.9em;
  box-shadow: 0.35em 0.35em 0 var(--brutal-ink);
}
/* 便签顶部的胶带 */
.scene-brutal__note::before {
  content: '';
  position: absolute;
  top: -0.6em;
  left: 50%;
  width: 4.2em;
  height: 1.2em;
  margin-left: -2.1em;
  background: rgba(242, 239, 233, 0.85);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.18);
}
.scene-brutal__note-text {
  margin: 0;
  font-family: 'ZCOOL KuaiLe', cursive;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.4;
}
.scene-brutal__note-sign {
  margin: 0.6em 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-align: right;
}

/* ---- 斜穿画面的跑马灯 ---- */
.scene-brutal__marquee {
  position: absolute;
  left: -25vw;
  bottom: 12vh;
  width: 150vw;
  transform: rotate(-6deg);
  background: var(--brutal-ink);
  color: var(--brutal-paper);
  overflow: hidden;
  padding: 0.55em 0;
  border-bottom: 0.35em solid var(--brutal-accent);
}
.scene-brutal__marquee-track {
  display: flex;
  width: max-content;
  animation: scene-brutal-marquee 16s linear infinite;
}
.scene-brutal__marquee:hover .scene-brutal__marquee-track {
  animation-play-state: paused;
}
.scene-brutal__marquee-chunk {
  white-space: nowrap;
  font-family: 'Archivo Black', 'Noto Sans SC', sans-serif;
  font-weight: 900;
  font-size: clamp(1rem, 2.6vw, 2rem);
  letter-spacing: 0.04em;
}
.scene-brutal__marquee-chunk i {
  font-style: normal;
  color: var(--brutal-accent);
  padding: 0 0.35em;
}

@keyframes scene-brutal-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- 移动端 375px 不破版 ---- */
@media (max-width: 600px) {
  .scene-brutal__side { display: none; }
  .scene-brutal__meta--bl { bottom: 64px; }
  .scene-brutal__no { top: 6vh; right: 3vw; }
  .scene-brutal__block { left: 70vw; top: 26vh; }
  .scene-brutal__en { bottom: 32vh; }
  .scene-brutal__note {
    right: 4vw;
    bottom: 18vh;
    width: 148px;
    box-shadow: 0.28em 0.28em 0 var(--brutal-ink);
  }
  .scene-brutal__marquee { bottom: 9vh; }
}