/* 
    Drzazga Meble - Premium Design System
    Focus: Luxury, Craftsmanship, Precision
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&family=Inter:wght@300;400;500;600&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
    --primary: #ffffff;
    --secondary: #87CEEB; /* Sky Blue accent as used in original */
    --accent: #D4AF37; /* Gold touch for luxury if needed, but we'll stick to brand colors */
    --bg-dark: #0A0A0A;
    --surface: #121212;
    --text-muted: #A0A0A0;
    --transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Material Symbols Config */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}

html, body {
    background-color: var(--bg-dark);
    color: var(--primary);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    font-family: 'Inter', sans-serif;
}

.font-headline { font-family: 'Outfit', sans-serif; }

/* Custom Typography */
.text-impact { 
    font-size: clamp(3rem, 10vw, 6rem); 
    line-height: 0.95; 
    letter-spacing: -0.04em;
}

.text-reveal {
    background: linear-gradient(to bottom, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism */
.glass-panel { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Gradients */
.bg-premium-gradient { 
    background: radial-gradient(circle at top right, #1a1a1a 0%, #0a0a0a 100%); 
}

.blue-overlay-hero { 
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.2) 0%, rgba(10, 10, 10, 0.8) 100%); 
}

.card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
}

/* Navigation States */
nav.scrolled {
    background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Animations */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: var(--transition);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Interactive Elements */
.btn-premium {
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.btn-premium::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: white;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease, opacity 0.6s ease;
    border-radius: 50%;
}

.btn-premium:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.1;
}

.card-zoom img {
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.card-zoom:hover img {
    transform: scale(1.1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}



.blue-project-overlay {
    background: linear-gradient(to right, #050B15 0%, rgba(5, 11, 21, 0.7) 40%, transparent 90%);
    transition: var(--transition);
}

.group:hover .blue-project-overlay {
    background: linear-gradient(to right, #050B15 0%, rgba(5, 11, 21, 0.8) 50%, transparent 95%);
}

.navy-hero-overlay {
    background: linear-gradient(to right, #050B15 0%, rgba(5, 11, 21, 0.7) 40%, transparent 100%);
}

/* Bento Grid Specifics */
.bento-item {
    background: #121212;
}

.highlight-border {
    position: relative;
}

.highlight-border::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(45deg, transparent, rgba(135, 206, 235, 0.3), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s;
}

.highlight-border:hover::before {
    opacity: 1;
}

.description-gradient {
    background: linear-gradient(135deg, #081221 0%, #050B15 100%);
    position: relative;
    overflow: hidden;
}

.description-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(135, 206, 235, 0.05) 0%, transparent 70%);
    pointer-events: none;
}