/*
 Theme Name: Tierra Maya Reserve
 Theme URI: https://example.com/tierra-maya-reserve
 Author: Cyma Digital Belize LLC
 Author URI: https://cymadigital.com
 Description: Tierra Maya Reserve is a premium, custom-developed WordPress theme designed for a private jungle sanctuary in Belize. Developed by Cyma Digital Belize LLC, this theme seamlessly integrates Tailwind CSS for modern styling with WordPress dynamic content management. Key features include an immersive hero slider with Ken Burns effects, interactive lot availability maps, scroll-triggered animations, and dedicated templates for Residences, Wellness, and Amenities. It captures the essence of 'Live Well. Live Wild. Live Mayan.' through a sophisticated color palette of dark greens and earth tones.
 Version: 1.0.0
 Requires at least: 6.0
 Requires PHP: 7.4
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Update URI: https://cymadigital.com/updates/tierra-maya-reserve
 Text Domain: tierra-maya
 Tags: custom-colors, custom-menu, editor-style, featured-images, full-width-template, one-column, theme-options, translation-ready, wide-blocks
*/

/* Basic body font (Playfair / Inter will be loaded from templates or plugins as needed) */
body {
    margin: 0;
    padding: 0;
}

/* Brushstroke divider */
.brushstroke-divider {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10' stroke='%23F5F5DC' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 100px 20px;
    height: 20px;
}

/* Section borders (brush stroke frames) */
.section-with-brush-stroke,
.section-with-brush-stroke-bottom,
.section-with-brush-stroke-hero,
.section-with-brush-stroke-dark,
.section-with-brush-stroke-cream,
.section-with-brush-stroke-green {
    border: 20px solid transparent;
    border-image: url('images/top.png') 30 round;
}

.section-with-brush-stroke-hero {
    border-image-source: linear-gradient(45deg, #142C14, #142C14);
}

.section-with-brush-stroke-dark {
    border-image-source: linear-gradient(45deg, #2D5128, #2D5128);
}

.section-with-brush-stroke-cream {
    border-image-source: linear-gradient(45deg, #E4EB9C, #E4EB9C);
}

.section-with-brush-stroke-green {
    border-image-source: linear-gradient(45deg, #142C14, #142C14);
}

/* Logo section over header */
.logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 70;
    pointer-events: none;
}

.logo-section.hidden {
    display: none !important;
}

/* Circular logo with shimmer */
.circular-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #E4EB9C;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(20, 44, 20, 0.4);
    border: 4px solid #142C14;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.circular-logo img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    position: relative;
}

@media (max-width: 768px) {
    .circular-logo {
        width: 80px;
        height: 80px;
        border: 3px solid #142C14;
    }

    .circular-logo img {
        width: 60px;
        height: 60px;
    }

    .hero-h1 {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
    }
}

.shimmer-overlay {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(20, 44, 20, 0.1), transparent);
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.circular-logo:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Handwritten accent font helper */
.handwritten-font {
    font-family: 'Kalam', 'Brush Script MT', cursive;
    font-weight: 400;
    letter-spacing: 2px;
}

/* H1 fade in up animation */
.animate-fade-in-up {
    animation: fadeInUp 1.5s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

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

/* Typewriter animation */
.typewriter-animation {
    overflow: hidden;
    border-right: 2px solid #ffffff;
    white-space: nowrap;
    animation: typewriter 3s steps(20, end) 1.5s forwards, blink-caret 0.75s step-end infinite;
    opacity: 0;
}

@keyframes typewriter {
    from {
        width: 0;
        opacity: 1;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: #ffffff;
    }
}

/* Hero slider */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
}

.slide.active {
    opacity: 1;
}

.ken-burns-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    animation: kenBurns 20s ease-in-out infinite;
}

@keyframes kenBurns {
    0% {
        transform: scale(0.95) translate(0, 0);
    }
    25% {
        transform: scale(1.0) translate(-1%, -0.5%);
    }
    50% {
        transform: scale(0.98) translate(0.5%, -1%);
    }
    75% {
        transform: scale(1.02) translate(-0.5%, 0.5%);
    }
    100% {
        transform: scale(0.95) translate(0, 0);
    }
}

/* Additional text animations */
.animate-slide-in-left {
    animation: slideInLeft 1s ease-out forwards;
    opacity: 0;
    transform: translateX(-50px);
}

.animate-slide-in-right {
    animation: slideInRight 1s ease-out forwards;
    opacity: 0;
    transform: translateX(50px);
}

.animate-zoom-in {
    animation: zoomIn 1s ease-out forwards;
    opacity: 0;
    transform: scale(0.8);
}

.delay-1000 {
    animation-delay: 1s;
}

@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scroll animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.scroll-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease-out;
}

.scroll-animate-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease-out;
}

.scroll-animate-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.scroll-animate-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease-out;
}

.scroll-animate-scale.animate {
    opacity: 1;
    transform: scale(1);
}

.scroll-animate-rotate {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
    transition: all 0.8s ease-out;
}

.scroll-animate-rotate.animate {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Slider dot active state */
.slider-dot.active {
    opacity: 1 !important;
}