/* ============================================================
   过渡.css —— 封面 → 内页 的全屏过渡动画
   流程：渐暗至全黑 → 心理恐怖警告画面（CRT / VHS 风格）→ 进入内页
   ============================================================ */

/* ---- 全屏过渡层（默认隐藏，纯黑） ---- */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;                 /* 纯黑 */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s ease,
    visibility 0s linear 1.5s;
  overflow: hidden;
  cursor: default;
}

/* 第一阶段：渐暗至全黑（1.5s） */
.transition-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.5s ease,
    visibility 0s linear 0s;
}

/* ---- 噪点 / 扫描线 / 暗红晕影 三个氛围层 ---- */
.t-grain,
.t-scanlines,
.t-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 胶片噪点：SVG feTurbulence，步进位移产生颗粒闪动 */
.t-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  animation: grain-shift 0.4s steps(2, end) infinite;
}

/* 扫描线：横向暗纹 + 一条缓慢下移的微光 */
.t-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.30) 3px,
    rgba(0, 0, 0, 0.30) 4px
  );
  opacity: 0.7;
}

.t-scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 130px;
  transform: translateY(-130px);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(200, 70, 70, 0.04) 45%,
    rgba(210, 210, 220, 0.05) 50%,
    rgba(200, 70, 70, 0.04) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: scanline-sweep 9s linear infinite;
}

/* 四周暗红晕影，营造被围困的压迫感 */
.t-vignette {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 42%,
    rgba(74, 0, 0, 0.26) 78%,
    rgba(28, 0, 0, 0.78) 100%
  );
}

/* VHS 录像带角标 */
.t-rec-indicator {
  position: absolute;
  top: 4vh;
  right: 4vw;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(190, 60, 60, 0.6);
  pointer-events: none;
}
.t-rec-indicator .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #a01010;
  animation: rec-blink 1.2s steps(1, end) infinite;
}

/* ---- 警告画面 ---- */
.warning-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.transition-overlay.is-warning .warning-screen {
  opacity: 1;
  pointer-events: auto;
}

/* 整屏轻微“信号干扰”：偶尔整体横跳一下 */
.warning-inner {
  text-align: center;
  padding: 6vh 8vw;
  max-width: 900px;
  animation: screen-jolt 6.5s steps(1, end) infinite;
}

/* VHS / 老式系统标头 */
.warning-label {
  display: inline-block;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(13px, 2.2vw, 19px);
  font-weight: 700;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
  color: #8a2b2b;
  border: 1px solid rgba(138, 43, 43, 0.55);
  background: rgba(74, 0, 0, 0.16);
  padding: 0.55em 1.4em;
  margin-bottom: 6vh;
  animation: crt-flicker 4s infinite, crt-distort 6s steps(1, end) infinite;
}

/* 警告正文：与封面大标题同款衬线字体 */
.warning-text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(17px, 2.6vw, 26px);
  line-height: 2.1;
  letter-spacing: 0.14em;
  color: #cfc9bd;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
  animation:
    crt-flicker 3.2s infinite,
    crt-jitter 5.5s steps(1, end) infinite,
    crt-distort 7s steps(1, end) infinite;
}

/* ---- 确认按钮区（警告停留 2~4 秒后才浮现） ---- */
.warning-buttons {
  margin-top: 8vh;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5vw;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}

.transition-overlay.is-ready .warning-buttons {
  opacity: 1;
  pointer-events: auto;
}

.warning-btn {
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.8vw, 19px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #b6afa3;
  background: rgba(74, 0, 0, 0.22);
  border: 1px solid rgba(140, 120, 100, 0.35);
  padding: 0.7em 2.2em;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    text-shadow 0.3s ease;
}

.warning-btn:hover,
.warning-btn:focus-visible {
  color: #efe7d8;
  border-color: rgba(190, 60, 60, 0.75);
  background: rgba(120, 10, 10, 0.35);
  text-shadow: 0 0 12px rgba(255, 80, 80, 0.35);
  outline: none;
}

/* 返回按钮：更灰暗、更收敛 */
.warning-btn.warning-back {
  color: #7d786f;
  border-color: rgba(110, 100, 85, 0.3);
}
.warning-btn.warning-back:hover,
.warning-btn.warning-back:focus-visible {
  color: #a49d91;
  border-color: rgba(130, 110, 90, 0.5);
  background: rgba(60, 45, 35, 0.3);
  text-shadow: none;
}

