/* Typography */
.font-cormorant {
    font-family: 'Cormorant Garamond', serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Body */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle Texture Pattern */
.texture-pattern {
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(107, 93, 82, 0.03) 2px,
            rgba(107, 93, 82, 0.03) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(107, 93, 82, 0.03) 2px,
            rgba(107, 93, 82, 0.03) 4px
        );
}

/* Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Letter Spacing */
.tracking-widest {
    letter-spacing: 0.15em;
}

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

::-webkit-scrollbar-track {
    background: #F5F1E8;
}

::-webkit-scrollbar-thumb {
    background: #6B5D52;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2C2C2C;
}

/* Smooth Transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Selection Color */
::selection {
    background-color: #6B5D52;
    color: #F5F1E8;
}

::-moz-selection {
    background-color: #6B5D52;
    color: #F5F1E8;
}

/* Remove default focus outline and add custom */
*:focus {
    outline: none;
}

button:focus,
a:focus {
    outline: 1px solid #6B5D52;
    outline-offset: 2px;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 3rem;
    }
    
    h2 {
        font-size: 2rem;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
    }
}

/* Loader Styles */
#loader {
    transition: opacity 0.5s ease-out;
    background: transparent; /* Make loader transparent to show content through opening */
}

#left-pillar, #right-pillar {
    transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1);
    background: #F5F1E8; /* Pillars maintain their background */
    box-shadow: 0 0 30px rgba(0,0,0,0.15); /* Enhanced shadow for elongated effect */
    height: 120vh; /* Extend pillars beyond viewport for natural look */
    top: -10vh; /* Position to center extended height */
    position: absolute;
}

/* Add subtle gradient for more natural pillar appearance */
#left-pillar::before, #right-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(245, 241, 232, 0.95) 0%,
        rgba(245, 241, 232, 1) 50%,
        rgba(245, 241, 232, 0.95) 100%);
    z-index: 1;
}

/* Ensure icon positioning stays on top of gradient */
#left-pillar > *, #right-pillar > * {
    position: relative;
    z-index: 2;
}

/* Door opening animation - pillars move but create visible opening */
.door-opening {
    transform: translateX(-50%) translateX(-30vw); /* Left pillar moves left but stays partially visible */
}

.door-opening-right {
    transform: translateX(50%) translateX(30vw); /* Right pillar moves right but stays partially visible */
}

.loader-hidden {
    opacity: 0;
    pointer-events: none;
}

.content-visible {
    opacity: 1;
    transition: opacity 0.3s ease-in; /* Faster fade in since content is already visible */
}