:root {
    --bg-color: #FFFFFF;
    --text-color: #222222;
    --accent-color: #113939;
    --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Josefin Sans', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, .nav-link, .album-title {
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
}

#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease;
}

.loader {
    width: 40px; height: 40px; border: 2px solid #f3f3f3;
    border-top: 2px solid var(--text-color); border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

header {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 30px 50px; display: flex; justify-content: space-between;
    align-items: center; z-index: 1000; transition: all 0.4s ease;
    background: transparent;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 15px 50px;
}

.header-container {
    width: 100%; max-width: 1800px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}

.logo img { height: clamp(20px, 3vw, 25px); display: block; }

.burger {
    cursor: pointer; z-index: 1100; display: flex;
    flex-direction: column; gap: 6px;
}

.burger div { width: 30px; height: 2px; background-color: #FFFFFF; transition: all 0.3s ease; }
header.scrolled .burger div { background-color: var(--text-color); }
.burger.active div { background-color: var(--text-color) !important; }
.burger.active div:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger.active div:nth-child(2) { opacity: 0; }
.burger.active div:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.nav-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background-color: var(--bg-color); z-index: 1050;
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 40px; opacity: 0; visibility: hidden;
    transition: var(--transition);
}

.nav-menu.active { opacity: 1; visibility: visible; }
.nav-links { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.nav-link { font-size: clamp(1.8rem, 6vw, 2.5rem); letter-spacing: 6px; color: var(--text-color); font-weight: 300; text-decoration: none; }
.nav-link:hover, .nav-link.active { color: var(--accent-color); }

.hero {
    position: relative; width: 100%; height: 100vh;
    overflow: hidden; display: flex; justify-content: center;
    align-items: center; text-align: center;
}

.hero-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-slide {
    position: absolute; width: 100%; height: 100%; background-size: cover;
    background-position: center; opacity: 0; transition: opacity 1.5s ease;
}
.hero-slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); }
.hero-slide.active { opacity: 1; }

.hero-content { position: relative; z-index: 2; color: #FFFFFF; width: 100%; padding: 0 20px; }
.hero-content h1 { font-size: clamp(3rem, 10vw, 5.5rem); letter-spacing: clamp(10px, 3vw, 20px); font-weight: 300; margin-bottom: 20px; }
.hero-content p { font-size: clamp(0.9rem, 2vw, 1.2rem); letter-spacing: 5px; text-transform: uppercase; }

.container {
    max-width: 1600px; margin: 0 auto;
    padding: clamp(60px, 10vw, 100px) clamp(20px, 5vw, 60px);
}

.section-title { text-align: center; font-size: clamp(1.2rem, 3vw, 1.8rem); letter-spacing: 5px; margin-bottom: 60px; }

.album-grid-columns {
    column-count: 3;
    column-gap: clamp(15px, 3vw, 30px);
}

.album-card {
    position: relative; display: block; break-inside: avoid;
    margin-bottom: clamp(15px, 3vw, 30px); overflow: hidden;
    background-color: #f5f5f5;
}

.album-card img { width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.album-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 57, 57, 0.85); display: flex;
    justify-content: center; align-items: center; padding: 20px;
    opacity: 0; transition: opacity 0.4s ease;
}

.album-title { color: #FFFFFF; font-size: clamp(0.8rem, 2vw, 1rem); letter-spacing: 2px; text-align: center; }
.album-card:hover img { transform: scale(1.08); }
.album-card:hover .album-overlay { opacity: 1; }

footer { padding: 80px 20px; text-align: center; border-top: 1px solid #F0F0F0; }
footer p { font-size: 13px; color: #999; margin-bottom: 25px; }
.lang-switcher a { text-decoration: none; color: #AAA; font-size: 12px; margin: 0 10px; font-family: 'Jost'; }
.lang-switcher a.active { color: var(--text-color); font-weight: 600; }

.fade-in-up { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) { .album-grid-columns { column-count: 2; } }
@media (max-width: 768px) {
    header { padding: 20px 25px; }
    .album-grid-columns { column-count: 1; }
    .nav-link { letter-spacing: 4px; }
}