/* Custom styles for Bakery Equipment SA - Performance Optimized v6 */
/* ===== NO @font-face HERE - Fonts loaded via JS after first paint ===== */

/* ===== GPU-ACCELERATED ANIMATIONS ===== */

/* Announcement bar animation - GPU composited */
@keyframes marquee {
    0% { transform: translate3d(100%, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}
.animate-marquee {
    animation: marquee 15s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Hero slider - GPU composited */
.hero-slide {
    transition: opacity 0.7s ease;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Product card hover - GPU composited */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
.product-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* WhatsApp floating button - GPU composited */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9998;
    animation: pulse-green 2s infinite;
    will-change: box-shadow;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* Sales popup - GPU composited */
.sales-popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9997;
    animation: slideUp 0.5s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
@keyframes slideUp {
    from { transform: translate3d(0, 100px, 0); opacity: 0; }
    to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Installment popup - GPU composited */
.installment-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease;
    will-change: opacity;
    backface-visibility: hidden;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== FIX: OVERRIDE transition-all TO ONLY GPU-COMPOSITABLE PROPERTIES ===== */
.transition-all {
    transition-property: transform, opacity, box-shadow, color, background-color, border-color, filter !important;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* All elements with Tailwind transition classes - GPU layer promotion */
.transition,
.transition-colors,
.transition-opacity,
.transition-shadow,
.transition-transform,
[class*="hover:scale-"],
[class*="hover:translate-"],
[class*="hover:rotate-"],
[class*="group-hover:scale-"],
[class*="group-hover:translate-"],
[class*="duration-"] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Category card image hover - force GPU */
.group:hover .group-hover\:scale-110 {
    transform: scale3d(1.1, 1.1, 1) !important;
    backface-visibility: hidden;
    will-change: transform;
}

/* Any element with transition-transform */
.transition-transform {
    will-change: transform;
    backface-visibility: hidden;
}

/* Hero dots */
.hero-dot {
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* ===== LAYOUT STABILITY (CLS FIX) ===== */
img {
    content-visibility: auto;
}

.category-card img,
.product-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#hero-section img {
    aspect-ratio: auto;
}

/* ===== PERFORMANCE ===== */
.whatsapp-float,
.sales-popup,
.installment-popup {
    contain: layout style;
}

.overflow-hidden,
.overflow-auto,
.overflow-scroll {
    -webkit-overflow-scrolling: touch;
}

picture {
    display: block;
}
picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===== PERFORMANCE: GPU layer for product sections ===== */
.product-card img,
.category-card img,
.group img {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Contain layout recalculations to product grids */
section > .max-w-7xl > .grid {
    contain: layout style;
}