/* ================================================================
   Premium UX Touches
   Adds: scroll progress bar, scroll-reveal, button shine, focus
   glow, image fade-in, micro-interactions, custom cursors.
   Loaded last on both layouts. RTL-friendly throughout.
   ================================================================ */

/* ---------- 1. Scroll progress bar (top of viewport) ---------- */
.lux-progress {
    position: fixed;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: transparent;
    z-index: 100;
    pointer-events: none;
}
.lux-progress__fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #e8b73c 0%, #ffd06b 50%, #e8b73c 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(232, 183, 60, 0.85), 0 0 4px rgba(255, 200, 90, 1);
    transition: width 0.12s cubic-bezier(.2,.7,.2,1);
    animation: lux-shimmer 3s linear infinite;
}
@keyframes lux-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* ---------- 2. Scroll-reveal (paired with JS observer) ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1),
                transform .9s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="zoom"]  { transform: scale(0.94); }

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 3. Image lazy fade-in ---------- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(.2,.7,.2,1);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"].is-eager {
    opacity: 1;
}

/* ---------- 4. Gold-button shine sweep on hover ---------- */
.lux-shine,
.bg-gradient-to-r.from-gold-400,
.bg-gradient-to-r.from-gold-500,
button.bg-gradient-to-r.from-gold-400,
a.bg-gradient-to-r.from-gold-400 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.lux-shine::after,
.bg-gradient-to-r.from-gold-400::after,
.bg-gradient-to-r.from-gold-500::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
    transform: translateX(-150%);
    transition: transform 0.85s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
    z-index: 1;
}
.lux-shine:hover::after,
.bg-gradient-to-r.from-gold-400:hover::after,
.bg-gradient-to-r.from-gold-500:hover::after {
    transform: translateX(150%);
}

/* ---------- 5. Premium focus glow on inputs ---------- */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 4px rgba(47, 79, 143, 0.18),
        0 0 18px rgba(47, 79, 143, 0.10) !important;
    border-color: #2f4f8f !important;
    transition: box-shadow .25s cubic-bezier(.2,.7,.2,1),
                border-color .25s cubic-bezier(.2,.7,.2,1);
}
.search-btn input[type="text"]:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Premium focus ring on buttons / links (keyboard nav) */
a:focus-visible, button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(232, 183, 60, 0.55),
        0 0 0 6px rgba(232, 183, 60, 0.18);
    border-radius: inherit;
    transition: box-shadow .2s cubic-bezier(.2,.7,.2,1);
}

/* ---------- 6. Card lift refinement (richer shadow) ---------- */
.card-lift,
.grid-item {
    transition: transform .45s cubic-bezier(.2,.7,.2,1),
                box-shadow .45s cubic-bezier(.2,.7,.2,1),
                border-color .35s cubic-bezier(.2,.7,.2,1);
}
.card-lift:hover {
    transform: translateY(-6px) scale(1.005);
    box-shadow:
        0 6px 14px rgba(11, 24, 50, 0.06),
        0 32px 60px rgba(11, 24, 50, 0.16);
}

/* ---------- 7. Course-card image zoom + subtle tint on hover ---------- */
.card-lift .aspect-video,
.card-lift [class*="aspect-"] {
    overflow: hidden;
    position: relative;
}
.card-lift .aspect-video::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11, 24, 50, 0.18));
    opacity: 0;
    transition: opacity .5s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.card-lift:hover .aspect-video::after {
    opacity: 1;
}

/* ---------- 8. Interactive nav links (underline reveal) ---------- */
header nav.hidden.lg\:flex a,
header nav.hidden.lg\:flex button {
    position: relative;
}
header nav.hidden.lg\:flex > a::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 14px; right: 14px;
    height: 2px;
    background: linear-gradient(90deg, #e8b73c, #ffd06b);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
    border-radius: 2px;
}
header nav.hidden.lg\:flex > a:hover::after {
    transform: scaleX(1);
}

