/**
 * Vacuumlabs - targeted front-end fixes
 * Created: 2026-09-10
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * These fixes would normally live in each Elementor widget's "Custom CSS" field,
 * but that content is stored in the database (_elementor_data). Deployment here is
 * over FTP, which moves files and not database rows, so the fixes are implemented
 * as a file-based override layer instead.
 *
 * Consequences, on purpose:
 *   - the original widget Custom CSS is left completely untouched
 *   - reverting = remove this file (plus its enqueue in functions.php)
 *   - Elementor regenerating its CSS can never wipe these rules
 *   - !important is used where an override has to beat Elementor's generated
 *     selectors, which are more specific than anything a plain stylesheet can be
 *
 * Widget IDs referenced below are Elementor element IDs on
 * page 62471 (New Homepage). They are stable unless a widget is deleted
 * and recreated.
 */


/* ==========================================================================
   TASK 1 - Homepage: rocket ease-out
   Section:  "Why banks choose Vacuumlabs"
   Widget:   .elementor-element-0e4c115  (nested-carousel, class carousel_fix)
   Rocket:   slide 02 "Delivery acceleration frameworks" (Frame-48097289.webp)

   PROBLEM
   The widget's own Custom CSS declares the transition only on the highlighted
   slide:

       selector .swiper-slide-active + .swiper-slide .elementor-widget-image
           { transition: .6s ease; }

   and applies the movement with the same selector:

       selector .swiper-slide-active + .swiper-slide .elementor-widget-image
           { transform: translateY(-33.33%); }

   So the image only *owns* a transition while it is the highlighted slide.
   The moment it stops being highlighted it loses the transition and the
   transform in the same frame, and snaps back down instantly. That is the
   "rocket jumps down with no animation" that Michael confirmed.

   FIX
   Declare the transition on every image in the carousel, so it animates in
   both directions, and slow it with a real ease-out curve.
   ========================================================================== */

