/* ================================================================ */
/* EKPA Museum Network — Dark Theme                                 */
/* Inspired by Museo di Roma: dark, elegant, image-rich             */
/* ================================================================ */

:root {
    --color-dark-900: #0f0f0f;
    --color-dark-800: #1a1a1a;
    --color-dark-700: #242424;
    --color-dark-600: #2a2a2a;
    --color-dark-500: #333333;
    --color-accent: #c8a84e;
    --color-accent-light: #d4b965;
    --color-text: #f5f5f5;
    --color-text-secondary: #a0a0a0;
    --color-health: #dc2626;
    --color-science: #2563eb;
    --color-humanities: #7c3aed;
    --color-art: #d97706;
}

html {
    scroll-behavior: smooth;
}

/* ================================================================ */
/* DARK SCROLLBAR                                                    */
/* ================================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f0f0f; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c8a84e; }

/* Hide scrollbar on horizontal scroll containers */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ================================================================ */
/* CLOAK                                                             */
/* ================================================================ */
[x-cloak] { display: none !important; }

/* ================================================================ */
/* NAVBAR                                                            */
/* ================================================================ */
.navbar-dark {
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.navbar-scrolled {
    background: rgba(15, 15, 15, 0.98);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

/* ================================================================ */
/* GOLD ACCENTS                                                      */
/* ================================================================ */
.gold-line {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #c8a84e, #d4b965);
    border-radius: 1px;
}

.gold-line-wide {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c8a84e, transparent);
    border-radius: 1px;
}

/* ================================================================ */
/* HERO CAROUSEL                                                     */
/* ================================================================ */
.carousel-img {
    transition: transform 8s ease-out;
    transform: scale(1);
}

.carousel-img-active {
    transform: scale(1.05);
}

.carousel-badge {
    animation: fadeSlideUp 0.6s ease-out 0.1s both;
}

.carousel-title {
    animation: fadeSlideUp 0.6s ease-out 0.2s both;
}

.carousel-desc {
    animation: fadeSlideUp 0.6s ease-out 0.3s both;
}

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

/* ================================================================ */
/* MUSEUM GRID                                                       */
/* ================================================================ */
.museum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.museum-card-large {
    grid-column: span 2;
    min-height: 380px;
}

.museum-card-small {
    min-height: 260px;
}

.museum-card {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.museum-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

@media (max-width: 1023px) {
    .museum-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .museum-card-large {
        grid-column: span 2;
        min-height: 300px;
    }
    .museum-card-small {
        min-height: 220px;
        grid-column: span 1;
    }
}

@media (max-width: 639px) {
    .museum-grid {
        grid-template-columns: 1fr;
    }
    .museum-card-large {
        grid-column: span 1;
        min-height: 280px;
    }
    .museum-card-small {
        min-height: 220px;
        grid-column: span 1;
    }
}

/* ================================================================ */
/* EVENT CARDS                                                       */
/* ================================================================ */
.event-card {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ================================================================ */
/* AUDIENCE CARDS                                                    */
/* ================================================================ */
.audience-card {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* ================================================================ */
/* SCROLL ANIMATIONS                                                 */
/* ================================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.visible {
    opacity: 1;
}

.fade-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scale-up.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(9) { transition-delay: 0.45s; }
.stagger-children.visible > *:nth-child(10) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(11) { transition-delay: 0.55s; }
.stagger-children.visible > *:nth-child(12) { transition-delay: 0.6s; }
.stagger-children.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ================================================================ */
/* DARK LEAFLET MAP OVERRIDES                                        */
/* ================================================================ */
.leaflet-popup-content-wrapper {
    background: #242424 !important;
    color: #f5f5f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 !important;
}

.leaflet-popup-content {
    margin: 14px 16px !important;
    color: #f5f5f5 !important;
}

.leaflet-popup-tip {
    background: #242424 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-popup-close-button {
    color: #a0a0a0 !important;
}

.leaflet-popup-close-button:hover {
    color: #c8a84e !important;
}

.leaflet-control-zoom a {
    background: #242424 !important;
    color: #a0a0a0 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.leaflet-control-zoom a:hover {
    background: #2a2a2a !important;
    color: #c8a84e !important;
}

.leaflet-control-attribution {
    background: rgba(15, 15, 15, 0.8) !important;
    color: #666 !important;
}

.leaflet-control-attribution a {
    color: #888 !important;
}

/* ================================================================ */
/* LINE-CLAMP UTILITY                                                */
/* ================================================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================================================================ */
/* CATEGORY BADGES (dark theme versions)                             */
/* ================================================================ */
.badge-health { background-color: rgba(220, 38, 38, 0.15); color: #fca5a5; border: 1px solid rgba(220, 38, 38, 0.3); }
.badge-science { background-color: rgba(37, 99, 235, 0.15); color: #93c5fd; border: 1px solid rgba(37, 99, 235, 0.3); }
.badge-humanities { background-color: rgba(124, 58, 237, 0.15); color: #c4b5fd; border: 1px solid rgba(124, 58, 237, 0.3); }
.badge-art { background-color: rgba(217, 119, 6, 0.15); color: #fcd34d; border: 1px solid rgba(217, 119, 6, 0.3); }

/* ================================================================ */
/* MAP CONTAINER                                                     */
/* ================================================================ */
.map-container {
    height: 450px;
    width: 100%;
    z-index: 0;
}

/* ================================================================ */
/* MOBILE MENU                                                       */
/* ================================================================ */
.mobile-menu-enter {
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.mobile-menu-enter.open {
    transform: translateX(0);
}

/* ================================================================ */
/* SMOOTH COUNTERS                                                   */
/* ================================================================ */
.counter-number {
    font-variant-numeric: tabular-nums;
}

/* ================================================================ */
/* SECTION DIVIDER                                                   */
/* ================================================================ */
.section-divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 168, 78, 0.2) 50%, transparent 100%);
}

/* ================================================================ */
/* MUSEUMS — Asymmetric Slider (tabs left, slider overflows right)   */
/* ================================================================ */
.museums-asymmetric {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.museums-tabs {
    flex-shrink: 0;
    width: 320px;
    padding-top: 0.5rem;
}

.museums-slider {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Allow overflowing past the right viewport edge */
    min-width: 0;
}

.museums-slider::-webkit-scrollbar {
    display: none;
}

/* Mobile: stack vertically */
@media (max-width: 1023px) {
    .museums-asymmetric {
        flex-direction: column;
        gap: 1.5rem;
    }
    .museums-tabs {
        width: 100%;
    }
    .museums-tabs nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }
    .museums-tabs nav button {
        border-left: none !important;
        padding-left: 0 !important;
        padding-right: 1rem;
    }
    .museums-tabs nav button[class*="border-accent"] {
        border-bottom: 2px solid #c8a84e;
        border-left: none !important;
    }
}

/* ================================================================ */
/* COLLECTIONS — Asymmetric Slider (slider overflows left, tabs right) */
/* ================================================================ */
.collections-asymmetric {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
}

.collections-slider {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    /* Reverse scroll direction: content overflows left */
    direction: rtl;
}

.collections-slider::-webkit-scrollbar {
    display: none;
}

.collections-slider-inner {
    direction: ltr;
    display: flex;
    gap: 1.25rem;
    padding-left: 2rem;
}

.collections-tabs {
    flex-shrink: 0;
    width: 320px;
    padding-top: 0.5rem;
}

/* Mobile: stack vertically, slider on top */
@media (max-width: 1023px) {
    .collections-asymmetric {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }
    .collections-slider {
        direction: ltr;
    }
    .collections-slider-inner {
        padding-left: 1rem;
        padding-right: 2rem;
    }
    .collections-tabs {
        width: 100%;
    }
    .collections-tabs nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
    }
    .collections-tabs nav button {
        border-left: none !important;
        padding-left: 0 !important;
        padding-right: 1rem;
    }
    .collections-tabs nav button[class*="border-accent"] {
        border-bottom: 2px solid #c8a84e;
        border-left: none !important;
    }
}

/* ================================================================ */
/* GLASSMORPHISM (dark variant)                                      */
/* ================================================================ */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-dark {
    background: rgba(15, 15, 15, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ================================================================ */
/* HERO — Video background + framed heading                         */
/* ================================================================ */

/* Slow zoom on video for cinematic feel */
.hero-video-zoom {
    animation: heroZoom 30s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
}

/* Ken Burns fallback if video fails */
.hero-kenburns {
    animation: kenBurns 20s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-2%, -1%); }
}

/* Frame fade-in */
.hero-frame {
    animation: heroFrameIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes heroFrameIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hero text fade-in (staggered via inline animation-delay) */
.hero-fade-in {
    opacity: 0;
    transform: translateY(12px);
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* Scroll indicator pulse */
.scroll-pulse {
    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%      { opacity: 0.7; transform: scaleY(1.3); }
}

/* ================================================================ */
/* MUSEUMS & COLLECTIONS — Dynamic background sections               */
/* ================================================================ */

/* Active card highlight ring animation */
.museum-slider-card,
#collections a[dir="ltr"] {
    transition: all 0.3s ease;
}

/* Ensure background images don't cause layout shift */
#museums .absolute.inset-0 img,
#collections .absolute.inset-0 img {
    will-change: opacity;
}