/* About Page Styles */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Smooth scroll với offset cho sticky nav */
section[id] {
    scroll-margin-top: 5rem;
}

/* Sticky navigation */
#about-nav {
    transition: all 0.3s ease;
}

/* Navigation link transitions */
.nav-link {
    transition: all 0.3s ease;
}

/* Timeline styles */
.timeline-line {
    transition: all 0.3s ease;
}

.timeline-dot {
    transition: all 0.3s ease;
}

/* Culture card hover effects */
.culture-card {
    transition: all 0.3s ease;
}

.culture-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.culture-card-image {
    transition: transform 0.5s ease;
}

.culture-card:hover .culture-card-image {
    transform: scale(1.1);
}

/* Region card hover effects */
.region-card {
    transition: all 0.3s ease;
}

.region-card:hover {
    transform: translateY(-2px);
}

/* Festival card hover effects */
.festival-card {
    transition: all 0.3s ease;
}

.festival-card:hover {
    transform: translateY(-2px);
}

.festival-card-image {
    transition: transform 0.3s ease;
}

.festival-card:hover .festival-card-image {
    transform: scale(1.1);
}

/* Overview image decoration */
.overview-image-decoration {
    transition: transform 0.3s ease;
}

.overview-image-group:hover .overview-image-decoration {
    transform: rotate(2deg);
}

/* Stats card hover */
.stats-card {
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* CTA section background pattern */
.cta-pattern {
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .culture-card:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }
    
    .stats-card:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }
}