/**
 * Base Styles
 * Global base styles for HTML elements, fonts, and body
 * Enhanced with premium animations and refined color palette
 */

/* CSS Variables - Theme tokens (prep for dark mode) */
:root {
  --orbvop-primary: #6366f1;
  --orbvop-primary-hover: #4f46e5;
  --orbvop-primary-light: rgba(99, 102, 241, 0.1);
  --orbvop-secondary: #a855f7;
  --orbvop-accent: #ec4899;
  --orbvop-ink: #0b1220;
  --orbvop-ink-2: #111827;
  --orbvop-success: #10b981;
  --orbvop-success-light: rgba(16, 185, 129, 0.1);
  --orbvop-warning: #f59e0b;
  --orbvop-warning-light: rgba(245, 158, 11, 0.1);
  --orbvop-error: #ef4444;
  --orbvop-error-light: rgba(239, 68, 68, 0.1);
  --orbvop-text: #0f172a;
  --orbvop-text-muted: #64748b;
  --orbvop-text-light: #94a3b8;
  --orbvop-bg: #f7f8fc;
  --orbvop-bg-elevated: #ffffff;
  --orbvop-bg-subtle: #f1f5f9;
  --orbvop-surface: rgba(255, 255, 255, 0.72);
  --orbvop-surface-strong: rgba(255, 255, 255, 0.9);
  --orbvop-surface-border: rgba(15, 23, 42, 0.06);
  --orbvop-border: #e2e8f0;
  --orbvop-border-light: rgba(99, 102, 241, 0.2);
  --orbvop-ring: rgba(99, 102, 241, 0.22);
  --orbvop-ring-strong: rgba(99, 102, 241, 0.32);
  --orbvop-radius-sm: 8px;
  --orbvop-radius-md: 12px;
  --orbvop-radius-lg: 16px;
  --orbvop-radius-xl: 20px;
  --orbvop-radius-2xl: 24px;
  --orbvop-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
  --orbvop-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.08);
  --orbvop-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.1);
  --orbvop-shadow-glow: 0 0 40px rgba(99, 102, 241, 0.15);
  --orbvop-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --orbvop-gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
  --orbvop-gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.88) 100%);
  --orbvop-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --orbvop-transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --orbvop-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode variant (respects system preference) */
@media (prefers-color-scheme: dark) {
  :root.orbvop-dark,
  :root:not(.orbvop-light) {
    --orbvop-text: #f8fafc;
    --orbvop-text-muted: #94a3b8;
    --orbvop-text-light: #64748b;
    --orbvop-bg: #0f172a;
    --orbvop-bg-elevated: #1e293b;
    --orbvop-border: #334155;
  }
}

/* Reset and base styles */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Headline font for titles */
h1, h2, h3, .hero-headline, .hero-tag, .brand-name,
.demo-header h2, .compare-container h2, .langs-container h2,
.cta-container h2, .stats-section .stat-number,
.trend-header h2, .feature-card h3, .trend-card h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.025em;
}

html {
    scroll-behavior: smooth;
    overscroll-behavior: none;
    /* 遮罩锁滚动条时避免 body overflow:hidden 导致整页（含顶栏）横向跳动 */
    scrollbar-gutter: stable;
}

