/* ==========================================================================
   WebLodge v40 — Premium entrance & scroll-reveal animations
   File: /assets/css/wla-premium-animations-v40.css  (loaded on EVERY page, last)

   Timing (premium feel, v5 — full logic, as Mezbah confirmed):
   - Header container slides down BLANK from outside the screen: it
     starts 160px above its place (fully above the top of the screen)
     and slides down into place in 0.8s — within 1 second — smooth
     ease-out, opacity 0 -> 100. No content inside it while it slides.
   - THEN the header content slides down, left to right: logo -> menu
     -> WhatsApp -> Get in touch. Each 1s, 100ms apart (10%), slide
     down from 24px above, opacity 0 -> 100%. The content starts when
     the container is 60% down (0.48s of the 0.8s slide), NOT after it
     has fully landed — the two motions overlap, so the content arrives
     together with the container, one smooth premium motion.
   - Body: the FIRST container on every page slides UP from the bottom
     at the SAME TIME as the header slides down — both start together
     at page load, both 0.8s, same smooth ease. The whole first
     container comes from 600px below and takes its place. When it is
     60% complete (0.48s), its inside content starts sliding up.
   - EVERY container does the same when you scroll: when a container
     comes into the viewport, the whole container rises from 600px
     below in 0.8s, and at 60% (0.48s) its inside content starts
     sliding up. Same rules for the content: 10% stagger, same row
     together, cards diagonal, badge then text then cards.
   - v10: the MIX of v2 and v9 — v9's container rise + v2's content
     slide-up inside the container. The content now waits until its
     section is actually ON the screen before sliding up, so on a slow
     scroll you never miss the slide.
   - v11: two fixes Mezbah found. (1) The safety net used to reveal
     EVERY section 4 seconds after load, so nothing was left to slide
     on scroll — now it only reveals sections on the screen, the rest
     wait for your mouse scroll, each one separately. (2) The content
     slide was only 48px, invisible next to the container's 600px rise
     — now items slide from 120px below, so after the container is 80%
     up you clearly see the content slide up on its own.
   - v12: the safety net NEVER reveals a scrolled section any more —
     it only makes sure the header and the hero can never stay hidden.
     Sections 1 and below only ever start from the scroll observer, so
     each one slides separately when you scroll to it. The observer
     also starts the rise the moment a section peeks into view.
     Every container's components finish within 1.5 seconds.
   - Same row = same time; card grids use the diagonal wave; badge,
     then text, then cards. Gap between containers: 20 / 15 / 10px.
   - Fixes in v5: logo link is static home ("/") on every page; the
     Services submenu sits on top of the body (header z-index); the
     Get in touch button text gets the global button text slide class.
   - Same row = same time: items sitting side by side (hero left + right,
     two buttons, two columns) start together, never left-first-then-right.
   - Card grids get a diagonal wave instead (see the JS): top-left starts,
     then top-middle AND bottom-left together, then top-right AND
     bottom-middle, then bottom-right.
   - Badge, then text, then cards: in a section that has a badge, a
     heading/text and cards, they reveal in that order, top to bottom.

   Why the standalone `translate` property (not `transform`)?
   The old v2 code set `transform: translateY(...)`, which REPLACED an
   element's own transform — that is why the hero badge (which centres
   itself with translateX(-50%)) jumped to the right and looked late.
   `translate` adds to the element's own transform instead of replacing
   it, so the badge stays centred while it slides up.

   What it does, in plain words:
   - The gap BETWEEN section containers is 20px on desktop, 15px on tablet,
     10px on mobile. That is the ONLY spacing change. Nothing inside a
     container is changed — no new padding, no new margins, no rearranging.
   - A container does NOT reveal as one block. Its inner items reveal in
     rows, top to bottom, with the 10% stagger above.
   - The hidden states below only apply when JavaScript has added the
     "wla-anim" class to <html> (see the small inline script in <head>).
     If JavaScript is off, or the animation script fails to load, nothing
     is ever hidden — the page just shows normally.
   - No transition is set in this CSS on purpose. The JavaScript sets a
     short inline transition only while an item is animating, then removes
     it, so the site's own hover / button / card transitions are exactly
     as they were after the animation finishes.
   - v30 (2026-11-10): v29 base + TWO fixes only. (1) Client Appreciation
     slide: the 5 client-info items (photo, text, name, designation, logo)
     now slide with transform: translateY (universally supported, reliably
     transitioned) instead of the standalone translate property, whose
     transition was not moving them on replay — the logo only faded in
     place at its final position, on desktop and on mobile. These 5 items
     have no own transform, so this is safe; the see-more link and the
     prev/next buttons (which centre with translateX(-50%)) keep using
     translate. (2) Body flash: below-fold sections are hidden from the
     first paint (before the defer JS runs) so a new page visit never
     flashes them visible first. See the rule under section 1.
   - v31 (2026-11-10): v30 base + ONE fix only — the 2.5s safety timer.
     The animation JS now re-adds wla-anim when it starts, and the <head>
     timer is raised from 2.5s to 10s. No CSS rule changes in v31 (the
     v30 flash-fix and fu transform rules are unchanged).
   - v32 (2026-11-10): v31 base + ONE fix only — the Portfolios page.
     New special chain for .weblodge-portfolio (see the JS): badge,
     heading, description, 6 filter buttons one by one, 5 work-box
     cards left to right, big details card, then its inside content.
     No CSS rule changes in v32 (the v30 flash-fix and fu transform
     rules and the v31 timer fix are unchanged).
   - v48 (2026-11-11): TIMING RETUNE ONLY (with the JS — see its v48
     note): the modal content keyframe (wla-modal-content-in) and the
     submenu item transitions now run 1s (was 0.5s), matching the
     1-second content slide; the JS stagger is 100ms (10%) and the
     content starts at 60% of the container slide (was 80%). The
     submenu panel's own 0.5s slide, the header drop and the container
     rise (both 0.8s) are unchanged.
   ========================================================================== */

