/* Jisr — modern home-page polish + animation fixes.
 * Loaded after the Framer export so we can override jank without
 * touching the auto-generated markup.
 */

:root {
    --jisr-teal: #0e5b56;
    --jisr-teal-deep: #0a3f3c;
    --jisr-gold: #c9a35c;
    --jisr-gold-soft: #e3c896;
    --jisr-ink: #0c1a1f;
    --jisr-mist: rgba(14, 91, 86, 0.08);
    --jisr-shadow-sm: 0 6px 18px rgba(10, 63, 60, 0.08);
    --jisr-shadow-md: 0 18px 40px rgba(10, 63, 60, 0.14);
    --jisr-shadow-lg: 0 28px 70px rgba(10, 63, 60, 0.22);
    --jisr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Hero video — give it a graceful fade-in instead of popping in,
 * and make sure the rounded edge stays crisp on Safari. */
video[src*="jisr-hero.mp4"] {
    animation: jisrFadeUp 1.1s var(--jisr-ease) both;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

@keyframes jisrFadeUp {
    from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Logo in the home-page nav — the loogo.png asset has a lot of empty
 * canvas around the mark, so we crop/scale it cleanly inside the
 * Framer-generated logo box (.framer-14dujsc). */
.framer-14dujsc,
.framer-14dujsc * {
    overflow: visible;
}
.framer-14dujsc img,
img[src*="loogo.png"] {
    object-fit: contain !important;
    object-position: center center !important;
    transform: scale(1.85);
    transform-origin: center center;
    image-rendering: -webkit-optimize-contrast;
    transition: transform .4s var(--jisr-ease), filter .3s ease;
}
.framer-14dujsc:hover img {
    transform: scale(1.92);
    filter: drop-shadow(0 6px 14px rgba(10, 63, 60, 0.18));
}

@media (max-width: 810px) {
    .framer-14dujsc img,
    img[src*="loogo.png"] { transform: scale(1.65); }
}

/* Inner-page header logo (header.php → inner-header.php) */
.jisr-home-nav__logo img { object-fit: contain; max-height: 56px; width: auto; }

/* CTA buttons — tighter modern hover with lift + glow.
 * Targets the gold "تواصل معنا" pill, hero CTA, and form submit. */
a[href*="#contact"],
a[href*="contact"]:not(.framer-12d9w2n-container *),
button[type="submit"],
.jisr-home-nav__cta {
    transition:
        transform .35s var(--jisr-ease),
        box-shadow .35s var(--jisr-ease),
        background-color .25s ease,
        color .25s ease,
        filter .25s ease;
    will-change: transform;
}

a[href*="#contact"]:hover,
button[type="submit"]:hover,
.jisr-home-nav__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(201, 163, 92, 0.28);
    filter: saturate(1.05);
}

a[href*="#contact"]:active,
button[type="submit"]:active,
.jisr-home-nav__cta:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(201, 163, 92, 0.22);
}

/* Service cards — they share the same Framer wrapper class. Hover lift
 * + shadow without touching the original transform stack. */
a.framer-q8t2xt,
[data-framer-name="Variant 1"][class*="framer-11ised5"] {
    transition:
        transform .45s var(--jisr-ease),
        box-shadow .45s var(--jisr-ease),
        filter .35s ease !important;
    will-change: transform, box-shadow;
}

a.framer-q8t2xt:hover,
[data-framer-name="Variant 1"][class*="framer-11ised5"]:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: var(--jisr-shadow-md);
    filter: brightness(1.03);
}

/* Sections — gentle reveal. JS toggles `.jisr-in` on scroll. */
[data-framer-name="Sections"] > div,
[data-framer-name="Services"],
[data-framer-name="Partners"],
[data-framer-name="Twitter"],
[data-framer-name="Contact"],
#about-us, #services, #contact, #projects-grid {
    opacity: 1;
}

.jisr-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity .9s var(--jisr-ease),
        transform .9s var(--jisr-ease);
    will-change: transform, opacity;
}
.jisr-reveal.jisr-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Stagger children inside a revealed group. */
.jisr-reveal.jisr-in > * { animation: jisrChildIn .9s var(--jisr-ease) both; }
.jisr-reveal.jisr-in > *:nth-child(1)  { animation-delay: .04s; }
.jisr-reveal.jisr-in > *:nth-child(2)  { animation-delay: .10s; }
.jisr-reveal.jisr-in > *:nth-child(3)  { animation-delay: .16s; }
.jisr-reveal.jisr-in > *:nth-child(4)  { animation-delay: .22s; }
.jisr-reveal.jisr-in > *:nth-child(5)  { animation-delay: .28s; }
.jisr-reveal.jisr-in > *:nth-child(6)  { animation-delay: .34s; }
.jisr-reveal.jisr-in > *:nth-child(7)  { animation-delay: .40s; }
.jisr-reveal.jisr-in > *:nth-child(8)  { animation-delay: .46s; }

@keyframes jisrChildIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Form polish */
input, textarea, select {
    transition:
        border-color .2s ease,
        box-shadow .25s ease,
        background-color .2s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none !important;
    border-color: var(--jisr-teal) !important;
    box-shadow: 0 0 0 4px rgba(14, 91, 86, 0.14) !important;
}

/* Image lazy fade — Framer keeps fully opaque images, but if a card
 * image has `loading=lazy`, briefly fade it on first paint. */
img[loading="lazy"] { animation: jisrFadeOnly .6s ease both; }
@keyframes jisrFadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Mobile tweaks */
@media (max-width: 810px) {
    /* Reduce hero radius so cropping looks nicer on phones */
    video[src*="jisr-hero.mp4"] { border-radius: 28px !important; }

    /* Tap targets */
    .jisr-home-nav a,
    a.framer-q8t2xt { min-height: 44px; }

    /* Lighter card hover on touch — disable transform, keep shadow */
    a.framer-q8t2xt:hover,
    [data-framer-name="Variant 1"][class*="framer-11ised5"]:hover {
        transform: none;
    }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .jisr-reveal { opacity: 1; transform: none; }
}

/* Subtle scrollbar polish (Chromium/Edge) */
@media (pointer: fine) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--jisr-teal), var(--jisr-teal-deep));
        border-radius: 8px;
        border: 2px solid transparent;
        background-clip: padding-box;
    }
    ::-webkit-scrollbar-track { background: transparent; }
}

/* Selection */
::selection { background: var(--jisr-gold); color: var(--jisr-ink); }