/**
 * Cards Animation CSS
 * أنيميشن ظهور الكروت
 */

/* إخفاء الكروت في البداية */
.package-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

/* عند الظهور */
.package-card.animate-in {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

/* تأخير تدريجي للكروت - يعمل مع أي container */
.package-card:nth-of-type(1) {
    transition-delay: 0s;
}

.package-card:nth-of-type(2) {
    transition-delay: 0.1s;
}

.package-card:nth-of-type(3) {
    transition-delay: 0.2s;
}

.package-card:nth-of-type(4) {
    transition-delay: 0.3s;
}

.package-card:nth-of-type(5) {
    transition-delay: 0.4s;
}

.package-card:nth-of-type(6) {
    transition-delay: 0.5s;
}

.package-card:nth-of-type(n+7) {
    transition-delay: 0.6s;
}

/* تأثير hover محسّن - يعمل فقط بعد الظهور */
.package-card.animate-in:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(79, 0, 140, 0.15) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* أنيميشن fade-in من الجوانب */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

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

/* تأثيرات بديلة */
.animate-fade-up {
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-left {
    animation: fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-fade-right {
    animation: fadeInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-scale {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* تأثير متموج للبطاقات */
@keyframes ripple {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.package-card.animate-in:hover {
    animation: ripple 0.5s ease;
}

/* تأثير للبطاقة المميزة */
.featured-card {
    position: relative;
    overflow: hidden;
}

.featured-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(132, 204, 22, 0.1),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* تأثير للأيقونات داخل الكروت */
.package-card .material-symbols-outlined {
    transition: all 0.3s ease;
}

.package-card:hover .material-symbols-outlined {
    transform: scale(1.1) rotate(5deg);
    color: var(--secondary-color, #84cc16);
}

/* تأثير للأزرار */
.package-card button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.package-card button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.package-card button:hover::before {
    width: 300px;
    height: 300px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .package-card {
        transform: translateY(30px) scale(0.95) !important;
    }
    
    .package-card.animate-in {
        transform: translateY(0) scale(1) !important;
    }
    
    .package-card.animate-in:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
    
    /* تقليل التأخير في الموبايل */
    .package-card:nth-of-type(1) {
        transition-delay: 0s !important;
    }
    
    .package-card:nth-of-type(2) {
        transition-delay: 0.05s !important;
    }
    
    .package-card:nth-of-type(3) {
        transition-delay: 0.1s !important;
    }
    
    .package-card:nth-of-type(n+4) {
        transition-delay: 0.15s !important;
    }
}

/* تأثير pulse للأسعار */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.package-card.animate-in .price,
.package-card.animate-in [class*="text-4xl"][class*="font-bold"] {
    animation: pulse 2s ease infinite;
}

/* إيقاف الـ pulse عند الـ hover */
.package-card.animate-in:hover .price,
.package-card.animate-in:hover [class*="text-4xl"][class*="font-bold"] {
    animation: none;
}

/* تحسينات إضافية لضمان الظهور */
.package-card.animate-in {
    pointer-events: auto;
}

/* إصلاح للكروت في grid */
.package-card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}