/* Explain: Base page behavior, typography, animated luxury background */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
    scroll-padding-top: 8.75rem;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    text-rendering: geometricPrecision;
    background-color: var(--background-color);
    color: var(--text-color);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Cinematic Animated Background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(-45deg, #050508, #120b1f, #21123d, #08080c);
    background-size: 400% 400%;
    animation: luxuryGradient 25s ease infinite;
    will-change: background-position;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(109, 66, 199, 0.12) 0%, transparent 50%);
    animation: pulseGlow 12s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform, opacity;
}

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

@keyframes pulseGlow {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.1); }
}

::selection {
    background: var(--primary-color);
    color: #000;
}

img {
    max-width: 100%;
    display: block;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* RTL Adjustments */
html[dir="rtl"] {
    --font-heading: 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
}
html[dir="rtl"] .fa-arrow-left { transform: rotate(180deg); }
html[dir="rtl"] .fa-arrow-right { transform: rotate(180deg); }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
html[dir="rtl"] .pr-4 { padding-right: 1rem; padding-left: 1rem; }
html[dir="rtl"] .pl-10 { padding-left: 1rem; padding-right: 2.5rem; }
html[dir="rtl"] .left-4 { left: auto; right: 1rem; }
html[dir="rtl"] .right-4 { right: auto; left: 1rem; }
html[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: 1.25rem; }