/**
 * ============================================
 * 卷轴徐展式呈现动画
 * 一、页面加载：淡墨晕染底纹 + 宣纸浮起 + 毛笔逐行显现（0.8–1.2s）
 * 二、模态框：价值罗盘、人物卡牌、PPT预览等弹窗
 * ============================================
 */

/* ==================== 页面级卷轴徐展（index 首屏） ==================== */

/* 1. 淡墨晕染底纹：从中心向四周涟漪扩散 + 细微颗粒质感 */
.scroll-ink-page-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 50%, rgba(91, 58, 36, 0.18) 0%, rgba(91, 58, 36, 0.08) 40%, rgba(139, 69, 19, 0.02) 65%, transparent 75%);
  background-size: 200px 200px, 100% 100%;
  background-position: 0 0, center;
  transform: scale(0.6);
  opacity: 0.9;
  animation: scrollInkSpread 1.8s cubic-bezier(0.33, 1, 0.68, 1) 0.3s forwards;
}

body.scroll-ink-done .scroll-ink-page-overlay {
  opacity: 0;
  transform: scale(1.2);
  visibility: hidden;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s linear 0.26s;
  pointer-events: none;
  will-change: auto;
}

@keyframes scrollInkSpread {
  0% {
    transform: scale(0.5);
    opacity: 0.85;
  }
  45% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

/* 2. 宣纸裱裱层层浮起：内容框架初始态 */
.scroll-unfolding.paper-texture {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1),
              clip-path 1.0s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-unfolding.paper-texture.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  clip-path: inset(0 0 0 0);
}

