/* ============================================================
   BANNER FX STYLES
   - slider change : PURE FADE (crossfade, opacity only)
   - zoom effect   : strong Ken Burns video-like zoom on image
   - light sweep + word-by-word blur text reveal
   ============================================================ */

/* ---------- Engine layout (height stays as per site CSS) ---------- */
        .banner-fx .banner-slider { position: relative; overflow: hidden; touch-action: pan-y; }
        .banner-fx .banner-slider .swiper { position: relative; height: 100%; }
        .banner-fx .banner-slider .swiper-wrapper { position: relative; height: 100%; transform: none !important; transition: none !important; }
        .banner-fx .banner-slider .swiper-slide { position: absolute !important; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; }
        .banner-fx .banner-item { position: relative; height: 100%; }
        .banner-fx .banner-images { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
        .banner-fx .banner-images img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform, opacity; }
        .banner-fx .banner-item .container { position: relative; z-index: 2; height: 100%; }
        .banner-fx .banner-content { position: relative; z-index: 2; }

        /* ---------- Slide stack : every slide starts hidden (pure fade - no movement) ---------- */
        .banner-fx .kb-slide { opacity: 0; visibility: hidden; z-index: 1; }

        /* ---------- Active slide : PURE FADE IN (opacity only, no zoom movement) ---------- */
        .banner-fx .kb-slide.kb-active { opacity: 1; visibility: visible; z-index: 2;
            transition: opacity 1.7s ease, visibility 0s; }

        /* ---------- Outgoing slide : PURE FADE OUT above the new one (true crossfade) ---------- */
        .banner-fx .kb-slide.kb-out { opacity: 0 !important; z-index: 3;
            transition: opacity 1.5s ease, visibility 0s 1.5s; }
        /* stop the zoom animation on the fading image */
        .banner-fx .kb-slide.kb-out .banner-images img { animation: none !important; }

        /* ---------- Ken Burns : 4 alternating video-like moves on the visible image ---------- */
        .banner-fx .kb-slide.kb-active.kb-z1 .banner-images img { animation: kbZoom1 8.5s linear forwards; }
        .banner-fx .kb-slide.kb-active.kb-z2 .banner-images img { animation: kbZoom2 8.5s linear forwards; }
        .banner-fx .kb-slide.kb-active.kb-z3 .banner-images img { animation: kbZoom3 8.5s linear forwards; }
        .banner-fx .kb-slide.kb-active.kb-z4 .banner-images img { animation: kbZoom4 8.5s linear forwards; }
        @keyframes kbZoom1 { from { transform: scale(1.02); } to { transform: scale(1.22) translate(-1.6%, 1%); } }
        @keyframes kbZoom2 { from { transform: scale(1.22) translate(1.6%, -1%); } to { transform: scale(1.03); } }
        @keyframes kbZoom3 { from { transform: scale(1.02) translate(1.2%, 0); } to { transform: scale(1.2) translate(-1.4%, -1%); } }
        @keyframes kbZoom4 { from { transform: scale(1.2); } to { transform: scale(1.03) translate(0, 1%); } }

        /* ---------- Light sweep shine on every newly active slide ---------- */
        .banner-fx .kb-slide .banner-images:after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
            background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .26) 50%, transparent 68%);
            transform: translateX(-130%); }
        .banner-fx .kb-slide.kb-active .banner-images:after { animation: kbSweep 1.6s ease .35s; }
        @keyframes kbSweep { to { transform: translateX(130%); } }

        /* ---------- Soft cinematic gradient ---------- */
        .banner-fx .kb-stage:after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
            background: linear-gradient(100deg, rgba(8, 38, 46, .5) 0%, rgba(8, 38, 46, .16) 45%, rgba(0, 0, 0, .1) 100%); }

        /* ---------- Title : word-by-word blur reveal (JS splits words) ---------- */
        .banner-fx .kb-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 4px; margin-bottom: -4px; }
        .banner-fx .kb-wi { display: inline-block; opacity: 0; transform: translateY(115%); filter: blur(6px);
            transition: opacity .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1), filter .6s ease; }
        .banner-fx .kb-slide.kb-txt .kb-wi { opacity: 1; transform: translateY(0); filter: blur(0); }

        /* ---------- Paragraph & button choreography ---------- */
        .banner-fx .banner-content p,
        .banner-fx .banner-content .btn-default { opacity: 0; transform: translateY(32px);
            transition: opacity .8s ease, transform .9s cubic-bezier(.22, .61, .36, 1); }
        .banner-fx .kb-slide.kb-txt .banner-content p { opacity: 1; transform: none; transition-delay: .55s; }
        .banner-fx .banner-content .btn-default { transform: translateY(32px) scale(.9); }
        .banner-fx .kb-slide.kb-txt .banner-content .btn-default { opacity: 1; transform: none; transition-delay: .85s;
            transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }

        /* ---------- Autoplay progress bar ---------- */
        .banner-fx .kb-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .22); z-index: 6; }
        .banner-fx .kb-progress span { display: block; height: 100%; width: 0; background: #15999b; animation: kbFill 7s linear forwards; }
        @keyframes kbFill { from { width: 0; } to { width: 100%; } }
        .banner-fx.kb-paused .kb-progress span { animation-play-state: paused; }

        /* ---------- Slide counter ---------- */
        .banner-fx .kb-counter { position: absolute; right: 32px; bottom: 22px; z-index: 6; color: #fff; font-size: 13px; letter-spacing: 3px; }
        .banner-fx .kb-counter b { font-size: 24px; font-weight: 600; margin-right: 2px; }

        /* ---------- Dots ---------- */
        .banner-fx .kb-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 6; display: flex; gap: 10px; }
        .banner-fx .kb-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; transition: all .35s ease; }
        .banner-fx .kb-dot:hover { background: rgba(255, 255, 255, .85); }
        .banner-fx .kb-dot.kb-on { background: #fff; transform: scale(1.3); }

        /* ---------- Arrows ---------- */
        .banner-fx .kb-arrow { position: absolute; top: 50%; z-index: 6; width: 48px; height: 48px; margin-top: -24px;
            background: rgba(14, 108, 127, 0.48); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%;
            color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background .3s ease, transform .3s ease; }
        .banner-fx .kb-arrow:hover { background: rgba(255, 255, 255, .34); transform: scale(1.08); }
        .banner-fx .kb-arrow.kb-next { right: 26px; }
        .banner-fx .kb-arrow.kb-prev { left: 26px; }
        .banner-fx .kb-arrow.kb-next:after { content: "\276F"; font-size: 16px; }
        .banner-fx .kb-arrow.kb-prev:after { content: "\276E"; font-size: 16px; }
        .banner-fx .swiper-pagination { display: none; }
        @media (max-width: 767px) { .banner-fx .kb-arrow { display: none; } }

        /* ---------- Reduced motion ---------- */
        @media (prefers-reduced-motion: reduce) {
            .banner-fx .kb-slide { transform: none !important; }
            .banner-fx .kb-slide.kb-active .banner-images img { animation: none !important; }
            .banner-fx .kb-slide .kb-wi { filter: none !important; transform: none !important; }
            .banner-fx .kb-slide .banner-images:after { animation: none !important; }
            .banner-fx .kb-progress span { animation: none !important; width: 100%; }
            .banner-fx .banner-content p, .banner-fx .banner-content .btn-default { transition: opacity .6s ease; transform: none; }
        }

        /* ---------- Image zoom option : hover ---------- */
        .zl-hover { cursor: zoom-in; transition: transform .5s cubic-bezier(.25, .8, .25, 1) !important; }
        .zl-hover:hover { transform: scale(1.07) !important; }

        /* ---------- Image zoom option : click lightbox ---------- */
        .zl-overlay {
            position: fixed; inset: 0; background: rgba(0, 0, 0, .9);
            display: flex; align-items: center; justify-content: center;
            z-index: 999999; opacity: 0; pointer-events: none;
            transition: opacity .35s ease;
        }
        .zl-overlay.zl-open { opacity: 1; pointer-events: auto; }
        .zl-overlay .zl-img {
            max-width: 92vw; max-height: 88vh; border-radius: 6px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, .6);
            transform: scale(.82);
            transition: transform .4s cubic-bezier(.25, .8, .25, 1);
        }
        .zl-overlay.zl-open .zl-img { transform: scale(1); }
        .zl-close {
            position: absolute; top: 14px; right: 24px; color: #fff;
            font-size: 42px; line-height: 1; cursor: pointer; font-family: Arial, sans-serif;
        }
        .zl-close:hover { color: #ccc; }