/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

@font-face {
    font-family: 'Elika Gorica';
    src: url('fonts/Elika Gorica Regular/Elika Gorica Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Higher';
    src: url('fonts/higher_marisa_passos/Higher.otf') format('opentype'),
        url('fonts/higher_marisa_passos/Higher.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-color: #ffffff;
    --accent-light: #f5e8ce;
    --accent-dark: #26261e;
    --text-color: #26261e;
    --text-muted: #666;
    --white: #ffffff;

    --font-heading: 'Elika Gorica', 'Higher', 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;

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

    --container-width: 1200px;
    --border-radius: 4px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html {
    scroll-behavior: auto !important;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.3;
    color: var(--accent-dark);
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

.section {
    padding: var(--spacing-xl) 0;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm) 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--accent-dark);
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
    list-style: none;
}

.nav-link {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--accent-dark);
    transition: var(--transition);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--accent-dark);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 15vh;
    justify-content: center;
    background-color: var(--accent-light);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero-content {
    z-index: 2;
    padding: 0 var(--spacing-md);
    max-width: 800px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards 0.5s;
}

.hero h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: var(--spacing-sm);
    color: var(--accent-dark);
}

.hero p {
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--accent-dark);
    background: transparent;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
}

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

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-md);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    cursor: pointer;
    background-color: var(--accent-light);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(38, 38, 30, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-title {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    text-align: center;
    transform: translateY(20px);
    transition: var(--transition);
}

.gallery-item:hover .gallery-title {
    transform: translateY(0);
}

/* About Section */
.about-section {
    background-color: var(--primary-bg);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: var(--border-radius);
    box-shadow: 20px 20px 0 var(--accent-light);
}

.about-text h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.about-text p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

/* Footer */
.footer {
    background-color: var(--accent-light);
    color: var(--accent-dark);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.social-links {
    margin: var(--spacing-md) 0;
}

.social-links a {
    margin: 0 var(--spacing-xs);
    font-size: 1.2rem;
}

/* Mobile Menu */
@media (max-width: 768px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transition: var(--transition);
    }

    .nav-links.active {
        right: 0;
    }

    .mobile-menu-btn {
        display: block;
        z-index: 1001;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Animations */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Detail Gallery Page Styles */
.detail-grid {
    column-count: 3;
    column-gap: var(--spacing-sm);
}

.detail-item {
    break-inside: avoid;
    margin-bottom: var(--spacing-sm);
}

.detail-item img {
    width: 100%;
    border-radius: 2px;
}

@media (max-width: 900px) {
    .detail-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .detail-grid {
        column-count: 1;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
}

.lightbox img {
    max-height: 90vh;
    max-width: 90vw;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
}

/* ... existing styles ... */

/* Contact Form Styles */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-lg);
    background: #fafafa;
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-info {
    padding-right: var(--spacing-md);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-dark);
}

.form-group input,
.form-group textarea {
    padding: 0.8rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-dark);
    background-color: #fff;
}

@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .contact-info {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-bottom: var(--spacing-md);
        padding-right: 0;
        text-align: center;
    }
}

/* Scroll Animation Styles */
.fade-up-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-up-element.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delay for gallery items (optional enhancement) */
.gallery-item.fade-up-element:nth-child(1) {
    transition-delay: 0.1s;
}

.gallery-item.fade-up-element:nth-child(2) {
    transition-delay: 0.2s;
}

.gallery-item.fade-up-element:nth-child(3) {
    transition-delay: 0.3s;
}

.gallery-item.fade-up-element:nth-child(4) {
    transition-delay: 0.1s;
}

.gallery-item.fade-up-element:nth-child(5) {
    transition-delay: 0.2s;
}

.gallery-item.fade-up-element:nth-child(6) {
    transition-delay: 0.3s;
}

/* --- Webflow-Style Animation Classes --- */

/* 1. Text Reveal: Slide Up & Fade In */
.reveal-text {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
    /* Custom ease-out */
}

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

/* 2. Image Wrapper: Overflow Hidden for effects */
.image-wrapper {
    overflow: hidden;
    /* Basic state */
}

/* 3. Image Reveal: Scale Down (Zoom Out) Effect */
.reveal-img {
    opacity: 0;
    transform: scale(1.3);
    /* Start zoomed in */
    transition: opacity 1.2s ease, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.image-wrapper.active .reveal-img {
    opacity: 1;
    transform: scale(1);
    /* End at normal size */
}

/* Enhance existing Gallery Hover to work with this */
/* We need to ensure hover zoom still works AFTER reveal. 
   CSS specificity: .gallery-item:hover img supersedes the single class if defined well.
   But transition conflicts might occur.
   Let's refine the hover:
*/

.gallery-item:hover .reveal-img {
    transform: scale(1.05) !important;
    /* Force the hover scale */
    transition: transform 0.6s ease;
}

/* Staggering delays for grid items automatically? 
   Hard to do in pure CSS without nth-child knowledge.
   Let's add some generic delays based on order if possible, or just keep it snappy.
   The JS adds 'active' class as they enter view, so natural scroll acts as staggering.
*/

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}