/**
 * ═══════════════════════════════════════════════════════════════════
 * 墨水與羊皮紙 (The Living Manuscript)
 * ═══════════════════════════════════════════════════════════════════
 *
 * 這不是網頁，這是一張活的古紙
 * 文字在纖維中呼吸，照片在記憶中沉澱
 *
 * @author Cedricode Studio
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─── 根變數：古紙色系 ─── */
:root {
  --parchment-light: #FAF7F2;
  --parchment-mid: #F5EDE3;
  --parchment-dark: #E8DFD0;
  --ink-fresh: #2D2D2D;
  --ink-aged: #5C5043;
  --sepia-warm: #C67B5C;
  --gold-dust: #B8976B;
}

/* ─── SVG 濾鏡已移除（feTurbulence 噪點效果） ─── */

/* ═══════════════════════════════════════════════════════════════════
   基礎：羊皮紙容器
   ═══════════════════════════════════════════════════════════════════ */

.manuscript {
  position: relative;
  background: var(--parchment-light);
  overflow: hidden;
}

/* 紙張的微妙紋理層 - 已移除 SVG 噪點 */
.manuscript::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 漸變的老化痕跡 */
    radial-gradient(ellipse at 20% 80%, rgba(200, 180, 160, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(180, 160, 140, 0.08) 0%, transparent 40%);
  opacity: 0.4;
  pointer-events: none;
}

/* 邊緣的焦黃效果 */
.manuscript::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(200, 180, 150, 0.15) 100%
  );
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════════
   墨水文字：滲透顯現動畫
   ═══════════════════════════════════════════════════════════════════ */

.ink-text {
  position: relative;
  color: transparent;
  background: linear-gradient(
    180deg,
    var(--ink-fresh) 0%,
    var(--ink-aged) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;

  /* 初始狀態：模糊且透明 */
  opacity: 0;
  filter: blur(8px);

  /* 過渡：緩慢、帶有物理感 */
  transition:
    opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1),
    filter 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 墨水滲透後的狀態 */
.ink-text.is-revealed {
  opacity: 1;
  filter: blur(0);
}

/* 墨水暈染的微動態 */
.ink-text.is-revealed::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: url(#ink-bleed);
  opacity: 0.3;
  animation: ink-breathe 4s ease-in-out infinite;
}

@keyframes ink-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.002);
    opacity: 0.35;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   照片：時間侵蝕的邊緣
   ═══════════════════════════════════════════════════════════════════ */

.aged-photo {
  position: relative;
  display: block;

  /* 褐色調濾鏡 */
  filter: sepia(0.2) contrast(0.95) brightness(0.98);

  /* 不規則邊緣遮罩 */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M2,3 Q5,0 10,2 L20,1 Q25,3 30,2 L40,3 Q45,1 50,2 L60,1 Q65,3 70,2 L80,3 Q85,1 90,2 L95,3 Q100,5 98,10 L99,20 Q97,25 98,30 L99,40 Q97,45 98,50 L99,60 Q97,65 98,70 L99,80 Q97,85 98,90 L97,95 Q95,100 90,98 L80,99 Q75,97 70,98 L60,99 Q55,97 50,98 L40,99 Q35,97 30,98 L20,99 Q15,97 10,98 L5,97 Q0,95 2,90 L1,80 Q3,75 2,70 L1,60 Q3,55 2,50 L1,40 Q3,35 2,30 L1,20 Q3,15 2,10 L3,5 Q1,2 2,3 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;

  /* 初始狀態 */
  opacity: 0;
  transform: scale(0.98) rotate(-0.5deg);
  transition:
    opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1),
    transform 2s cubic-bezier(0.23, 1, 0.32, 1);
}

.aged-photo.is-revealed {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* 照片的呼吸效果 */
.aged-photo.is-revealed {
  animation: photo-breathe 6s ease-in-out infinite;
}

@keyframes photo-breathe {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.008) rotate(0.2deg);
  }
}

/* 老照片的裝飾性角落 */
.aged-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* 四個角落的陰影 */
    radial-gradient(ellipse at 0% 0%, rgba(0,0,0,0.15) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 0%, rgba(0,0,0,0.12) 0%, transparent 25%),
    radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.12) 0%, transparent 25%),
    radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.18) 0%, transparent 35%);
  pointer-events: none;
  border-radius: inherit;
}


/* ═══════════════════════════════════════════════════════════════════
   標題：如書法般的優雅
   ═══════════════════════════════════════════════════════════════════ */

.calligraphy-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--ink-aged);

  /* 文字筆畫效果 */
  position: relative;
}

/* 筆畫動畫：從左到右顯現 */
.calligraphy-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotate(-2deg);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.calligraphy-title.is-revealed .char {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* 每個字符延遲 */
.calligraphy-title .char:nth-child(1) { transition-delay: 0.1s; }
.calligraphy-title .char:nth-child(2) { transition-delay: 0.18s; }
.calligraphy-title .char:nth-child(3) { transition-delay: 0.26s; }
.calligraphy-title .char:nth-child(4) { transition-delay: 0.34s; }
.calligraphy-title .char:nth-child(5) { transition-delay: 0.42s; }
.calligraphy-title .char:nth-child(6) { transition-delay: 0.50s; }
.calligraphy-title .char:nth-child(7) { transition-delay: 0.58s; }
.calligraphy-title .char:nth-child(8) { transition-delay: 0.66s; }
.calligraphy-title .char:nth-child(9) { transition-delay: 0.74s; }
.calligraphy-title .char:nth-child(10) { transition-delay: 0.82s; }


/* ═══════════════════════════════════════════════════════════════════
   段落：墨水逐行滲透
   ═══════════════════════════════════════════════════════════════════ */

.ink-paragraph {
  position: relative;
}

.ink-paragraph .line {
  display: block;
  opacity: 0;
  filter: blur(4px);
  transform: translateX(-10px);
  transition:
    opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
    filter 1s cubic-bezier(0.23, 1, 0.32, 1),
    transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.ink-paragraph.is-revealed .line {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* 逐行延遲 */
.ink-paragraph .line:nth-child(1) { transition-delay: 0.1s; }
.ink-paragraph .line:nth-child(2) { transition-delay: 0.25s; }
.ink-paragraph .line:nth-child(3) { transition-delay: 0.4s; }
.ink-paragraph .line:nth-child(4) { transition-delay: 0.55s; }
.ink-paragraph .line:nth-child(5) { transition-delay: 0.7s; }


/* ═══════════════════════════════════════════════════════════════════
   分隔線：如墨跡暈染
   ═══════════════════════════════════════════════════════════════════ */

.ink-divider {
  position: relative;
  height: 2px;
  background: transparent;
  margin: 3rem 0;
}

.ink-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold-dust) 20%,
    var(--sepia-warm) 50%,
    var(--gold-dust) 80%,
    transparent 100%
  );
  transform: translateX(-50%);
  transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1);
  filter: blur(0.5px);
}

.ink-divider.is-revealed::before {
  width: 80%;
}


/* ═══════════════════════════════════════════════════════════════════
   滾動指示器：羽毛筆意象
   ═══════════════════════════════════════════════════════════════════ */

.scroll-hint {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

.scroll-hint:hover {
  opacity: 1;
}

.scroll-hint svg {
  width: 24px;
  height: 24px;
  stroke: var(--ink-aged);
  animation: feather-float 2s ease-in-out infinite;
}

@keyframes feather-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.scroll-hint span {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink-aged);
  text-transform: uppercase;
}