/* Animated Gradient Background Tool Styles */

/* Gradient Preview */
.gradient-preview {
    height: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.gradient-preview.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1050;
}

.preview-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2rem;
    border-radius: 0.5rem;
    text-align: center;
    max-width: 80%;
}

/* Color Stop Controls */
.color-stop {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.color-stop-handle {
    cursor: move;
    padding: 0.5rem;
    margin-right: 0.5rem;
    color: #6c757d;
}

.color-picker {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
}

.color-position {
    flex-grow: 1;
    margin-right: 0.5rem;
}

.remove-stop {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
}

/* Animation Preview */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradientPulse {
    0% { background-size: 100% 100%; }
    50% { background-size: 150% 150%; }
    100% { background-size: 100% 100%; }
}

@keyframes gradientRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .gradient-preview {
        height: 300px;
    }
}

/* Animation for copy buttons */
@keyframes flash {
    0% { background-color: transparent; }
    50% { background-color: rgba(25, 135, 84, 0.2); }
    100% { background-color: transparent; }
}

.copied {
    animation: flash 1s;
}