/* 影视系统公共样式 */
/* 包含：骨架屏、懒加载动画、工具类、响应式辅助类 */

/* ====== 骨架屏动画 ====== */
@keyframes skeleton-loading {
    0% { 
        background-position: -200% 0; 
    }
    100% { 
        background-position: 200% 0; 
    }
}

@keyframes skeleton-pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

/* 骨架屏基础样式 */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite ease-in-out;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

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

/* 海报骨架屏 */
.skeleton-poster {
    width: 100%;
    padding-top: 140%; /* 2:3 比例 */
    background-color: #1a1a1a;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* 标题骨架屏 */
.skeleton-title {
    height: 16px;
    width: 80%;
    margin-bottom: 8px;
    background-color: #222;
    border-radius: 4px;
}

.skeleton-title.short {
    width: 60%;
}

.skeleton-title.long {
    width: 100%;
}

/* 元信息骨架屏 */
.skeleton-meta {
    height: 12px;
    width: 40%;
    background-color: #222;
    border-radius: 3px;
}

/* 按钮骨架屏 */
.skeleton-btn {
    height: 36px;
    width: 100%;
    background-color: #222;
    border-radius: 6px;
    margin: 4px 0;
}

/* 卡片骨架屏 */
.skeleton-card {
    background: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    padding: 12px;
}

.skeleton-card .skeleton-poster {
    margin-bottom: 12px;
}

/* 列表骨架屏 */
.skeleton-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 12px;
}

/* ====== 懒加载相关样式 ====== */
/* 懒加载图片容器 */
.lazy-container {
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
}

/* 加载状态 */
img.lazy-loading {
    opacity: 0.3;
    filter: blur(5px);
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* 加载完成 */
img.lazy-loaded {
    opacity: 1;
    filter: blur(0);
    animation: fadeIn 0.5s ease;
}

/* 加载错误 */
img.lazy-error {
    opacity: 0.3;
    filter: grayscale(100%);
    position: relative;
}

img.lazy-error::after {
    content: '!';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

/* 淡入动画 */
@keyframes fadeIn {
    from { 
        opacity: 0; 
    }
    to { 
        opacity: 1; 
    }
}

/* 缩放动画 */
@keyframes scaleIn {
    from { 
        transform: scale(0.95); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

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

/* ====== 加载指示器 ====== */
.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: #ff2d2d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

.loading-spinner.small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loading-spinner.large {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes spin {
    to { 
        transform: rotate(360deg); 
    }
}

/* 进度条 */
.progress-bar {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff2d2d, #ff6b6b);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { 
        transform: translateX(-100%); 
    }
    100% { 
        transform: translateX(100%); 
    }
}

/* ====== 工具类 ====== */
/* 隐藏元素 */
.hidden {
    display: none !important;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 弹性布局 */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* 文本处理 */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

/* 间距 */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }

/* 圆角 */
.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }

/* 背景色 */
.bg-dark { background-color: #0c0c0c; }
.bg-darker { background-color: #050505; }
.bg-light { background-color: #1a1a1a; }
.bg-lighter { background-color: #222; }
.bg-red { background-color: #ff2d2d; }
.bg-red-gradient { 
    background: linear-gradient(45deg, #ff2d2d, #ff6b6b); 
}

/* 文字颜色 */
.text-white { color: #fff; }
.text-gray { color: rgba(255, 255, 255, 0.7); }
.text-light-gray { color: rgba(255, 255, 255, 0.5); }
.text-red { color: #ff2d2d; }

/* 边框 */
.border-light { border: 1px solid rgba(255, 255, 255, 0.1); }
.border-gray { border: 1px solid rgba(255, 255, 255, 0.2); }

/* 阴影 */
.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
.shadow-red { box-shadow: 0 4px 20px rgba(255, 45, 45, 0.3); }

/* 过渡动画 */
.transition {
    transition: all 0.3s ease;
}

.transition-slow {
    transition: all 0.5s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

/* 变换 */
.scale-hover:hover {
    transform: scale(1.05);
}

.translate-hover:hover {
    transform: translateY(-2px);
}

/* 光标 */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* 溢出 */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* 层级 */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* 响应式工具类 */
@media (max-width: 640px) {
    .sm-hidden { display: none !important; }
    .sm-block { display: block !important; }
    .sm-flex { display: flex !important; }
    .sm-grid { display: grid !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .md-hidden { display: none !important; }
    .md-block { display: block !important; }
    .md-flex { display: flex !important; }
    .md-grid { display: grid !important; }
}

@media (min-width: 1025px) {
    .lg-hidden { display: none !important; }
    .lg-block { display: block !important; }
    .lg-flex { display: flex !important; }
    .lg-grid { display: grid !important; }
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 选择文本样式 */
::selection {
    background: rgba(255, 45, 45, 0.3);
    color: white;
}

/* 焦点样式 */
:focus {
    outline: 2px solid rgba(255, 45, 45, 0.5);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* 打印样式 */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    a {
        color: blue !important;
        text-decoration: underline !important;
    }
}