/* --- 1. Gap BETWEEN section containers only (20 / 15 / 10px) --- */
#main > .wla-section {
    margin-top: 20px;
}

@media (max-width: 1024px) {
    #main > .wla-section {
        margin-top: 15px;
    }
}

@media (max-width: 767px) {
    #main > .wla-section {
        margin-top: 10px;
    }
}

/* v30 — hide below-fold sections from the first paint (flash fix).
   Before the animation JS (defer) runs and adds wla-container-hidden,
   a new page visit flashed every below-fold section visible, then hid
   it, then revealed it on scroll. This rule hides them while the JS
   has not yet run (no wla-anim-ok on <html>). The JS adds wla-anim-ok
   and wla-container-hidden in the same synchronous block, so there is
   no paint between them and no flash. If the JS never runs, the head
   script removes wla-anim after 2.5s and the content shows. The hero
   (.wla-first) is excluded: it has its own CSS entrance animation
   that starts at opacity 0. */
html.wla-anim:not(.wla-anim-ok) #main > .wla-section:not(.wla-first) {
    opacity: 0;
}

/* v51 (2026-11-12): the same hold for the FIRST section's content.
   The v30 rule excluded .wla-first because the section box has its
   own rise animation — but its inside content had no hold at all,
   so on a warm-cache return visit the browser painted the hero
   fully formed, and a moment later the (deferred) engine hid the
   items and slid them in: the visible flash Mezbah reported.
   Now the hero's children stay invisible until the engine runs —
   the section still rises, blank, exactly like the header — and
   wla-anim-ok + the item hiding happen in the same synchronous
   engine run, so no paint can slip in between. The glow stays:
   it is decoration, identical hidden or shown. */
html.wla-anim:not(.wla-anim-ok) #main > .wla-first > *:not(.wla-section__glow) {
    opacity: 0;
}

/* --- 2. WHOLE HEADER slides down BLANK from outside the screen (v5) ---
   The header starts 160px above its place — fully above the top of the
   screen, since the header itself is only 60px tall — and slides down
   into place in 0.8s (within 1 second), smooth ease-out, opacity 0 -> 100.
   It slides down BLANK: its content is hidden until it lands (see the
   rule below), so you see the empty header come down first, and only
   then do logo, menu, WhatsApp and button slide down into it.
   This is a plain CSS keyframes animation: it runs on the very first
   paint, with no JavaScript timing involved, so it cannot be skipped,
   jumped or glitched by a late script.
   Fill mode is `backwards`: before the animation starts the header
   shows the first frame (hidden, above the screen); after it ends the
   header is just its normal self again.
   The header also sits on top of the body (z-index 1000), so the
   Services submenu opens OVER the body container instead of behind it.
   The header has no transform of its own in the site's CSS, so using
   transform here is safe. */
