/* =========================================
   SHIROSH GROUP - ULTRA PREMIUM CSS
   Theme: Emerald Green (#012117) & Ivory (#FCFBF8)
========================================= */

:root {
    --clr-emerald: #012117;
    --clr-ivory: #FCFBF8;
    --clr-gold: #D4AF37;
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
    --font-accent: 'Great Vibes', cursive;
    
    --ease-premium: cubic-bezier(0.77, 0, 0.175, 1);
    --transition-slow: 1s var(--ease-premium);
    --transition-fast: 0.4s var(--ease-premium);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    background-color: var(--clr-emerald); color: var(--clr-ivory);
    font-family: var(--font-body); overflow-x: hidden; -webkit-font-smoothing: antialiased;
}

/* Custom Aura Cursor */
.aura-cursor {
    position: fixed; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.4) 0%, rgba(212,175,55,0) 70%);
    pointer-events: none; transform: translate(-50%, -50%); z-index: 99999;
    transition: width 0.3s, height 0.3s;
}

/* Cinematic Gateway */
.gateway-overlay {
    position: fixed; inset: 0; background: var(--clr-emerald); z-index: 100000;
    display: flex; justify-content: center; align-items: center; text-align: center;
    transition: opacity 1.2s var(--ease-premium), visibility 1.2s;
}
.gateway-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gateway-content { padding: 2rem; }
.gateway-brand { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 5rem); color: var(--clr-gold); letter-spacing: 0.1em; margin-bottom: 1rem; }
.gateway-subtitle { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3em; opacity: 0.7; margin-bottom: 4rem; }
.gateway-options { display: flex; align-items: center; justify-content: center; gap: 2rem; }
.gateway-divider { width: 1px; height: 30px; background: rgba(212,175,55,0.3); }
.gateway-btn { background: none; border: none; font-family: var(--font-body); color: var(--clr-ivory); font-size: 1.2rem; letter-spacing: 0.1em; transition: var(--transition-fast); cursor: pointer; }
.gateway-btn:hover { color: var(--clr-gold); transform: translateY(-3px); }
.gateway-footer { position: absolute; bottom: 2rem; left: 0; width: 100%; font-size: 0.7rem; opacity: 0.4; letter-spacing: 0.2em; text-transform: uppercase; }

/* Navigation */
.main-header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 5%; z-index: 1000; transition: var(--transition-fast); }
.main-header.scrolled { padding: 1rem 5%; background: rgba(1, 33, 23, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212,175,55,0.1); }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; }
.brand-logo { font-family: var(--font-heading); font-size: 1.5rem; color: var(--clr-gold); text-decoration: none; font-weight: 600; letter-spacing: 0.15em; }

.desktop-nav { display: none; } 
@media (min-width: 1024px) {
    .desktop-nav { display: flex; gap: 3rem; }
    .nav-link { color: var(--clr-ivory); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; transition: var(--transition-fast); position: relative;}
    .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: var(--clr-gold); transition: var(--transition-fast); }
    .nav-link:hover::after { width: 100%; }
    .nav-link:hover { color: var(--clr-gold); }
}

/* Hamburger Mobile */
.hamburger-menu { background: none; border: none; display: flex; flex-direction: column; gap: 6px; z-index: 1001; cursor: pointer; }
.hamburger-menu .bar { width: 30px; height: 2px; background: var(--clr-ivory); transition: var(--transition-fast); }
.hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger-menu.active .bar:nth-child(2) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 1024px) { .hamburger-menu { display: none; } }

