/* ==========================================================================
   HERO ANIMATED BACKGROUND - Light Theme Aurora/Wave Effect
   ========================================================================== */

/* Animated Wave Background Container */
.hero-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Flowing Wave Layers */
.hero-wave {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    opacity: 0.6;
    filter: blur(60px);
    animation: waveFlow 15s ease-in-out infinite;
}

.hero-wave-1 {
    background: radial-gradient(ellipse at 30% 50%, rgba(94, 200, 181, 0.4) 0%, transparent 50%);
    animation-delay: 0s;
    animation-duration: 18s;
}

.hero-wave-2 {
    background: radial-gradient(ellipse at 70% 30%, rgba(166, 134, 189, 0.35) 0%, transparent 50%);
    animation-delay: -5s;
    animation-duration: 22s;
    animation-direction: reverse;
}

.hero-wave-3 {
    background: radial-gradient(ellipse at 50% 70%, rgba(245, 195, 130, 0.3) 0%, transparent 50%);
    animation-delay: -10s;
    animation-duration: 20s;
}

.hero-wave-4 {
    background: radial-gradient(ellipse at 20% 80%, rgba(176, 218, 232, 0.35) 0%, transparent 50%);
    animation-delay: -3s;
    animation-duration: 25s;
    animation-direction: reverse;
}

/* Floating Orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    animation: orbFloat 20s ease-in-out infinite;
}

.hero-orb-1 {
    width: 300px;
    height: 300px;
    background: rgba(94, 200, 181, 0.3);
    top: 10%;
    right: 20%;
    animation-delay: 0s;
}

.hero-orb-2 {
    width: 200px;
    height: 200px;
    background: rgba(245, 195, 130, 0.25);
    bottom: 20%;
    right: 30%;
    animation-delay: -7s;
    animation-duration: 25s;
}

.hero-orb-3 {
    width: 250px;
    height: 250px;
    background: rgba(166, 134, 189, 0.25);
    top: 30%;
    right: 10%;
    animation-delay: -12s;
    animation-duration: 22s;
}

/* Animated Line Waves (like aurora streaks) */
.hero-streak {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(94, 200, 181, 0.6), rgba(245, 195, 130, 0.4), transparent);
    filter: blur(1px);
    animation: streakMove 8s ease-in-out infinite;
}

.hero-streak-1 {
    width: 60%;
    top: 25%;
    right: 0;
    animation-delay: 0s;
    transform: rotate(-5deg);
}

.hero-streak-2 {
    width: 50%;
    top: 45%;
    right: -10%;
    animation-delay: -2s;
    animation-duration: 10s;
    transform: rotate(3deg);
    background: linear-gradient(90deg, transparent, rgba(166, 134, 189, 0.5), rgba(176, 218, 232, 0.4), transparent);
}

.hero-streak-3 {
    width: 70%;
    top: 65%;
    right: 5%;
    animation-delay: -4s;
    animation-duration: 12s;
    transform: rotate(-8deg);
}

/* Particle Dots */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hero-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(94, 200, 181, 0.6);
    border-radius: 50%;
    animation: particleFloat 10s ease-in-out infinite;
}

.hero-particle:nth-child(1) { top: 15%; right: 25%; animation-delay: 0s; }
.hero-particle:nth-child(2) { top: 35%; right: 15%; animation-delay: -2s; background: rgba(245, 195, 130, 0.6); }
.hero-particle:nth-child(3) { top: 55%; right: 35%; animation-delay: -4s; background: rgba(166, 134, 189, 0.6); }
.hero-particle:nth-child(4) { top: 75%; right: 20%; animation-delay: -6s; }
.hero-particle:nth-child(5) { top: 25%; right: 40%; animation-delay: -1s; background: rgba(176, 218, 232, 0.6); }
.hero-particle:nth-child(6) { top: 45%; right: 45%; animation-delay: -3s; }
.hero-particle:nth-child(7) { top: 65%; right: 10%; animation-delay: -5s; background: rgba(245, 195, 130, 0.6); }
.hero-particle:nth-child(8) { top: 85%; right: 30%; animation-delay: -7s; background: rgba(166, 134, 189, 0.6); }

/* Keyframe Animations */
@keyframes waveFlow {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(5%, -3%) rotate(2deg) scale(1.05);
    }
    50% {
        transform: translate(-3%, 5%) rotate(-1deg) scale(0.98);
    }
    75% {
        transform: translate(-5%, -2%) rotate(1deg) scale(1.02);
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    33% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.4;
    }
    66% {
        transform: translate(-20px, 30px) scale(0.9);
        opacity: 0.25;
    }
}

