/* ============================================
   Intro Module - Standalone CSS
   WebGL 流体背景模块样式
   ============================================ */

/* CSS 变量 */
:root {
  --color-link: #5f5f5f;
  --color-link-hover: #5f5f5f;
  --color-enter: #fff;
  --color-title: #fff;
  --color-content: #222325;
}

/* 基础样式重置 - 仅用于 Intro 模块 */
* {
  box-sizing: border-box;
}

/* Intro 模块内的链接样式 */
.content-intro a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
}

/* ============================================
   Intro 容器样式
   ============================================ */
.content-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 9999;
  background: var(--color-content);
}

.content-intro .content-inner {
  background: transparent;
  user-select: none;
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   WebGL Canvas 背景
   ============================================ */
#background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

/* ============================================
   内容包装器
   ============================================ */
.wrap {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
}

/* 淡入动画 */
.fade {
  opacity: 0;
  transition: all 1s;
  transform: translateY(200px);
}

.fade.in {
  opacity: 1;
  transform: none;
}

/* ============================================
   标题样式 - 带发光动画
   ============================================ */
.content-title {
  font-family:
    "Comic Sans MS",
    "Helvetica Neue",
    "Microsoft Yahei",
    -apple-system,
    sans-serif;
  font-size: 4.7rem;
  font-weight: 200;
  color: var(--color-title);
  line-height: 1;
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  animation: whiteShadow 1.5s ease-in-out infinite alternate;
  text-shadow:
    rgb(69, 45, 45) 0 0 1px,
    rgb(255, 255, 251) 0 0 1px,
    rgb(255, 255, 251) 0 0 2px;
}

@media screen and (max-width: 50em) {
  .content-title {
    font-size: 2rem;
  }
}

@keyframes whiteShadow {
  from {
    text-shadow:
      0 0 1px #fff,
      0 0 2px #fff,
      0 0 3px #fff,
      0 0 5px #333,
      0 0 8px #333,
      0 0 9px #333,
      0 0 10px #333,
      0 0 15px #333;
  }

  to {
    text-shadow:
      0 0 0.5px #fff,
      0 0 1px #fff,
      0 0 1.5px #fff,
      0 0 2px #333,
      0 0 4px #333,
      0 0 5px #333,
      0 0 6px #333,
      0 0 8px #333;
  }
}

/* ============================================
   副标题样式 - 带打字发光效果
   ============================================ */
.content-subtitle {
  color: #fff;
  font-family:
    "Comic Sans MS",
    "Helvetica Neue",
    "Microsoft Yahei",
    -apple-system,
    sans-serif;
  font-size: 1.2rem;
  font-weight: 200;
  margin-bottom: 2em;
  text-shadow: 0 0 4px #ffffff;
}

@media screen and (max-width: 1024px) {
  .content-subtitle {
    font-size: 1rem;
  }
}

/* 副标题字符动画 */
.content-subtitle span {
  animation: letter-glow 0.7s 0s ease both;
}

@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
  }

  66% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
  }

  77% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  }
}

/* 生成字符延迟动画 - 使用CSS变量 */
.content-subtitle span:nth-child(1) {
  animation-delay: 0.05s;
}

.content-subtitle span:nth-child(2) {
  animation-delay: 0.1s;
}

.content-subtitle span:nth-child(3) {
  animation-delay: 0.15s;
}

.content-subtitle span:nth-child(4) {
  animation-delay: 0.2s;
}

.content-subtitle span:nth-child(5) {
  animation-delay: 0.25s;
}

.content-subtitle span:nth-child(6) {
  animation-delay: 0.3s;
}

.content-subtitle span:nth-child(7) {
  animation-delay: 0.35s;
}

.content-subtitle span:nth-child(8) {
  animation-delay: 0.4s;
}

.content-subtitle span:nth-child(9) {
  animation-delay: 0.45s;
}

.content-subtitle span:nth-child(10) {
  animation-delay: 0.5s;
}

.content-subtitle span:nth-child(11) {
  animation-delay: 0.55s;
}

.content-subtitle span:nth-child(12) {
  animation-delay: 0.6s;
}

.content-subtitle span:nth-child(13) {
  animation-delay: 0.65s;
}

.content-subtitle span:nth-child(14) {
  animation-delay: 0.7s;
}

.content-subtitle span:nth-child(15) {
  animation-delay: 0.75s;
}

.content-subtitle span:nth-child(16) {
  animation-delay: 0.8s;
}

.content-subtitle span:nth-child(17) {
  animation-delay: 0.85s;
}

.content-subtitle span:nth-child(18) {
  animation-delay: 0.9s;
}

.content-subtitle span:nth-child(19) {
  animation-delay: 0.95s;
}

.content-subtitle span:nth-child(20) {
  animation-delay: 1s;
}

.content-subtitle span:nth-child(21) {
  animation-delay: 1.05s;
}

.content-subtitle span:nth-child(22) {
  animation-delay: 1.1s;
}

.content-subtitle span:nth-child(23) {
  animation-delay: 1.15s;
}

.content-subtitle span:nth-child(24) {
  animation-delay: 1.2s;
}

.content-subtitle span:nth-child(25) {
  animation-delay: 1.25s;
}

.content-subtitle span:nth-child(26) {
  animation-delay: 1.3s;
}

.content-subtitle span:nth-child(27) {
  animation-delay: 1.35s;
}

