/* Five Starr Staging - Main Stylesheet */
/* Consolidated and optimized CSS for better performance */

/* ========================================
   Animation Definitions
   ======================================== */

/* Fade-in Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes expandBar {
    from {
        width: 0;
    }
    to {
        width: 6rem;
    }
}

/* ========================================
   Base Animation Classes
   ======================================== */

.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-image {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-in-image.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    transition-delay: 0.3s;
}

.fade-in-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation Delays */
.fade-in-delay-1 {
    transition-delay: 0.2s;
}

.fade-in-delay-2 {
    transition-delay: 0.4s;
}

.fade-in-delay-3 {
    transition-delay: 0.6s;
}

/* ========================================
   Contact Popup Styles
   ======================================== */

#contact-popup {
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

body.contact-open {
    overflow: hidden;
}

/* Custom Select Dropdown Arrows */
.custom-select::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #9CA3AF;
    pointer-events: none;
}

.custom-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ========================================
   Gallery Styles
   ======================================== */

.gallery-container {
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.gallery-container::-webkit-scrollbar {
    display: none;
}

.gallery-image {
    scroll-snap-align: start;
}

/* ========================================
   Hero and Background Styles
   ======================================== */

.animate-fadeInUp {
    animation: fadeInUp 1.5s ease-out;
}

.animate-expandBar {
    animation: expandBar 1.2s ease-out 0.4s forwards;
}

.luxury-text-shadow {
    text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   Comparison Slider Styles
   ======================================== */

.comparison-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
}

.comparison-slider .after-container {
    transition: clip-path 0.3s ease;
}

/* ========================================
   FAQ Accordion Styles
   ======================================== */

.faq-question {
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer.active {
    max-height: 500px;
}

/* ========================================
   Lazy Loading Styles
   ======================================== */

.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-loaded {
    opacity: 1;
}

/* ========================================
   Article Card Styles
   ======================================== */

.article-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card:hover {
    transform: translateY(-5px);
}

/* ========================================
   Portfolio Filter Styles
   ======================================== */

.portfolio-filter {
    transition: all 0.3s ease;
}

.portfolio-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   Utility Classes
   ======================================== */

.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* Hardware acceleration for animations */
.fade-in-section,
.fade-in-image,
.fade-in-text,
.gallery-image,
.article-card,
.portfolio-item {
    will-change: transform, opacity;
}

/* Remove will-change after animation */
.fade-in-section.visible,
.fade-in-image.visible,
.fade-in-text.visible {
    will-change: auto;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
    .fade-in-delay-1,
    .fade-in-delay-2,
    .fade-in-delay-3 {
        transition-delay: 0s;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .no-print {
        display: none !important;
    }
    
    #contact-popup,
    #mobile-menu {
        display: none !important;
    }
}