/* ---------- 9. Counter (data-count) — visible while animating ---------- */
[data-count] {
    font-variant-numeric: tabular-nums;
}

/* ---------- 10. Premium gradient border on hover for special cards ---------- */
.lux-border-gradient {
    position: relative;
    background-clip: padding-box;
}
.lux-border-gradient::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    background: conic-gradient(from 0deg, #e8b73c, #2f4f8f, #1a3263, #e8b73c);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.2,.7,.2,1);
}
.lux-border-gradient:hover::before {
    opacity: 1;
    animation: lux-rotate 3s linear infinite;
}
@keyframes lux-rotate {
    to { transform: rotate(360deg); }
}

/* ---------- 11. Floating buttons polish (whatsapp, scroll-top) ---------- */
.whatsapp-btn,
a[aria-label="WhatsApp"] {
    animation: lux-breathe 3s ease-in-out infinite;
}
@keyframes lux-breathe {
    0%, 100% { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50%      { box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55), 0 0 0 14px rgba(37, 211, 102, 0); }
}

.scroll-top-btn {
    animation: lux-pulse 4s ease-in-out infinite;
}
@keyframes lux-pulse {
    0%, 100% { box-shadow: 0 18px 40px rgba(17, 33, 79, 0.30); }
    50%      { box-shadow: 0 22px 50px rgba(17, 33, 79, 0.50); }
}

/* ---------- 12. Logo subtle float (homepage hero) ---------- */
header a[href*="/"] img.h-9,
header a[href*="/"] img.h-11 {
    transition: transform .6s cubic-bezier(.2,.7,.2,1),
                filter .6s cubic-bezier(.2,.7,.2,1);
}
header a[href*="/"]:hover img.h-9,
header a[href*="/"]:hover img.h-11 {
    transform: scale(1.06) rotate(-3deg);
    filter: drop-shadow(0 8px 18px rgba(232, 183, 60, 0.5));
}

/* ---------- 13. Stat banner numbers — soft glow ---------- */
.bg-gradient-to-r.from-gold-300.to-gold-500.bg-clip-text {
    text-shadow: 0 0 28px rgba(232, 183, 60, 0.18);
}

/* ---------- 14. Tooltip styling ---------- */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0b1832;
    color: #fff;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(11,24,50,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 50;
}
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- 15. Selection styling (premium gold) ---------- */
::selection {
    background: linear-gradient(transparent 0%, transparent 0%);
    background-color: rgba(232, 183, 60, 0.45);
    color: #0b1832;
}

/* ---------- 16. Custom scrollbar for inner scrollers ---------- */
.no-scrollbar { /* keep hidden where intended */ }
*:not(.no-scrollbar)::-webkit-scrollbar { width: 10px; height: 10px; }
*:not(.no-scrollbar)::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2f4f8f 0%, #0b1832 100%);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*:not(.no-scrollbar)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e8b73c 0%, #b87a18 100%);
    background-clip: padding-box;
    border: 2px solid transparent;
}

