* {
    font-family: 'Space Grotesk', sans-serif;
}

.header-gradient {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fef3c7 100%);
}

.city-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.city-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.line-pill {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.generate-btn:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.generate-btn:not(:disabled):active {
    transform: translateY(0);
}

.diorama-container {
    max-width: 512px;
    width: 100%;
}

.loading-train {
    animation: chugChug 0.5s ease-in-out infinite;
}

@keyframes chugChug {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-4px) rotate(-2deg); }
    75% { transform: translateY(-4px) rotate(2deg); }
}

.loading-dots span {
    animation: blink 1.4s infinite both;
    font-size: 2rem;
    color: #94a3b8;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 80%, 100% { opacity: 0; }
    40% { opacity: 1; }
}

.gallery-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.gallery-scroll::-webkit-scrollbar {
    height: 6px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.ticker-container {
    position: relative;
}

.ticker-content {
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-item {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .diorama-container {
        max-width: 100%;
    }
    
    .gallery-item {
        width: 100px;
    }
}

/* Custom scrollbar for the whole page */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}