/*
Theme Name: 玄熠数字视觉
Theme URI: https://xuanyi.com
Author: 玄熠数字视觉科技（深圳）有限公司
Author URI: https://xuanyi.com
Description: 玄熠数字视觉官方网站主题
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xuanyi
Tags: responsive, custom-header, custom-menu, featured-images, translation-ready
*/

/* 导入Tailwind CSS */
@import url('https://cdn.tailwindcss.com');

/* 导入Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 自定义样式 */
body {
    font-family: 'Noto Sans SC', sans-serif;
}

.navbar {
    transition: all 0.3s ease;
}

.navbar.scrolled {
    background-color: rgba(26, 26, 46, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.hero-section {
    position: relative;
    overflow: hidden;
}

.service-card {
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.work-card {
    overflow: hidden;
}

.work-card img {
    transition: transform 0.5s ease;
}

.work-card:hover img {
    transform: scale(1.1);
}

.service-section {
    position: relative;
    background: linear-gradient(135deg, #0B63E5 0%, #1E88E5 100%);
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-detail {
    transition: all 0.3s ease;
}

.service-icon {
    transition: all 0.3s ease;
}

.service-detail:hover .service-icon {
    transform: scale(1.1);
}

.works-section {
    background: linear-gradient(rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.9)), url('/wp-content/themes/xuanyi/images/ai-generated/473663c3fc34d399fa88cb011e6e9ed1.jpg') center/cover no-repeat;
    height: 60vh;
    position: relative;
}

.work-card {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.work-card img {
    transition: transform 0.5s ease;
}

.work-card:hover img {
    transform: scale(1.1);
}

.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 26, 46, 0.9) 0%, rgba(26, 26, 46, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
}

.overlay-content {
    max-width: 300px;
}

.work-card:hover .work-overlay {
    opacity: 1;
}

.filter-btn {
    transition: all 0.3s ease;
}

.filter-btn.active {
    background-color: #0B63E5;
    color: white;
}

.work-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.work-modal.active {
    opacity: 1;
    visibility: visible;
}

.work-modal-content {
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    background-color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.work-modal.active .work-modal-content {
    transform: scale(1);
}

.work-modal-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background-color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.work-modal-close:hover {
    background-color: #0B63E5;
    color: white;
}

/* 自定义Tailwind配置 */
@layer utilities {
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    .bg-gradient-blue {
        background: linear-gradient(135deg, #0B63E5 0%, #1E88E5 100%);
    }
}

/* 轮播图样式 */
.carousel-container {
    position: relative;
    height: 100vh;
    min-height: 600px;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}

.carousel-item.active {
    opacity: 1;
    visibility: visible;
}

.carousel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel-bg img,
.carousel-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-dot {
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.carousel-dot:hover {
    transform: scale(1.2);
}

.carousel-dot.opacity-100 {
    transform: scale(1.3);
}

/* 英雄区域高度调整 */
.hero-section {
    height: 100vh;
    min-height: 600px;
}

/* 左右导航按钮样式 */
.carousel-prev,
.carousel-next {
    cursor: pointer;
    user-select: none;
}

.carousel-prev:hover,
.carousel-next:hover {
    transform: translateY(-50%) scale(1.1);
}