@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;600&display=swap');

:root {
--bg-luxury-beige: #f5efe6; /* لون ناعم مستوحى من براندات المكياج العالمية الفاخرة */
--text-rich-espresso: #2a2421;
--text-muted-taupe: #706661;
--accent-soft-rose: #e1b3a8;
--font-serif-luxury: 'Cormorant Garamond', serif;
--font-sans-clean: 'Montserrat', sans-serif;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
background-color: var(--bg-luxury-beige);
color: var(--text-rich-espresso);
font-family: var(--font-sans-clean);
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
}
body::-webkit-scrollbar { display: none; }

#luxury-grain {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: 99;
}

#webgl-container {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 1;
pointer-events: none;
}

/* شاشة التحميل الافتتاحية للبراند */
#beauty-loader {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background-color: var(--bg-luxury-beige);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
}
.loader-wrap { text-align: center; }
.loader-brand {
font-family: var(--font-serif-luxury);
font-size: 2.8rem;
font-weight: 400;
letter-spacing: 0.3em;
color: var(--text-rich-espresso);
margin-bottom: 1.5rem;
}
.loader-line { width: 150px; height: 1px; background: rgba(0,0,0,0.06); margin: 0 auto; overflow: hidden; }
.loader-line span { display: block; width: 0%; height: 100%; background: var(--accent-soft-rose); }

/* الهيدر الفاخر */
.beauty-header {
position: fixed;
top: 0; left: 0; width: 100%;
padding: 2.5rem 6vw;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 500;
}
.brand-logo {
font-family: var(--font-serif-luxury);
color: var(--text-rich-espresso);
text-decoration: none;
font-size: 1.5rem;
letter-spacing: 0.2em;
}
.brand-logo span { font-weight: 300; font-style: italic; color: var(--text-muted-taupe); }

.nav-links .nav-item {
color: var(--text-muted-taupe); text-decoration: none;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em;
text-transform: uppercase; margin-left: 2.5rem;
transition: color 0.4s;
}
.nav-links .nav-item:hover, .nav-links .nav-item.active { color: var(--text-rich-espresso); }

#scroll-container { position: relative; z-index: 10; width: 100%; }
.section { width: 100%; min-height: 100vh; position: relative; padding: 0 8vw; display: flex; align-items: center; }

/* قسم الـ Hero */
.hero-section { align-items: center; }
.hero-eyebrow {
font-size: 0.8rem; font-weight: 600; letter-spacing: 0.35em;
color: var(--text-muted-taupe); margin-bottom: 1.5rem; display: block;
}
.hero-main-title {
font-family: var(--font-serif-luxury);
font-size: clamp(2.8rem, 6vw, 5.5rem);
font-weight: 400; line-height: 1.1;
color: var(--text-rich-espresso); letter-spacing: -0.02em;
}

.scroll-down-hint { display: flex; align-items: center; gap: 1rem; margin-top: 5rem; }
.dot-anim { width: 6px; height: 6px; background: var(--text-rich-espresso); border-radius: 50%; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0.4; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.4; } }
.hint-lbl { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.25em; color: var(--text-muted-taupe); text-transform: uppercase; }

/* لوحات العرض التفاعلية (Cards Showcase) */
.showcase-section { justify-content: flex-end; padding: 12vh 8vw; }
.cards-stack { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 10vh; }

.beauty-glass-card {
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 32px; padding: 3rem;
backdrop-filter: blur(20px); position: relative; overflow: hidden;
transform: translateY(60px); opacity: 0;
box-shadow: 0 30px 60px rgba(42, 36, 33, 0.03);
}
.card-glow {
position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle, rgba(225, 179, 168, 0.15) 0%, transparent 70%);
pointer-events: none;
}
.card-meta { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--text-muted-taupe); display: block; margin-bottom: 1.5rem; }
.card-title { font-family: var(--font-serif-luxury); font-size: 2.2rem; font-weight: 400; margin-bottom: 1.2rem; }
.card-desc { color: var(--text-muted-taupe); font-size: 0.95rem; line-height: 1.65; margin-bottom: 2.5rem; }

.card-btn {
display: inline-block; padding: 1rem 2.2rem; border-radius: 100px;
border: 1px solid var(--text-rich-espresso); color: var(--text-rich-espresso);
text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em;
text-transform: uppercase; background: transparent; transition: all 0.35s;
}
.card-btn:hover { background: var(--text-rich-espresso); color: var(--bg-luxury-beige); transform: translateY(-3px); }

/* الفوتر وتغيير الأجواء والألوان */
.footer-section { flex-direction: column; justify-content: space-between; padding: 15vh 8vw 4vw 8vw; text-align: center; }
.footer-center-content { margin: auto 0; }
.footer-title { font-family: var(--font-serif-luxury); font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 400; margin-bottom: 3rem; }

.atmosphere-selectors { display: flex; justify-content: center; gap: 1.5rem; }
.atm-btn {
background: transparent; border: 1px solid rgba(42, 36, 33, 0.15);
padding: 0.9rem 2rem; border-radius: 100px; cursor: pointer;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; color: var(--text-muted-taupe);
transition: all 0.4s;
}
.atm-btn:hover, .atm-btn.active {
color: var(--text-rich-espresso); border-color: var(--text-rich-espresso);
background: rgba(255,255,255,0.6); box-shadow: 0 10px 25px rgba(0,0,0,0.02);
}

.footer-bottom-bar {
width: 100%; display: flex; justify-content: space-between;
border-top: 1px solid rgba(42, 36, 33, 0.06); padding-top: 2rem;
font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-muted-taupe);
}

@media(max-width: 768px) {
.atmosphere-selectors { flex-direction: column; gap: 1rem; align-items: center; }
.footer-bottom-bar { flex-direction: column; gap: 1rem; text-align: center; }
}