/*
 * ==========================================================================
 * تصميم وبرمجة شركة دروب ايديا للتجارة الالكترونية والرقمية
 * https://dropidea.com
 * +962798402930
 * ==========================================================================
 */

/* ========================================
   Shapes & Waves CSS - Modern Animated Backgrounds
   مركز ميراس الريادة للتدريب والتطوير
   ======================================== */

/* ===== Floating Shapes Container ===== */
.shapes-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

/* ===== Base Shape Styles ===== */
.floating-shape {
    position: absolute;
    opacity: 0.1;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    will-change: transform;
}

/* ===== Shape Types ===== */

/* Circles */
.shape-circle {
    border-radius: 50%;
}

/* Squares */
.shape-square {
    border-radius: 10%;
}

/* Triangles */
.shape-triangle {
    width: 0;
    height: 0;
    background: transparent !important;
}

.shape-triangle-up {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid;
}

.shape-triangle-down {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 86.6px solid;
}

/* Hexagons */
.shape-hexagon {
    width: 100px;
    height: 57.74px;
    background: currentColor;
    position: relative;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Diamonds */
.shape-diamond {
    transform: rotate(45deg);
    border-radius: 15%;
}

/* ===== Shape Sizes ===== */
.shape-xs { width: 30px; height: 30px; }
.shape-sm { width: 50px; height: 50px; }
.shape-md { width: 80px; height: 80px; }
.shape-lg { width: 120px; height: 120px; }
.shape-xl { width: 160px; height: 160px; }
.shape-2xl { width: 200px; height: 200px; }
.shape-3xl { width: 250px; height: 250px; }

/* ===== Shape Colors (من ألوان اللوقو) ===== */
.shape-blue {
    background: rgba(30, 58, 138, 0.15);
    border-color: rgba(30, 58, 138, 0.15);
}

.shape-maroon {
    background: rgba(139, 21, 56, 0.15);
    border-color: rgba(139, 21, 56, 0.15);
}

.shape-mixed {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.15), rgba(139, 21, 56, 0.15));
}

.shape-light-blue {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.1);
}

.shape-light-maroon {
    background: rgba(190, 18, 60, 0.1);
    border-color: rgba(190, 18, 60, 0.1);
}

/* ===== Floating Animations ===== */

/* Float Up and Down */
@keyframes float-vertical {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
    }
}

/* Float Left and Right */
@keyframes float-horizontal {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    50% {
        transform: translateX(50px) rotate(180deg);
    }
}

/* Diagonal Float */
@keyframes float-diagonal {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(40px, -40px) rotate(180deg);
    }
}

/* Circular Motion */
@keyframes float-circular {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
        transform: translate(0, -60px) rotate(180deg);
    }
    75% {
        transform: translate(-30px, -30px) rotate(270deg);
    }
    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

/* Pulse Scale */
@keyframes shape-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.15;
    }
}

/* Rotate */
@keyframes shape-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Wobble */
@keyframes shape-wobble {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(-10px) rotate(-5deg);
    }
    75% {
        transform: translateX(10px) rotate(5deg);
    }
}

/* ===== Animation Classes ===== */
.anim-float-vertical { animation: float-vertical 20s ease-in-out infinite; }
.anim-float-horizontal { animation: float-horizontal 15s ease-in-out infinite; }
.anim-float-diagonal { animation: float-diagonal 18s ease-in-out infinite; }
.anim-float-circular { animation: float-circular 25s ease-in-out infinite; }
.anim-pulse { animation: shape-pulse 4s ease-in-out infinite; }
.anim-rotate { animation: shape-rotate 30s linear infinite; }
.anim-wobble { animation: shape-wobble 8s ease-in-out infinite; }

/* ===== Wave Patterns ===== */
.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.wave-container svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

/* Wave Colors */
.wave-blue {
    fill: #1e3a8a;
}

.wave-maroon {
    fill: #8b1538;
}

.wave-light-blue {
    fill: #3b82f6;
}

.wave-light-maroon {
    fill: #be123c;
}

.wave-white {
    fill: #ffffff;
}

.wave-gray {
    fill: #f3f4f6;
}

/* Animated Waves */
@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.wave-animated {
    animation: wave-animation 10s linear infinite;
}

/* ===== Divider Waves ===== */
.wave-divider {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

.wave-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
}

/* ===== Gradient Overlays ===== */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.gradient-blue-maroon {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.05) 0%, rgba(139, 21, 56, 0.05) 100%);
}

.gradient-radial-blue {
    background: radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.1) 0%, transparent 70%);
}

.gradient-radial-maroon {
    background: radial-gradient(circle at 50% 50%, rgba(139, 21, 56, 0.1) 0%, transparent 70%);
}

/* ===== Mesh Gradient Background ===== */
.mesh-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(at 20% 30%, rgba(30, 58, 138, 0.1) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(139, 21, 56, 0.1) 0px, transparent 50%),
        radial-gradient(at 50% 50%, rgba(59, 130, 246, 0.05) 0px, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ===== Particle Effects ===== */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: particle-float 15s linear infinite;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .shape-xl,
    .shape-2xl,
    .shape-3xl {
        display: none;
    }
    
    .wave-container svg {
        height: 80px;
    }
    
    .floating-shape {
        opacity: 0.05;
    }
}

/* ===== Image Blend Modes ===== */
.blend-overlay {
    mix-blend-mode: overlay;
}

.blend-multiply {
    mix-blend-mode: multiply;
}

.blend-screen {
    mix-blend-mode: screen;
}

.blend-soft-light {
    mix-blend-mode: soft-light;
}

/* ===== Glassmorphism Effect ===== */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-effect-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Utilities ===== */
.relative-z-10 {
    position: relative;
    z-index: 10;
}

.overflow-hidden {
    overflow: hidden;
}

/*
 * ==========================================================================
 * تصميم وبرمجة شركة دروب ايديا للتجارة الالكترونية والرقمية
 * https://dropidea.com
 * +962798402930
 * ==========================================================================
 */