/**
 * Critical CSS for Shu Elementor widgets
 * Ensures widgets display correctly in both frontend and Elementor editor.
 */

/* Banner text animation */
.banner-text-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.swiper-slide-active .banner-text-anim {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }

/* Scroll fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease-out;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Text outline for marquee */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px #e5e5e5;
}

/* Highlight product cards */
.highlight-card { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.highlight-card:hover { box-shadow: 0 12px 40px rgba(197,168,128,0.15); transform: translateY(-4px); }

/* Gold horizontal divider */
.gold-line { width: 40px; height: 1px; background-color: #C5A880; }

/* Stats strip dividers */
.stat-item { border-right: 1px solid #e5e7eb; }
.stat-item:last-child { border-right: none; }

/* CTA Section dark gradient background */
.cta-bg { background: linear-gradient(135deg, #2A2A2A 0%, #3d3530 100%); }

/* Project Cards – static HTML classes used by Shu_Project_Cards_Html_Widget */
.project-card img { transition: transform 0.7s ease; }
.project-card:hover img { transform: scale(1.06); }
.project-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(42,42,42,0.85) 0%, rgba(42,42,42,0.1) 60%, transparent 100%);
    opacity: 0; transition: opacity 0.5s ease;
}
.project-card:hover .project-overlay { opacity: 1; }

/* Project Cards – Elementor widget custom classes */
.shu-project-card { position: relative; overflow: hidden; cursor: pointer; display: block; width: 100%; }
.shu-project-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.shu-project-card:hover img { transform: scale(1.06); }
.shu-project-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(42,42,42,0.85) 0%, rgba(42,42,42,0.1) 60%, transparent 100%);
    opacity: 0; transition: opacity 0.5s ease;
}
.shu-project-card:hover .shu-project-overlay { opacity: 1; }
.shu-project-card-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem;
    color: #fff; transform: translateY(1rem); opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
    pointer-events: none;
}
.shu-project-card:hover .shu-project-card-info { transform: translateY(0); opacity: 1; }

/* Factory Intro Swiper */
.shu-factory-swiper { width: 100%; }
.shu-factory-swiper .swiper-slide { overflow: hidden; }
.shu-factory-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shu-factory-swiper .swiper-pagination-bullet {
    width: 8px; height: 8px; background: #fff; opacity: 0.6;
    transition: all 0.3s ease;
}
.shu-factory-swiper .swiper-pagination-bullet-active {
    opacity: 1; background: #C5A880; width: 24px; border-radius: 4px;
}
.shu-factory-swiper .swiper-button-prev::after,
.shu-factory-swiper .swiper-button-next::after {
    font-size: 18px; font-weight: 700;
}

/* Elementor editor: bypass all opacity-based animations so widgets are visible */
.elementor-editor-active .fade-in {
    opacity: 1;
    transform: translateY(0);
}
.elementor-editor-active .banner-text-anim {
    opacity: 1;
    transform: translateY(0);
}