/* DreamForge 主要樣式 — 全域動畫、自訂元素 */

/* 隱藏未初始化的 Alpine 元素 */
[x-cloak] { display: none !important; }

/* 自訂動畫 */
@keyframes drift-slow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-20px, 30px) scale(0.95); }
    75% { transform: translate(-30px, -15px) scale(1.02); }
}

@keyframes drift-slow-reverse {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-25px, 25px) scale(0.97); }
    50% { transform: translate(35px, -15px) scale(1.04); }
    75% { transform: translate(15px, 20px) scale(0.98); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes float-particle {
    0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
    10% { opacity: 1; scale: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(100px) scale(0); opacity: 0; }
}

.animate-drift-slow { animation: drift-slow 25s ease-in-out infinite; }
.animate-drift-slow-reverse { animation: drift-slow-reverse 30s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 8s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 3s linear infinite; }

/* 浮動粒子 */
.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(129, 140, 248, 0.3);
}

.particle-1 {
    left: 10%;
    animation: float-particle 18s linear infinite;
    animation-delay: 0s;
}

.particle-2 {
    left: 30%;
    animation: float-particle 22s linear infinite;
    animation-delay: 4s;
    background: rgba(168, 85, 247, 0.3);
}

.particle-3 {
    left: 55%;
    animation: float-particle 20s linear infinite;
    animation-delay: 8s;
}

.particle-4 {
    left: 75%;
    animation: float-particle 25s linear infinite;
    animation-delay: 2s;
    background: rgba(168, 85, 247, 0.25);
}

.particle-5 {
    left: 90%;
    animation: float-particle 19s linear infinite;
    animation-delay: 6s;
}

/* 自訂 scrollbar */
.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(42, 42, 58, 0.6);
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 42, 58, 0.9);
}

/* 全域 scrollbar 美化 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
    background: #2a2a3a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a4f;
}

/* 全域平滑過渡 */
* {
    scrollbar-color: #2a2a3a #0a0a0f;
}