diff --git a/index.html b/index.html index 6d4000f..797f187 100644 --- a/index.html +++ b/index.html @@ -36,12 +36,14 @@ -
+ + +
MAP VIEW [Tab] to exit
-
+
PHOTO MODE [P] exit  |  [[] focus-   []] focus+   focus: 5.0
diff --git a/style.css b/style.css index 92029bb..bdc4327 100644 --- a/style.css +++ b/style.css @@ -150,3 +150,59 @@ body.photo-mode #overview-indicator { #photo-focus { color: var(--color-primary); } + +/* === SCAN LINES === */ +#scanlines { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 5; + background: repeating-linear-gradient( + to bottom, + transparent 0px, + transparent 3px, + rgba(68, 136, 255, 0.03) 3px, + rgba(68, 136, 255, 0.03) 4px + ); + animation: scanlines-drift 10s linear infinite; +} + +@keyframes scanlines-drift { + 0% { background-position: 0 0; } + 100% { background-position: 0 64px; } +} + +/* Holo panel sweep — a bright line scrolls across each panel */ +.holo-panel { + position: relative; + overflow: hidden; +} + +.holo-panel::after { + content: ''; + position: absolute; + left: 0; + top: -40%; + width: 100%; + height: 40%; + background: linear-gradient( + to bottom, + transparent 0%, + rgba(68, 136, 255, 0.14) 45%, + rgba(68, 136, 255, 0.22) 50%, + rgba(68, 136, 255, 0.14) 55%, + transparent 100% + ); + animation: holo-sweep 4s ease-in-out infinite; + pointer-events: none; +} + +@keyframes holo-sweep { + 0% { top: -40%; opacity: 0; } + 10% { opacity: 1; } + 90% { opacity: 1; } + 100% { top: 100%; opacity: 0; } +}