/* ============================================
   BACKGROUND PATTERNS - Đa dạng kiểu nền
   ============================================ */

/* 1. Grid Pattern - Lưới đơn giản */
.bg-grid-primary {
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(#e2e8f0 1px, transparent 1px),
        linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
    background-size: 30px 30px;
}

.bg-grid-dark {
    background-color: #1a1a1a;
    background-image: 
        linear-gradient(#333 1px, transparent 1px),
        linear-gradient(90deg, #333 1px, transparent 1px);
    background-size: 30px 30px;
}

/* 2. Diagonal Lines - Đường chéo */
.bg-diagonal-light {
    background-color: #f5f7fa;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(128, 3, 3, 0.05) 10px,
            rgba(128, 3, 3, 0.05) 20px
        );
}

.bg-diagonal-gold {
    background-color: #faf6f1;
    background-image: 
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 10px,
            rgba(212, 175, 55, 0.08) 10px,
            rgba(212, 175, 55, 0.08) 20px
        );
}

/* 3. Dots Pattern - Chấm tròn */
.bg-dots-primary {
    background-color: #f0f4f8;
    background-image: 
        radial-gradient(circle, rgba(128, 3, 3, 0.1) 1px, transparent 1px);
    background-size: 25px 25px;
    background-position: 0 0;
}

.bg-dots-gold {
    background-color: #fffbf0;
    background-image: 
        radial-gradient(circle, rgba(212, 175, 55, 0.12) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
}

/* 4. Wave Pattern - Sóng nhẹ */
.bg-wave-light {
    background-color: #f8fafc;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cpath d='M0,150 Q300,75 600,150 T1200,150 L1200,300 L0,300 Z' fill='rgba(128,3,3,0.03)'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 800px 200px;
    background-position: 0 20px;
}

/* 5. Noise Pattern - Texture nhiễu */
.bg-noise-subtle {
    background-color: #fafafa;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='2'/%3E%3C/filter%3E%3Crect width='100' height='100' fill='%23000' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
}

/* 6. Honeycomb Pattern - Tổ ong */
.bg-honeycomb {
    background-color: #f5f7fa;
    background-image: 
        repeating-linear-gradient(90deg, transparent, transparent 35px, rgba(128, 3, 3, 0.05) 35px, rgba(128, 3, 3, 0.05) 70px),
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(212, 175, 55, 0.05) 60px, rgba(212, 175, 55, 0.05) 120px);
    background-size: 70px 120px;
    background-position: 0 0, 35px 60px;
}

/* 7. Gradient Mesh - Lưới gradient */
.bg-gradient-mesh {
    background: linear-gradient(135deg, #fff9f0 0%, #f5f7fa 25%, #faf6f1 50%, #f0f4f8 75%, #fff9f0 100%);
    background-size: 400% 400%;
    animation: gradientMesh 15s ease infinite;
}

@keyframes gradientMesh {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 8. Checkerboard - Bàn cờ */
.bg-checkerboard {
    background-color: #f8f9fa;
    background-image: 
        linear-gradient(45deg, #e8eef8 25%, transparent 25%),
        linear-gradient(-45deg, #e8eef8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e8eef8 75%),
        linear-gradient(-45deg, transparent 75%, #e8eef8 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}

/* 9. Cross Hatching - Gạch chéo */
.bg-crosshatch {
    background-color: #faf6f1;
    background-image: 
        repeating-linear-gradient(0deg, rgba(128, 3, 3, 0.04) 0px, rgba(128, 3, 3, 0.04) 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(90deg, rgba(128, 3, 3, 0.04) 0px, rgba(128, 3, 3, 0.04) 2px, transparent 2px, transparent 8px);
    background-size: 8px 8px;
}

/* 10. Radial Gradient Circles - Tròn gradient */
.bg-radial-circles {
    background-color: #f0f4f8;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(128, 3, 3, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(212, 175, 55, 0.08) 0%, transparent 40%);
}

/* Custom utilities */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #800303, #D4AF37);
}

.hero-bg {
    background-color: #f8fafc;
    background-image: 
        linear-gradient(#e2e8f0 1px, transparent 1px),
        linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
    background-size: 32px 32px;
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* Scroll Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.reveal.delay-100 { transition-delay: 100ms; }
.reveal.delay-200 { transition-delay: 200ms; }
.reveal.delay-300 { transition-delay: 300ms; }

/* Animation Delays for Keyframes */
.delay-100 { animation-delay: 100ms; opacity: 0; }
.delay-200 { animation-delay: 200ms; opacity: 0; }
.delay-300 { animation-delay: 300ms; opacity: 0; }
.delay-400 { animation-delay: 400ms; opacity: 0; }