@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Custom scroll behavior */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for sticky header */
}

/* Base styles for layout respiro */
.respiro-section {
    padding-top: 120px;
    padding-bottom: 120px;
}

@media (max-w: 768px) {
    .respiro-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

/* Ken Burns Zoom Effect for Hero Banner */
.ken-burns {
    animation: kenburns 20s ease infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.15);
    }
}

/* Glassmorphism Navigation */
.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(250, 249, 249, 0.8);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-nav.scrolled {
    background-color: rgba(250, 249, 249, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

/* Scroll Reveal Animations */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Custom details styling matching the visual reference */
.border-l-decorative {
    border-left: 2px solid #dac1bc;
}

/* Star icons helper */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

/* Bouncing WhatsApp animation */
@keyframes whatsapp-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}
.whatsapp-bounce {
    animation: whatsapp-bounce 2.5s ease-in-out infinite;
}
.whatsapp-bounce:hover {
    animation-play-state: paused;
}