/* =========================================================
   DIGITECULTRA — Part 7 Polish (hero media, animations, RTL)
   ========================================================= */

/* ---------- Hero with video/image background ---------- */
.home-hero.has-media {
    position: relative;
    overflow: hidden;
}
.home-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
}
.home-hero-bg video,
.home-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
/* Dark overlay for legibility */
.home-hero.has-media .home-hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 0.7) 50%, rgba(10, 10, 10, 0.95) 100%);
}
.home-hero.has-media .home-hero-inner {
    position: relative; z-index: 1;
}

/* ---------- Logo image in header ---------- */
.site-logo img {
    display: block; max-height: 32px; width: auto;
}

/* ---------- Trust bar logo images ---------- */
.trust-bar-logos { align-items: center; gap: 32px; }
.trust-logo-img { filter: grayscale(100%) brightness(1.4); }
.trust-logo-img:hover { filter: grayscale(0%) brightness(1); }

/* ---------- Scroll-in animations ---------- */
[data-anim] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-anim].is-visible {
    opacity: 1;
    transform: translateY(0);
}
[data-anim="fade"] { transform: none; }
[data-anim="left"] { transform: translateX(-30px); }
[data-anim="left"].is-visible { transform: translateX(0); }
[data-anim="right"] { transform: translateX(30px); }
[data-anim="right"].is-visible { transform: translateX(0); }
[data-anim-delay="100"] { transition-delay: 0.1s; }
[data-anim-delay="200"] { transition-delay: 0.2s; }
[data-anim-delay="300"] { transition-delay: 0.3s; }
[data-anim-delay="400"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim].is-visible {
        opacity: 1; transform: none; transition: none;
    }
}

/* ---------- Loading skeleton (for async content) ---------- */
.dc-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        rgba(255,255,255,0.04) 50%,
        var(--bg-card) 100%
    );
    background-size: 200% 100%;
    animation: dc-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
    min-height: 16px;
}
@keyframes dc-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Form submit loading state ---------- */
.btn[data-loading="true"] {
    pointer-events: none; opacity: 0.7; position: relative;
}
.btn[data-loading="true"]::after {
    content: ''; position: absolute;
    right: 16px; top: 50%; margin-top: -8px;
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,0.3);
    border-top-color: rgba(0,0,0,0.9);
    border-radius: 50%;
    animation: dc-spin 0.7s linear infinite;
}
@keyframes dc-spin {
    to { transform: rotate(360deg); }
}

/* ---------- RTL preparation ---------- */
[dir="rtl"] body { font-family: 'Inter', 'Tajawal', 'Cairo', system-ui, sans-serif; }
[dir="rtl"] .home-hero h1,
[dir="rtl"] .section-title,
[dir="rtl"] .pricing-hero h1,
[dir="rtl"] .case-hero h1,
[dir="rtl"] .team-hero h1 {
    text-align: right;
}
[dir="rtl"] .btn-arrow::after { content: ' ←'; }
[dir="rtl"] .section-link::after { content: ' ←'; }
[dir="rtl"] .ind-stub:hover,
[dir="rtl"] .city-card:hover { transform: translateX(-3px); }
[dir="rtl"] .job-row:hover { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .job-row-arrow { transform: rotate(180deg); }
[dir="rtl"] .case-section-grid,
[dir="rtl"] .audit-grid,
[dir="rtl"] .roi-grid,
[dir="rtl"] .team-hero-grid,
[dir="rtl"] .job-body { direction: rtl; }

/* ---------- Hero scroll cue (decorative) ---------- */
.home-hero.has-media::after {
    content: '↓'; position: absolute;
    bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 2; font-size: 18px;
    color: rgba(255,255,255,0.4);
    animation: dc-bounce 2s infinite;
}
@keyframes dc-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero.has-media::after { animation: none; }
}