/* ==========================================================================
   letter.css — Letter page styles with 3 layout modes and slot-based rendering
   情书页面样式：3 种布局模式（单页/滚动/翻页）和插槽渲染系统
   ========================================================================== */

/* --- Letter screen container / 情书屏幕容器 --- */
#letter-screen {
  background: var(--bg-black);
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;
}

/* --- Letter paper container / 信纸容器 --- */
.letter-paper {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  background-image: url('/assets/letter-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(255, 20, 147, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* Faint ruled lines overlay (optional, toggled via config)
   淡色横线覆盖层（可选，通过配置控制） */
.letter-paper.show-lines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent,
    transparent 38px,
    rgba(255, 255, 255, 0.04) 38px,
    rgba(255, 255, 255, 0.04) 39px
  );
  pointer-events: none;
  z-index: 1;
}

/* ====================================================================
   Layout Mode A: Single Page (单页模式)
   All content fits one viewport, absolutely positioned slots
   ==================================================================== */
.letter-paper.layout-single {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter-paper.layout-single .letter-page {
  position: relative;
  width: 100%;
  height: 100%;
}

.letter-paper.layout-single .letter-slot {
  position: absolute;
}

/* ====================================================================
   Layout Mode B: Scroll (滚动模式)
   Long scrollable page, slots stack vertically
   ==================================================================== */
.letter-paper.layout-scroll {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  padding: var(--space-xl) var(--space-md);
}

.letter-paper.layout-scroll .letter-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Optional scroll snap / 可选滚动吸附 */
.letter-paper.layout-scroll.snap-enabled {
  scroll-snap-type: y proximity;
}

.letter-paper.layout-scroll.snap-enabled .letter-slot {
  scroll-snap-align: start;
}

/* ====================================================================
   Layout Mode C: Pages (翻页模式)
   Horizontal swipe navigation, one page at a time
   ==================================================================== */
.letter-paper.layout-pages {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.letter-pages-track {
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Disable smooth transition during active swipe / 滑动时禁用平滑过渡 */
.letter-pages-track.dragging {
  -webkit-transition: none;
  transition: none;
}

.letter-paper.layout-pages .letter-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  gap: var(--space-lg);
}

/* Page indicator dots / 页码指示器圆点 */
.letter-page-dots {
  position: fixed;
  bottom: 24px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 15;
}

.letter-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.letter-page-dot.active {
  background: var(--pink-primary);
  border-color: var(--pink-primary);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--pink-glow);
}

/* ====================================================================
   Slot Types / 插槽类型
   ==================================================================== */

/* Base slot styling / 基础插槽样式 */
.letter-slot {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

/* Image slot / 图片插槽 */
.letter-slot-image {
  display: block;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* Text slot / 文字插槽 */
.letter-slot-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

/* ====================================================================
   Animation Classes / 动画类
   All triggered by adding .visible class
   通过添加 .visible 类触发
   ==================================================================== */

/* Fade in / 淡入 */
.anim-fade-in {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;
  -webkit-transition-delay: var(--anim-delay, 0s);
  transition-delay: var(--anim-delay, 0s);
}
.anim-fade-in.visible {
  opacity: 1;
}

/* Slide up / 上滑 */
.anim-slide-up {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transition-delay: var(--anim-delay, 0s);
  transition-delay: var(--anim-delay, 0s);
}
.anim-slide-up.visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/* Slide left (enters from right) / 左滑（从右侧进入） */
.anim-slide-left {
  opacity: 0;
  -webkit-transform: translateX(30px);
  transform: translateX(30px);
  -webkit-transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transition-delay: var(--anim-delay, 0s);
  transition-delay: var(--anim-delay, 0s);
}
.anim-slide-left.visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Slide right (enters from left) / 右滑（从左侧进入） */
.anim-slide-right {
  opacity: 0;
  -webkit-transform: translateX(-30px);
  transform: translateX(-30px);
  -webkit-transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transition-delay: var(--anim-delay, 0s);
  transition-delay: var(--anim-delay, 0s);
}
.anim-slide-right.visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* Zoom in / 放大 */
.anim-zoom-in {
  opacity: 0;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
  -webkit-transition-delay: var(--anim-delay, 0s);
  transition-delay: var(--anim-delay, 0s);
}
.anim-zoom-in.visible {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* Typewriter effect — uses JS for text, CSS for cursor
   打字机效果 — JS 控制文字，CSS 控制光标 */
.anim-typewriter .typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--pink-soft);
  margin-left: 2px;
  vertical-align: text-bottom;
  -webkit-animation: blinkCursor 0.8s step-end infinite;
  animation: blinkCursor 0.8s step-end infinite;
}

.anim-typewriter .typewriter-cursor.done {
  -webkit-animation: blinkCursor 0.8s step-end 3 forwards;
  animation: blinkCursor 0.8s step-end 3 forwards;
  opacity: 0;
}

@-webkit-keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ====================================================================
   Placeholder (empty state) / 占位符（空状态）
   ==================================================================== */
.letter-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  padding: var(--space-xl);
  text-align: center;
}

.letter-placeholder-text {
  font-size: 18px;
  color: var(--text-secondary);
  letter-spacing: 2px;
  font-style: italic;
  opacity: 0;
  -webkit-animation: placeholderFadeIn 1.2s ease 0.3s forwards;
  animation: placeholderFadeIn 1.2s ease 0.3s forwards;
}

@-webkit-keyframes placeholderFadeIn {
  from { opacity: 0; -webkit-transform: translateY(10px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes placeholderFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ====================================================================
   Music toggle button / 音乐切换按钮
   ==================================================================== */
#music-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  -webkit-transition: color 0.3s ease, box-shadow 0.3s ease;
  transition: color 0.3s ease, box-shadow 0.3s ease;
}

#music-toggle:hover {
  color: var(--pink-soft);
}

#music-toggle.playing {
  color: var(--pink-primary);
  box-shadow: 0 0 16px var(--pink-glow);
}

/* Spin animation for playing state / 播放状态旋转动画 */
#music-toggle.playing svg {
  -webkit-animation: musicSpin 3s linear infinite;
  animation: musicSpin 3s linear infinite;
}

@-webkit-keyframes musicSpin {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}
@keyframes musicSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ====================================================================
   Responsive adjustments / 响应式调整
   ==================================================================== */

/* Small mobile / 小型手机 */
@media (max-width: 360px) {
  .letter-paper {
    border-radius: var(--radius-md);
  }
  .letter-paper.layout-scroll {
    padding: var(--space-lg) var(--space-sm);
  }
  .letter-slot-text {
    font-size: 14px;
  }
  .letter-placeholder-text {
    font-size: 15px;
  }
}

/* Tablet and desktop / 平板和桌面 */
@media (min-width: 768px) {
  .letter-paper {
    max-width: 700px;
    border-radius: var(--radius-xl);
  }
  .letter-paper.layout-scroll {
    padding: var(--space-2xl) var(--space-xl);
  }
  .letter-slot-text {
    font-size: 18px;
  }
  .letter-placeholder-text {
    font-size: 20px;
  }
}

/* Large desktop / 大型桌面 */
@media (min-width: 1200px) {
  .letter-paper {
    max-width: 800px;
  }
}

/* ====================================================================
   Reduced motion — respect user preference / 尊重用户减少动画偏好
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in,
  .anim-slide-up,
  .anim-slide-left,
  .anim-slide-right,
  .anim-zoom-in {
    -webkit-transition: none;
    transition: none;
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }

  .letter-pages-track {
    -webkit-transition: none;
    transition: none;
  }
}