/* Custom Animations for Modern Islamic Luxury Design */

/* Smooth Reveal Animation */
@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.reveal-text {
    animation: revealUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0; /* Start hidden */
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }

/* Marquee Animation (Infinite Scroll) */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: inline-flex;
    animation: scrollLeft 30s linear infinite;
    gap: 4rem;
}

.marquee-content:hover {
    animation-play-state: paused;
}

/* Luxury Grain Texture */
.luxury-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Typography Enhancements */
.font-editorial {
    font-feature-settings: "liga" 1, "dlig" 1; /* Ligatures for serif */
    letter-spacing: -0.02em; /* Tighter for display text */
}

/* Gold Text Gradient */
.text-gold-gradient {
    background: linear-gradient(135deg, #C5A028 0%, #E6C868 40%, #BF953F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0px 2px 4px rgba(0,0,0,0.1);
}