body {
    background: radial-gradient(1200px 800px at 20% -10%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
      radial-gradient(900px 600px at 90% 0%, rgba(168, 85, 247, 0.06) 0%, transparent 55%),
      radial-gradient(1000px 700px at 70% 110%, rgba(236, 72, 153, 0.05) 0%, transparent 55%),
      var(--orbvop-bg);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    color: var(--orbvop-text);
    overflow-x: hidden;
    overscroll-behavior: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-theme-dark {
    color-scheme: dark;
    --orbvop-bg: #0b1220;
    --orbvop-bg-elevated: rgba(2, 6, 23, 0.86);
    --orbvop-bg-subtle: rgba(2, 6, 23, 0.72);
    --orbvop-surface: rgba(15, 23, 42, 0.56);
    --orbvop-surface-strong: rgba(15, 23, 42, 0.72);
    --orbvop-surface-border: rgba(255, 255, 255, 0.10);
    --orbvop-border: rgba(255, 255, 255, 0.10);
    --orbvop-text: #e5e7eb;
    --orbvop-text-muted: rgba(148, 163, 184, 0.90);
    --orbvop-text-light: rgba(100, 116, 139, 0.92);
    --orbvop-ring: rgba(99, 102, 241, 0.26);
    --orbvop-ring-strong: rgba(99, 102, 241, 0.36);

    /* 背景层低调：降低光晕强度 */
    background:
      radial-gradient(1200px 800px at 20% -10%, rgba(99, 102, 241, 0.07) 0%, transparent 55%),
      radial-gradient(900px 600px at 88% 5%, rgba(168, 85, 247, 0.05) 0%, transparent 52%),
      radial-gradient(1000px 700px at 70% 105%, rgba(236, 72, 153, 0.04) 0%, transparent 52%),
      linear-gradient(180deg, #020617 0%, #0b1220 40%, #0f172a 100%);
    color: var(--orbvop-text);
}

/* 落地页背景：透明，让底层 app-ambient 光效透出（不改卡片） */
body.app-theme-dark .landing-page {
  background: transparent;
}

body.app-theme-dark .landing-page::before,
body.app-theme-dark .landing-page::after {
  opacity: 0.35;
}

/* 深色模式：英雄页第一眼看到的大卡牌（hero-upload）不透明度 +30% */
body.app-theme-dark .hero-upload {
  background: rgba(15, 23, 42, 0.88);
}


button,
input,
select,
textarea {
    accent-color: var(--orbvop-primary);
}

button:not(:disabled),
[role="button"] {
    cursor: pointer;
}

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--orbvop-ring);
    border-radius: 10px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.25);
    border-radius: var(--orbvop-radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.45);
}

/*
 * Hidden file inputs (landing / upload / editor).
 * Must live in base (eager): route-split left landing without upload.css,
 * so .orbvop-file-input-hidden was missing and native「选择文件」leaked on Hero.
 * Not display:none — Chromium ignores programmatic click() on fully hidden inputs.
 */
.orbvop-file-inputs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.orbvop-file-input-hidden {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    opacity: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    pointer-events: none;
}

.orbvop-file-input-hidden::file-selector-button {
    display: none;
}

/*
 * Lazy-route placeholder (defineAsyncComponent loadingComponent).
 * Lives in base so it paints before upload/editor CSS arrives.
 */
.orbvop-async-view-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: min(52vh, 420px);
    padding: 48px 16px;
    box-sizing: border-box;
}

.orbvop-async-view-loading__orbit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orbvop-async-view-loading__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #7c3aed;
    opacity: 0.35;
    animation: orbvop-async-dot 0.9s ease-in-out infinite;
}

.orbvop-async-view-loading__dot:nth-child(2) {
    animation-delay: 0.15s;
    background: #6366f1;
}

.orbvop-async-view-loading__dot:nth-child(3) {
    animation-delay: 0.3s;
    background: #0891b2;
}

.orbvop-async-view-loading__label {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(91, 33, 182, 0.45);
}

body.app-theme-light .orbvop-async-view-loading__label {
    color: rgba(67, 56, 202, 0.5);
}

/* Preview video: S3 / original-media buffering overlay */
.orbvop-preview-media-loading__label {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(226, 232, 240, 0.85);
}

@keyframes orbvop-async-dot {
    0%, 80%, 100% {
        transform: translateY(0) scale(0.85);
        opacity: 0.3;
    }
    40% {
        transform: translateY(-5px) scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbvop-async-view-loading__dot {
        animation: none;
        opacity: 0.7;
    }
}

/* Utility classes */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}

.line-clamp-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* 极窄屏才堆叠字幕列表与编辑区；≥640px 用 SubtitleEditor 内 sm: 双栏 */
@media (max-width: 639px) {
    .editor-grid {
        grid-template-columns: 1fr !important;
    }
}