:root {
    /* Tune these two if the motion should be faster/slower. */
    --vl-t1-duration: 950ms;
    --vl-t1-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* The rocket (and every other slide image) - transform only, so nothing
   unrelated starts animating. */
.elementor-element-0e4c115 .swiper-slide .elementor-widget-image {
    transition: transform var(--vl-t1-duration) var(--vl-t1-ease) !important;
    will-change: transform;
}

/* The white gradient overlay is visually part of the same object, so it has to
   share the curve or it separates from the image mid-move. */
.elementor-element-0e4c115 .swiper-slide .elementor-widget-image:after {
    transition: opacity var(--vl-t1-duration) var(--vl-t1-ease) !important;
}


/* -------------------------------------------------------------------------
   TASK 1, part 2 - the actual cause of the jump at the loop wrap
   -------------------------------------------------------------------------
   Swiper 8's loopFix() does NOT move DOM nodes. All it does is:

       swiper.slideTo(newIndex, 0, false, true)

   i.e. an instant jump to an equivalent index. The side effect is that
   `swiper-slide-active` moves to a DIFFERENT element, so the card that stays
   visually in place is suddenly represented by another node - one that is
   still sitting at translateY(0) and is not highlighted.

   That is why the raised image appears to drop: it is not one element
   animating, it is two elements swapping identity. It is also why this affects
   whichever slide is highlighted at the wrap, not just the rocket.

   A transition cannot smooth that over - it has to be suppressed so the swap
   completes in a single frame and is invisible. `vl-loop-fixing` is applied by
   vl-fixes.js only for the duration of loopFix(), so ordinary user-driven
   navigation keeps the eased motion above.

   (The site's own `carousel_fix` patch already does this for slide opacity via
   its own `carousel-loop-fixing` class. That is left untouched; this uses a
   separate class name so the two cannot interfere.)
   ------------------------------------------------------------------------- */

.vl-loop-fixing .swiper-slide,
.vl-loop-fixing .swiper-slide .elementor-widget-image,
.vl-loop-fixing .swiper-slide .elementor-widget-image:after,
.vl-loop-fixing .carousel_paragraph,
.vl-loop-fixing .paragraph,
.vl-loop-fixing .description,
.vl-loop-fixing .image_active {
    transition: none !important;
}


/* ==========================================================================
   TASK 2 - Homepage: static pink sticker on case studies
   Section:  "Proven expertise, real results"
   Carousel: .elementor-element-fdb7381  (class has-floating-cursor)
   Stickers: .elementor-element-bc41522  (Afin)
             .elementor-element-e666786  (Across)
             .elementor-element-d3d9c64  (BDSwiss)
             .elementor-element-8bab67a  (Mox)
   Cursor:   .elementor-element-03c0b7d  (the .floating-cursor host div)

   Figma comment (Michael): "tento sticker tu dat staticky nie na hover"
   -> static sticker INSTEAD of the hover-following one, not in addition.

   The sticker already exists in all four slides as Group-161-2.svg, absolutely
   positioned with pointer-events:none - but each is set to "hidden on desktop",
   so today desktop only gets the cursor that follows the mouse.

   Three things are needed on desktop:
     1. show the sticker
     2. position it (Elementor's desktop base is top:0/right:0 = top-right
        corner of the Content container; the design puts it at the mockup's
        bottom-right, straddling the image/text boundary)
     3. stop the hover cursor, and give the link a normal pointer back
        (the carousel's Custom CSS sets cursor:none for the custom cursor)
   ========================================================================== */

@media (min-width: 1025px) {

    :root {
        /* Best match to the Figma placement (Group 161 @ x876/y7003, 118x118).
           NUDGE THESE if Michael wants it exact - nothing else depends on them. */
        --vl-t2-sticker-top: -60px;
        --vl-t2-sticker-right: 0px;
        --vl-t2-sticker-size: 118px;
    }

    /* 1. Un-hide. Elementor's .elementor-hidden-desktop{display:none} is beaten
          by pairing the element ID class with it. */
    .elementor-element-bc41522.elementor-hidden-desktop,
    .elementor-element-e666786.elementor-hidden-desktop,
    .elementor-element-d3d9c64.elementor-hidden-desktop,
    .elementor-element-8bab67a.elementor-hidden-desktop {
        display: block !important;
    }

    /* 2. Position + size. Elementor writes these as
          "body:not(.rtl) .elementor-62471 .elementor-element.elementor-element-X",
          which outranks a plain stylesheet, hence !important. */
    .elementor-element-bc41522,
    .elementor-element-e666786,
    .elementor-element-d3d9c64,
    .elementor-element-8bab67a {
        top: var(--vl-t2-sticker-top) !important;
        bottom: auto !important;
        right: var(--vl-t2-sticker-right) !important;
        left: auto !important;
        width: var(--vl-t2-sticker-size) !important;
        max-width: var(--vl-t2-sticker-size) !important;
        z-index: 7;
    }

    .elementor-element-bc41522 img,
    .elementor-element-e666786 img,
    .elementor-element-d3d9c64 img,
    .elementor-element-8bab67a img {
        width: 100% !important;
        height: auto !important;
    }

    /* 3a. Silence the hover-following cursor for THIS carousel only. The hero's
           cursor ("See how we do it") is a different host div and is untouched. */
    .elementor-element-03c0b7d .floating-cursor {
        opacity: 0 !important;
    }

    /* 3b. The carousel's Custom CSS sets `cursor: none` on the slide links so the
           custom cursor could stand in for the pointer. With the sticker static,
           the link needs a real pointer again. */
    .elementor-element-fdb7381 .swiper-slide a {
        cursor: pointer !important;
    }
}


/* ==========================================================================
   TASK 3 - Homepage: expert cards drag affordance
   Section:  "The people who make it happen"
   Widget:   .elementor-element-1aba54e  (nested-carousel)

   The behavioural part of this fix is in vl-fixes.js - Swiper options have to be
   set on the instance. This block is only the cursor fallback, in case the JS
   is blocked or has not run yet.
   ========================================================================== */

.elementor-element-1aba54e .swiper,
.elementor-element-1aba54e .e-n-carousel {
    cursor: grab;
}

.elementor-element-1aba54e .swiper.swiper-grabbing,
.elementor-element-1aba54e .e-n-carousel.swiper-grabbing {
    cursor: grabbing;
}

/* Text selection while dragging a carousel feels broken, so suppress it. */
.elementor-element-1aba54e .swiper-slide {
    -webkit-user-select: none;
    user-select: none;
}

/* -------------------------------------------------------------------------
   TASK 3, part 3 - drop the "n / 5" fraction counter

   The widget is set to fraction pagination, which renders
   `.swiper-pagination-fraction` as a direct child of the widget. With loop mode
   on, a position counter is misleading - the carousel has no first or last
   card - so it is hidden at every breakpoint.

   Hidden rather than switched off in Elementor, because the pagination type is
   a widget setting stored in the database and this has to ship over FTP.
   ------------------------------------------------------------------------- */

.elementor-element-1aba54e .swiper-pagination-fraction {
    display: none !important;
}