/* Lucky Dragon Website Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
        line-height: 1.7;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Montserrat', sans-serif;
        line-height: 1.2;
    }
}

@layer components {
    /* 改进的导航栏效果 */
    .nav-link {
        @apply relative py-2 px-1 transition-all duration-300 ease-in-out;
    }
    
    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #E63946, #F4A460);
        transition: width 0.3s ease-in-out;
    }
    
    .nav-link:hover::after,
    .nav-link.active::after {
        width: 100%;
    }

    /* 改进的按钮效果 */
    .hero-cta {
        @apply relative overflow-hidden;
        background: linear-gradient(135deg, #F4A460, #E63946);
        box-shadow: 0 10px 25px rgba(230, 57, 70, 0.3);
    }
    
    .hero-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.5s ease-in-out;
    }
    
    .hero-cta:hover::before {
        left: 100%;
    }

    /* 卡片阴影效果 */
    .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    }
    
    .card-shadow:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    /* 渐变背景 */
    .bg-gradient-dragon {
        background: linear-gradient(135deg, #2C2C2C 0%, #4A4A4A 50%, #E63946 100%);
    }
    
    /* 文字阴影 */
    .text-shadow-lg {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    /* 浮动动画 */
    .animate-float {
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }

    /* 悬停抬起效果 */
    .hover-lift {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(230, 57, 70, 0.4);
    }
}

@layer components {
    .btn-primary {
        @apply bg-dragonRed hover:bg-dragonRed/90 text-white font-semibold px-8 py-3 rounded-full transition-all duration-300 transform hover:scale-105;
    }

    .btn-secondary {
        @apply bg-dragonGold text-dragonBlack font-semibold px-6 py-3 rounded-full hover:bg-white transition-colors;
    }

    .card-hover {
        @apply hover-lift;
    }

    .text-gradient {
        @apply bg-gradient-to-r from-dragonGold to-yellow-400 bg-clip-text text-transparent;
    }

    .nav-hidden {
        transform: translateY(-100%);
    }

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

    .principle-card {
        @apply bg-white p-6 rounded-lg shadow-lg mb-6 hover-lift;
    }

    .roadmap-phase {
        @apply bg-white p-6 rounded-lg shadow-lg mb-6;
    }

    .community-card {
        @apply bg-white p-6 rounded-lg shadow-lg mb-6;
    }
}

@layer utilities {
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .text-shadow-lg {
        text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    }

    .bg-gradient-dragon {
        background: linear-gradient(135deg, #E63946 0%, #D62828 100%);
    }

    .bg-gradient-gold {
        background: linear-gradient(135deg, #F4A460 0%, #E8925C 100%);
    }

    .border-gold {
        border-color: #FFD700;
    }

    .hover-lift {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    .bg-dragonRed {
        background-color: #E63946;
    }

    .bg-dragonGold {
        background-color: #F4A460;
    }

    .bg-dragonBlack {
        background-color: #2C2C2C;
    }

    .bg-dragonGray {
        background-color: #4A4A4A;
    }

    .bg-dragonLight {
        background-color: #FFF8F0;
    }

    .text-dragonRed {
        color: #E63946;
    }

    .text-dragonGold {
        color: #F4A460;
    }

    .text-dragonBlack {
        color: #2C2C2C;
    }

    .text-dragonGray {
        color: #4A4A4A;
    }

    .text-dragonLight {
        color: #FFF8F0;
    }

    .border-dragonRed {
        border-color: #E63946;
    }

    .border-dragonGold {
        border-color: #F4A460;
    }

    .border-dragonBlack {
        border-color: #2C2C2C;
    }

    .font-chinese {
        font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    }

    .font-display {
        font-family: 'Montserrat', sans-serif;
    }

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

    .lang-btn.active {
        background: #F4A460;
        color: #2C2C2C;
        font-weight: 600;
    }

    .lang-btn:hover {
        background: #F4A460;
        color: #2C2C2C;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

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

::-webkit-scrollbar-track {
    background: #2C2C2C;
}

::-webkit-scrollbar-thumb {
    background: #F4A460;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E63946;
}

/* Loading animation */
.loading {
    opacity: 0;
    animation: fadeIn 0.5s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Mobile menu animation */
.mobile-menu-enter {
    transform: translateY(-100%);
    opacity: 0;
}

.mobile-menu-enter-active {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .nav-links {
        display: none;
    }

    .mobile-menu {
        display: block;
    }
}

/* Table styles */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: 600px;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-lg p-6 hover-lift;
}

.card-header {
    @apply border-b border-gray-200 pb-4 mb-4;
}

.card-title {
    @apply text-xl font-bold text-dragonGold;
}

.card-content {
    @apply text-dragonBlack;
}

/* Button styles */
.btn {
    @apply px-6 py-3 rounded-lg font-semibold transition-all duration-300;
}

.btn-primary {
    @apply bg-dragonRed text-white hover:bg-dragonRed/90 shadow-md;
}

.btn-secondary {
    @apply bg-dragonGold text-dragonBlack hover:bg-white border border-dragonGold shadow-md;
}

.btn-outline {
    @apply border-2 border-dragonGold text-dragonGold hover:bg-dragonGold hover:text-dragonBlack;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-dragonGold focus:border-transparent;
}

.form-label {
    @apply block text-sm font-semibold text-dragonBlack mb-2;
}

/* Alert styles */
.alert {
    @apply p-4 rounded-lg mb-4;
}

.alert-warning {
    @apply bg-yellow-50 border-l-4 border-yellow-400 text-yellow-700;
}

.alert-error {
    @apply bg-red-50 border-l-4 border-red-400 text-red-700;
}

.alert-success {
    @apply bg-green-50 border-l-4 border-green-400 text-green-700;
}

.alert-info {
    @apply bg-blue-50 border-l-4 border-blue-400 text-blue-700;
}

/* Utility classes */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.d-flex {
    display: flex;
}

.d-block {
    display: block;
}

.d-none {
    display: none;
}

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

.justify-between {
    justify-content: space-between;
}

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

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .page-break {
        page-break-before: always;
    }
}