/* ---------- 17. Skeleton loader (used by JS for image fallback) ---------- */
.lux-skeleton {
    background: linear-gradient(90deg, #eaeef6 25%, #f5f8fc 50%, #eaeef6 75%);
    background-size: 200% 100%;
    animation: lux-skel 1.4s ease-in-out infinite;
    border-radius: 12px;
}
@keyframes lux-skel {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- 18. Magnetic / press feedback on premium CTAs ---------- */
.lux-magnetic,
a.bg-gradient-to-r.from-gold-400,
a.bg-navy-900,
button.bg-navy-900,
button.bg-gradient-to-r.from-gold-400 {
    transition: transform .25s cubic-bezier(.2,.7,.2,1),
                box-shadow .35s cubic-bezier(.2,.7,.2,1),
                background-position .5s cubic-bezier(.2,.7,.2,1);
}
.lux-magnetic:active,
a.bg-gradient-to-r.from-gold-400:active,
a.bg-navy-900:active,
button.bg-navy-900:active,
button.bg-gradient-to-r.from-gold-400:active {
    transform: translateY(0) scale(0.97);
}

/* ---------- 19. Iconified list-item hover slide (for footer/nav) ---------- */
footer ul a,
.menu-cnt ul li a {
    transition: padding-inline-start .25s cubic-bezier(.2,.7,.2,1),
                color .25s cubic-bezier(.2,.7,.2,1);
}
footer ul a:hover {
    padding-inline-start: 6px;
}

/* ---------- 20. Improve breadcrumb separators ---------- */
nav .fa-chevron-left {
    transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
a:hover .fa-chevron-left,
a:hover .fa-arrow-left {
    transform: translateX(-3px);
}

/* ---------- 21. Section eyebrow (subtitle above h2) — thicker contrast ---------- */
.text-gold-600.uppercase,
.text-sm.font-bold.text-gold-600 {
    color: #945c17 !important;        /* gold-700 — better contrast on light */
    letter-spacing: 0.18em !important;
}

/* ---------- 22. Subtle dark-tier badges ---------- */
.bg-emerald-500 { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.30); }
.bg-rose-500    { box-shadow: 0 4px 12px rgba(244, 63, 94, 0.30); }

/* ---------- 23. Tab underline glide (course detail) ---------- */
a.border-b-2 {
    transition: border-color .3s, color .3s;
}

/* ---------- 24. Section heading has gentle gradient sheen
   Scoped to .text-navy-900 ONLY so headings on dark/gold/white-text
   contexts (hero h1, CTA h2 over gold) keep their original color. ---------- */
h2.text-navy-900.font-bold {
    background: linear-gradient(180deg, #0b1832 0%, #233e87 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 25. Smooth anchor scrolling helper (paired with JS) ---------- */
html { scroll-padding-top: 100px; }

/* ---------- 26. Icon sheen — subtle premium glow on every Font-Awesome icon
   Uses currentColor so the halo always matches the icon's own colour.
   Applied via two layers: a tight 1px highlight + a soft 3px halo.
   Hover/parent-hover lifts the glow stronger for a luxury feel. ---------- */
i.fa-solid, i.fa-regular, i.fa-brands, i.fa-light, i.fa-thin,
i.fas, i.far, i.fab, i.fal,
[class*=" la-"]:before, [class^="la-"]:before,
[class*=" im-"]:before, [class^="im-"]:before,
.fa-stack-1x, .fa-stack-2x {
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.30),
        0 0 6px currentColor;
    -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.18);
    transition: text-shadow .35s cubic-bezier(.2,.7,.2,1),
                transform .25s cubic-bezier(.2,.7,.2,1),
                color .25s cubic-bezier(.2,.7,.2,1),
                filter .25s cubic-bezier(.2,.7,.2,1);
}

/* Hover-lift glow when the icon (or its hosting button/link) is hovered. */
i.fa-solid:hover, i.fa-regular:hover, i.fa-brands:hover,
i.fas:hover, i.far:hover, i.fab:hover,
a:hover  i.fa-solid, a:hover  i.fa-regular, a:hover  i.fa-brands,
a:hover  i.fas, a:hover  i.far, a:hover  i.fab,
button:hover i.fa-solid, button:hover i.fa-regular, button:hover i.fa-brands,
button:hover i.fas, button:hover i.far, button:hover i.fab,
.group:hover i.fa-solid, .group:hover i.fa-regular, .group:hover i.fa-brands,
.group:hover i.fas, .group:hover i.far, .group:hover i.fab {
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.55),
        0 0 10px currentColor,
        0 0 22px currentColor;
}

/* Larger / decorative icons (heroes, category cards, feature blocks) get a
   more pronounced halo to feel premium without becoming gaudy. */
.text-4xl  i, .text-5xl  i, .text-6xl  i, .text-7xl  i, .text-8xl  i, .text-9xl  i,
i.text-4xl, i.text-5xl, i.text-6xl, i.text-7xl, i.text-8xl, i.text-9xl,
.circle_icon2 i, .circle_icon2 .fas, .circle_icon2 .fa,
.fa-stack-2x {
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.40),
        0 0 12px currentColor,
        0 4px 14px rgba(11, 26, 58, 0.18);
}

