/* Hero Section Effects and Animations */

/* Hero Shape Base Styles */
.hero-shape {
    transition: all 0.3s ease;
    transform-origin: center;
    will-change: transform, clip-path;
}

.hero-section:hover .hero-shape {
    transform: scale(1.02);
}

/* Shape positioning fixes */
.hero-shape-top {
    top: -1px !important; /* Fix gap at top */
}

.hero-shape-bottom {
    bottom: -1px !important; /* Fix gap at bottom */
}

/* Improved clip-path definitions for better alignment */
.hero-shape.curve-shape {
    clip-path: ellipse(100% 100% at 50% 0%);
}

.hero-shape.wave-shape {
    clip-path: polygon(0% 100%, 0% 50%, 25% 0%, 50% 50%, 75% 0%, 100% 50%, 100% 100%);
}

.hero-shape.angle-shape {
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}

.hero-shape.circle-shape {
    clip-path: circle(50% at 50% 0%);
}

.hero-shape.blob-shape {
    clip-path: polygon(0% 100%, 0% 50%, 20% 0%, 40% 30%, 60% 0%, 80% 20%, 100% 50%, 100% 100%);
}

/* Wave Animation */
@keyframes wave {
    0%, 100% {
        clip-path: polygon(0% 50%, 25% 0%, 50% 50%, 75% 0%, 100% 50%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 30%, 25% 80%, 50% 30%, 75% 80%, 100% 30%, 100% 100%, 0% 100%);
    }
}

.hero-shape.wave-animation {
    animation: wave 4s ease-in-out infinite;
}

/* Blob Animation */
@keyframes blob {
    0%, 100% {
        clip-path: polygon(0% 50%, 20% 0%, 40% 30%, 60% 0%, 80% 20%, 100% 50%, 100% 100%, 0% 100%);
    }
    33% {
        clip-path: polygon(0% 30%, 20% 80%, 40% 10%, 60% 70%, 80% 0%, 100% 30%, 100% 100%, 0% 100%);
    }
    66% {
        clip-path: polygon(0% 70%, 20% 20%, 40% 90%, 60% 10%, 80% 60%, 100% 70%, 100% 100%, 0% 100%);
    }
}

.hero-shape.blob-animation {
    animation: blob 6s ease-in-out infinite;
}

/* Curve Pulse Animation */
@keyframes curve-pulse {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.1);
    }
}

.hero-shape.curve-animation {
    animation: curve-pulse 3s ease-in-out infinite;
}

/* Overlay Animations */
.hero-overlay.gradient-animation {
    background: linear-gradient(45deg, rgba(220,53,69,0.5), rgba(253,126,20,0.3), rgba(220,53,69,0.5));
    background-size: 200% 200%;
    animation: gradient-shift 4s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pattern Animation */
.hero-overlay.pattern-animation {
    background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.1) 10px,
        transparent 10px,
        transparent 20px
    );
    background-size: 40px 40px;
    animation: pattern-move 10s linear infinite;
}

@keyframes pattern-move {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* Floating Elements */
.hero-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
}

.floating-element {
    position: absolute;
    opacity: 0.1;
    animation: float 6s ease-in-out infinite;
}

.floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Parallax Effect */
.hero-parallax {
    transform: translateZ(0);
    will-change: transform;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-shape {
        height: 40px !important;
    }
    
    .floating-element {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-shape {
        height: 30px !important;
    }
}

/* Dark Mode Support */
body.dark-mode .hero-shape {
    filter: brightness(0.8);
}

body.dark-mode .hero-overlay.light {
    background: rgba(0,0,0,0.3) !important;
}

/* Performance Optimizations */
.hero-section {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.hero-shape,
.hero-overlay {
    will-change: transform, clip-path;
    transform: translateZ(0);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-shape,
    .hero-overlay,
    .floating-element {
        animation: none !important;
        transition: none !important;
    }
}

/* Print Styles */
@media print {
    .hero-shape,
    .hero-overlay,
    .floating-element {
        display: none !important;
    }
}