@keyframes wla-header-drop {
    from {
        opacity: 0;
        transform: translateY(-160px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.wla-anim header.weblodge-agency-header-elementskit-section {
    position: relative;
    z-index: 1000;
    animation: wla-header-drop 0.64s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    will-change: transform, opacity;
}

/* Header content is hidden from the first paint, while the blank
   container slides down. The Services panel is NOT hidden (it only
   opens on hover/tap, and it must stay usable). JavaScript removes
   the `wla-header-items-hidden` class from <html> once the container
   is 60% down, and the items slide down one by one while the container
   is still coming down, so they arrive together. If JavaScript
   fails, the small script in <head> removes this class after 2.5s,
   so the header content can never stay hidden. */
html.wla-header-items-hidden header.weblodge-agency-header-elementskit-section > *:not(#servicePanel) {
    opacity: 0;
    translate: 0 -24px;
}

/* --- 2b. Containers rise UP from 600px below (v9) ---
   The first container on every page comes up from 600px below and
   smoothly takes its place in 0.8s — the SAME time as the header
   slides down. Both start together at page load, so the header comes
   down and the first container comes up at the same time, and they
   meet in the middle. It is a plain CSS keyframes animation, like the
   header: it runs on the very first paint, with no JavaScript timing
   involved. Fill mode is `backwards`: before the animation starts the
   container shows the first frame (hidden, below its place); after it
   ends the container is just its normal self again.
   The container's inside content is hidden until it is 60% up — the
   JavaScript starts the items at 0.48s — so you see the whole
   container rise first, then its content slides up inside it.
   A section has no transform of its own in the site's CSS, so using
   transform here is safe.
   Scrolled containers use the SAME keyframes: when a container comes
   into the viewport, JavaScript adds the `wla-container-in` class and
   it rises from 600px below in 0.8s. Until then it is hidden
   (`wla-container-hidden`), so it never flashes in its place first. */
@keyframes wla-container-up {
    from {
        opacity: 0;
        transform: translateY(600px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.wla-anim #main > .wla-section.wla-first {
    animation: wla-container-up 0.64s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    will-change: transform, opacity;
}

/* A container below the fold: hidden until it comes into view. The
   rule only applies while <html> has wla-anim, so if JavaScript fails
   the small script in <head> removes wla-anim and every container
   shows normally. */
html.wla-anim .wla-section.wla-container-hidden {
    opacity: 0;
}

html.wla-anim .wla-section.wla-container-in {
    animation: wla-container-up 0.64s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    will-change: transform, opacity;
}

/* --- 3. Before reveal: hidden + moved down (JS adds .wla-in) --- */
/* A header item (logo, menu, WhatsApp, Get in touch): slides DOWN into
   place from 24px above, after the blank container has landed. */
html.wla-anim .wla-header-item {
    opacity: 0;
    translate: 0 -24px;
}

html.wla-anim .wla-header-item.wla-in {
    opacity: 1;
    translate: 0 0;
}

/* An item inside a container: slides UP into place, from 120px below.
   (v11: was 48px — too small to see next to the container's 600px
   rise, so the content looked like it was just riding the container.
   120px makes the content's own slide clearly visible after the
   container is 80% up.) */

/* An item inside a container: slides UP into place, from 120px below. */
html.wla-anim .wla-hide-sm {
    opacity: 0;
    translate: 0 120px;
}

html.wla-anim .wla-hide-sm.wla-in {
    opacity: 1;
    translate: 0 0;
}

/* v30 — Client Appreciation client-info slide uses transform.
   The 5 client-info items (photo container, text, name, designation,
   logo) slide with transform: translateY(120px) -> 0, because the
   standalone translate property's transition was not moving them on
   replay (NEXT/BACK): they only faded in place at their final
   position, on desktop and on mobile. transform is universally
   supported and reliably transitioned. These 5 items have no own
   transform, so replacing transform is safe. The see-more link and
   the prev/next buttons keep the generic translate rule above (they
   centre with translateX(-50%), which transform would replace).
   The JS sets the transition to transform (not translate) for these
   5 items; the generic rule still sets translate for other items. */
html.wla-anim .fu-testimonial-section .fu-image-container.wla-hide-sm,
html.wla-anim .fu-testimonial-section #fu-testimonial-text.wla-hide-sm,
html.wla-anim .fu-testimonial-section #fu-client-name.wla-hide-sm,
html.wla-anim .fu-testimonial-section #fu-client-designation.wla-hide-sm,
html.wla-anim .fu-testimonial-section #fu-client-logo.wla-hide-sm {
    translate: 0 0;
    transform: translateY(120px);
}

html.wla-anim .fu-testimonial-section .fu-image-container.wla-hide-sm.wla-in,
html.wla-anim .fu-testimonial-section #fu-testimonial-text.wla-hide-sm.wla-in,
html.wla-anim .fu-testimonial-section #fu-client-name.wla-hide-sm.wla-in,
html.wla-anim .fu-testimonial-section #fu-client-designation.wla-hide-sm.wla-in,
html.wla-anim .fu-testimonial-section #fu-client-logo.wla-hide-sm.wla-in {
    translate: 0 0;
    transform: translateY(0);
}

/* --- 3b. Client Appreciation photo + logo (v19) ---
   The site CSS starts .fu-client-photo and .fu-client-logo at
   opacity 0, and only the carousel's inline opacity used to make
   them visible — which also made the logo show early, sitting at
   its lowered place. The carousel no longer sets inline opacity;
   the animation owns visibility now. So make the photo visible
   while its container slides in (wla-in) and after it lands
   (data-wla-done), and the logo visible after it lands
   (during its slide it is covered by .wla-hide-sm.wla-in above).
   Without this, the photo would stay invisible during its slide
   (its own opacity is 0) and both would vanish after the animation
   classes are removed. */
html.wla-anim .fu-image-container.wla-in .fu-client-photo,
html.wla-anim .fu-image-container[data-wla-done] .fu-client-photo,
html.wla-anim .fu-client-logo[data-wla-done] {
    opacity: 1;
}

/* --- 4. Reduced motion: show everything at once, no animation --- */
@media (prefers-reduced-motion: reduce) {
    html.wla-anim header.weblodge-agency-header-elementskit-section,
    html.wla-anim #main > .wla-section.wla-first,
    html.wla-anim .wla-section.wla-container-in {
        animation: none !important;
    }
    html.wla-anim .wla-section.wla-container-hidden {
        opacity: 1 !important;
    }
    html.wla-header-items-hidden header.weblodge-agency-header-elementskit-section > *:not(#servicePanel),
    html.wla-anim .wla-header-item,
    html.wla-anim .wla-hide-sm,
    html.wla-anim .wla-hide-down {
        opacity: 1 !important;
        translate: none !important;
    }
    html.wla-anim .fu-testimonial-section .fu-image-container.wla-hide-sm,
    html.wla-anim .fu-testimonial-section #fu-testimonial-text.wla-hide-sm,
    html.wla-anim .fu-testimonial-section #fu-client-name.wla-hide-sm,
    html.wla-anim .fu-testimonial-section #fu-client-designation.wla-hide-sm,
    html.wla-anim .fu-testimonial-section #fu-client-logo.wla-hide-sm {
        transform: none !important;
    }
}

/* --- 5. Back to top button (v15) ---
   The static build never had Astra's #ast-scroll-top element, so the
   button never showed. The JS now creates it on every page. It stays
   hidden until you scroll down 400px, then fades in; a click takes
   you smoothly to the top. The site CSS (3-bottom-to-top-button.css)
   already gives it its look (glass pill, blue arrow); this only adds
   the show/hide and the size. */
#ast-scroll-top {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease !important;
}
#ast-scroll-top.wla-show {
    opacity: 1;
    visibility: visible;
}
#ast-scroll-top .ast-arrow-svg {
    display: block;
}

