/* =============================================================================
   SANARIC — custom styles & animations
   (Tailwind handles layout/utility; this file adds motion & a few extras.)
   ========================================================================== */

:root {
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------------ *
 |  Brand helpers (colours come from config/site.php via CSS vars)
 * ------------------------------------------------------------------ */
.brand-gradient {
    background: linear-gradient(135deg, var(--c-ink) 0%, var(--c-primary-dark) 45%, var(--c-primary) 100%);
}

/* Small uppercase label above section titles (amber bar like the profile) */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-primary-dark);
}
.section-label::before {
    content: "";
    width: 1.75rem;
    height: 0.3rem;
    background: var(--c-accent);
}
html[dir="rtl"] .section-label { letter-spacing: 0; }

/* ------------------------------------------------------------------ *
 |  Scroll-reveal (activated by IntersectionObserver in main.js)
 * ------------------------------------------------------------------ */
/* Content starts faded + blurred and comes into focus as it enters view */
[data-reveal] {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(36px);
    transition: opacity 0.9s ease,
                filter 0.9s ease,
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
[data-reveal].is-visible {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* Directional / scale variants */
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.9); }
[data-reveal].is-visible[data-reveal="left"],
[data-reveal].is-visible[data-reveal="right"],
[data-reveal].is-visible[data-reveal="zoom"] { transform: none; }

/* Stagger children after the parent becomes visible */
[data-stagger] > * {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(28px);
    transition: opacity 0.7s ease,
                filter 0.7s ease,
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
}
[data-stagger].is-visible > * {
    opacity: 1;
    filter: blur(0);
    transform: none;
}
/* after the reveal finishes (main.js adds .reveal-done), drop the delays
   so hover effects respond instantly */
[data-stagger].reveal-done > * { transition-delay: 0s !important; }
/* keep the hover lift working on staggered cards once they're revealed */
[data-stagger].is-visible > .card-lift:hover { transform: translateY(-8px); }

/* Images: blurred while downloading, sharpen once loaded (see main.js) */
img.img-blur {
    filter: blur(18px);
    transition: filter 0.8s ease, transform 0.5s ease;
}
img.img-blur.is-loaded { filter: blur(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.40s; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 0.47s; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 0.54s; }
[data-stagger].is-visible > *:nth-child(9) { transition-delay: 0.61s; }

/* ------------------------------------------------------------------ *
 |  Adaptive header
 |  Default (transparent over the hero/banner) = white content.
 |  .is-solid (added on scroll by main.js)       = dark content.
 * ------------------------------------------------------------------ */
#site-header .logo-light,
#site-header .logo-dark,
#site-header .nav-link {
    transition: color 0.3s ease, opacity 0.3s ease;
}

#site-header:not(.is-solid) .logo-dark  { opacity: 0; }
#site-header:not(.is-solid) .nav-link   { color: rgba(255, 255, 255, 0.9); }
#site-header:not(.is-solid) .nav-link:hover,
#site-header:not(.is-solid) .nav-link.is-active { color: var(--c-accent); }

#site-header.is-solid .logo-light { opacity: 0; }
#site-header.is-solid .logo-dark  { opacity: 1; }
#site-header.is-solid .nav-link   { color: var(--c-ink); }
#site-header.is-solid .nav-link:hover,
#site-header.is-solid .nav-link.is-active { color: var(--c-primary); }

/* Nav underline effect (always shown for the active page) */
.nav-link::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: currentColor;
    transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

/* ------------------------------------------------------------------ *
 |  Keyframe animations
 * ------------------------------------------------------------------ */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

@keyframes modalIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.lang-banner { animation: modalIn 0.5s var(--ease-out-back) 1s both; }

@keyframes fadeInUp {
    from { opacity: 0; filter: blur(12px); transform: translateY(30px); }
    to   { opacity: 1; filter: blur(0);    transform: none; }
}
.animate-in { animation: fadeInUp 0.9s ease both; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }

/* Animated gradient blob backgrounds */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, -30px) scale(1.1); }
    66%      { transform: translate(-15px, 20px) scale(0.95); }
}
.animate-blob { animation: blob 14s ease-in-out infinite; }

/* ------------------------------------------------------------------ *
 |  Misc
 * ------------------------------------------------------------------ */
/* Comfortable line-height for Arabic */
html[dir="rtl"] body { line-height: 1.85; }

/* Prevent horizontal scroll from decorative / reveal transforms */
html, body { overflow-x: hidden; max-width: 100%; }

/* Card hover lift */
.card-lift {
    /* opacity + filter included so staggered cards still blur/fade in */
    transition: transform 0.35s ease, box-shadow 0.35s ease, opacity 0.7s ease, filter 0.7s ease;
}
.card-lift:hover { transform: translateY(-8px); }


/* Arabic uses Cairo instead of Inter (previously switched in the Tailwind
   runtime config). Specificity beats the compiled .font-sans / html rules. */
html[dir="rtl"],
html[dir="rtl"] .font-sans { font-family: 'Cairo', sans-serif; }

/* Visible keyboard focus */
a:focus-visible, button:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 0.5rem;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    [data-reveal], [data-stagger] > *, img.img-blur {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}