/**
 * تنسيقات الأشكال العلمية في قسم الـ hero
 * File: science-hero-shapes.css
 */

/* تنسيقات عامة للأشكال العلمية */
.hero-section {
    position: relative;
    overflow: hidden;
}

/* تأثير الأشكال العلمية العائمة */
@keyframes floatAnimation {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(2deg);
    }
    66% {
        transform: translateY(5px) rotate(-2deg);
    }
    100% {
        transform: translateY(-5px) rotate(1deg);
    }
}

/* تأثير الدوران البطيء */
@keyframes slowRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* تأثير النبض */
@keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

/* تأثير النبض المتدرج */
@keyframes gradientPulse {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        filter: hue-rotate(30deg) brightness(1.2);
    }
    100% {
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* تأثير الدوران مع تغيير الحجم */
@keyframes rotateAndScale {
    0% {
        transform: rotate(0deg) scale(0.95);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
    }
    100% {
        transform: rotate(360deg) scale(0.95);
    }
}

/* تأثير الظهور والاختفاء التدريجي */
@keyframes fadeInOut {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0.2;
    }
}

/* تأثير قوس قزح للمنشور الضوئي */
@keyframes rainbowEffect {
    0% {
        filter: hue-rotate(0deg) saturate(1);
    }
    50% {
        filter: hue-rotate(180deg) saturate(1.5);
    }
    100% {
        filter: hue-rotate(360deg) saturate(1);
    }
}

/* تأثير نبض للخلية البيولوجية */
@keyframes cellPulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.03) rotate(1deg);
    }
    50% {
        transform: scale(0.98) rotate(-1deg);
    }
    75% {
        transform: scale(1.02) rotate(0.5deg);
    }
    100% {
        transform: scale(1);
    }
}

/* تأثير موجات الدماغ */
@keyframes brainWaves {
    0% {
        filter: brightness(1) blur(0px);
    }
    50% {
        filter: brightness(1.2) blur(0.5px);
    }
    100% {
        filter: brightness(1) blur(0px);
    }
}

