/* CSS Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#0a0a0a;color:#fff;overflow:hidden;height:100vh;}

/* Loading Overlay */
#loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);display:flex;justify-content:center;align-items:center;z-index:10000;transition:opacity 0.8s ease,visibility 0.8s ease;}
#loading-overlay.fade-out{opacity:0;visibility:hidden;}

.drag-scroll-hint{text-align:center;}
.hint-content{animation:pulseHint 2s infinite;}
.hint-icon{width:60px;height:60px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12z"/></svg>') no-repeat center;background-size:contain;margin:0 auto 20px;transform:rotate(90deg);}
.hint-content p{font-size:18px;color:#fff;opacity:0.8;}

@keyframes pulseHint{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.1);opacity:0.7;}}

/* Sidebar Menu */
.sidebar{position:fixed;top:0;left:-300px;width:300px;height:100vh;background:linear-gradient(135deg,rgba(20,20,20,0.95),rgba(40,40,40,0.95));backdrop-filter:blur(10px);transition:left 0.4s cubic-bezier(0.23,1,0.32,1);z-index:9999;border-right:1px solid rgba(255,255,255,0.1);}
.sidebar.open{left:0;}

.menu-toggle{position:fixed;top:30px;left:30px;width:50px;height:50px;background:rgba(255,255,255,0.1);border:none;border-radius:50%;cursor:pointer;z-index:10001;transition:all 0.3s ease;}
.menu-toggle:hover{background:rgba(255,255,255,0.2);transform:scale(1.1);}
.menu-toggle span{display:block;width:20px;height:2px;background:#fff;margin:4px auto;transition:0.3s;}

.sidebar-content{padding:80px 40px 40px;}
.logo{font-size:28px;font-weight:bold;margin-bottom:60px;color:#fff;}
.nav-menu{list-style:none;}
.nav-item{margin-bottom:30px;}
.nav-link{color:#ccc;text-decoration:none;font-size:18px;display:flex;align-items:center;padding:15px 0;transition:color 0.3s ease;border-bottom:1px solid rgba(255,255,255,0.1);}
.nav-link:hover,.nav-link.active{color:#fff;}
.nav-icon{margin-right:15px;font-size:22px;}

.lang-selector{position:absolute;bottom:40px;left:40px;}
.lang-btn{background:none;border:1px solid rgba(255,255,255,0.2);color:#ccc;padding:8px 15px;margin:5px;border-radius:20px;cursor:pointer;transition:all 0.3s ease;}
.lang-btn:hover,.lang-btn.active{background:#fff;color:#000;}

/* Horizontal Scroll Container */
.horizontal-scroll-container{
    width:100vw;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    display:flex;
    scroll-behavior:smooth;
    cursor:grab;
}
.horizontal-scroll-container:active{cursor:grabbing;}
.horizontal-scroll-container::-webkit-scrollbar{height:8px;}
.horizontal-scroll-container::-webkit-scrollbar-track{background:rgba(255,255,255,0.1);}
.horizontal-scroll-container::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:4px;}

/* Force horizontal layout */
.page-content{
    display:flex;
    flex-direction:row;
    min-width:100vw;
}

/* Masonry Grid - Fixed Equal Squares */
.masonry-grid{
    width:60%;
    height:100vh;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:repeat(4,1fr);
    gap:12px;
    padding:20px;
    overflow:hidden;
    align-items:center;
    justify-items:center;
}

.masonry-item{
    position:relative;
    width:100%;
    height:100%;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    transition:transform 0.3s ease,box-shadow 0.3s ease;
    background:#1a1a1a;
}

.masonry-item:hover{
    transform:scale(1.05) translateZ(0);
    box-shadow:0 20px 40px rgba(0,0,0,0.6);
    z-index:10;
}

.masonry-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform 0.3s ease;
    display:block;
}

.masonry-item:hover img{
    transform:scale(1.1);
}

/* Parallax effect for masonry items */
.masonry-item{
    transform:translateZ(0);
    will-change:transform;
}

.masonry-item.parallax-element{
    transition:transform 0.1s ease-out;
}

/* Gallery Section */
.gallery-section{min-width:100vw;height:100vh;display:flex;position:relative;}

.text-panel{width:40%;padding:80px 60px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,rgba(10,10,10,0.9),rgba(30,30,30,0.8));}
.text-panel h1{font-size:3.5rem;margin-bottom:30px;font-weight:300;line-height:1.2;}
.text-panel p{font-size:1.2rem;line-height:1.6;opacity:0.8;max-width:400px;}

.item-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,0.9));padding:15px;color:#fff;opacity:0;transition:opacity 0.3s ease;}
.masonry-item:hover .item-overlay{opacity:1;}

.item-title{font-size:14px;font-weight:600;margin-bottom:5px;line-height:1.2;}
.item-price{font-size:12px;opacity:0.8;display:flex;align-items:center;gap:4px;}
.minecoin-icon{width:12px!important;height:12px !important;filter:brightness(1.2);}

/* Section Dividers */
.section-divider{
    width:100px;
    height:100vh;
    position:relative;
    background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.divider-content{
    position:relative;
    z-index:2;
    color:#fff;
    font-size:24px;
    text-align:center;
}

.thunder-bolt{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:120px;
    background:linear-gradient(45deg,#00f5ff,#0080ff,#ffffff);
    clip-path:polygon(20% 0%,40% 20%,30% 20%,40% 40%,30% 40%,40% 60%,30% 60%,40% 80%,30% 80%,80% 100%,60% 80%,70% 80%,60% 60%,70% 60%,60% 40%,70% 40%,60% 20%,70% 20%);
    animation:thunderGlow 2s ease-in-out infinite alternate;
}

@keyframes thunderGlow{
    0%{filter:drop-shadow(0 0 10px #00f5ff) brightness(1);}
    100%{filter:drop-shadow(0 0 25px #0080ff) brightness(1.5);}
}

.divider-particles{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.particle{
    position:absolute;
    width:2px;
    height:2px;
    background:#00f5ff;
    border-radius:50%;
    animation:floatParticles 3s linear infinite;
}

.particle:nth-child(1){left:10%;animation-delay:0s;}
.particle:nth-child(2){left:30%;animation-delay:0.5s;}
.particle:nth-child(3){left:50%;animation-delay:1s;}
.particle:nth-child(4){left:70%;animation-delay:1.5s;}
.particle:nth-child(5){left:90%;animation-delay:2s;}

@keyframes floatParticles{
    0%{transform:translateY(100vh) scale(0);opacity:0;}
    10%{opacity:1;transform:scale(1);}
    90%{opacity:1;}
    100%{transform:translateY(-10px) scale(0);opacity:0;}
}

/* Fade in animations */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}

.fade-in{
    opacity:0;
    animation:fadeInUp 0.6s ease forwards;
}

/* Masonry items with stagger effect */
.masonry-item.fade-in{
    animation:fadeInUp 0.8s ease forwards;
}

/* Content Pages */
.content-section{min-width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;padding:80px;background:linear-gradient(135deg,rgba(15,15,25,0.95),rgba(25,25,35,0.9));}
.content-wrapper{max-width:800px;text-align:center;}
.content-wrapper h1{font-size:3rem;margin-bottom:30px;color:#fff;}
.content-wrapper p{font-size:1.2rem;line-height:1.6;opacity:0.8;color:#ccc;margin-bottom:20px;}

/* Responsive Fixes */
@media(max-width:1200px){
    .masonry-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);}
    .text-panel{width:35%;padding:60px 40px;}
    .text-panel h1{font-size:2.8rem;}
}

@media(max-width:992px){
    .gallery-section{flex-direction:column;height:auto;min-height:100vh;}
    .text-panel{width:100%;height:auto;min-height:300px;padding:40px 30px;}
    .masonry-grid{width:100%;height:70vh;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);padding:20px;}
    .text-panel h1{font-size:2.5rem;}
    .section-divider{width:100px;height:80px;}
}

@media(max-width:768px){
    .masonry-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(8,1fr);height:60vh;}
    .text-panel{padding:30px 20px;}
    .text-panel h1{font-size:2rem;}
    .text-panel p{font-size:1rem;}
    .section-divider{width:80px;height:60px;}
}

@media(max-width:480px){
    .masonry-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(12,1fr);gap:8px;}
    .text-panel h1{font-size:1.8rem;}
    .horizontal-scroll-container{overflow-x:auto;overflow-y:visible;}
}

.item-price {
    color: #ffc42b;
    font-weight: bold;
    display: flex
;
    align-items: center;
    font-family: 'Press Start 2P', sans-serif;
    gap: 6px;
}