/* ============================================================
   Shfrah — shared styles
   Loaded on every page alongside the Tailwind CDN.
   Tailwind does most of the work; this file adds what Tailwind
   doesn't: fonts, scrollbar, keyframes, reduced-motion guards.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #F5F4F0; }
.dark ::-webkit-scrollbar-track { background: #0A0D10; }
::-webkit-scrollbar-thumb { background: #D4D4D4; border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: #333333; }
::-webkit-scrollbar-thumb:hover { background: #A3A3A3; }
.dark ::-webkit-scrollbar-thumb:hover { background: #555555; }

/* ---------- Iconify fix ---------- */
iconify-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Body font switching ---------- */
html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
html[lang="en"] body { font-family: 'Inter', 'IBM Plex Sans Arabic', sans-serif; }

/* ---------- Arabic typography: no letter-spacing ----------
   Arabic script connects glyphs naturally. Any tracking breaks
   ligatures and creates visible gaps between joined letters. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] blockquote,
html[lang="ar"] figcaption,
html[lang="ar"] label,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* ---------- Body scroll lock (for mobile nav) ---------- */
body.no-scroll { overflow: hidden; }

/* ---------- Sticky nav shrink state ---------- */
.site-nav {
    transition: padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-nav.nav-scrolled {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(245, 244, 240, 0.72);
    backdrop-filter: saturate(140%) blur(16px);
    -webkit-backdrop-filter: saturate(140%) blur(16px);
}
.dark .site-nav.nav-scrolled {
    background-color: rgba(10, 13, 16, 0.72);
}

/* ---------- Marquee ----------
   Force LTR direction so the animation is predictable on RTL pages.
   Each .marquee__track is a self-contained duplicate. Animating by
   -100% moves one full copy out, while its sibling (identical copy)
   is still in view — giving a seamless reset. */
.marquee {
    direction: ltr;
    display: flex;
    overflow: hidden;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 3rem;
    padding-inline-end: 3rem;
    animation: marquee-scroll 40s linear infinite;
    will-change: transform;
}
.marquee--reverse .marquee__track {
    animation-direction: reverse;
    animation-duration: 55s;
}
.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
    font-weight: 300;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- Reveal animation primitives ---------- */
.reveal-word {
    display: inline-block;
    transform: translateY(120%) rotate(2deg);
    will-change: transform;
}
.scroll-animate-target {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    will-change: opacity, transform;
}
.scroll-animate-target.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Services tabs ---------- */
.services-tab {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
}
.services-tab[aria-selected="true"] {
    color: #0A0D10;
}
.dark .services-tab[aria-selected="true"] {
    color: #ffffff;
}
.services-tab[aria-selected="true"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: currentColor;
    border-radius: 3px;
}
.services-panel {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.services-panel[hidden] {
    display: none;
}

/* ---------- Case study tile hover ---------- */
.work-tile {
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.work-tile:hover { transform: translateY(-6px); }
.work-tile__cover { transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }
.work-tile:hover .work-tile__cover { transform: scale(1.04); }

/* ---------- 404 glitch ---------- */
.glitch-digit {
    display: inline-block;
    animation: glitch-shift 2.4s infinite ease-in-out;
}
.glitch-digit:nth-child(2) { animation-delay: 0.2s; }
.glitch-digit:nth-child(3) { animation-delay: 0.4s; }
@keyframes glitch-shift {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-2px, 1px); }
    40%      { transform: translate(2px, -1px); }
    60%      { transform: translate(-1px, -2px); }
    80%      { transform: translate(1px, 2px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .marquee__track { animation: none; }
    .reveal-word { transform: none; }
    .scroll-animate-target { opacity: 1; transform: none; }
}