/* CreatorFramework — Custom Styles */

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #334155 #0f172a;
}

/* HTMX indicators */
.htmx-request .htmx-indicator {
    display: block;
}
.htmx-indicator {
    display: none;
}

/* HTMX progress bar */
#htmx-progress .progress-bar-animation {
    width: 100%;
    animation: htmx-progress-slide 1.5s ease-in-out infinite;
}
@keyframes htmx-progress-slide {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

/* HTMX content swap transition */
#main-content {
    transition: opacity 0.15s ease-in;
}
#main-content.htmx-fading {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}
/* Hide swapped content until Alpine initializes properly */
#main-content.htmx-init-pending {
    visibility: hidden !important;
}

/* Status badge colors */
.status-uploaded { color: #94a3b8; }
.status-queued { color: #fbbf24; }
.status-transcribing { color: #60a5fa; }
.status-analyzing_visual { color: #60a5fa; }
.status-synthesizing { color: #f472b6; }
.status-complete { color: #34d399; }
.status-failed { color: #f87171; }

/* Status dot */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.uploaded { background: #94a3b8; }
.status-dot.queued { background: #fbbf24; animation: pulse-dot 2s ease-in-out infinite; }
.status-dot.transcribing { background: #60a5fa; animation: pulse-dot 1.5s ease-in-out infinite; }
.status-dot.analyzing_visual { background: #60a5fa; animation: pulse-dot 1.5s ease-in-out infinite; }
.status-dot.synthesizing { background: #f472b6; animation: pulse-dot 1.5s ease-in-out infinite; }
.status-dot.complete { background: #34d399; }
.status-dot.failed { background: #f87171; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Card hover */
.video-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.video-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Timestamp link */
.timestamp-link {
    color: #14b8a6;
    cursor: pointer;
    transition: color 0.15s;
}
.timestamp-link:hover {
    color: #2dd4bf;
    text-decoration: underline;
}

/* Analysis tab content animation */
[x-cloak] {
    display: none !important;
}

/* Tab content fade */
.tab-content {
    animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Progress bar animation */
@keyframes progress-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.progress-active {
    animation: progress-pulse 2s ease-in-out infinite;
}

/* Pattern card */
.pattern-card {
    border-left: 3px solid #14b8a6;
}

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Focus visible ring for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

/* Smooth page transitions */
main {
    scroll-behavior: smooth;
}

/* Line clamp utility (in case Tailwind CDN misses it) */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive text */
@media (max-width: 640px) {
    .aspect-video img {
        object-fit: cover;
    }
}