/*
 * Copyright (c) 2025 Daniel 'Phyxor'. All Rights Reserved.
 * Website: https://ug.pages.dev
 * Unauthorized copying of this file, via any medium, is strictly prohibited.
*/
body { background-color: #111827; color: #f3f4f6; }
#desktop-version { font-family: 'Inter', sans-serif; overflow-x: hidden; cursor: url('/icon/cursor1.png'), auto; }
#desktop-version #bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
#desktop-version #smoke-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 101; pointer-events: none; }
#desktop-version #pin-container { height: 100vh; width: 100vw; overflow: hidden; position: fixed; top: 0; left: 0; }
#desktop-version #horizontal-track { height: 100vh; width: 400vw; display: flex; will-change: transform; }
#desktop-version .slide { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 2rem; position: relative; }
#desktop-version .interactive-card { background-color: rgba(31, 41, 55, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(75, 85, 99, 0.5); transition: transform 0.3s ease, box-shadow 0.3s ease; }
#desktop-version .interactive-card:hover { transform: scale(1.05); box-shadow: 0 0 25px var(--card-glow-color, #67e8f9); }
#desktop-version #progress-bar { position: fixed; top: 0; left: 0; height: 4px; width: 100%; background-color: #67e8f9; transform-origin: left; transform: scaleX(0); z-index: 100; }
#desktop-version .slide-content > * { visibility: hidden; }
#desktop-version .letter-swap-wrapper { display: inline-block; }
#desktop-version .letter-swap-wrapper .char-container { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
#desktop-version .letter-swap-wrapper .char { display: inline-block; position: relative; transform: translateY(0%); }
#desktop-version .letter-swap-wrapper .char-secondary { position: absolute; top: 0; left: 0; transform: translateY(100%); }
@keyframes dance { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); } 25% { opacity: 0.7; transform: scale(1.05) rotate(2deg); } 50% { opacity: 0.9; transform: scale(0.95) rotate(-2deg); } 75% { opacity: 0.8; transform: scale(1.05) rotate(1deg); } }
#desktop-version .dance-title { position: relative; }
#desktop-version .dance-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: screen; animation: dance 2s infinite; will-change: transform, opacity; }
#desktop-version .dance-layer-1 { animation-delay: 0s; z-index: 1; }
#desktop-version .dance-layer-2 { animation-delay: 0.3s; animation-duration: 2.2s; z-index: 2; }
#desktop-version .dance-layer-3 { animation-delay: 0.6s; animation-duration: 2.4s; z-index: 3; }
#desktop-version .reveal-letter { display: inline-block; position: relative; cursor: pointer; overflow: hidden; color: white; visibility: hidden; }
#desktop-version .reveal-letter .image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; background-size: cover; background-position: center center; opacity: 0; transition: opacity 0.2s ease-in-out; }
#desktop-version .reveal-letter:hover .image-layer { opacity: 1; }
#desktop-version .reveal-letter .overlay-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #67e8f9; pointer-events: none; opacity: 0; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
#desktop-version .marquee-container { width: 100%; overflow: hidden; position: relative; height: 30px; }
#desktop-version .marquee-text { position: absolute; white-space: nowrap; animation: marquee 20s linear infinite; }
#desktop-version .custom-hover:hover { cursor: url('/icon/cursor2.png'), pointer; }