/* تأثير حركة الروبوت */
@keyframes robotMovement {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-3px) rotate(1deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(3px) rotate(-1deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* تنسيقات خاصة لشكل الذرة */
.hero-shape-1 {
    animation: floatAnimation 15s ease-in-out infinite alternate, 
               slowRotate 120s linear infinite;
}

/* تنسيقات خاصة لشكل الحمض النووي */
.hero-shape-2 {
    animation: floatAnimation 20s ease-in-out infinite alternate-reverse;
}

/* تنسيقات خاصة لشكل الدورق الكيميائي */
.hero-shape-3 {
    animation: floatAnimation 25s ease-in-out infinite alternate,
               pulsate 8s ease-in-out infinite;
}

/* تنسيقات خاصة لشكل المجرة */
.hero-shape-4 {
    animation: floatAnimation 22s ease-in-out infinite alternate-reverse,
               slowRotate 180s linear infinite;
}

/* تنسيقات خاصة لشكل الخامس (المجهر) */
.hero-shape-5 {
    animation: floatAnimation 18s ease-in-out infinite alternate,
               gradientPulse 10s ease-in-out infinite;
}

/* تنسيقات خاصة للشكل السادس (المعادلة الرياضية) */
.hero-shape-6 {
    animation: floatAnimation 24s ease-in-out infinite alternate-reverse,
               fadeInOut 8s ease-in-out infinite;
}

/* تنسيقات خاصة للشكل السابع (التلسكوب) */
.hero-shape-7 {
    animation: floatAnimation 19s ease-in-out infinite alternate,
               slowRotate 60s linear infinite reverse;
}

/* تنسيقات خاصة للشكل الثامن (الكرة الأرضية) */
.hero-shape-8 {
    animation: floatAnimation 21s ease-in-out infinite alternate-reverse,
               rotateAndScale 30s linear infinite;
}

/* تنسيقات خاصة للشكل التاسع (الخلية البيولوجية) */
.hero-shape-9 {
    animation: floatAnimation 17s ease-in-out infinite alternate,
               cellPulse 12s ease-in-out infinite;
}

/* تنسيقات خاصة للشكل العاشر (الكروموسوم) */
.hero-shape-10 {
    animation: floatAnimation 23s ease-in-out infinite alternate-reverse,
               pulsate 15s ease-in-out infinite;
}

/* تنسيقات خاصة للشكل الحادي عشر (الدماغ) */
.hero-shape-11 {
    animation: floatAnimation 26s ease-in-out infinite alternate,
               brainWaves 10s ease-in-out infinite;
}

/* تنسيقات خاصة للشكل الثاني عشر (المنشور الضوئي) */
.hero-shape-12 {
    animation: floatAnimation 16s ease-in-out infinite alternate-reverse,
               rainbowEffect 20s linear infinite;
}

/* تنسيقات خاصة للشكل الثالث عشر (الروبوت) */
.hero-shape-13 {
    animation: floatAnimation 22s ease-in-out infinite alternate,
               robotMovement 5s ease-in-out infinite;
}

/* تأثيرات إضافية عند تحريك الماوس */
.hero-section:hover .hero-shape {
    transition: transform 0.8s ease-out;
}

/* تأثيرات إضافية للأشكال العلمية */
.hero-section:hover .hero-shape-5 {
    animation-play-state: paused;
    filter: brightness(1.3);
}

.hero-section:hover .hero-shape-6 {
    animation-play-state: paused;
    filter: brightness(1.3);
}

.hero-section:hover .hero-shape-7 {
    animation-play-state: paused;
    filter: brightness(1.3);
}

.hero-section:hover .hero-shape-8 {
    animation-play-state: paused;
    filter: brightness(1.3);
}

/* تأثيرات إضافية للأشكال العلمية الجديدة */
.hero-section:hover .hero-shape-9 {
    animation-play-state: paused;
    filter: brightness(1.3) saturate(1.2);
}

.hero-section:hover .hero-shape-10 {
    animation-play-state: paused;
    filter: brightness(1.3) contrast(1.1);
}

.hero-section:hover .hero-shape-11 {
    animation-play-state: paused;
    filter: brightness(1.3) drop-shadow(0 0 5px rgba(253, 114, 114, 0.5));
}

.hero-section:hover .hero-shape-12 {
    animation-play-state: paused;
    filter: brightness(1.3) saturate(1.3);
}

.hero-section:hover .hero-shape-13 {
    animation-play-state: paused;
    filter: brightness(1.3) drop-shadow(0 0 8px rgba(37, 204, 247, 0.4));
}

/* تنسيقات الوضع الداكن */
[data-theme="dark"] .hero-shape {
    filter: blur(0.5px) brightness(1.2);
}

/* تنسيقات الوضع الداكن للأشكال الجديدة */
[data-theme="dark"] .hero-shape-5 {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.3;
}

[data-theme="dark"] .hero-shape-6 {
    background: linear-gradient(135deg, rgba(241, 196, 15, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.2;
}

[data-theme="dark"] .hero-shape-7 {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.25;
}

[data-theme="dark"] .hero-shape-8 {
    background: linear-gradient(135deg, rgba(22, 160, 133, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.3;
}

/* تنسيقات الوضع الداكن للأشكال الجديدة */
[data-theme="dark"] .hero-shape-9 {
    background: linear-gradient(135deg, rgba(255, 159, 243, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.3;
}

[data-theme="dark"] .hero-shape-10 {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.25;
}

[data-theme="dark"] .hero-shape-11 {
    background: linear-gradient(135deg, rgba(253, 114, 114, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.25;
}

[data-theme="dark"] .hero-shape-12 {
    background: linear-gradient(135deg, rgba(27, 156, 252, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.3;
}

[data-theme="dark"] .hero-shape-13 {
    background: linear-gradient(135deg, rgba(37, 204, 247, 0.7), rgba(52, 84, 209, 0.3));
    opacity: 0.25;
}

/* تنسيقات متجاوبة */
@media (max-width: 992px) {
    .hero-shape {
        opacity: 0.3;
        transform: scale(0.8);
    }
    
    .hero-shape-4 {
        opacity: 0.2;
    }
    
    .hero-shape-5, .hero-shape-6, .hero-shape-7, .hero-shape-8 {
        transform: scale(0.7);
        opacity: 0.25;
    }
    
    .hero-shape-9, .hero-shape-10, .hero-shape-11, .hero-shape-12, .hero-shape-13 {
        transform: scale(0.65);
        opacity: 0.2;
    }
}

@media (max-width: 768px) {
    .hero-shape {
        opacity: 0.25;
        transform: scale(0.7);
    }
    
    .hero-shape-4 {
        display: none; /* إخفاء الشكل الرابع في الشاشات الصغيرة */
    }
    
    .hero-shape-5 {
        width: 160px;
        height: 160px;
        right: 5%;
    }
    
    .hero-shape-6 {
        width: 200px;
        height: 80px;
        opacity: 0.2;
    }
    
    .hero-shape-7, .hero-shape-8 {
        display: none; /* إخفاء الأشكال الإضافية في الشاشات الصغيرة */
    }
    
    .hero-shape-9 {
        width: 140px;
        height: 140px;
        opacity: 0.2;
    }
    
    .hero-shape-10, .hero-shape-11, .hero-shape-12, .hero-shape-13 {
        display: none; /* إخفاء الأشكال الإضافية في الشاشات الصغيرة */
    }
}

@media (max-width: 576px) {
    .hero-shape-1 {
        width: 200px;
        height: 200px;
    }
    
    .hero-shape-2 {
        width: 180px;
        height: 180px;
    }
    
    .hero-shape-3 {
        width: 150px;
        height: 150px;
    }
    
    .hero-shape-5, .hero-shape-6 {
        opacity: 0.15;
    }
    
    .hero-shape-9 {
        opacity: 0.15;
        transform: scale(0.6);
    }
}