/* 首页样式 */

/* 确保特殊字符正确显示 */
.math-symbols {
    font-family: 'Times New Roman', 'Arial Unicode MS', 'Lucida Sans Unicode', sans-serif;
}

/* 头像容器居中优化 */
.avatar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.avatar-container i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 自定义动画类 */
@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8,0,1,1);
    }
    50% {
        transform: none;
        animation-timing-function: cubic-bezier(0,0,0.2,1);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0,0,0.2,1) infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
}

/* 添加动画延迟类 */
.animate-delay-500 {
    animation-delay: 0.5s;
}

.animate-delay-1000 {
    animation-delay: 1s;
}

.animate-delay-1500 {
    animation-delay: 1.5s;
}

.animate-delay-2000 {
    animation-delay: 2s;
}

/* 确保装饰元素在动画时不影响布局 */
.absolute {
    pointer-events: none;
}

/* 古诗推荐区域特殊样式 */
.group:hover .group-hover\:scale-150 {
    transform: scale(1.5);
}

.group:hover .group-hover\:rotate-12 {
    transform: rotate(12deg);
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* 动画和过渡效果 */
.transition-transform {
    transition-property: transform;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.transition-all {
    transition-property: all;
}

.transform {
    transform: translate(0, 0);
}

/* 额外的装饰元素动画 */
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-delay-1000 {
    animation-delay: 1s;
}

.animate-delay-2000 {
    animation-delay: 2s;
}

/* Tailwind CSS 兼容样式 */
.transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
}

.duration-300 {
    transition-duration: 300ms;
}

.duration-500 {
    transition-duration: 500ms;
}

.transition-all {
    transition-property: all;
}

.transition-opacity {
    transition-property: opacity;
}

.transition-transform {
    transition-property: transform;
}

.transform {
    transform: translate(0, 0);
}

.translate-x-16 {
    transform: translateX(4rem);
}

.-translate-y-16 {
    transform: translateY(-4rem);
}

.-translate-x-12 {
    transform: translateX(-3rem);
}

.translate-y-12 {
    transform: translateY(3rem);
}

.translate-x-1 {
    transform: translateX(0.25rem);
}

.rotate-12 {
    transform: rotate(12deg);
}

.scale-150 {
    transform: scale(1.5);
}

.opacity-0 {
    opacity: 0;
}

.opacity-30 {
    opacity: 0.3;
}

.opacity-70 {
    opacity: 0.7;
}

.group:hover .group-hover\:opacity-30 {
    opacity: 0.3;
}

.group:hover .group-hover\:scale-150 {
    transform: scale(1.5);
}

.group:hover .group-hover\:rotate-12 {
    transform: rotate(12deg);
}

.group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
}

/* 渐变背景样式 */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.to-blue-700 {
    --tw-gradient-to: #1d4ed8;
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.to-blue-600 {
    --tw-gradient-to: #2563eb;
}

.from-green-500 {
    --tw-gradient-from: #10b981;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
}

.to-green-600 {
    --tw-gradient-to: #059669;
}

.from-green-500 {
    --tw-gradient-from: #10b981;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0));
}

.to-green-700 {
    --tw-gradient-to: #047857;
}

.from-yellow-500 {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
}

.to-yellow-600 {
    --tw-gradient-to: #d97706;
}

.from-yellow-500 {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
}

.to-yellow-700 {
    --tw-gradient-to: #b45309;
}

.from-purple-500 {
    --tw-gradient-from: #8b5cf6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}

.to-purple-700 {
    --tw-gradient-to: #6d28d9;
}

.from-purple-500 {
    --tw-gradient-from: #8b5cf6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(139, 92, 246, 0));
}

.to-purple-600 {
    --tw-gradient-to: #7c3aed;
}

.from-amber-500 {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
}

.to-amber-600 {
    --tw-gradient-to: #d97706;
}

.from-orange-500 {
    --tw-gradient-from: #f97316;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
}

.to-orange-600 {
    --tw-gradient-to: #ea580c;
}

.from-rose-500 {
    --tw-gradient-from: #f43f5e;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(244, 63, 94, 0));
}

.to-rose-600 {
    --tw-gradient-to: #e11d48;
}

.from-blue-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-indigo-600 {
    --tw-gradient-to: #4f46e5;
}

.from-blue-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-indigo-700 {
    --tw-gradient-to: #4338ca;
}

.from-amber-500 {
    --tw-gradient-from: #f59e0b;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245, 158, 11, 0));
}

.to-orange-600 {
    --tw-gradient-to: #ea580c;
}

.from-amber-600 {
    --tw-gradient-from: #d97706;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0));
}

.to-orange-700 {
    --tw-gradient-to: #c2410c;
}

/* 阴影效果样式 */
.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 其他实用类 */
.rounded-bl-full {
    border-bottom-left-radius: 9999px;
}

.rounded-tr-full {
    border-top-right-radius: 9999px;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.rounded-2xl {
    border-radius: 1rem;
}

.rounded-full {
    border-radius: 9999px;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.flex {
    display: flex;
}

.overflow-hidden {
    overflow: hidden;
}

.pointer-events-none {
    pointer-events: none;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.z-10 {
    z-index: 10;
}

.z-50 {
    z-index: 50;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .text-4xl {
        font-size: 2.25rem;
    }
    
    .text-3xl {
        font-size: 1.875rem;
    }
    
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .text-4xl {
        font-size: 2rem;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    
    .px-8 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}