/* ===== MODERN AI SHOWCASE STYLES ===== */

/* Showcase Container and Effects */
.ai-showcase {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--gray-50) 50%, var(--color-white) 100%);
}

[data-theme="dark"] .ai-showcase {
    background: linear-gradient(135deg, var(--color-black) 0%, var(--gray-900) 50%, var(--color-black) 100%);
}

.ai-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, 
        rgba(0, 0, 0, 0.03) 0%, 
        transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse-glow 8s ease-in-out infinite;
}

[data-theme="dark"] .ai-showcase::before {
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.03) 0%, 
        transparent 70%);
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.showcase-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* Showcase Header */
.showcase-header {
    text-align: center;
    margin-bottom: 60px;
    animation: fade-in-up 0.8s ease-out;
}

.header-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-primary);
    color: var(--color-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-primary);
}

.showcase-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.1;
}

.title-line {
    display: block;
    color: var(--color-text);
    opacity: 0.8;
}

.title-highlight {
    display: block;
    color: var(--color-text);
    font-weight: 800;
    position: relative;
}

.title-highlight::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    opacity: 1;
}

/* Smooth wave underline effect - matching logo style */
.title-highlight::before {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='40' viewBox='0 0 400 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20.5 C25 19.8 45 20.2 65 19.9 C85 19.6 105 20.3 125 20.1 C145 19.9 165 20.4 185 20.2 C205 20.0 225 20.5 245 20.3 C265 20.1 285 20.6 305 20.4 C325 20.2 345 20.7 365 20.5 C380 20.3 390 20.4 395 20.5' stroke='%23000000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 23.2 C28 22.4 48 22.9 68 22.6 C88 22.3 108 23.1 128 22.8 C148 22.5 168 23.3 188 23.0 C208 22.7 228 23.4 248 23.1 C268 22.8 288 23.5 308 23.2 C328 22.9 348 23.6 368 23.3 C383 23.1 393 23.2 398 23.3' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3Cpath d='M12 25.8 C32 25.0 52 25.6 72 25.2 C92 24.8 112 25.8 132 25.4 C152 25.0 172 26.0 192 25.6 C212 25.2 232 26.1 252 25.7 C272 25.3 292 26.2 312 25.8 C332 25.4 352 26.3 372 25.9 C387 25.6 397 25.8 402 25.9' stroke='%23000000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    animation: drawLine 2s ease-out forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

[data-theme="dark"] .title-highlight::before {
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='40' viewBox='0 0 400 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 20.5 C25 19.8 45 20.2 65 19.9 C85 19.6 105 20.3 125 20.1 C145 19.9 165 20.4 185 20.2 C205 20.0 225 20.5 245 20.3 C265 20.1 285 20.6 305 20.4 C325 20.2 345 20.7 365 20.5 C380 20.3 390 20.4 395 20.5' stroke='%23FFFFFF' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 23.2 C28 22.4 48 22.9 68 22.6 C88 22.3 108 23.1 128 22.8 C148 22.5 168 23.3 188 23.0 C208 22.7 228 23.4 248 23.1 C268 22.8 288 23.5 308 23.2 C328 22.9 348 23.6 368 23.3 C383 23.1 393 23.2 398 23.3' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3Cpath d='M12 25.8 C32 25.0 52 25.6 72 25.2 C92 24.8 112 25.8 132 25.4 C152 25.0 172 26.0 192 25.6 C212 25.2 232 26.1 252 25.7 C272 25.3 292 26.2 312 25.8 C332 25.4 352 26.3 372 25.9 C387 25.6 397 25.8 402 25.9' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.3'/%3E%3C/svg%3E");
}


@keyframes drawLine {
    0% {
        opacity: 0;
        transform: translateX(-50%) scaleX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1.1);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
    }
}

/* Keep title-highlight as inline-block for proper underline positioning */
.title-highlight {
    display: inline-block;
}

.showcase-subtitle {
    font-size: 1.125rem;
    color: var(--gray-500);
    max-width: 600px;
    margin: 0 auto;
}

/* Modern Tab Navigation */
.showcase-nav {
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav-track {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 4px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Scroll indicators for mobile */
.showcase-nav::before,
.showcase-nav::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 2;
    display: none;
}

.showcase-nav::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg), transparent);
}