/* Icons inside coloured rounded chips (the category pills on home, feature
   icons in cards) — give them a flicker-of-light highlight via filter. */
.rounded-2xl > i.fa-solid, .rounded-2xl > i.fa-regular,
.rounded-xl  > i.fa-solid, .rounded-xl  > i.fa-regular,
[class*="rounded-full"] > i.fa-solid, [class*="rounded-full"] > i.fa-regular {
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45))
            drop-shadow(0 2px 4px rgba(11, 26, 58, 0.22));
}

/* Footer / nav social icons: slight gold halo on hover */
footer .fa-brands, .icon-social .fa-brands, .icon-social i {
    text-shadow:
        0 0 1px rgba(255, 255, 255, 0.35),
        0 0 6px currentColor;
}
footer a:hover .fa-brands,
.icon-social a:hover i,
.icon-social a:hover .fa-brands {
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.7),
        0 0 14px rgba(212, 164, 55, 0.85);
}

/* Hero / dark-bg icons: warmer glow to pop on navy gradient */
.bg-gradient-to-br i.fa-solid, .bg-gradient-to-br i.fa-regular,
.bg-navy-900 i.fa-solid, .bg-navy-900 i.fa-regular,
.from-navy-900 i.fa-solid, .from-navy-950 i.fa-solid,
[class*="bg-gradient"] [class*="text-gold"] i {
    text-shadow:
        0 0 2px rgba(255, 255, 255, 0.5),
        0 0 12px rgba(232, 183, 60, 0.55);
}

/* Disable all of the above when user prefers reduced motion (the glow itself
   is static, but the transitions are softer/faster). */
@media (prefers-reduced-motion: reduce) {
    i.fa-solid, i.fa-regular, i.fa-brands { transition-duration: 0.01s !important; }
}

/* ================================================================
   Auto-rotating banner carousel (JS-driven via .is-active class).
   Slides cross-fade with a subtle scale; dots widen + glow when active.
   ================================================================ */
.lux-carousel { isolation: isolate; }

.lux-carousel__slide {
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .9s cubic-bezier(.4,0,.2,1),
                transform 7s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
.lux-carousel__slide.is-active {
    opacity: 1;
    transform: scale(1);            /* slow Ken-Burns zoom while active */
}

.lux-carousel__dot {
    width: 14px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: none;
    transition: width .45s cubic-bezier(.4,0,.2,1),
                background .45s cubic-bezier(.4,0,.2,1),
                box-shadow .45s cubic-bezier(.4,0,.2,1);
}
.lux-carousel__dot.is-active {
    width: 32px;
    background: linear-gradient(90deg, #e8b73c, #d49b22);
    box-shadow: 0 2px 10px rgba(232, 183, 60, 0.65);
}

/* On reduced motion, just freeze first slide. */
@media (prefers-reduced-motion: reduce) {
    .lux-carousel__slide { transition: none; }
    .lux-carousel__slide:first-child { opacity: 1; transform: none; }
    .lux-carousel__dot:first-of-type { width: 32px; background: linear-gradient(90deg,#e8b73c,#d49b22); }
}

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
    .lux-progress__fill,
    .whatsapp-btn,
    .scroll-top-btn,
    .lux-border-gradient::before,
    .lux-skeleton {
        animation: none !important;
    }
    .card-lift,
    .grid-item,
    .lux-magnetic,
    .lux-shine,
    a, button {
        transition-duration: 0.01s !important;
    }
}