/* Custom styles for LOGIT */

/* Smooth transitions */
* { transition-property: color, background-color, border-color, opacity, transform; transition-duration: 200ms; }

/* Fortune level colors */
.fortune-great   { color: #ff6b35; }
.fortune-good    { color: #f7931e; }
.fortune-fair    { color: #ffd700; }
.fortune-neutral { color: #a0a0a0; }
.fortune-caution { color: #6ec6ff; }
.fortune-bad     { color: #7b68ee; }
.fortune-worst   { color: #4a4a4a; }

/* Gradient text */
.text-gradient {
    background: linear-gradient(135deg, #f9ae23, #e94560);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Card glow effect */
.card-glow {
    box-shadow: 0 0 20px rgba(199, 130, 13, 0.15);
}
.card-glow:hover {
    box-shadow: 0 0 30px rgba(199, 130, 13, 0.25);
}

/* Loading spinner */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 3s linear infinite; }

/* Pulse glow */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(199, 130, 13, 0.3); }
    50% { box-shadow: 0 0 25px rgba(199, 130, 13, 0.6); }
}
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Score ring */
.score-ring {
    position: relative;
    width: 140px;
    height: 140px;
}
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Bazi table */
.bazi-table {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    text-align: center;
}
.bazi-cell {
    padding: 8px 4px;
    border-radius: 6px;
    background: rgba(199, 130, 13, 0.08);
    border: 1px solid rgba(199, 130, 13, 0.2);
}

/* Blur paywall */
.paywall-blur {
    filter: blur(6px);
    user-select: none;
    pointer-events: none;
}

/* Bar chart */
.dim-bar {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #c7820d, #e94560);
    transition: width 1s ease-out;
}

/* Fade in animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }
.fade-in-up-delay-1 { animation-delay: 0.1s; opacity: 0; }
.fade-in-up-delay-2 { animation-delay: 0.2s; opacity: 0; }
.fade-in-up-delay-3 { animation-delay: 0.3s; opacity: 0; }
.fade-in-up-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #3a3a5c; border-radius: 2px; }