.showcase-nav::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg), transparent);
}

@media (max-width: 768px) {
    .showcase-nav::before,
    .showcase-nav::after {
        display: block;
    }
}

.nav-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(25% - 2px);
    height: calc(100% - 8px);
    background: var(--color-primary);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.nav-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.nav-item.active {
    color: var(--color-secondary);
}

.nav-icon {
    font-size: 16px;
}

/* Interactive Showcase Stage */
.showcase-stage {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.stage-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: stretch;
}

/* Input/Output Panels */
.input-panel,
.output-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.panel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gray-400);
}

.panel-dot:nth-child(1) { background: #ef4444; }
.panel-dot:nth-child(2) { background: #eab308; }
.panel-dot:nth-child(3) { background: #22c55e; }

.panel-content {
    padding: 24px;
    flex: 1;
}

/* Input Field with Typewriter */
.input-field {
    margin-bottom: 20px;
}

.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.typewriter-input {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    min-height: 100px;
    position: relative;
}

.typewriter-input .cursor {
    display: inline-block;
    width: 2px;
    height: 20px;
    background: var(--color-primary);
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.input-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.tag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid var(--gray-200);
}

.generate-btn {
    width: 100%;
    padding: 14px 24px;
    background: var(--color-primary);
    color: var(--color-secondary);
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.generate-btn.loading .btn-text {
    opacity: 0;
}

.btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.generate-btn.loading .btn-loader {
    opacity: 1;
}

.btn-loader span {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: loader-bounce 1.4s ease-in-out infinite both;
}

.btn-loader span:nth-child(1) { animation-delay: -0.32s; }
.btn-loader span:nth-child(2) { animation-delay: -0.16s; }

@keyframes loader-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* AI Processing Center */
.processing-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ai-orb {
    width: 120px;
    height: 120px;
    position: relative;
    margin-bottom: 20px;
}

.orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    animation: orb-pulse 2s ease-in-out infinite;
}

[data-theme="dark"] .orb-core {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
}

.orb-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid;
    border-radius: 50%;
    opacity: 0.3;
}

.ring-1 {
    width: 60px;
    height: 60px;
    border-color: var(--gray-400);
    transform: translate(-50%, -50%);
    animation: ring-rotate 3s linear infinite;
}

.ring-2 {
    width: 80px;
    height: 80px;
    border-color: var(--gray-500);
    transform: translate(-50%, -50%);
    animation: ring-rotate 4s linear infinite reverse;
}

.ring-3 {
    width: 100px;
    height: 100px;
    border-color: var(--gray-300);
    transform: translate(-50%, -50%);
    animation: ring-rotate 5s linear infinite;
}

@keyframes orb-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes ring-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.processing-text {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gray-500);
    opacity: 0;
    animation: fade-in-out 2s ease-in-out infinite;
}

@keyframes fade-in-out {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.data-streams {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.stream {
    position: absolute;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, var(--gray-600), transparent);
    opacity: 0;
}

.stream-1 {
    left: 20%;
    animation: stream-flow 1.5s ease-in-out infinite;
}

.stream-2 {
    left: 50%;
    animation: stream-flow 1.5s ease-in-out infinite 0.5s;
}

.stream-3 {
    left: 80%;
    animation: stream-flow 1.5s ease-in-out infinite 1s;
}

@keyframes stream-flow {
    0% { opacity: 0; transform: translateY(-20px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translateY(20px); }
}

/* Output Panel Styles */
.output-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.output-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    opacity: 0;
    animation: typewriter-appear 0.5s ease-out forwards;
}

@keyframes typewriter-appear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.quality-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
}

.output-content {
    min-height: 150px;
    margin-bottom: 24px;
}

.content-placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.placeholder-line {
    height: 12px;
    background: linear-gradient(90deg, 
        var(--gray-200) 25%, 
        var(--gray-100) 50%, 
        var(--gray-200) 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer 1.5s ease-in-out infinite;
}

.placeholder-line.short {
    width: 60%;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.output-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.metric {
    text-align: center;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
}

/* Stats Bar */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin-top: 40px;
    padding: 32px;
    background: var(--color-bg);
    border-radius: 16px;
    border: 1px solid var(--color-border);
}

.stat-card {
    text-align: center;
}

.stat-number {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 8px;
}

.stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* CTA Section */
.showcase-cta {
    text-align: center;
    padding: 60px 40px;
    background: var(--color-primary);
    color: var(--color-secondary);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .showcase-cta {
    background: var(--color-primary);
    color: var(--color-secondary);
}

.cta-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 70%);
    transform: translateX(-50%);
    pointer-events: none;
}

[data-theme="dark"] .cta-glow {
    background: radial-gradient(circle, 
        rgba(0, 0, 0, 0.2) 0%, 
        transparent 70%);
}

.cta-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--color-secondary);
    position: relative;
    z-index: 1;
}

