/* 
 * K-BEAUTY TOKYO POPUP Landing Page Styles
 * Concept: Deep Green & Gold, Winter/Christmas Snowball
 */

:root {
    --color-deep-green: #0a2f23;
    --color-darker-green: #051a13;
    --color-gold: #d4af37;
    --color-cream: #f9f7f0;
    --color-white: #ffffff;
    --color-text-primary: #333333;
    --color-text-light: #f9f7f0;

    --font-heading: 'Italiana', serif;
    --font-body: 'Outfit', sans-serif;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-deep-green);
    color: var(--color-text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-gold);
    margin-bottom: var(--spacing-sm);
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--color-gold);
    background-color: transparent;
    color: var(--color-gold);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    margin: 0.5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 200px;
    text-align: center;
    pointer-events: auto;
    position: relative;
}

.btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: var(--color-gold);
    transition: all 0.3s ease;
    z-index: -1;
}

.btn:hover {
    color: var(--color-white);
    background-color: var(--color-gold);
}

.btn:hover::after {
    height: 100%;
}

.btn-primary {
    background-color: var(--color-gold);
    color: var(--color-deep-green);
}

.btn-primary:hover {
    background-color: #b5952f;
    color: var(--color-white);
}

.btn-secondary {
    border-color: #555;
    color: #555;
}

.btn-secondary:hover {
    background-color: #555;
    color: white;
}

.btn-secondary::after {
    background-color: #555;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 2rem;
    border: 2px solid var(--color-gold);
    width: 90%;
    max-width: 600px;
    position: relative;
    border-radius: 8px;
    text-align: center;
    color: var(--color-text-primary);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    pointer-events: auto;
    z-index: 2001;
}

.modal.show .modal-content {
    transform: scale(1);
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--color-deep-green);
    text-decoration: none;
    cursor: pointer;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2rem;
}

@media (min-width: 600px) {
    .modal-actions {
        flex-direction: row;
        justify-content: center;
    }
}


/* Navigation Bar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(10, 47, 35, 0.95);
    /* Deep Green with opacity */
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.nav-logo {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links li a {
    color: var(--color-cream);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
}

.nav-links li a:hover {
    color: var(--color-gold);
}

/* Mobile Nav Toggle (Simple) */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Hide for simplicity in this iteration, or make scrollable. 
                        Let's keep it simple: Hide and show on click or just scrollable row? 
                        User didn't ask for complex menu, but recommended "Recommended composition".
                        Let's do a horizontal scroll for mobile to keep it accessible easily without JS toggle overhead for now,
                        or just hide and show. Let's do horizontal scroll for simplicity and reliability. */
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        width: 100%;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 1rem;
    }

    .nav-links li {
        flex: 0 0 auto;
    }
}


/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding-bottom: 80px;
    padding-right: var(--spacing-md);
    padding-top: 60px;
    /* Offset for Navbar */
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/main-poster.png');
    background-size: contain;
    /* Show full poster */
    background-position: center top;
    /* Align top so head isn't cut off */
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* Fixed attachment can be buggy on mobile with huge images */
    z-index: 0;
}

/* On Desktop, maybe we want cover if the image is wide enough? 
   Actually, poster is likely portrait. 'contain' is safer to show all info. 
   Let's ensure background color matches poster edge if possible. */

/* ... (previous styles continue) ... */

/* Mission Section */
.mission-section {
    background-color: var(--color-gold);
    color: var(--color-deep-green);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.mission-content h2 {
    color: var(--color-deep-green);
    border-bottom-color: var(--color-deep-green);
}

.mission-highlight {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1rem;
    display: block;
}

/* SEMAS Section */
.semas-section {
    background-color: var(--color-cream);
    color: var(--color-text-primary);
    padding: var(--spacing-xl) 0;
}

.semas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .semas-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.semas-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-top: 4px solid var(--color-deep-green);
}

.semas-card h3 {
    color: var(--color-deep-green);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

/* Add a gradient overlay to make text readable at bottom if needed, 
   or just to blend the bottom of the poster into the page color */
.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, transparent, var(--color-deep-green));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: right;
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    animation: fadeInUp 1s ease-out 0.5s backwards;
}

/* Floating CTA (Fixed at bottom on scroll, but integrated in Hero initially) */
.floating-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .floating-cta {
        flex-direction: row;
        justify-content: flex-end;
    }

    .hero-bg {
        background-size: cover;
        /* On desktop, maybe cover is better? Or stick to contain to show info? 
                                   User said "Poster image fills the screen". 
                                   Let's try cover centered, but it might cut text. 
                                   Safest is contain or specific responsive handling. */
        background-size: contain;
        background-position: center;
    }
}

/* Introduction */
.intro {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-deep-green);
    text-align: center;
}

.intro h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-gold);
}

.intro p {
    font-size: 1.2rem;
    color: var(--color-cream);
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

.highlight {
    font-weight: bold;
    color: var(--color-white);
}

/* Event Info */
.event-info {
    padding: var(--spacing-lg) 0;
    background-color: var(--color-darker-green);
}

.event-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
    .event-block {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.event-details h3 {
    font-size: 2rem;
    border-bottom: 2px solid var(--color-gold);
    display: inline-block;
    padding-bottom: 0.5rem;
    margin-bottom: var(--spacing-md);
}

.event-date,
.event-location {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.map-container {
    width: 100%;
    height: 300px;
    border: 2px solid var(--color-gold);
    border-radius: 8px;
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Brand Lineup */
.brands {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-deep-green);
}

.brand-category {
    margin-bottom: var(--spacing-lg);
}

.brand-category h3 {
    text-align: center;
    font-size: 1.8rem;
    color: var(--color-cream);
    margin-bottom: var(--spacing-md);
    position: relative;
}

.brand-category h3::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: var(--color-gold);
    margin: 10px auto 0;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
}

.brand-item {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-height: 100px;
}

.brand-item:hover {
    background-color: rgba(212, 175, 55, 0.1);
    transform: translateY(-5px);
    border-color: var(--color-gold);
}

.brand-name {
    font-weight: 500;
    color: var(--color-white);
    font-size: 0.85rem;
    line-height: 1.3;
    word-break: keep-all;
    word-wrap: break-word;
}

.brand-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
    border-radius: 4px;
    object-fit: contain;
    background-color: #fff;
    padding: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem;
}

/* Benefits */
.benefits {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-darker-green);
    text-align: center;
}

.benefit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

@media (min-width: 768px) {
    .benefit-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-card {
    background: linear-gradient(145deg, #0a2f23, #0d3b2c);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.benefit-title {
    font-family: var(--font-heading);
    color: var(--color-gold);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.benefit-desc {
    color: var(--color-cream);
    font-size: 0.9rem;
}

/* Press Section */
.press-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-custom-white, #fff);
    color: var(--color-text-primary);
}

/* Gallery Section */
.gallery-section {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-deep-green);
    color: var(--color-white);
}

/* Footer */
footer {
    padding: var(--spacing-lg) 0;
    background-color: #020f0b;
    color: #888;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content h4 {
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.footer-links {
    margin-top: 1rem;
}

.footer-links a {
    margin: 0 0.5rem;
    color: var(--color-gold);
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}