/* 宣纸横向展开动画 */
@keyframes xuanzhi-unfold {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* 3. 毛笔蘸墨逐行显现：每行延迟 0.1s，与 #FFFAF0 / 思源宋体 兼容 */
.scroll-content .brush-text {
  opacity: 0;
  transform: translate(-5px, 15px) rotate(-2deg);
  filter: blur(2px);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(0.18s + (var(--delay, 0) * 0.15s));
}

.scroll-unfolding.active .scroll-content .brush-text,
.scroll-unfolding.paper-texture.active .scroll-content .brush-text,
body.scroll-ink-done .brush-text {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 呼吸感：柔和起伏，不抢戏 */
.breathing-element {
  transition: transform 0.5s ease-out;
}

body.scroll-ink-done .breathing-element {
  animation: scrollBreathe 4.5s ease-in-out infinite;
}

@keyframes scrollBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
}

/* 性能：仅动画期间使用 will-change，避免长期占用 */
@media (prefers-reduced-motion: no-preference) {
  .scroll-ink-page-overlay {
    will-change: transform, opacity;
  }
  .scroll-unfolding.paper-texture {
    will-change: transform, opacity;
  }
}

/* 无障碍：尊重用户“减少动画”设置 */
@media (prefers-reduced-motion: reduce) {
  .scroll-ink-page-overlay {
    animation: none;
    opacity: 0;
    transform: scale(1);
  }
  body.scroll-ink-done .scroll-ink-page-overlay {
    opacity: 0;
  }
  .scroll-unfolding.paper-texture {
    transition-duration: 0.05s;
  }
  .scroll-unfolding.paper-texture.active,
  .scroll-unfolding.paper-texture {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .scroll-content .brush-text {
    transition-duration: 0.05s;
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .breathing-element {
    animation: none;
  }
}

/* ===== 模态框：1. 基础容器 - 卷轴外框 ===== */
.scroll-unfolding-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.scroll-unfolding-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===== 2. 淡墨晕染底层 - 涟漪扩散效果 ===== */
.scroll-ink-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center, 
        rgba(139, 69, 19, 0.08) 0%, 
        rgba(139, 69, 19, 0.03) 40%,
        transparent 70%
    );
    transform: scale(0.3);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-unfolding-modal.active .scroll-ink-bg {
    transform: scale(1.5);
    opacity: 1;
}

/* ===== 3. 宣纸托裱层 - 框架浮起 ===== */
.scroll-paper-frame {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: linear-gradient(
        135deg, 
        #FFFAF0 0%, 
        #FAF8F5 50%, 
        #F5F0E8 100%
    );
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 12px;
    box-shadow: 
        0 20px 60px rgba(139, 69, 19, 0.15),
        0 8px 25px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.scroll-unfolding-modal.active .scroll-paper-frame {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ===== 4. 宣纸纹理与颗粒质感 ===== */
.scroll-paper-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(139, 69, 19, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(139, 69, 19, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 40% 60%, rgba(139, 69, 19, 0.04) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 50px 50px, 70px 70px, 30px 30px, 200px 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease 0.3s;
}

.scroll-unfolding-modal.active .scroll-paper-frame::before {
    opacity: 1;
}

/* ===== 5. 卷轴轴杆装饰 ===== */
.scroll-paper-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 69, 19, 0.2) 10%, 
        rgba(139, 69, 19, 0.3) 50%,
        rgba(139, 69, 19, 0.2) 90%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease 0.2s;
}

.scroll-unfolding-modal.active .scroll-paper-frame::after {
    opacity: 1;
}

.scroll-bottom-rod {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(139, 69, 19, 0.2) 10%, 
        rgba(139, 69, 19, 0.3) 50%,
        rgba(139, 69, 19, 0.2) 90%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease 0.3s;
}

.scroll-unfolding-modal.active .scroll-bottom-rod {
    opacity: 1;
}

/* ===== 6. 毛笔蘸墨式内容显现 - 逐行动画 ===== */
.scroll-content-line {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(2px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 逐行延迟显现 - 最多支持8行 */
.scroll-unfolding-modal.active .scroll-content-line:nth-child(1) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(2) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(3) { transition-delay: 0.6s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(4) { transition-delay: 0.7s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(5) { transition-delay: 0.8s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(6) { transition-delay: 0.9s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(7) { transition-delay: 1.0s; opacity: 1; transform: translateY(0); filter: blur(0); }
.scroll-unfolding-modal.active .scroll-content-line:nth-child(8) { transition-delay: 1.1s; opacity: 1; transform: translateY(0); filter: blur(0); }

/* ===== 7. 毛笔划过的痕迹效果 ===== */
.brush-stroke-line {
    position: relative;
    display: inline-block;
}

.brush-stroke-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 69, 19, 0.3), transparent);
    transition: width 0.8s ease-out;
    transition-delay: 1s;
}

.scroll-unfolding-modal.active .brush-stroke-line::after {
    width: 100%;
}

/* ===== 8. 呼吸感微动画 ===== */
.scroll-breathing {
    animation: scrollBreathe 4s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes scrollBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.002); }
}

/* ===== 9. 关闭按钮样式 ===== */
.scroll-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 50%;
    background: rgba(255, 250, 240, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
    z-index: 10;
}

.scroll-unfolding-modal.active .scroll-close-btn {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.scroll-close-btn:hover {
    background: rgba(139, 69, 19, 0.1);
    transform: rotate(90deg) scale(1.1);
}

/* ===== 10. 内容区域样式 ===== */
.scroll-content-area {
    padding: 2.5rem;
    max-height: calc(80vh - 5rem);
    overflow-y: auto;
    position: relative;
    z-index: 2;
}

/* 国风滚动条 */
.scroll-content-area::-webkit-scrollbar {
    width: 8px;
}

.scroll-content-area::-webkit-scrollbar-track {
    background: rgba(139, 69, 19, 0.05);
    border-radius: 4px;
}

.scroll-content-area::-webkit-scrollbar-thumb {
    background: rgba(139, 69, 19, 0.2);
    border-radius: 4px;
}

.scroll-content-area::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 69, 19, 0.3);
}

/* ===== 11. 响应式适配 ===== */
@media (max-width: 768px) {
    .scroll-paper-frame {
        width: 95%;
        max-height: 85vh;
        border-radius: 8px;
    }
    
    .scroll-content-area {
        padding: 1.5rem;
        max-height: calc(85vh - 3rem);
    }
    
    .scroll-content-line {
        font-size: 0.95rem;
    }
}

/* ===== 12. 特殊主题变体 - 人物卡牌专用 ===== */
.scroll-theme-character .scroll-paper-frame {
    max-width: 400px;
    background: linear-gradient(135deg, #FFF9F0 0%, #FDF5E6 100%);
}

/* ===== 13. 特殊主题变体 - PPT预览专用 ===== */
.scroll-theme-ppt .scroll-paper-frame {
    max-width: 800px;
    max-height: 90vh;
}

/* ===== 14. 关闭动画（收起卷轴感） ===== */
.scroll-unfolding-modal.closing .scroll-paper-frame {
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-unfolding-modal.closing .scroll-ink-bg {
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s ease;
}