/**
 * Yalda Pomegranate Decorator Styles
 *
 * Fixed positioned decorative pomegranates with parallax effect
 * Optimized for performance using GPU acceleration
 * Responsive design for mobile, tablet, and desktop
 * All styles use !important to prevent theme conflicts
 *
 * @package Yalda_Pomegranate_Decorator
 * @version 1.0.0
 */

/*
Sayyed Jamal Ghasemi — Full-Stack Developer
📧 info@jamalghasemi.com
🔗 LinkedIn: https://www.linkedin.com/in/jamal1364/
📸 Instagram: https://www.instagram.com/jamal13647850
💬 Telegram: https://t.me/jamal13647850
🌐 https://jamalghasemi.com
*/

/* ============================================
   Container
   ============================================ */

.yalda-pomegranate-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* Allow clicks to pass through */
    z-index: 9999 !important; /* Ensure visibility above all content */
    overflow: hidden !important;
}

/* ============================================
   Base Pomegranate Styles
   ============================================ */

.yalda-pomegranate {
    position: absolute !important;
    transition: transform 0.1s ease-out !important; /* Smooth parallax movement */
    will-change: transform !important; /* GPU acceleration hint */
    pointer-events: none !important;
}

/* Image optimization */
.yalda-pomegranate img {
    display: block !important;
    user-select: none !important; /* Prevent image selection */
    -webkit-user-drag: none !important; /* Prevent image dragging */
}

/* ============================================
   Position-Specific Styles
   ============================================ */

/* Top Right Corner - Moved toward center */
.yalda-pomegranate-top-right {
    top: 0 !important;
    left: 350px !important; /* Move right toward center */
    transform-origin: top left !important;
}

/* Top Left Corner - Moved toward center */
.yalda-pomegranate-top-left {
    top: 0 !important;
    right: 350px !important; /* Move left toward center */
    transform-origin: top right !important;
}

/* Bottom Right Corner */
.yalda-pomegranate-bottom-right {
    bottom: -60px !important;
    left: 0 !important;
    transform-origin: bottom left !important;
}

/* Bottom Left Corner */
.yalda-pomegranate-bottom-left {
    bottom: 50px !important;
    right: 0 !important;
    transform-origin: bottom right !important;
}

/* ============================================
   Exact Image Sizes (No Responsive Scaling)
   ============================================ */

/* Use actual image dimensions for each pomegranate */

/* Top Right: 93×117 px (TopRight image) */
.yalda-pomegranate-top-right img {
    width: 93px !important;
    height: 117px !important;
}

/* Top Left: 146×163 px (TopLeft image) */
.yalda-pomegranate-top-left img {
    width: 146px !important;
    height: 163px !important;
}

/* Bottom Right: 309×390 px (RightBottom image) */
.yalda-pomegranate-bottom-right img {
    width: 309px !important;
    height: 390px !important;
}

/* Bottom Left: 216×241 px (LeftBottom image) */
.yalda-pomegranate-bottom-left img {
    width: 216px !important;
    height: 241px !important;
}

/* Optional: Scale down on very small screens to prevent overflow */
@media (max-width: 640px) {
    .yalda-pomegranate img {
        max-width: 60px !important;
        height: auto !important;
    }

    .yalda-pomegranate-bottom-right img,
    .yalda-pomegranate-bottom-left img {
        max-width: 100px !important;
        height: auto !important;
    }

    /* Reduce spacing on mobile */
    .yalda-pomegranate-top-right {
        left: 100px !important;
    }

    .yalda-pomegranate-top-left {
        right: 100px !important;
    }

    /* Mobile RTL spacing */
    [dir="rtl"] .yalda-pomegranate-top-right {
        left: auto !important;
        right: 100px !important;
    }

    [dir="rtl"] .yalda-pomegranate-top-left {
        right: auto !important;
        left: 100px !important;
    }
}

/* ============================================
   Accessibility & Performance
   ============================================ */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .yalda-pomegranate {
        transition: none !important;
        animation: none !important;
    }
}

/* Hide on print */
@media print {
    .yalda-pomegranate-wrapper {
        display: none !important;
    }
}

/* ============================================
   Optional: Subtle Animation on Load
   ============================================ */

@keyframes fadeInPomegranate {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Apply fade-in animation on page load */
.yalda-pomegranate {
    animation: fadeInPomegranate 0.6s ease-out forwards !important;
}

/* Stagger animation timing for each corner */
.yalda-pomegranate-top-right {
    animation-delay: 0.1s !important;
}

.yalda-pomegranate-top-left {
    animation-delay: 0.2s !important;
}

.yalda-pomegranate-bottom-right {
    animation-delay: 0.3s !important;
}

.yalda-pomegranate-bottom-left {
    animation-delay: 0.4s !important;
}

/* Initial state for animation removed - pomegranates visible immediately */

/* ============================================
   RTL Support
   ============================================ */

[dir="rtl"] .yalda-pomegranate-top-right {
    left: auto !important;
    right: 350px !important; /* Match desktop spacing */
}

[dir="rtl"] .yalda-pomegranate-top-left {
    right: auto !important;
    left: 350px !important; /* Match desktop spacing */
}

[dir="rtl"] .yalda-pomegranate-bottom-right {
    left: auto !important;
    right: 0 !important;
}

[dir="rtl"] .yalda-pomegranate-bottom-left {
    right: auto !important;
    left: 0 !important;
}