/* Tailwind 自定义工具类 */
@layer utilities {
    .content-auto { content-visibility: auto; }
    .card-hover { @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1; }
    .text-gradient { @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent; }
    /* 优化玻璃效果：平衡透明度与对比度 */
    .glass-effect { @apply bg-white/60 backdrop-blur-lg border border-white/40 shadow-lg; } /* 提高背景不透明度至50%，增强文字对比 */
    .glass-effect-strong { @apply bg-white/55 backdrop-blur-xl border border-white/45 shadow-xl; }
    .link-container { @apply relative cursor-pointer; }
    .pulse-animation { animation: pulse 2s infinite; }
    .fade-in { animation: fadeIn 0.8s ease forwards; }
    .scale-in { animation: scaleIn 0.5s ease forwards; }
    .shine-effect::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: rotate(30deg); animation: shine 6s infinite; }
    .slide-in { animation: slideIn 0.5s ease forwards; }
    .progress-animation { animation: progress 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    .highlight { @apply bg-primary/30 px-1 rounded; }
}

/* 全局基础样式 */
body { 
    font-family: ALKATIP Basma Tom; 
    margin: 0; 
    padding: 0; 
    min-height: 100vh; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3); /* 新增文字阴影，增强辨识度 */
}
* { box-sizing: border-box; }

/* 背景图样式 - 提高亮度，减少暗度 */
.bg-image-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.bg-image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: url('/static/image/ulinix_beijingtu.jpeg'); 
    background-size: cover; 
    background-position: center; 
    filter: brightness(0.7) saturate(1.2); /* 亮度从0.5提高到0.7，减少暗度 */
}
.content-wrapper { position: relative; z-index: 1; }

/* 顶部区域背景优化 - 降低黑色透明度，增强文字对比 */
.top-content-area { @apply bg-black/20 backdrop-blur-md; } /* 黑色透明度从40%降至20% */

/* 滚动条样式 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); }
::-webkit-scrollbar-thumb { background: rgba(255, 94, 91, 0.7); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 94, 91, 0.9); }

/* 骨架屏样式 */
.image-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; }
/* 高级卡片样式 */
.premium-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-radius: 1rem; position: relative; overflow: hidden; }
.premium-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #FF5E5B, #FF9800, #FFEB3B, #4CAF50, #2196F3, #9C27B0); background-size: 300% 100%; animation: gradientShift 8s ease infinite; }
.premium-card:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2), 0 10px 10px -5px rgba(0,0,0,0.1); }

/* 分类导航样式 - 增强顶部标题区域背景 */
.category-section { padding: 2rem 0; }
.category-header { margin-bottom: 1.5rem; padding: 0.8rem 1rem; border-bottom: 2px solid rgba(255,255,255,0.2); @apply bg-black/40 rounded-lg; } /* 为分类标题添加背景 */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.category-card { border-radius: 1rem; padding: 1.5rem; transition: all 0.4s ease; border: 1px solid rgba(255,255,255,0.2); display: flex; flex-direction: column; backdrop-filter: blur(5px); background: rgba(255,255,255,0.08); }
.category-card:hover { transform: translateY(-7px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); }
.category-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: white; text-align: center; padding: 1rem 0; }
.category-link { align-items: center; padding: 0.5rem 0; color: rgba(255,255,255,0.9); transition: all 0.2s ease; font-size: 0.95rem; }
.category-link:hover { color: white; transform: translateX(-5px); }
.category-link i { margin-left: 0.5rem; font-size: 0.8rem; opacity: 0.8; }

/* 页脚样式 */
.footer { background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.2); color: white; overflow: hidden; position: relative; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #FF5E5B, #FF9800, #FFEB3B, #4CAF50, #2196F3, #9C27B0); background-size: 300% 100%; animation: gradientShift 8s ease infinite; }
.footer-content { padding: 2.5rem 0 1.5rem; }
.footer-column { margin-bottom: 2rem; }
.footer-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1.25rem; position: relative; padding-bottom: 0.5rem; }
.footer-title::after { content: ''; position: absolute; bottom: 0; right: 0; width: 40px; height: 2px; background: #FF5E5B; }
.footer-description { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; line-height: 1.6; }
.footer-link a { color: rgba(255,255,255,0.85); transition: all 0.2s ease; align-items: center; }
.footer-link a:hover { color: white; transform: translateX(-5px); }
.footer-link a i { margin-left: 0.5rem; font-size: 0.8rem; }
.social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.social-link { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); color: white; transition: all 0.3s ease; }
.social-link:hover { transform: translateY(-3px) scale(1.05); background: #FF5E5B; }
.footer-bottom { padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 1.5rem; }
.copyright { color: rgba(255,255,255,0.7); text-align: center; font-size: 0.9rem; }

/* 视频播放区域样式 */
.video-container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 0.75rem; }
.video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.video-player.active { display: block; animation: fadeIn 0.8s ease forwards; }
.video-info { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 1.5rem 1rem 1rem; z-index: 10; }
.video-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: white; }
.video-description { font-size: 0.9rem; color: rgba(255,255,255,0.9); }
.video-controls { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; z-index: 10; }
.video-control-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; }
.video-control-btn:hover { background: rgba(0,0,0,0.8); transform: scale(1.1); }