@keyframes streakMove {
    0%, 100% {
        transform: translateX(0) scaleX(1);
        opacity: 0.4;
    }
    50% {
        transform: translateX(-50px) scaleX(1.2);
        opacity: 0.7;
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translate(10px, -15px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translate(-5px, 10px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(15px, 5px) scale(1.1);
        opacity: 0.7;
    }
}

/* Shimmer/Glow Effect */
@keyframes shimmer {
    0%, 100% {
        opacity: 0.3;
        filter: blur(40px);
    }
    50% {
        opacity: 0.5;
        filter: blur(50px);
    }
}

/* ==========================================================================
   APPLY TO WORDPRESS COVER BLOCK - TRANSPARENT PNG VERSION
   ========================================================================== */
.wp-block-cover.has-animated-bg {
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7fa 100%) !important;
}

/* Light background base */
.wp-block-cover .wp-block-cover__background {
    z-index: 1;
    background: linear-gradient(135deg, #f8f9fa 0%, #e8f4f8 50%, #f0f7fa 100%) !important;
    opacity: 1 !important;
}

/* Animation layer BEHIND the transparent image */
.wp-block-cover .hero-animated-bg {
    z-index: 2;
    mix-blend-mode: normal;
    opacity: 1;
}

/* Transparent PNG on top of animation */
.wp-block-cover .wp-block-cover__image-background {
    z-index: 3;
    object-fit: contain !important;
    object-position: right center !important;
}

/* Content on top of everything */
.wp-block-cover .wp-block-cover__inner-container {
    z-index: 10;
    position: relative;
}

/* Animation covers the FULL screen */
.wp-block-cover .hero-animated-bg {
    right: 0;
    left: 0;
    width: 100%;
}

/* Waves with enhanced visibility - reduced blur for more definition */
.wp-block-cover .hero-wave {
    mix-blend-mode: normal;
    filter: blur(35px);
}

.wp-block-cover .hero-orb {
    mix-blend-mode: normal;
    filter: blur(25px);
}

.wp-block-cover .hero-streak {
    mix-blend-mode: normal;
    height: 5px;
    filter: blur(2px);
    opacity: 0.9;
}

/* ULTRA INTENSE aurora colors */
.hero-wave-1 {
    background: radial-gradient(ellipse at 20% 40%, rgba(20, 130, 110, 1) 0%, rgba(20, 130, 110, 0.5) 40%, transparent 65%) !important;
}

.hero-wave-2 {
    background: radial-gradient(ellipse at 80% 30%, rgba(130, 50, 160, 1) 0%, rgba(130, 50, 160, 0.5) 40%, transparent 65%) !important;
}

.hero-wave-3 {
    background: radial-gradient(ellipse at 70% 70%, rgba(210, 120, 40, 1) 0%, rgba(210, 120, 40, 0.5) 40%, transparent 65%) !important;
}

.hero-wave-4 {
    background: radial-gradient(ellipse at 10% 60%, rgba(40, 120, 190, 1) 0%, rgba(40, 120, 190, 0.5) 40%, transparent 65%) !important;
}

/* Orb colors - ultra intensity */
.hero-orb-1 {
    background: rgba(20, 130, 110, 1) !important;
    width: 400px !important;
    height: 400px !important;
}

.hero-orb-2 {
    background: rgba(210, 120, 40, 0.9) !important;
    width: 320px !important;
    height: 320px !important;
}

.hero-orb-3 {
    background: rgba(130, 50, 160, 0.9) !important;
    width: 360px !important;
    height: 360px !important;
}

/* Streak colors - ultra bold aurora lines */
.hero-streak-1 {
    background: linear-gradient(90deg, transparent 0%, rgba(20, 130, 110, 1) 20%, rgba(40, 120, 190, 1) 80%, transparent 100%) !important;
    width: 100% !important;
    height: 6px !important;
}

.hero-streak-2 {
    background: linear-gradient(90deg, transparent 0%, rgba(130, 50, 160, 1) 20%, rgba(210, 120, 40, 0.9) 80%, transparent 100%) !important;
    width: 90% !important;
    height: 5px !important;
}

.hero-streak-3 {
    background: linear-gradient(90deg, transparent 0%, rgba(40, 120, 190, 1) 20%, rgba(20, 130, 110, 0.9) 80%, transparent 100%) !important;
    width: 100% !important;
    height: 6px !important;
}

/* Particle colors */
.hero-particle:nth-child(1) { background: rgba(94, 200, 181, 0.8) !important; }
.hero-particle:nth-child(2) { background: rgba(255, 190, 120, 0.8) !important; }
.hero-particle:nth-child(3) { background: rgba(200, 150, 220, 0.8) !important; }
.hero-particle:nth-child(4) { background: rgba(130, 190, 230, 0.8) !important; }
.hero-particle:nth-child(5) { background: rgba(94, 200, 181, 0.8) !important; }
.hero-particle:nth-child(6) { background: rgba(255, 190, 120, 0.8) !important; }
.hero-particle:nth-child(7) { background: rgba(200, 150, 220, 0.8) !important; }
.hero-particle:nth-child(8) { background: rgba(130, 190, 230, 0.8) !important; }

/* ==========================================================================
   BUTTON ICONS - Iconify Solar Integration
   ========================================================================== */
.wp-block-button__link .iconify,
.wp-block-button__link iconify-icon {
    margin-right: 8px;
    vertical-align: middle;
    font-size: 1.2em;
}

/* Button with icon styling */
.hero-btn-with-icon {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .wp-block-cover .hero-animated-bg {
        left: 0;
        width: 100%;
    }
    
    .hero-wave {
        filter: blur(30px);
    }
    
    .hero-orb-1 { width: 280px !important; height: 280px !important; }
    .hero-orb-2 { width: 220px !important; height: 220px !important; }
    .hero-orb-3 { width: 250px !important; height: 250px !important; }
    
    /* Fix image on tablet */
    .wp-block-cover .wp-block-cover__image-background {
        object-position: center center !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    /* Hero cover adjustments */
    .wp-block-cover {
        min-height: 100vh !important;
    }
    
    .wp-block-cover .hero-animated-bg {
        left: 0;
        width: 100%;
        top: 0;
        bottom: 0;
    }
    
    /* Fix image positioning on mobile */
    .wp-block-cover .wp-block-cover__image-background {
        object-fit: cover !important;
        object-position: center top !important;
        opacity: 0.85 !important;
    }
    
    .hero-wave {
        filter: blur(25px);
        width: 250% !important;
        height: 250% !important;
    }
    
    .hero-orb {
        filter: blur(20px);
    }
    
    .hero-orb-1 { 
        width: 180px !important; 
        height: 180px !important; 
        top: 10% !important;
        right: 5% !important;
    }
    .hero-orb-2 { 
        width: 140px !important; 
        height: 140px !important;
        bottom: 25% !important;
        right: 15% !important;
    }
    .hero-orb-3 { 
        width: 160px !important; 
        height: 160px !important;
        top: 45% !important;
        right: 0% !important;
    }
    
    .hero-streak {
        height: 4px !important;
        opacity: 0.8 !important;
    }
    
    .hero-streak-1 { width: 100% !important; }
    .hero-streak-2 { width: 100% !important; }
    .hero-streak-3 { width: 100% !important; }
    
    .hero-particle {
        width: 3px !important;
        height: 3px !important;
    }
    
    /* Text adjustments for mobile */
    .wp-block-cover h1.wp-block-heading {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        letter-spacing: 1px !important;
    }
    
    .wp-block-cover .is-style-text-annotation,
    .wp-block-cover p.is-style-text-annotation {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }
    
    .wp-block-cover p:not(.is-style-text-annotation) {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Button adjustments */
    .wp-block-cover .wp-block-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .wp-block-cover .wp-block-button__link {
        font-size: 0.85rem !important;
        padding: 14px 28px !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .wp-block-cover {
        min-height: 100svh !important;
    }
    
    .wp-block-cover .wp-block-cover__image-background {
        object-position: center center !important;
        opacity: 0.75 !important;
    }
    
    .hero-wave {
        filter: blur(18px);
    }
    
    .hero-orb-1 { width: 120px !important; height: 120px !important; }
    .hero-orb-2 { width: 90px !important; height: 90px !important; }
    .hero-orb-3 { width: 100px !important; height: 100px !important; }
    
    .hero-streak {
        height: 3px !important;
    }
    
    /* Smaller text on small mobile */
    .wp-block-cover h1.wp-block-heading {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        letter-spacing: 0.5px !important;
    }
    
    .wp-block-cover .is-style-text-annotation,
    .wp-block-cover p.is-style-text-annotation {
        font-size: 0.65rem !important;
    }
    
    .wp-block-cover p:not(.is-style-text-annotation) {
        font-size: 0.8rem !important;
    }
    
    .wp-block-cover .wp-block-button__link {
        font-size: 0.75rem !important;
        padding: 12px 24px !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
    .wp-block-cover h1.wp-block-heading {
        font-size: 1.25rem !important;
    }
    
    .wp-block-cover .is-style-text-annotation {
        font-size: 0.6rem !important;
    }
    
    .wp-block-cover p:not(.is-style-text-annotation) {
        font-size: 0.75rem !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-wave,
    .hero-orb,
    .hero-streak,
    .hero-particle {
        animation: none;
    }
}