/* GenUI WebFlow - Custom Styles */

/* Smooth transitions for theme switching */
* {
    transition-property: background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
}

/* Override for elements that shouldn't animate */
.no-transition,
.no-transition * {
    transition: none !important;
}

/* Modal image - prevent layout shift during zoom */
#modal-image {
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}

/* Progress bar animation */
@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.progress-active {
    animation: progress-pulse 2s ease-in-out infinite;
}

/* Textarea custom scrollbar */
textarea::-webkit-scrollbar {
    width: 6px;
}

textarea::-webkit-scrollbar-track {
    background: transparent;
}

textarea::-webkit-scrollbar-thumb {
    background-color: rgba(107, 114, 128, 0.3);
    border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background-color: rgba(107, 114, 128, 0.5);
}

/* Focus ring consistency */
*:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Card hover effect */
#result-1-card:hover,
#result-2-card:hover,
#result-3-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

/* Video container aspect ratio fallback */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Spinner for loading states */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}