/**
 * ═══════════════════════════════════════════════════════════════════
 * Project: Amber & Dust
 * 琥珀與塵埃 — 統一設計系統
 * ═══════════════════════════════════════════════════════════════════
 *
 * 這不是一個網頁，這是時間的容器
 *
 * 色彩來自：
 * - 閣樓裡被遺忘的陽光
 * - 老照片邊緣的褐黃
 * - 祖母茶杯裡的琥珀色
 *
 * @author Cedricode Studio
 * ═══════════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════════
   色彩系統：琥珀光譜
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 光 (The Light) ─── */
  --amber-glow: #FFF8E7;        /* 燭光的溫暖 */
  --parchment: #FAF7F2;         /* 羊皮紙的米白 */
  --linen: #F5EDE3;             /* 老亞麻布 */

  /* ─── 塵 (The Dust) ─── */
  --dust-gold: #D4A574;         /* 金色塵埃 */
  --terracotta: #C67B5C;        /* 赤陶色 */
  --aged-bronze: #B8976B;       /* 古銅金 */

  /* ─── 影 (The Shadow) ─── */
  --ink-fresh: #2D2D2D;         /* 新墨 */
  --ink-aged: #5C5043;          /* 老墨 */
  --charcoal: #3D3D3D;          /* 炭灰 */

  /* ─── 時間 (Time) ─── */
  --sepia-light: rgba(112, 66, 20, 0.08);
  --sepia-mid: rgba(112, 66, 20, 0.15);
  --sepia-deep: rgba(112, 66, 20, 0.25);

  /* ─── 動態 (Motion) ─── */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-sine: cubic-bezier(0.37, 0, 0.63, 1);

  /* ─── 時長 (Duration) ─── */
  --duration-breath: 4s;
  --duration-reveal: 1.2s;
  --duration-float: 6s;
}


/* ═══════════════════════════════════════════════════════════════════
   基礎重置：拒絕數位感
   ═══════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  /* 禁止純黑純白 */
  --safe-black: var(--ink-fresh);
  --safe-white: var(--parchment);
}

html {
  /* 平滑滾動（Lenis 會覆蓋） */
  scroll-behavior: smooth;
}

body {
  background: var(--parchment);
  color: var(--ink-aged);
  font-family: var(--font-body);

  /* 抗鋸齒 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 選取顏色 */
  &::selection {
    background: var(--terracotta);
    color: var(--parchment);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   紙張質感層
   ═══════════════════════════════════════════════════════════════════ */

.paper-texture {
  position: relative;
}

/* 已移除 SVG 噪點紋理 - 保持乾淨背景 */

/* 邊緣焦黃 */
.paper-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    var(--sepia-mid) 100%
  );
  opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════════
   通用動畫：呼吸與漂浮
   ═══════════════════════════════════════════════════════════════════ */

/* 呼吸：微縮放 + 亮度變化 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.01);
    filter: brightness(1.03);
  }
}

/* 漂浮：輕微位移 + 旋轉 */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(0.2deg);
  }
  75% {
    transform: translateY(2px) rotate(-0.15deg);
  }
}

/* 墨水滲透：模糊到清晰 */
@keyframes ink-seep {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* 金色光暈脈動 */
@keyframes golden-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 165, 116, 0);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 165, 116, 0.3);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   照片處理：時間的痕跡
   ═══════════════════════════════════════════════════════════════════ */

.memory-photo {
  position: relative;
  display: block;
  overflow: hidden;

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

  /* 輕微的圓角（像老照片的磨損） */
  border-radius: 2px;

  /* 陰影：模擬照片在紙上的投影 */
  box-shadow:
    0 2px 8px rgba(45, 45, 45, 0.1),
    0 8px 24px rgba(45, 45, 45, 0.08);

  /* 過渡 */
  transition:
    filter 0.8s var(--ease-out-quart),
    transform 1s var(--ease-out-expo);
}

/* 懸停：照片「蘇醒」 */
.memory-photo:hover {
  filter:
    sepia(0.05)
    contrast(1)
    brightness(1.02)
    saturate(1.05);
  transform: scale(1.02) rotate(-0.5deg);
}

/* 呼吸動畫 */
.memory-photo.is-breathing {
  animation:
    breathe var(--duration-breath) var(--ease-in-out-sine) infinite,
    float var(--duration-float) var(--ease-in-out-sine) infinite;
}

