/* Main CSS for Museum Bus */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&family=Press+Start+2P&display=swap');

html {
    scroll-behavior: smooth;
}

section[id] {
    scroll-margin-top: 2rem;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: #050a1e;
    color: white;
    overflow-x: hidden;
}

.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 30V20h10v10H6zm2-8h6v6H8v-6zM40 10V0h10v10H40zm2-8h6v6h-6V2zM18 52V42h10v10H18zm2-8h6v6h-6v-6zM58 38V28h10v10H58zm2-8h6v6h-6v-6zM30 18v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 58v-4H4v4H0v2h4v4h2v-4h4v-2H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    /* background-image: url("/assets/bg.png"); */
}

.gradient-card {
    background: linear-gradient(135deg, #00f2fe 0%, #7367f0 100%);
}

.nav-button-tilt-neg {
    transform: rotate(-3deg);
}

.nav-button-tilt-pos {
    transform: rotate(3deg);
    width: 100%;
    max-width: 25rem;
    margin-inline: auto;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.game-card {
    min-width: 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
    transform: translateY(-8px);
}

/* Micro-animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.font-arcade {
    font-family: 'Press Start 2P', cursive;
}

.playful-panel-1 {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 2rem;
    padding: 1.5rem;
    transform: rotate(-1deg);
    transition: transform 0.3s ease;
}

.playful-panel-2 {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    padding: 1.5rem;
    transform: rotate(1.5deg);
    transition: transform 0.3s ease;
}

.playful-panel-1:hover,
.playful-panel-2:hover {
    transform: rotate(0deg) scale(1.02);
}

.pixel-tag {
    background: #ff007f;
    color: white;
    padding: 4px 8px;
    font-size: 0.6rem;
    text-transform: uppercase;
    font-family: 'Press Start 2P', cursive;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.scanline {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}

/* Timeline Design */
.timeline-line {
    width: 6px;
    background: linear-gradient(to bottom, #00f2fe, #84cc16, #a855f7, #00f2fe);
    border-radius: 3px;
    position: relative;
}

.timeline-node {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid #050a1e;
}

.timeline-card {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeline-card:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.timeline-connector {
    height: 4px;
    width: 40px;
    background: currentColor;
    opacity: 0.5;
}

/* Footer Specifics */
footer {
    transition: background 1s ease, border-color 1s ease, box-shadow 1s ease;
}

footer.active-mode {
    background: linear-gradient(180deg, #0f1c4d 0%, #0a1233 100%);
    border-top-color: rgba(0, 242, 254, 0.4);
    box-shadow: 0 -20px 50px rgba(0, 242, 254, 0.1);
}

footer .absolute img {
    filter: brightness(0) invert(1);
    transition: filter 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
}

footer.active-mode .absolute img {
    filter: brightness(1) invert(0) drop-shadow(0 0 20px rgba(0, 242, 254, 0.3));
    opacity: 0.15;
}

/* Color accents for links when active */
footer.active-mode a {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

footer.active-mode .font-arcade {
    color: #00f2fe;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.footer-bg-anim {
    animation: slow-rock 25s ease-in-out infinite;
}

@keyframes slow-rock {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-4deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(4deg);
    }
}

/* Click Sprite Styles */
.click-sprite {
    position: absolute;
    width: 20px;
    height: auto;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    animation: sprite-pop 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes sprite-pop {
    0% {
        transform: translate(-50%, 0) scale(0);
        opacity: 0;
    }

    30% {
        transform: translate(-50%, -30px) scale(1.5);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -60px) scale(1);
        opacity: 0;
    }
}

/* Swiper Customization */
.exhibitionSwiper {
    padding-bottom: 4rem !important;
}

.swiper-wrapper {
    margin-top: 1rem !important;
}


.swiper-pagination-bullet {
    background: #00f2fe !important;
    opacity: 0.5;
    width: 12px;
    height: 12px;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    border-radius: 6px;
    background: linear-gradient(90deg, #00f2fe, #a855f7) !important;
}

.exhibitionSwiper .swiper-slide {
    display: flex;
    height: auto;
}

.exhibition-swiper-container .swiper-button-next,
.exhibition-swiper-container .swiper-button-prev {
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width:1024px) {
	.timeline-card:hover {
		transform:unset;
		filter: brightness(1.1);
	}
}

@media (max-width: 768px) {

    .exhibition-swiper-container .swiper-button-next,
    .exhibition-swiper-container .swiper-button-prev {
        display: none;
    }
}