/* ===================================
   SayShan - Motion layer
   Everything here is progressive enhancement: content is visible without JS, and
   all motion is disabled under prefers-reduced-motion.
   =================================== */

/* ---------- Scroll reveal (cards, tiles, FAQ rows) ----------
   Uses the individual `translate` property + a keyframe animation so it never fights a
   component's own `transform` / `transition` (hover lifts, tilt, etc.). */
.js .reveal-ready:not(.is-revealed) { opacity: 0; }

.js .reveal-ready.is-revealed {
    opacity: 1;
    animation: revealUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--reveal-delay, 0ms);
}

@keyframes revealUp {
    from { opacity: 0; translate: 0 28px; scale: 0.985; }
    to   { opacity: 1; translate: 0 0;    scale: 1; }
}

/* ---------- Scroll progress bar ---------- */
#scroll-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 100001;
    pointer-events: none;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--c-pink));
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
[dir="rtl"] #scroll-progress { transform-origin: right center; }

/* ---------- Smooth theme change ----------
   theme.js adds .theme-switching for ~450ms while the visitor toggles the theme. */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease,
                fill 0.4s ease, box-shadow 0.4s ease !important;
}

/* ---------- Micro-interactions ---------- */
.btn-primary:active,
.btn-secondary:active { transform: translateY(0) scale(0.97); }

.mission-image-wrapper img,
.hero-image img,
.contact-image img { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.mission-image-wrapper:hover img,
.hero-image:hover img,
.contact-image:hover img { transform: scale(1.04); }

/* Keyboard focus: always visible, brand-coloured */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* RTL: hover nudges should push toward the reading direction */
[dir="rtl"] #dropdownMenu a:hover,
[dir="rtl"] .mobile-lang-btn:hover { transform: translateX(-4px); }

/* ---------- Respect the visitor's motion setting ---------- */
@media (prefers-reduced-motion: reduce) {
    .js .reveal-ready:not(.is-revealed) { opacity: 1; }
    .js .reveal-ready.is-revealed { animation: none; }
    #scroll-progress { display: none; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* Skip link: first Tab stop, visible only on keyboard focus */
.skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100002;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }

/* RTL: directional icons point the other way */
[dir="rtl"] svg:is(.fa-arrow-right, .fa-arrow-right-long, .fa-arrow-left, .fa-arrow-left-long, .fa-chevron-right, .fa-chevron-left,
                   .fa-angle-right, .fa-angle-left, .fa-angles-right, .fa-caret-right, .fa-circle-arrow-right, .fa-share, .fa-reply,
                   .fa-paper-plane, .fa-rocket) {
    transform: scaleX(-1);
}