.cta-subtitle {
    font-size: 16px;
    color: var(--color-secondary);
    opacity: 0.8;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn.primary {
    background: var(--color-secondary);
    color: var(--color-primary);
    border: 2px solid var(--color-secondary);
}

.cta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cta-btn.primary:hover {
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
}

.cta-btn.secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.cta-btn.secondary:hover {
    background: var(--color-secondary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

.trust-badges {
    display: flex;
    gap: 24px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-secondary);
    opacity: 0.9;
}

.badge svg {
    color: var(--color-secondary);
    opacity: 0.8;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .stage-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .processing-center {
        padding: 40px 0;
    }
    
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Showcase header mobile */
    .showcase-header {
        margin-bottom: 40px;
    }
    
    .showcase-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }
    
    /* Navigation mobile - horizontal scroll */
    .showcase-nav {
        margin-bottom: 40px;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .showcase-nav::-webkit-scrollbar {
        display: none;
    }
    
    .nav-track {
        display: flex;
        flex-direction: row;
        width: max-content;
        min-width: 100%;
        gap: 4px;
    }
    
    .nav-indicator {
        display: none; /* Hide indicator on mobile for simplicity */
    }
    
    .nav-item {
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
        background: var(--color-bg);
        border-radius: 12px;
        border: 1px solid var(--color-border);
    }
    
    .nav-item.active {
        background: var(--color-primary);
        color: var(--color-secondary);
        border-color: var(--color-primary);
    }
    
    .nav-icon {
        display: none; /* Hide icons on mobile to save space */
    }
    
    /* Stage mobile */
    .showcase-stage {
        padding: 24px 16px;
        border-radius: 16px;
    }
    
    .stage-grid {
        gap: 20px;
    }
    
    /* Panels mobile */
    .input-panel,
    .output-panel {
        border-radius: 12px;
    }
    
    .panel-content {
        padding: 16px;
    }
    
    .typewriter-input {
        font-size: 14px;
        min-height: 80px;
    }
    
    .generate-btn {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    /* Processing center mobile */
    .ai-orb {
        width: 80px;
        height: 80px;
    }
    
    .orb-core {
        width: 30px;
        height: 30px;
    }
    
    .ring-1 {
        width: 40px;
        height: 40px;
    }
    
    .ring-2 {
        width: 55px;
        height: 55px;
    }
    
    .ring-3 {
        width: 70px;
        height: 70px;
    }
    
    /* Output mobile */
    .output-title {
        font-size: 18px;
    }
    
    .output-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .metric-value {
        font-size: 20px;
    }
    
    .metric-label {
        font-size: 10px;
    }
    
    /* Stats bar mobile */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 24px 16px;
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    /* CTA mobile */
    .showcase-cta {
        padding: 40px 24px;
    }
    
    .cta-title {
        font-size: 24px;
    }
    
    .cta-subtitle {
        font-size: 14px;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .trust-badges {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .showcase-container {
        padding: 0 16px;
    }
    
    .showcase-title {
        font-size: 1.75rem;
    }
    
    .showcase-subtitle {
        font-size: 1rem;
    }
    
    .nav-item {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .stats-bar {
        grid-template-columns: 1fr;
    }
    
    .output-metrics {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .metric {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border);
    }
    
    .metric:last-child {
        border-bottom: none;
    }
    
    .metric-value {
        order: 2;
    }
    
    .metric-label {
        order: 1;
        text-align: left;
    }
}