/* ---- 确认 / 返回：警告画面在 2~4 秒内淡出（故障效果持续运行至完全不可见）---- */
.transition-overlay.is-confirming .warning-screen,
.transition-overlay.is-leaving .warning-screen {
  opacity: 0;
  transition: opacity 2.6s ease;
}

/* ---- 返回封面：警告淡出后，黑屏整层渐出，露出封面 ---- */
.transition-overlay.is-fade-cover {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1s ease,
    visibility 0s linear 1s;
}

/* ============================================================
   关键帧
   ============================================================ */

/* 噪点颗粒闪动（步进位移） */
@keyframes grain-shift {
  0%   { background-position: 0 0; }
  100% { background-position: -160px 90px; }
}

/* 扫描亮线缓慢下移 */
@keyframes scanline-sweep {
  0%   { transform: translateY(-130px); }
  100% { transform: translateY(100vh); }
}

/* REC 红点闪烁 */
@keyframes rec-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

/* CRT 不规则闪烁（透明度抖动） */
@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  7%  { opacity: 1; }
  8%  { opacity: 0.35; }
  9%  { opacity: 1; }
  13% { opacity: 1; }
  14% { opacity: 0.6; }
  15% { opacity: 1; }
  42% { opacity: 1; }
  43% { opacity: 0.25; }
  45% { opacity: 1; }
  46% { opacity: 0.85; }
  47% { opacity: 1; }
  71% { opacity: 1; }
  72% { opacity: 0.7; }
  73% { opacity: 1; }
  86% { opacity: 1; }
  87% { opacity: 0.5; }
  88% { opacity: 1; }
}

/* 轻微抖动（信号不稳） */
@keyframes crt-jitter {
  0%, 100% { transform: translate(0, 0); }
  31% { transform: translate(0, 0); }
  32% { transform: translate(1px, -1px); }
  33% { transform: translate(-1px, 1px); }
  34% { transform: translate(0, 0); }
  62% { transform: translate(0, 0); }
  63% { transform: translate(-1.5px, 0); }
  64% { transform: translate(1.5px, 0); }
  65% { transform: translate(0, 0); }
}

/* 短暂扭曲：RGB 通道分离 / 偏移（视频信号传输错误感）
   在特定帧让文字短暂拆出红、绿、蓝三色重影并水平错位 */
@keyframes crt-distort {
  0%, 100% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  26% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  27% {
    text-shadow:
      -3px 0 0 rgba(255, 45, 45, 0.65),
      3px 0 0 rgba(55, 170, 255, 0.6),
      0 0 16px rgba(0, 0, 0, 0.9);
  }
  28% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  29% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }

  51% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  52% {
    text-shadow:
      -6px 1px 0 rgba(255, 45, 45, 0.7),
      -2px 0 0 rgba(60, 255, 90, 0.5),
      4px -1px 0 rgba(55, 170, 255, 0.6),
      8px 0 0 rgba(255, 45, 45, 0.35),
      0 0 16px rgba(0, 0, 0, 0.9);
  }
  53% {
    text-shadow:
      -8px -1px 0 rgba(255, 45, 45, 0.6),
      5px 1px 0 rgba(55, 170, 255, 0.5),
      0 0 16px rgba(0, 0, 0, 0.9);
  }
  54% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  55% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }

  78% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
  79% {
    text-shadow:
      -4px 0 0 rgba(255, 45, 45, 0.6),
      4px 0 0 rgba(55, 170, 255, 0.55),
      0 0 16px rgba(0, 0, 0, 0.9);
  }
  81% { text-shadow: 0 0 16px rgba(0, 0, 0, 0.9); }
}

/* 整屏信号干扰：偶尔整体横跳 */
@keyframes screen-jolt {
  0%, 100% { transform: translate(0, 0); }
  8%  { transform: translate(0, 0); }
  9%  { transform: translate(-4px, 0); }
  10% { transform: translate(4px, 0); }
  11% { transform: translate(0, 0); }
  58% { transform: translate(0, 0); }
  59% { transform: translate(-6px, 1px); }
  60% { transform: translate(6px, -1px); }
  61% { transform: translate(0, 0); }
}