/* --- v42: MODALS — Mezbah's spec + scroll-reveal (2026-11-10). ---
   Background WILL blur (the site's backdrop-filter: blur(5px) stays).
   The modal container (box) comes on screen INSTANTLY — it is never
   animated. Only the box's inside content slides up 60px and fades 0 to
   100%, one by one (100ms stagger), via KEYFRAME animations.
   v42: the content no longer animates ALL on open. Each content item
   slides when IT enters the modal box's visible area (JS
   IntersectionObserver, root = the modal box). Items below the modal
   window's visible area HOLD (hidden) until scrolled into view inside
   the modal, then slide — the same hold rule as the page. The JS
   assigns the stagger delay inline per batch, so items revealed on
   scroll start promptly. No MutationObserver. Close-x fix: the overlay
   (z-index 999) was below the sticky header (z-index 1000), hiding the
   x on Career and Blog modals; when open it is now z-index 1001. */
@keyframes wla-modal-content-in {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}
html.wla-anim .wla-modal-overlay.active,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] {
    z-index: 1001;
}
/* Modal content items start hidden, so below-viewport modal content
   never flashes visible before the observer reveals it. #blogmodalText
   itself is a container, not an item — it never hides (its children do). */
html.wla-anim .wla-modal-overlay.active .wla-modal-box > *:not(#blogmodalText):not(.weblodge-career-form-container),
html.wla-anim .wla-modal-overlay[aria-hidden="false"] .wla-modal-box > *:not(#blogmodalText):not(.weblodge-career-form-container),
html.wla-anim .wla-modal-overlay.active #blogmodalText > *,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] #blogmodalText > * {
    opacity: 0;
    transform: translateY(60px);
}
html.wla-anim #blogmodalText {
    opacity: 1;
    transform: none;
    animation: none;
}
/* Revealed items slide in. The JS (wlaSetupModalReveal) adds
   wla-modal-item-in when the item enters the modal box's visible area
   and assigns the 100ms stagger delay inline per batch. */