.content-subtitle span:nth-child(28) {
  animation-delay: 1.4s;
}

.content-subtitle span:nth-child(29) {
  animation-delay: 1.45s;
}

.content-subtitle span:nth-child(30) {
  animation-delay: 1.5s;
}

.content-subtitle span:nth-child(31) {
  animation-delay: 1.55s;
}

.content-subtitle span:nth-child(32) {
  animation-delay: 1.6s;
}

.content-subtitle span:nth-child(33) {
  animation-delay: 1.65s;
}

.content-subtitle span:nth-child(34) {
  animation-delay: 1.7s;
}

.content-subtitle span:nth-child(35) {
  animation-delay: 1.75s;
}

.content-subtitle span:nth-child(36) {
  animation-delay: 1.8s;
}

.content-subtitle span:nth-child(37) {
  animation-delay: 1.85s;
}

.content-subtitle span:nth-child(38) {
  animation-delay: 1.9s;
}

/* ============================================
   Enter 按钮 - 带闪光动画
   ============================================ */
.enter {
  color: var(--color-enter);
  font-size: 0.8rem;
  letter-spacing: 3px;
  white-space: pre;
  pointer-events: auto;
  transition: all 0.4s;
  z-index: 999;
  position: relative;
  display: inline-block;
  padding: 0.5em 1em;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.enter:hover,
.enter:focus {
  color: var(--color-link-hover);
  transform: scale(1.1);
}

@keyframes shimmer {
  0% {
    background-position: 200% center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }

  100% {
    background-position: -200% center;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
}

/* ============================================
   向下箭头动画
   ============================================ */
.arrow {
  position: absolute;
  left: 49.5%;
  top: 95%;
  transform-origin: 50% 50%;
  transform: translate3d(-50%, 0%, 0);
}

.arrow-1 {
  animation: arrow-movement 2s ease-in-out infinite;
}

.arrow-2 {
  animation: arrow-movement 2s 1s ease-in-out infinite;
}

.arrow::before,
.arrow::after {
  background: #fff;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  box-shadow: 1px 1px 20px 0px #fff;
}

.arrow::before {
  transform: rotate(45deg) translateX(-10%);
  transform-origin: top left;
}

.arrow::after {
  transform: rotate(-45deg) translateX(10%);
  transform-origin: top right;
}

@keyframes arrow-movement {
  0% {
    opacity: 0;
    top: 92%;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ============================================
   底部波浪形状
   ============================================ */
.shape {
  height: 100vh;
  width: 100%;
  display: block;
  background: transparent;
}

.shape-wrap {
  position: relative;
  z-index: 0;
  margin: -5px 0 0 0;
  will-change: scroll-position;
  background: transparent;
}

.shape path {
  fill: #151515;
}

/* ============================================
   GitHub Corner 样式
   ============================================ */
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

/* ============================================
   自定义鼠标指针（仅用于 Intro 模块）
   ============================================ */
.content-intro {
  cursor:
    url("https://cdn.jsdelivr.net/gh/SimonAKing/images/blog/default.cur"), auto !important;
}

.content-intro img,
.content-intro a {
  cursor:
    url("https://cdn.jsdelivr.net/gh/SimonAKing/images/blog/pointer.cur"), auto !important;
}

/* ============================================
   页面切换过渡动画
   ============================================ */

/* Intro 页面退出动画 */
.content-intro.fade-out {
  opacity: 0;
  transform: translateY(-100%);
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
  pointer-events: none;
}

/* Intro 页面完全隐藏 */
.content-intro.hidden {
  display: none !important;
}

/* 当显示 intro 时，隐藏主页面内容（除了音乐按钮） */
body.show-intro #header,
body.show-intro #canvas,
body.show-intro #app,
body.show-intro #main-scrollbar,
body.show-intro #main-scroll-indicator,
body.show-intro #preloader {
  display: none !important;
}

body.show-intro #header,
body.show-intro #canvas,
body.show-intro #app,
body.show-intro #main-scrollbar,
body.show-intro #main-scroll-indicator,
body.show-intro #cursor-follow {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 音乐按钮在 intro 页面时显示在右下角 */
body.show-intro #snd-btn {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 10000;
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
}

/* 当隐藏 intro 后，显示主页面内容 - 立即显示，不渐变 */
body.show-main #header,
body.show-main #canvas,
body.show-main #app,
body.show-main #main-scrollbar,
body.show-main #main-scroll-indicator,
body.show-main #snd-btn,
body.show-main #cursor-follow {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 0.3s ease-in;
}

/* preloader 由 matrix.js 控制显示/隐藏，这里只设置初始样式 */
/* 注意：不要用 !important 覆盖 JS 的内联样式，否则会阻挡点击事件 */
body.show-main #preloader {
  opacity: 1;
  /* pointer-events 由 matrix.js 内部逻辑控制 */
}

/* 确保 #app 在切换后可见 */
html.is-ready #app {
  visibility: visible !important;
}

/* 修复：intro 切换到 index 时，hero 标题先闪现的问题 */
/* 在 intro 阶段隐藏 hero 内容（因为 #app 本身就是 display:none，但切换瞬间会显示） */
body.show-intro .hero-title,
body.show-intro .hero-desc {
  visibility: hidden !important;
}

/* 切换到主页面后也保持隐藏，由 matrix.js 的 heroTextEffect 控制动画 */
body.show-main .hero-title,
body.show-main .hero-desc {
  visibility: hidden !important;
}