/* =========================================================
   VPM Theme - Main CSS Entry
   Inspired by Rey Theme (Athens + San Francisco)
   ========================================================= */

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

/* --- Base --- */
@import url('base/_variables.css');
@import url('base/_reset.css');
@import url('base/_typography.css');
@import url('base/_utilities.css');

/* --- Components --- */
@import url('components/_buttons.css');
@import url('components/_forms.css');
@import url('components/_alerts.css');
@import url('components/_badges.css');
@import url('components/_announcement-bar.css');
@import url('components/_header.css');
@import url('components/_drawer.css');
@import url('components/_megamenu.css');
@import url('components/_cart-drawer.css');
@import url('components/_account-drawer.css');
@import url('components/_search-overlay.css');
@import url('components/_modal.css');
@import url('components/_footer.css');
@import url('components/_footer-variants.css');
@import url('components/_product-card.css');
@import url('components/_category-card.css');
@import url('components/_section.css');
@import url('components/_newsletter.css');
@import url('components/_testimonials.css');
@import url('components/_breadcrumbs.css');
@import url('components/_slider.css');
@import url('components/_gallery.css');
@import url('components/_cta.css');
@import url('components/_stats.css');
@import url('components/_team.css');
@import url('components/_tabs.css');
@import url('components/_faq.css');
@import url('components/_pagination.css');
@import url('components/_athens-extras.css');
@import url('components/_guia.css');
@import url('components/_paleta.css');

/* --- Sections --- */
@import url('sections/_hero.css');
@import url('sections/_features.css');
@import url('sections/_showcase.css');
@import url('sections/_instagram.css');

/* =========================================================
   Scroll-reveal animations
   ========================================================= */
.reveal {
 opacity: 0;
 transform: translateY(24px);
 transition: opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
 will-change: opacity, transform;
}
.reveal.is-visible {
 opacity: 1;
 transform: translateY(0);
}

.reveal-stagger > * {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out);
}
.reveal-stagger.is-visible > * {
 opacity: 1;
 transform: translateY(0);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }