/* -------------------------------- 
   Transition Layer Styles - 包括关键CSS和预加载遮罩
-------------------------------- */
/* 页面初始状态控制 - 防止闪烁 */
body {
  background-color: #000;
}

html.loading, body.loading {
  visibility: hidden; /* 初始隐藏所有内容 */
}

body.js-loading-ready {
  visibility: visible;
}

@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Bold.otf') format('opentype');
  font-weight: bold;
}
@font-face {
  font-family: 'PPPangaia';
  src: url('/fonts/PPPangaia-Ultralight.otf') format('opentype');
  font-weight: 100;
}

/* 预加载遮罩 - 在页面加载时立即显示 */
.page-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 2147483647; /* 最大可能的z-index值，确保在所有元素之上 */
  opacity: 1;
  visibility: visible !important; /* 强制可见 */
  transition: opacity 0.3s;
  pointer-events: auto; /* 防止点击穿透 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 添加loading文字样式 */
.loading-text {
  font-family: 'PPPangaia', sans-serif;
  color: #fff;
  font-size: 18px;
  letter-spacing: 3px;
  opacity: 0.8;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

.page-preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

.cd-transition-layer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999; /* 确保高于所有元素 */
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none; /* 防止阻止点击 */
  transform-style: flat; /* 确保2D渲染以提高性能 */
  will-change: opacity, visibility; /* 提示浏览器将要变化的属性 */
}

.cd-transition-layer.visible {
  opacity: 1;
  visibility: visible !important; /* 强制可见 */
  pointer-events: auto; /* 在动画期间阻止点击 */
}

.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-2%);
  /* dimensions will be overwritten using JavaScript */
  height: 100%;
  /* sprite is composed of 25 frames */
  width: 2500%;
  background: url(../img/ink.webp) no-repeat 0 0;
  background-size: 100% 100%;
  
  /* 方法1: 强力黑色滤镜 */
  filter: brightness(0) contrast(1000%);
  
  /* 提高动画性能 */
  backface-visibility: hidden;
  transform-style: flat;
  will-change: transform;
  
  /* 防止FOUC (Flash of Unstyled Content) */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  
  /* 方法2: 黑色蒙版方式（如果方法1效果不理想，可以取消这段注释，并注释掉方法1）
  -webkit-mask-image: url(../img/ink.webp);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(../img/ink.webp);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background: #000; 
  */
}

.cd-transition-layer.opening .bg-layer {
  animation: cd-sequence 0.8s steps(24) forwards;
  animation-fill-mode: forwards;
  /* 防止动画重新启动 */
  animation-play-state: running !important;
}

.cd-transition-layer.closing .bg-layer {
  animation: cd-sequence-reverse 0.8s steps(24) forwards;
  animation-fill-mode: forwards;
  /* 防止动画重新启动 */
  animation-play-state: running !important;
}

/* 美化过渡体验 */
body {
  opacity: 1;
  transition: opacity 0.1s;
}

/* 在进入页面时，先隐藏内容，等墨水效果完成后再显示 */
body.has-ink-transition {
  opacity: 0;
}

body.ink-transition-complete {
  opacity: 1;
}

@keyframes cd-sequence {
  0% {
    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
    transform: translateY(-50%) translateX(-98%);
  }
}

@keyframes cd-sequence-reverse {
  0% {
    transform: translateY(-50%) translateX(-98%);
  }
  100% {
    transform: translateY(-50%) translateX(-2%);
  }
}