From fa7fe8d99b7d496e53da36c4b549c41b5c8a9bba Mon Sep 17 00:00:00 2001
From: okorion <ok.or.orion@gmail.com>
Date: Mon, 3 Aug 2026 13:34:38 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EC=9E=A5=EB=A9=B4=20=ED=83=90=EC=83=89=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 변경 유형: feat
- 주된 영역: styles.css
- 변경 의도: styles.css에 작고 검증 가능한 사용자 기능 개선을 추가합니다.

Co-authored-by: Codex
---
 styles.css | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/styles.css b/styles.css
index fb68d3f..4cca628 100644
--- a/styles.css
+++ b/styles.css
@@ -40,6 +40,7 @@
     min-width: 320px;
     min-height: 100vh;
     background: var(--color-bg);
+    timeline-scope: --signal, --drift, --arrival, --fallback;
   }
 
   a {
@@ -114,6 +115,7 @@
 
   .scene-nav a {
     min-height: 34px;
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: 5px;
@@ -124,6 +126,34 @@
     white-space: nowrap;
   }
 
+  .scene-nav a::after {
+    content: '';
+    position: absolute;
+    inset: auto 10px 3px;
+    height: 2px;
+    border-radius: 999px;
+    opacity: 0;
+    background: var(--color-cyan);
+    animation: mark-current-scene linear both;
+    animation-range: entry 25% exit 75%;
+  }
+
+  .scene-nav a[href='#signal']::after {
+    animation-timeline: --signal;
+  }
+
+  .scene-nav a[href='#drift']::after {
+    animation-timeline: --drift;
+  }
+
+  .scene-nav a[href='#arrival']::after {
+    animation-timeline: --arrival;
+  }
+
+  .scene-nav a[href='#fallback']::after {
+    animation-timeline: --fallback;
+  }
+
   .scene-nav a:hover,
   body:has(#signal:target) .scene-nav a[href='#signal'],
   body:has(#drift:target) .scene-nav a[href='#drift'],
@@ -337,21 +367,25 @@
 
   .scene-a {
     --scene-color: var(--color-cyan);
+    view-timeline: --signal block;
     background: #f8fcfd;
   }
 
   .scene-b {
     --scene-color: var(--color-violet);
+    view-timeline: --drift block;
     background: #fbfaff;
   }
 
   .scene-c {
     --scene-color: var(--color-primary);
+    view-timeline: --arrival block;
     background: #fffdf7;
   }
 
   .scene-d {
     --scene-color: #2f845b;
+    view-timeline: --fallback block;
     background: #f8fff9;
   }
 
@@ -660,6 +694,11 @@
     to { transform: scaleX(1); }
   }
 
+  @keyframes mark-current-scene {
+    0%, 100% { opacity: 0; }
+    18%, 82% { opacity: 1; }
+  }
+
   @keyframes reveal-chapter {
     from { opacity: 0.42; transform: translateY(34px); }
     to { opacity: 1; transform: translateY(0); }