/* Mobile Menu Overlay */
.mobile-menu-overlay { position: fixed; inset: 0; background: var(--clr-emerald); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: var(--transition-slow); }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu-content { display: flex; flex-direction: column; gap: 2rem; text-align: center; }
.mobile-link { font-family: var(--font-heading); font-size: clamp(2.5rem, 8vw, 4rem); color: var(--clr-ivory); text-decoration: none; transition: var(--transition-fast); opacity: 0; transform: translateY(20px); }
.mobile-menu-overlay.active .mobile-link { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.gold-text { color: var(--clr-gold) !important; }
.mobile-socials { margin-top: 3rem; display: flex; gap: 2rem; justify-content: center; }
.mobile-socials a { color: var(--clr-gold); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.3s; }
.mobile-socials a:hover { color: var(--clr-ivory); }

/* Hero Section (Home) */
.hero-section { position: relative; height: 100vh; display: flex; align-items: center; padding: 0 5%; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.hero-gradient { position: absolute; inset: 0; background: linear-gradient(to right, rgba(1,33,23,0.9) 0%, rgba(1,33,23,0.4) 100%); }
@media (max-width: 768px) { .hero-gradient { background: linear-gradient(to top, rgba(1,33,23,0.95) 0%, rgba(1,33,23,0.4) 100%); } }

.hero-content { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; width: 100%; }
.eyebrow { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4em; color: var(--clr-gold); margin-bottom: 1.5rem; }
.hero-title { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 6rem); line-height: 1.1; margin-bottom: 3rem; font-weight: 400; text-shadow: 0 10px 30px rgba(0,0,0,0.5); }

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.premium-btn { display: inline-block; padding: 1rem 2.5rem; background: var(--clr-ivory); color: var(--clr-emerald); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; border-radius: 50px; font-weight: 600; transition: var(--transition-fast); border: 1px solid var(--clr-ivory); cursor: pointer; text-align: center; }
.premium-btn.outline { background: transparent; color: var(--clr-ivory); }
.premium-btn:hover { background: var(--clr-gold); color: var(--clr-emerald); border-color: var(--clr-gold); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.premium-btn.gold-fill { background: var(--clr-gold); color: var(--clr-emerald); border-color: var(--clr-gold); width: 100%; max-width: 300px; }

.scroll-indicator { position: absolute; bottom: 2rem; left: 5%; display: flex; align-items: center; gap: 1rem; z-index: 1; }
.scroll-text { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em; writing-mode: vertical-rl; transform: rotate(180deg); opacity: 0.8;}
.scroll-line { width: 1px; height: 50px; background: var(--clr-gold); animation: scrollDown 2s infinite; }
@keyframes scrollDown { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Vision Section */
.vision-section { padding: 8rem 5%; background: var(--clr-ivory); color: var(--clr-emerald); }
.vision-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .vision-container { grid-template-columns: 1fr 1fr; gap: 8rem; } }

.image-wrapper { position: relative; overflow: hidden; border-radius: 4px; padding-top: 120%; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
.image-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(10%); transition: var(--transition-slow); }
.image-wrapper:hover img { filter: grayscale(0%); transform: scale(1.05); }

.section-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 400; margin-bottom: 1rem; }
.signature { font-family: var(--font-accent); font-size: clamp(2rem, 4vw, 3.5rem); color: var(--clr-gold); font-weight: 300; margin-bottom: 2rem; }
.body-text { font-size: 1.1rem; line-height: 1.8; opacity: 0.8; font-weight: 400; }

/* Vault Section */
.vault-section { padding: 8rem 5%; text-align: center; background: radial-gradient(circle at center, #023323 0%, var(--clr-emerald) 100%); }
.vault-container { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; border: 1px solid rgba(212,175,55,0.2); border-radius: 8px; background: rgba(252,251,248,0.02); backdrop-filter: blur(10px); }
.lock-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.section-title.gold { color: var(--clr-gold); margin-bottom: 1.5rem; }
.body-text.centered { margin: 0 auto 3rem; max-width: 500px; color: var(--clr-ivory); }
.premium-card { background: rgba(252, 251, 248, 0.05); border: 1px solid var(--clr-gold); padding: 40px; border-radius: 15px; margin-top: 30px;}

/* Footer */
.site-footer { padding: 4rem 5%; text-align: center; border-top: 1px solid rgba(212,175,55,0.1); background: var(--clr-emerald); }
.footer-brand { font-family: var(--font-heading); font-size: 2rem; color: var(--clr-gold); margin-bottom: 1rem; letter-spacing: 0.1em; }
.copyright { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.5; color: var(--clr-ivory); }

/* Animations Engine */
.reveal-elem { opacity: 0; transform: translateY(50px); transition: 1.2s var(--ease-premium); }
.reveal-elem.active { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.2s; }

/* =========================================
   INNER PAGES (Wellbeing, Food, Fashion, Travel)
========================================= */

.inner-hero {
    height: 40vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, #023323 0%, var(--clr-emerald) 100%);
    text-align: center; padding: 0 5%; margin-top: 80px; position: relative; overflow: hidden;
}

/* Travel Hero Specifics */
.travel-hero { height: 50vh; }
.hero-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(30%); }
.hero-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(1,33,23,0.9), rgba(1,33,23,0.6)); }

/* Feed (Wellbeing) */
.feed-section { padding: 6rem 5%; background: var(--clr-ivory); color: var(--clr-emerald); }
.feed-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 4rem 3rem; }
.article-card { transition: var(--transition-slow); cursor: pointer; }
.article-img-wrap { overflow: hidden; aspect-ratio: 4/5; position: relative; margin-bottom: 1.5rem; box-shadow: 0 20px 40px rgba(0,0,0,0.05); border-radius: 2px; }
.article-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(15%); transition: var(--transition-slow); }
.article-card:hover .article-img-wrap img { transform: scale(1.05); filter: grayscale(0%); }
.article-category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--clr-gold); margin-bottom: 0.8rem; display: block; font-weight: 600;}
.article-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 400; margin-bottom: 1rem; line-height: 1.3;}
.article-btn { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--clr-emerald); text-decoration: none; border-bottom: 1px solid var(--clr-gold); padding-bottom: 3px; transition: var(--transition-fast); font-weight: 600;}
.article-btn:hover { color: var(--clr-gold); }