/* 不規則邊緣遮罩 */
.memory-photo.eroded-edge {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M3,2 Q6,0 12,2 L25,1 Q30,3 38,2 L50,3 Q58,1 65,2 L78,1 Q85,3 92,2 L97,3 Q100,6 98,12 L99,25 Q97,32 98,40 L99,52 Q97,60 98,68 L99,80 Q97,88 98,94 L96,97 Q92,100 85,98 L72,99 Q65,97 55,98 L42,99 Q35,97 25,98 L15,99 Q8,97 4,98 L2,96 Q0,92 2,85 L1,72 Q3,65 2,55 L1,42 Q3,35 2,25 L1,15 Q3,8 2,4 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}


/* ═══════════════════════════════════════════════════════════════════
   文字處理：墨水的溫度
   ═══════════════════════════════════════════════════════════════════ */

.ink-text {
  color: var(--ink-aged);

  /* 初始狀態：隱藏 */
  opacity: 0;
  filter: blur(4px);
  transform: translateY(15px);

  /* 過渡 */
  transition:
    opacity var(--duration-reveal) var(--ease-out-expo),
    filter calc(var(--duration-reveal) * 1.2) var(--ease-out-expo),
    transform var(--duration-reveal) var(--ease-out-expo);
}

.ink-text.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* 標題：更戲劇化的顯現 */
.ink-title {
  font-family: var(--font-display);
  color: var(--ink-fresh);
  letter-spacing: 0.1em;

  opacity: 0;
  filter: blur(12px);
  transform: translateY(30px) scale(0.98);

  transition:
    opacity 1.5s var(--ease-out-expo),
    filter 2s var(--ease-out-expo),
    transform 1.8s var(--ease-out-expo);
}

.ink-title.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}


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

.ink-divider {
  position: relative;
  height: 1px;
  margin: 3rem auto;
  max-width: 200px;
  background: transparent;
}

.ink-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--aged-bronze) 20%,
    var(--terracotta) 50%,
    var(--aged-bronze) 80%,
    transparent
  );
  transform: translateX(-50%);
  transition: width 1.5s var(--ease-out-expo);
}

.ink-divider.is-visible::before {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════
   視差容器
   ═══════════════════════════════════════════════════════════════════ */

.parallax-container {
  position: relative;
  perspective: 1000px;
  perspective-origin: center center;
  overflow: hidden;
}

.parallax-layer {
  position: relative;
  will-change: transform;
  transform-style: preserve-3d;
}

/* 深度層級 */
.parallax-layer[data-depth="0.1"] { --z-offset: 50px; }
.parallax-layer[data-depth="0.2"] { --z-offset: 100px; }
.parallax-layer[data-depth="0.3"] { --z-offset: 150px; }
.parallax-layer[data-depth="0.4"] { --z-offset: 200px; }
.parallax-layer[data-depth="0.5"] { --z-offset: 250px; }


/* ═══════════════════════════════════════════════════════════════════
   滑鼠光源
   ═══════════════════════════════════════════════════════════════════ */

.spotlight {
  position: fixed;
  width: 500px;
  height: 500px;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: soft-light;
  opacity: 0.6;

  background: radial-gradient(
    circle at center,
    rgba(255, 248, 230, 0.4) 0%,
    rgba(212, 165, 116, 0.2) 30%,
    transparent 60%
  );

  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
}

/* 觸控裝置隱藏 */
@media (hover: none) {
  .spotlight {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   滾動提示
   ═══════════════════════════════════════════════════════════════════ */

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

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

.scroll-indicator__icon {
  width: 20px;
  height: 32px;
  border: 1.5px solid var(--ink-aged);
  border-radius: 10px;
  position: relative;
}

.scroll-indicator__icon::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  background: var(--terracotta);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scroll-dot 2s ease-in-out infinite;
}

@keyframes scroll-dot {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 0.3;
  }
}

.scroll-indicator__text {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-aged);
}


/* ═══════════════════════════════════════════════════════════════════
   響應式：行動裝置的溫柔
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --duration-breath: 5s;
    --duration-reveal: 0.8s;
  }

  /* 簡化動畫，節省電量 */
  .memory-photo.is-breathing {
    animation: breathe var(--duration-breath) var(--ease-in-out-sine) infinite;
  }

  /* 移除視差（觸控不適合） */
  .parallax-layer {
    transform: none !important;
  }
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}