/* Explain: Base reset and typography defaults, including language-specific display logic. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
}

body {
    overflow-x: hidden;
}

html[lang="en"] .ar-only {
    display: none !important;
}

html[lang="ar"] .en-only {
    display: none !important;
}

html[lang="ar"] {
    text-align: right;
    --font-heading: var(--font-arabic);
    --font-body: var(--font-arabic);
}

/* Adjust typography for Arabic (Cairo requires more vertical space and no extra letter spacing) */
html[lang="ar"] .tracking-wide,
html[lang="ar"] .tracking-wider,
html[lang="ar"] .tracking-widest,
html[lang="ar"] .tracking-tight {
    letter-spacing: 0 !important;
}

html[lang="ar"] .leading-none,
html[lang="ar"] .leading-tight,
html[lang="ar"] .leading-snug {
    line-height: 1.5 !important;
}

html[lang="ar"] .leading-relaxed,
html[lang="ar"] .leading-loose {
    line-height: 1.8 !important;
}

@keyframes revealUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal-up.js-reveal-active:not(.is-visible) {
    opacity: 0;
}

.reveal-up.is-visible {
    animation: revealUp 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}