/* Masonry (Food Art) */
.gallery-section { padding: 6rem 5%; background: var(--clr-ivory); }
.masonry-gallery { max-width: 1400px; margin: 0 auto; column-count: 3; column-gap: 2rem; }
.masonry-item { break-inside: avoid; margin-bottom: 2rem; position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.masonry-item img { width: 100%; display: block; transition: var(--transition-slow); filter: grayscale(10%); }
.masonry-item:hover img { transform: scale(1.05); filter: grayscale(0%); }
.masonry-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(1,33,23,0.9) 0%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; opacity: 0; transition: var(--transition-fast); }
.masonry-item:hover .masonry-overlay { opacity: 1; }
.food-card-title { color: var(--clr-ivory); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: 0.5rem; }
.food-desc { color: var(--clr-gold); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;}

/* Editorial Lookbook (Fashion) */
.lookbook-section { padding: 6rem 5%; background: var(--clr-ivory); color: var(--clr-emerald); }
.lookbook-container { max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 6rem; }
.lookbook-row { display: flex; align-items: center; gap: 4rem; }
.lookbook-row:nth-child(even) { flex-direction: row-reverse; }
.lookbook-img { flex: 1; position: relative; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.1); border-radius: 4px; }
.lookbook-img img { width: 100%; height: auto; display: block; filter: grayscale(15%); transition: var(--transition-slow); }
.lookbook-row:hover .lookbook-img img { transform: scale(1.03); filter: grayscale(0%); }
.lookbook-text { flex: 1; padding: 2rem; }
.lookbook-number { font-family: var(--font-accent); font-size: 4rem; color: var(--clr-gold); opacity: 0.5; margin-bottom: -20px; display: block; }
.lookbook-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 1.5rem; font-weight: 400; }
.lookbook-desc { font-size: 1.1rem; line-height: 1.8; opacity: 0.8; }

/* --- Cinematic Travel Journal (Travel) --- */
.journal-section { padding: 6rem 5%; background: var(--clr-ivory); }
.journal-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 5rem; }
.journal-entry { display: flex; flex-direction: column; gap: 1.5rem; position: relative; }
.journal-img-wrap { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.journal-img-wrap img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); transition: var(--transition-slow); }
.journal-entry:hover .journal-img-wrap img { filter: grayscale(0%); transform: scale(1.02); }
.journal-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-body); border-bottom: 1px solid rgba(1,33,23,0.1); padding-bottom: 1rem; }
.journal-location { color: var(--clr-gold); font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.85rem; }
.journal-date { font-size: 0.8rem; opacity: 0.6; }
.journal-title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); color: var(--clr-emerald); font-weight: 400; margin-top: 1rem; }
.journal-text { font-size: 1.1rem; line-height: 1.8; opacity: 0.8; color: var(--clr-emerald); max-width: 800px; }

@media (max-width: 1024px) { .masonry-gallery { column-count: 2; } }
@media (max-width: 768px) {
    .inner-hero { height: 35vh; margin-top: 70px; }
    .feed-container { grid-template-columns: 1fr; gap: 3rem; }
    .masonry-gallery { column-count: 1; }
    .masonry-overlay { opacity: 1; background: linear-gradient(to top, rgba(1,33,23,0.8) 0%, transparent 100%); padding: 1.5rem; }
    
    .lookbook-row, .lookbook-row:nth-child(even) { flex-direction: column; gap: 2rem; text-align: center; }
    .lookbook-text { padding: 0; }
    .lookbook-number { margin-bottom: 0; }

    .journal-img-wrap { aspect-ratio: 4/3; }
    .journal-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
/* =========================================
   PREMIUM POST READER (MODAL POPUP)
========================================= */
.post-modal-overlay {
    position: fixed; inset: 0; background: rgba(1, 33, 23, 0.95); z-index: 100000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: var(--transition-fast); backdrop-filter: blur(10px);
}
.post-modal-overlay.active { opacity: 1; visibility: visible; }
.post-modal-content {
    background: var(--clr-ivory); width: 95%; max-width: 800px; max-height: 90vh;
    border-radius: 5px; overflow-y: auto; position: relative;
    display: flex; flex-direction: column; transform: translateY(50px); transition: var(--transition-slow);
}
.post-modal-overlay.active .post-modal-content { transform: translateY(0); }
.close-modal-btn {
    position: absolute; top: 20px; right: 20px; background: var(--clr-gold); color: var(--clr-emerald);
    border: none; width: 40px; height: 40px; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
    display: flex; justify-content: center; align-items: center; z-index: 10; transition: var(--transition-fast);
}
.close-modal-btn:hover { background: var(--clr-emerald); color: var(--clr-gold); }
.modal-media-wrap { width: 100%; max-height: 450px; overflow: hidden; background: #000; display: flex; justify-content: center; align-items: center;}
.modal-hero-img { width: 100%; height: 100%; object-fit: cover; }
.modal-body { padding: 40px 10%; color: var(--clr-emerald); }
.modal-meta { font-size: 0.8rem; color: var(--clr-gold); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 15px; display: block; font-weight: 600;}
.modal-title { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 30px; line-height: 1.2; font-weight: 400;}
.modal-text { font-size: 1.1rem; line-height: 2; opacity: 0.85; white-space: pre-wrap; font-weight: 400;}

@media (max-width: 768px) { 
    .modal-media-wrap { max-height: 250px; } 
    .modal-body { padding: 30px 5%; } 
}