/* 电影列表CSS */
#F9.bg { padding: 5px; max-width: 100%; margin: 20px auto; width: 100%; }
.eynak-list { display: flex; flex-wrap: nowrap; gap: 25px; justify-content: center; align-items: center; overflow-x: auto; padding: 15px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 94, 91, 0.7) rgba(255,255,255,0.2); }
.eynak-list::-webkit-scrollbar { height: 6px; }
.eynak-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); border-radius: 10px; }
.eynak-list::-webkit-scrollbar-thumb { background: rgba(255, 94, 91, 0.7); border-radius: 10px; }
.eynak-list-item { width: 265px; background-color: rgba(255,255,255,0.15); border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.15); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); }
.eynak-list-item:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.eynak-list-item a { text-decoration: none; color: inherit; display: block; }
.eynak-img-box { position: relative; overflow: hidden; width: 100%; padding-top: 135%; }
.eynak-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.eynak-list-item:hover .eynak-img { transform: scale(1.1); }
.eynak-img-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.eynak-list-item:hover .eynak-img-mask { opacity: 1; }
.eynak-play-icon { width: 50px; height: 50px; filter: invert(1); }
.eynak-info { padding: 10px; text-align: center; }
.eynak-item-title { font-size: 17px; font-weight: bold; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ffffff !important; }
.eynak-item-cat { font-size: 12px; color: #ffee00 !important; }

/* 跳转页面样式 - 高级感设计 */
.redirect-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.92); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.redirect-page.active { opacity: 1; pointer-events: all; }
.redirect-icon { font-size: 4rem; background: linear-gradient(90deg, #FF5E5B, #FF9800, #FFEB3B, #4CAF50, #2196F3, #9C27B0); background-clip: text; -webkit-background-clip: text; color: transparent; margin-bottom: 1.5rem; animation: pulse 1.5s infinite, scaleIn 0.8s ease-out; }
.redirect-message { color: white; font-size: 1.2rem; text-align: center; max-width: 80%; margin-bottom: 2.5rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease-out 0.3s forwards; }
.redirect-progress-container { width: 80%; max-width: 500px; height: 6px; background-color: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.3) inset; opacity: 0; animation: fadeIn 0.6s ease-out 0.5s forwards; }
.redirect-bar { height: 100%; background: linear-gradient(90deg, #FF5E5B, #FF9800, #FFEB3B, #4CAF50, #2196F3, #9C27B0); width: 0%; border-radius: 3px; position: relative; overflow: hidden; }
.redirect-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: rgba(255,255,255,0.4); transform: skewX(-20deg) translateX(-100%); animation: shineEffect 2s infinite; }
.redirect-skip { color: rgba(255,255,255,0.9); margin-top: 1.5rem; cursor: pointer; text-decoration: underline; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.8s ease-out 0.7s forwards; transition: all 0.3s ease; }
.redirect-skip:hover { color: white; transform: translateY(10px) scale(1.05); }
.redirect-domain { position: absolute; bottom: 2rem; color: rgba(255,255,255,0.7); font-size: 0.9rem; opacity: 0; animation: fadeIn 0.8s ease-out 1s forwards; }

/* 全局文字颜色修正 */
body, h1, h2, h3, h4, h5, h6, p, span, div, a, li { color: white !important; }

/* 随机一言字体调整 */
#random-sentence { font-size: 1.1rem !important; line-height: 1.6; color: rgba(255,255,255,0.9) !important; }

/* 动画定义 */
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.03); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes shine { 0% { transform: translateX(-100%) rotate(30deg); } 100% { transform: translateX(100%) rotate(30deg); } }
@keyframes shineEffect { 0% { transform: skewX(-20deg) translateX(-100%); } 100% { transform: skewX(-20deg) translateX(350%); } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes progress { 0% { width: 0%; } 100% { width: 100%; } }

/* 手机端适配 */
@media only screen and (max-width: 767px) {
    #F9.bg { padding: 5px; max-width: 100%; margin: 4px; }
    .eynak-list { gap: 10px; }
    .eynak-list-item { width: calc((100% - 20px) / 3); }
    .eynak-play-icon { width: 35px; height: 35px; }
    .eynak-item-title { font-size: 8px; }
    .eynak-item-cat { font-size: 6px; }
    /* 移动端增强顶部背景 */
    .category-header { @apply bg-black/50; }
}