/* Custom styles */
.backdrop-blur {
    backdrop-filter: blur(8px);
}

.gradient-button {
    transition: all 0.3s ease;
    background-size: 200% auto;
}

.gradient-button:hover {
    background-position: right center;
}

.primary-gradient {
    background-image: linear-gradient(45deg, #4f46e5, #7c3aed);
}

.audio-gradient {
    background-image: linear-gradient(45deg, #ec4899, #be185d);
}

.video-gradient {
    background-image: linear-gradient(45deg, #3b82f6, #0891b2);
}

.submit-gradient {
    background-image: linear-gradient(45deg, #22c55e, #059669);
}

.pattern-background {
    background-image: url('data:image/svg+xml,%3Csvg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.1"%3E%3Cpath d="M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

.photo-preview {
    max-height: 300px;
    object-fit: contain;
}

.form-input {
    transition: all 0.3s ease;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.scale-in {
    animation: scaleIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#image-slider {
    position: relative;
    width: 100%;
    height: 275px;
    overflow: hidden;
    border: 4px solid #4f46e5; /* Indigo border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.slider-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden; /* Key for the flip effect */
    transform-origin: center right; /* Flip from the right */
    transition: transform 0.8s ease-in-out; /* Smooth flip effect */
    opacity: 0;
    z-index: 0;
}

.slider-images img.flip-in {
    transform: rotateY(0deg); /* Reset rotation */
    opacity: 1;
    z-index: 1;
}

.slider-images img.hidden {
    transform: rotateY(-180deg); /* Flip to the back */
    opacity: 0;
    z-index: 0;
}