/* =========================================================
   JETINV FRONT-END SMOOTH UI TRANSITIONS & REVEAL ENGINE
   (Applied exclusively to customer-facing pages)
   ========================================================= */

/* =========================================================
   ANIMATION TIMING CONTROLS (Change values here)
   - Increase seconds (e.g. 1.0s, 1.2s) for slower, more dramatic motion
   - Decrease seconds (e.g. 0.3s, 0.4s) for faster, snappier motion
   ========================================================= */
:root {
    --fe-page-fade-in:   0.65s;  /* Whole page fade-in speed on load */
    --fe-page-fade-out:  0.25s;  /* Whole page fade-out speed when clicking a link */
    --fe-hero-duration:  0.85s;  /* Hero banner text & search box entrance speed */
    --fe-card-reveal:    0.75s;  /* Property, Plan & Emirate cards scroll-reveal speed */
    --fe-reveal-distance: 26px;  /* How far elements slide up from (px) */
    --fe-hover-speed:    0.38s;  /* Card lift speed on mouse hover */
    --fe-img-zoom-speed: 0.65s;  /* Property image zoom speed on hover */
    --fe-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1. Top Gold Navigation Progress Bar */
#feProgressBar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #d7a126 0%, #f5d06c 50%, #d7a126 100%);
    box-shadow: 0 0 10px rgba(215, 161, 38, 0.65);
    z-index: 99999;
    pointer-events: none;
    transition: width var(--fe-page-fade-in) var(--fe-easing), opacity 0.3s ease;
}

/* 2. Page-Level Smooth Entry & Exit */
body.fe-smooth-ui {
    opacity: 0;
    animation: fePageFadeFallback var(--fe-page-fade-in) ease 0.4s forwards;
    transition: opacity var(--fe-page-fade-in) var(--fe-easing);
}

body.fe-smooth-ui.fe-page-ready {
    opacity: 1;
    animation: none;
}

body.fe-smooth-ui.fe-page-leaving {
    opacity: 0;
    transition: opacity var(--fe-page-fade-out) ease-out;
}

@keyframes fePageFadeFallback {
    to { opacity: 1; }
}

/* 3. Scroll-Reveal Elements (Staggered & Smooth) */
.fe-reveal {
    opacity: 0;
    transform: translateY(var(--fe-reveal-distance));
    transition:
        opacity var(--fe-card-reveal) var(--fe-easing),
        transform var(--fe-card-reveal) var(--fe-easing),
        box-shadow var(--fe-hover-speed) var(--fe-easing),
        border-color 0.25s ease;
    transition-delay: var(--fe-delay, 0ms);
    will-change: opacity, transform;
}

.fe-reveal.fe-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Banner Content Smooth Entrance */
.fe-hero-animate > * {
    opacity: 0;
    transform: translateY(var(--fe-reveal-distance));
    animation: feHeroSlideUp var(--fe-hero-duration) var(--fe-easing) forwards;
}

.fe-hero-animate > *:nth-child(1) { animation-delay: 0.08s; }
.fe-hero-animate > *:nth-child(2) { animation-delay: 0.18s; }
.fe-hero-animate > *:nth-child(3) { animation-delay: 0.28s; }
.fe-hero-animate > *:nth-child(4) { animation-delay: 0.38s; }

@keyframes feHeroSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 4. Interactive Card & Image Hover Micro-Transitions */
.properties-responsive-grid > div {
    transition:
        opacity var(--fe-card-reveal) var(--fe-easing),
        transform var(--fe-hover-speed) var(--fe-easing),
        box-shadow var(--fe-hover-speed) var(--fe-easing),
        border-color 0.3s ease !important;
}

.properties-responsive-grid > div.fe-visible:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 34px rgba(7, 24, 39, 0.13) !important;
    border-color: rgba(215, 161, 38, 0.55) !important;
}

.properties-responsive-grid > div > div:first-child {
    overflow: hidden;
}

.properties-responsive-grid > div > div:first-child img {
    transition: transform var(--fe-img-zoom-speed) var(--fe-easing);
}

.properties-responsive-grid > div:hover > div:first-child img {
    transform: scale(1.06);
}

/* Advertising Plans Cards Hover */
.plans-responsive-grid > div {
    transition:
        opacity var(--fe-card-reveal) var(--fe-easing),
        transform var(--fe-hover-speed) var(--fe-easing),
        box-shadow var(--fe-hover-speed) var(--fe-easing) !important;
}

.plans-responsive-grid > div.fe-visible:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 38px rgba(7, 24, 39, 0.14) !important;
}

/* Emirates Territory Cards Hover */
.emirates-responsive-grid > a {
    transition:
        opacity var(--fe-card-reveal) var(--fe-easing),
        transform var(--fe-hover-speed) var(--fe-easing),
        box-shadow var(--fe-hover-speed) var(--fe-easing),
        border-color 0.25s ease,
        background-color 0.25s ease !important;
}

.emirates-responsive-grid > a.fe-visible:hover {
    transform: translateY(-4px) !important;
    border-color: var(--uae-gold, #d7a126) !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(7, 24, 39, 0.08) !important;
}

/* Login & Registration Split Screen Smooth Entrance */
body.login-page .brand-content {
    opacity: 0;
    transform: translateX(-22px);
    animation: feSlideRight var(--fe-hero-duration) var(--fe-easing) 0.08s forwards;
}

body.login-page .login-card {
    opacity: 0;
    transform: translateY(var(--fe-reveal-distance));
    animation: feHeroSlideUp var(--fe-hero-duration) var(--fe-easing) 0.16s forwards;
}

@keyframes feSlideRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Smooth Button & Input Interactions */
body.fe-smooth-ui .btn-gold,
body.fe-smooth-ui .btn-outline-white,
body.fe-smooth-ui .admin-primary-btn,
body.fe-smooth-ui .login-button,
body.fe-smooth-ui .btn-icon {
    transition:
        transform 0.22s var(--fe-easing),
        box-shadow 0.22s var(--fe-easing),
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease;
}

body.fe-smooth-ui .btn-gold:hover,
body.fe-smooth-ui .admin-primary-btn:hover,
body.fe-smooth-ui .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(7, 24, 39, 0.18);
}

body.fe-smooth-ui input,
body.fe-smooth-ui select,
body.fe-smooth-ui textarea {
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

body.fe-smooth-ui input:focus,
body.fe-smooth-ui select:focus,
body.fe-smooth-ui textarea:focus {
    outline: none;
    border-color: var(--uae-gold, #d7a126) !important;
    box-shadow: 0 0 0 3px rgba(215, 161, 38, 0.16);
}

/* Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    body.fe-smooth-ui,
    .fe-reveal,
    .fe-hero-animate > *,
    body.login-page .brand-content,
    body.login-page .login-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}