html.wla-anim .wla-modal-box > *.wla-modal-item-in,
html.wla-anim #blogmodalText > *.wla-modal-item-in {
    animation: wla-modal-content-in 0.8s ease both;
}

/* --- v43: SUBMENU PANELS slide up when they appear. ---
   (1) HEADER #servicePanel (Services mega menu). The site's own CSS
   slides it 30px in 0.35s; this makes it match the page rule — 60px
   below, 0.5s — and makes the submenu items inside slide UP one by
   one (50ms apart since v49 — 5%, top first, then next, in reading order) when the
   panel opens. The animation JS watches the panel and adds
   .wla-panel-in, then staggers the items (sorted by real position,
   top then left — the panel has 2 columns). Closing removes the
   classes, so the next open slides again.
   (2) FOOTER .footer-menu-services submenu. Same pattern: its items
   (.submenu-item-custom-footer) start 20px below and invisible, and
   slide UP one by one when the submenu opens (mobile/tablet click
   adds .active; desktop hover shows the panel). The JS adds
   .wla-panel-in to the parent and .wla-in to each item, staggered.
   Closing (or mouse leaving) removes the classes, so the next open
   slides again. */
html.wla-anim .weblodge-services-panel {
    transform: translateX(-50%) translateY(60px);
    transition: opacity .4s ease, transform .4s ease, visibility .4s ease, border-color .35s ease, box-shadow .35s ease;
}
html.wla-anim .weblodge-services-panel.active {
    transform: translateX(-50%) translateY(0);
}
html.wla-anim .weblodge-header-panel-submenu {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .weblodge-services-panel.wla-panel-in .weblodge-header-panel-submenu.wla-in {
    opacity: 1;
    translate: 0 0;
}
html.wla-anim .submenu-item-custom-footer {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .footer-menu-services.wla-panel-in .submenu-item-custom-footer.wla-in {
    opacity: 1;
    translate: 0 0;
}
/* v47 — TABLET (.tablet-submenu, items .tablet-sub) and MOBILE
   (.service-submenu, items .submenu-item) header submenus. Same
   pattern as desktop/footer: items start 20px below and invisible,
   and slide UP one by one when the submenu opens (the site's JS adds
   .active; the animation JS adds .wla-panel-in to the submenu and
   .wla-in to each item, staggered). Closing removes the classes, so
   the next open slides again. */
html.wla-anim .tablet-sub {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .tablet-submenu.wla-panel-in .tablet-sub.wla-in {
    opacity: 1;
    translate: 0 0;
}
html.wla-anim .submenu-item {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .service-submenu.wla-panel-in .submenu-item.wla-in {
    opacity: 1;
    translate: 0 0;
}

/* --- v50 (2026-11-12): Mezbah's fastest review round. --- */

/* (a) HOVER layers never fight the entrance slide. While a card is
   still sliding (it carries .wla-hide-sm), its hover layer stays in
   its resting state even if the pointer happens to be over the card
   — so the main content and the overlay content can never be seen
   fighting mid-slide. The moment the card lands, hover works as
   designed. The layers themselves are no longer entrance items
   (see the JS), so this only guards the pointer-during-slide case. */
html.wla-anim .wla-card.wla-hide-sm .home-page-service-section-card-content,
html.wla-anim .wla-card.wla-hide-sm .weblodge-agency-recent-project-card-overlay {
    opacity: 0 !important;
    transform: translateY(100%) !important;
}
html.wla-anim .wla-card.wla-hide-sm .weblodge-agency-how-we-do-section-card-image {
    opacity: 1 !important;
    transform: none !important;
}

/* (b) CAREER MODAL — the form container itself never hides; its
   ROWS are the modal content items (the JS expands the container
   the same way as the blog text block), so the badge + cross row,
   then each form row, slide up one by one on open. */
html.wla-anim .wla-modal-overlay.active .wla-modal-box > .weblodge-career-form-container,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] .wla-modal-box > .weblodge-career-form-container {
    opacity: 1;
    transform: none;
    animation: none;
}
html.wla-anim .wla-modal-overlay.active .weblodge-career-form-container > *,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] .weblodge-career-form-container > *,
html.wla-anim .wla-modal-overlay.active .weblodge-career-form-container > form > *,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] .weblodge-career-form-container > form > * {
    opacity: 0;
    transform: translateY(60px);
}
/* The <form> wrapper itself never hides (only its rows do). */
html.wla-anim .wla-modal-overlay.active .weblodge-career-form-container > form,
html.wla-anim .wla-modal-overlay[aria-hidden="false"] .weblodge-career-form-container > form {
    opacity: 1;
    transform: none;
    animation: none;
}
html.wla-anim .weblodge-career-form-container > *.wla-modal-item-in,
html.wla-anim .weblodge-career-form-container > form > *.wla-modal-item-in {
    animation: wla-modal-content-in 0.8s ease both;
}

/* (c) SCROLLBARS — desktop only inside modals too. At tablet and
   mobile widths no modal scrollbar shows at all, not even a flash
   while the page loads (this file is render-blocking and loads on
   every page). The one exception Mezbah keeps on all devices is
   the Pricing modal's table dropdown window — that element is not
   a modal box, so it is untouched here and keeps its own scrollbar.
   The main window's rule lives in 2-colorful-side-bar.css. */
@media (max-width: 1024px) {
    html.wla-anim .wla-modal-box {
        scrollbar-width: none !important;
    }
    html.wla-anim .wla-modal-box::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* (d) BACK TO TOP — gone while any modal is open (the JS toggles
   wla-modal-open on <html>). It returns the moment the modal
   closes, if the page is scrolled enough to show it. */
html.wla-modal-open #ast-scroll-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* (e) TABLET panel top row + MOBILE panel main items — hidden
   until their panel opens, then they slide up one by one (the JS
   adds .wla-panel-in to the panel and .wla-in to each item, 5%
   stagger, same as the submenu items). Closing resets them. */
html.wla-anim .tablet-item {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .weblodge-tablet-panel.wla-panel-in .tablet-item.wla-in {
    opacity: 1;
    translate: 0 0;
}
html.wla-anim .weblodge-mobile-menu-panel .menu-item {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.8s ease, translate 0.8s ease;
}
html.wla-anim .weblodge-mobile-menu-panel.wla-panel-in .menu-item.wla-in {
    opacity: 1;
    translate: 0 0;
}

/* --- v48: Services cards overlay is HOVER-ONLY again (2026-11-11). ---
   The v45 override below was REMOVED at Mezbah's request. It forced
   .home-page-service-section-card-content visible on scroll
   (transform: translateY(0) always + opacity: 1 when not
   .wla-hide-sm), so on the homepage the service cards showed BOTH
   their normal content and their overlay content at the same time.
   The site CSS (04-home-page-service.css) governs the panel again,
   unchanged: at rest it sits at translateY(100%) with opacity 0,
   and only the card's :hover brings it to translateY(0) + opacity 1.
   The entrance animation still treats the panel as a content item of
   its card; its hide/reveal uses the standalone translate property
   and cleans up after itself, so it never undoes the hover rule.
   Touch keeps the card image's own Tap to view button, as before.
   (The v45 text is kept in git history / the pre-v48 backup; the two
   rules that stood here were:
     html.wla-anim .home-page-service-section-card-content
       { transform: translateY(0); }
     html.wla-anim .home-page-service-section-card-content:not(.wla-hide-sm)
       { opacity: 1; } )
*/