/* =============================================
   PERFORMANCE OPTIMIZATIONS - ANIMATIONS & REPAINTS
   Reduces transition durations, removes heavy animations,
   minimizes repaints for better Core Web Vitals
   ============================================= */

/* Reduce all transition durations for better performance */
:is(
    a,
    button,
    .brand-link,
    .nav-links a,
    .order-btn,
    .order-cta,
    .cta-link,
    .scroll-to-top,
    .zoom-close,
    .slider .prev,
    .slider .next,
    .slider .dot,
    .menu-item,
    .featured-card,
    .testimonial,
    .team-member,
    .value-card,
    .contact-card,
    .hour-card,
    .social-link,
    .style-pill,
    .cta .cta-primary,
    .preview-panel,
    .preview-summary,
    .option-group,
    .text-option-card,
    .option-card,
    .gallery-item,
    .lb-prev,
    .lb-next,
    .lb-close
) {
    transition-property: background-color, color, border-color, box-shadow, transform, opacity, filter, width, height;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(.2,.9,.3,1);
}

/* Override loading screen animation - show immediately */
.loading-screen {
    animation: none !important;
}

.loading-content {
    animation: none !important;
}

.loader-logo {
    animation: none !important;
}

/* Keep spinner animation for better UX during loading */
.loader-spinner {
    animation: none !important;
}

.spinner-ring {
    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}

.loading-text {
    animation: none !important;
}

/* Remove badge float animation */
.badge {
    animation: none !important;
}

/* Reduce slider dot transitions */
.slider .dot {
    transition: transform 100ms ease, background 100ms ease, border-color 100ms ease, width 100ms ease, height 100ms ease;
}

/* Optimize menu items - reduce excessive transforms */
.menu-item {
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.menu-item:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(144, 17, 254, 0.2);
}

/* Remove blur effects that cause repaint */
nav {
    backdrop-filter: none;
}

.nav-links {
    backdrop-filter: none;
}

.toggle-slider {
    backdrop-filter: none;
}

.slider::after {
    backdrop-filter: none;
}

.order-btn {
    backdrop-filter: none;
}

.badge {
    backdrop-filter: none;
}

.slider .dots {
    backdrop-filter: none;
}

/* Reduce text-shadow which causes expensive renders */
section h2 {
    text-shadow: 0 2px 6px rgba(144, 17, 254, 0.1);
}

.price {
    text-shadow: 0 1px 2px rgba(144, 17, 254, 0.1);
}

/* Optimize image transitions */
.menu-item img {
    transition: transform 300ms ease;
}

.menu-item:hover img {
    transform: scale(1.08);
    filter: brightness(0.95) saturate(1.05);
}

/* Reduce dietary card transitions */
.dietary-card {
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.dietary-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgba(144, 17, 254, 0.12);
}

/* Optimize parallax content animations */
.parallax-content {
    transition: opacity 150ms ease, transform 150ms ease;
}

/* Use will-change sparingly and only on hover/interaction */
.menu-item:hover {
    will-change: transform, box-shadow;
}

.menu-item:hover ~ .menu-item {
    will-change: auto;
}

/* Remove unnecessary transitions from hidden elements */
.lazy-img {
    transition: opacity 200ms ease;
}

/* Optimize form inputs */
input,
textarea,
select {
    transition: border-color 100ms ease, box-shadow 100ms ease;
}

/* Remove heavy box-shadows on elements */
.slider {
    box-shadow: 0 12px 24px rgba(144, 17, 254, 0.08);
}

.menu-item {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Optimize hover states with minimal motion */
.order-btn:hover {
    transform: translateY(-2px);
}

.cta-link:hover {
    transform: translateY(-1px);
}

/* Dark mode optimizations */
body.dark-mode nav {
    backdrop-filter: none;
}

body.dark-mode .toggle-slider {
    backdrop-filter: none;
}

/* Reduce gradient backgrounds that are expensive */
nav {
    background: linear-gradient(135deg, #9011FE 0%, #7a22de 100%);
    will-change: background;
}

/* GPU acceleration for smooth scrolling */
html {
    scroll-behavior: smooth;
}

body {
    transform: translateZ(0);
}

/* Optimize featured cards */
.featured-card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.featured-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(144, 17, 254, 0.15);
}

/* Remove animations from non-critical UI */
.featured-badge {
    animation: none;
}

/* Optimize contact cards */
.contact-card {
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(144, 17, 254, 0.12);
}

/* Reduce testimonial animations */
.testimonial {
    transition: transform 100ms ease, box-shadow 100ms ease;
}

.testimonial:hover {
    transform: translateY(-4px);
}

/* Optimize value cards */
.value-card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.value-card:hover {
    transform: translateY(-6px);
}

/* =============================================
   REDUCE PAINT AND COMPOSITE OPERATIONS
   ============================================= */

/* Use transform and opacity for animations only */
/* Avoid changing properties that trigger layout recalculations */
.slider .prev,
.slider .next {
    transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.slider .prev:hover,
.slider .next:hover {
    transform: translateY(-50%) scale(1.05);
    background: linear-gradient(145deg, #9011FE, #7a22de);
}

/* Remove expensive filters where possible */
.slides img {
    filter: none;
}

/* Optimize nav underline if present */
.nav-underline {
    will-change: transform, width;
    transition: transform 300ms ease, width 300ms ease;
}

/* Use passive event listeners where possible (handled in JS) */

/* Minimize repaints in dark mode */
body.dark-mode {
    transition: background-color 200ms ease, color 200ms ease;
}