/* Morphing Gradient CSS Animations - Hardware Accelerated */

.ink {
    position: relative;
    overflow: hidden;
    --gradient-color-1: rgba(120, 120, 120, 0.6);
    --gradient-color-2: rgba(140, 140, 140, 0.6);
    --gradient-color-3: rgba(100, 100, 100, 0.6);
    --gradient-color-4: rgba(160, 160, 160, 0.6);
    /* Enable smooth color transitions */
    transition: 
        --gradient-color-1 0.3s ease,
        --gradient-color-2 0.3s ease,
        --gradient-color-3 0.3s ease,
        --gradient-color-4 0.3s ease;
}

/* Gradient Layer Base */
.ink-gradient-layer {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    border-radius: inherit;
    will-change: transform, opacity;
    /* Extended beyond container boundaries to eliminate harsh edges */
}

/* Primary Gradient Layers */
.ink-gradient-layer:nth-child(1) {
    background: radial-gradient(
        circle at var(--pos-x-1, 30%) var(--pos-y-1, 40%), 
        var(--gradient-color-1) 0%, 
        transparent var(--size-1, 60%)
    );
    animation: float-1 8s ease-in-out infinite;
}

.ink-gradient-layer:nth-child(2) {
    background: radial-gradient(
        circle at var(--pos-x-2, 70%) var(--pos-y-2, 30%), 
        var(--gradient-color-2) 0%, 
        transparent var(--size-2, 50%)
    );
    animation: float-2 10s ease-in-out infinite;
    animation-delay: -2s;
}

.ink-gradient-layer:nth-child(3) {
    background: radial-gradient(
        circle at var(--pos-x-3, 50%) var(--pos-y-3, 70%), 
        var(--gradient-color-3) 0%, 
        transparent var(--size-3, 55%)
    );
    animation: float-3 12s ease-in-out infinite;
    animation-delay: -4s;
}

.ink-gradient-layer:nth-child(4) {
    background: radial-gradient(
        circle at var(--pos-x-4, 20%) var(--pos-y-4, 60%), 
        var(--gradient-color-4) 0%, 
        transparent var(--size-4, 45%)
    );
    animation: float-4 9s ease-in-out infinite;
    animation-delay: -1s;
}

/* Black Wave Layer (optional, disabled on mobile) */
.ink-black-wave {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
        ellipse 25% 15% at var(--wave-x, 50%) var(--wave-y, 50%),
        rgba(0, 0, 0, 0.1) 0%,
        transparent 70%
    );
    animation: wave-flow 15s linear infinite;
    will-change: transform;
    /* Extended beyond container boundaries for seamless appearance */
}

/* Animation Keyframes */
@keyframes float-1 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(15%, -10%) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-10%, 15%) scale(0.9);
        opacity: 0.9;
    }
    75% {
        transform: translate(8%, -5%) scale(1.05);
        opacity: 0.7;
    }
}

@keyframes float-2 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.7;
    }
    33% {
        transform: translate(-12%, 18%) scale(1.15);
        opacity: 0.9;
    }
    66% {
        transform: translate(20%, -8%) scale(0.85);
        opacity: 0.5;
    }
}

@keyframes float-3 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.6;
    }
    30% {
        transform: translate(10%, 12%) scale(1.2);
        opacity: 0.8;
    }
    60% {
        transform: translate(-15%, -10%) scale(0.9);
        opacity: 0.4;
    }
    90% {
        transform: translate(5%, 8%) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes float-4 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.5;
    }
    40% {
        transform: translate(-8%, -15%) scale(1.1);
        opacity: 0.8;
    }
    80% {
        transform: translate(12%, 10%) scale(0.95);
        opacity: 0.6;
    }
}

@keyframes wave-flow {
    0% {
        transform: translate(-20%, -20%) rotate(0deg);
        opacity: 0.1;
    }
    25% {
        transform: translate(120%, -10%) rotate(90deg);
        opacity: 0.05;
    }
    50% {
        transform: translate(110%, 120%) rotate(180deg);
        opacity: 0.08;
    }
    75% {
        transform: translate(-10%, 110%) rotate(270deg);
        opacity: 0.03;
    }
    100% {
        transform: translate(-20%, -20%) rotate(360deg);
        opacity: 0.1;
    }
}

/* Mobile Optimizations */
@media (max-width: 500px) {
    .ink-gradient-layer:nth-child(n+3) {
        display: none; /* Only show 2 gradients on mobile */
    }
    
    .ink-black-wave {
        display: none; /* No black waves on mobile */
    }
    
    .ink-gradient-layer {
        animation-duration: 16s; /* Slower animations on mobile */
    }
    
    /* Reduce complexity */
    .ink-gradient-layer:nth-child(1) {
        animation: float-simple-1 16s ease-in-out infinite;
    }
    
    .ink-gradient-layer:nth-child(2) {
        animation: float-simple-2 20s ease-in-out infinite;
        animation-delay: -4s;
    }
}

/* Simplified mobile animations */
@keyframes float-simple-1 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(10%, -10%) scale(1.1);
        opacity: 0.7;
    }
}

@keyframes float-simple-2 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-10%, 10%) scale(0.9);
        opacity: 0.6;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .ink-gradient-layer,
    .ink-black-wave {
        animation: none;
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .ink-gradient-layer {
        opacity: 0.8;
    }
    
    .ink-black-wave {
        display: none;
    }
}

/* Performance hint for browsers */
.ink * {
    transform: translateZ(0); /* Force hardware acceleration */
    backface-visibility: hidden;
}