/* Explain: Base styles, typography, and animation for marquee effect. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* Custom utility for Middle Eastern inspired geometric pattern overlay */
.pattern-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: radial-gradient(var(--text-color) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: 200%;
    animation: marquee 15s linear infinite;
}