/* ==========================================================================
   VEBKO ONLINE HELP — CINEMATIC MOTION SYSTEM
   ========================================================================== */

:root {
    --vh-reveal-duration: 920ms;
    --vh-reveal-ease: cubic-bezier(.16, 1, .3, 1);
}


/* ==========================================================================
   PRELOAD STATE

   Important:
   Hide animated page content BEFORE JavaScript runs.

   This prevents:
   visible page
   -> hide
   -> reveal

   and gives:
   empty content area
   -> reveal
   ========================================================================== */


/* ==========================================================================
   INDEX / LANDING
   ========================================================================== */

html.vh-motion-preload
.help-default-landing
.default-landing-card,
html.vh-motion-preload
.help-default-landing
.default-social-card {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) scale(.965) !important;
    filter: blur(10px) !important;
}


/* ==========================================================================
   TESTER / RELAY
   ========================================================================== */

html.vh-motion-preload
.help-standard-topic-seo-title,
html.vh-motion-preload
.help-standard-topic
.help-topic-action-bar,
html.vh-motion-preload
.help-standard-topic
.help-content-group,
html.vh-motion-preload
.help-standard-topic
.help-topic-content > * {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) scale(.97) !important;
    filter: blur(9px) !important;
}


/* ==========================================================================
   LINKEDIN
   ========================================================================== */

html.vh-motion-preload
.linkedin-modern-page
.modern-hero,
html.vh-motion-preload
.linkedin-modern-page
.modern-metric,
html.vh-motion-preload
.linkedin-modern-page
.modern-card,
html.vh-motion-preload
.linkedin-modern-page
.modern-footer {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) scale(.97) !important;
    filter: blur(9px) !important;
}


/* ==========================================================================
   CATALOG
   ========================================================================== */

html.vh-motion-preload
.catalog-page
.catalog-heading,
html.vh-motion-preload
.catalog-page
.catalog-toolbar,
html.vh-motion-preload
.catalog-page
.catalog-preview {
    opacity: 0 !important;
    transform: translate3d(0, 42px, 0) scale(.97) !important;
    filter: blur(9px) !important;
}


/* ==========================================================================
   IMPORTANT

   No transition here.

   Preload is only an initial hidden state.
   Actual transitions are controlled by .vh-reveal.
   ========================================================================== */

html.vh-motion-preload
.help-default-landing
.default-landing-card,
html.vh-motion-preload
.help-default-landing
.default-social-card,
html.vh-motion-preload
.help-standard-topic-seo-title,
html.vh-motion-preload
.help-standard-topic
.help-topic-action-bar,
html.vh-motion-preload
.help-standard-topic
.help-content-group,
html.vh-motion-preload
.help-standard-topic
.help-topic-content > *,
html.vh-motion-preload
.linkedin-modern-page
.modern-hero,
html.vh-motion-preload
.linkedin-modern-page
.modern-metric,
html.vh-motion-preload
.linkedin-modern-page
.modern-card,
html.vh-motion-preload
.linkedin-modern-page
.modern-footer,
html.vh-motion-preload
.catalog-page
.catalog-heading,
html.vh-motion-preload
.catalog-page
.catalog-toolbar,
html.vh-motion-preload
.catalog-page
.catalog-preview {
    transition: none !important;
}

/* ==========================================================================
   BASE
   ========================================================================== */

body.vh-motion-on .vh-reveal {
    opacity: 0;
    transform: translate3d( var(--vh-x, 0px), var(--vh-y, 48px), 0 ) scale(var(--vh-scale, .965));
    filter: blur(var(--vh-blur, 11px));
    transition: opacity var(--vh-reveal-duration) var(--vh-reveal-ease), transform var(--vh-reveal-duration) var(--vh-reveal-ease), filter calc(var(--vh-reveal-duration) * .82) var(--vh-reveal-ease);
    will-change: opacity, transform, filter;
    backface-visibility: hidden;
}


    /* ==========================================================================
   VISIBLE
   ========================================================================== */

    body.vh-motion-on
    .vh-reveal.vh-reveal-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }


    /* ==========================================================================
   HERO / HEADER
   ========================================================================== */

    body.vh-motion-on
    .vh-reveal[data-vh-type="hero"] {
        --vh-y: 38px;
        --vh-scale: .945;
        --vh-blur: 14px;
        transition-duration: 1100ms;
    }


    /* ==========================================================================
   TOOLBAR
   ========================================================================== */

    body.vh-motion-on
    .vh-reveal[data-vh-type="toolbar"] {
        --vh-y: 24px;
        --vh-scale: .975;
        --vh-blur: 7px;
    }


    /* ==========================================================================
   STANDARD SECTION
   ========================================================================== */

    body.vh-motion-on
    .vh-reveal[data-vh-type="section"] {
        --vh-y: 54px;
        --vh-scale: .97;
        --vh-blur: 9px;
    }


    /* ==========================================================================
   CARD
   ========================================================================== */

    body.vh-motion-on
    .vh-reveal[data-vh-type="card"] {
        --vh-y: 38px;
        --vh-scale: .95;
        --vh-blur: 8px;
    }


/* ==========================================================================
   ALTERNATING MOTION — LTR
   ========================================================================== */

html[dir="ltr"]
body.vh-motion-on
.vh-reveal[data-vh-side="start"] {
    --vh-x: -34px;
}


html[dir="ltr"]
body.vh-motion-on
.vh-reveal[data-vh-side="end"] {
    --vh-x: 34px;
}


/* ==========================================================================
   ALTERNATING MOTION — RTL
   ========================================================================== */

html[dir="rtl"]
body.vh-motion-on
.vh-reveal[data-vh-side="start"] {
    --vh-x: 34px;
}


html[dir="rtl"]
body.vh-motion-on
.vh-reveal[data-vh-side="end"] {
    --vh-x: -34px;
}


/* ==========================================================================
   INITIAL HERO CONTENT STAGGER
   ========================================================================== */

body.vh-motion-on
.vh-hero-child {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition: opacity 720ms var(--vh-reveal-ease), transform 720ms var(--vh-reveal-ease), filter 620ms var(--vh-reveal-ease);
    transition-delay: var(--vh-child-delay, 150ms);
}


body.vh-motion-on
.vh-hero-ready
.vh-hero-child {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


/* ==========================================================================
   LINKEDIN
   ========================================================================== */

body.vh-motion-on
.linkedin-modern-page
.modern-card.vh-reveal {
    transform-origin: center top;
}


body.vh-motion-on
.linkedin-modern-page
.modern-metric.vh-reveal {
    --vh-y: 28px;
    --vh-scale: .93;
}


/* ==========================================================================
   TESTER / RELAY
   ========================================================================== */

body.vh-motion-on
.help-content-group.vh-reveal {
    transform-origin: center top;
}


/* ==========================================================================
   CATALOG
   ========================================================================== */

body.vh-motion-on
.catalog-preview.vh-reveal {
    --vh-y: 50px;
    --vh-scale: .975;
}


/* ==========================================================================
   INDEX / LANDING
   ========================================================================== */

body.vh-motion-on
.default-social-card.vh-reveal {
    --vh-y: 34px;
    --vh-scale: .94;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    :root {
        --vh-reveal-duration: 780ms;
    }


    body.vh-motion-on
    .vh-reveal {
        --vh-y: 36px;
        --vh-blur: 7px;
    }


    html[dir="ltr"]
    body.vh-motion-on
    .vh-reveal[data-vh-side="start"] {
        --vh-x: -18px;
    }


    html[dir="ltr"]
    body.vh-motion-on
    .vh-reveal[data-vh-side="end"] {
        --vh-x: 18px;
    }


    html[dir="rtl"]
    body.vh-motion-on
    .vh-reveal[data-vh-side="start"] {
        --vh-x: 18px;
    }


    html[dir="rtl"]
    body.vh-motion-on
    .vh-reveal[data-vh-side="end"] {
        --vh-x: -18px;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    body.vh-motion-on
    .vh-reveal,
    body.vh-motion-on
    .vh-hero-child {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

    .vh-reveal,
    .vh-hero-child {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* ==========================================================================
   VEBKO HEADER SIGNATURE EFFECT
   Glow Pulse + Moving Light Sweep
   ========================================================================== */


/* ==========================================================================
   HEADER BASE
   ========================================================================== */

body.vh-motion-on
.vh-header-effect {
    position: relative !important;
    isolation: isolate;
    /*
     * Important:
     * shimmer stays inside rounded header.
     */
    overflow: hidden !important;
}


/* ==========================================================================
   LIGHT SWEEP LAYER
   ========================================================================== */

body.vh-motion-on
.vh-header-glow {
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -45%;
    width: 24%;
    z-index: 7;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-180%, 0, 0) skewX(-18deg);
    background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(42, 193, 190, .02) 15%, rgba(67, 216, 211, .18) 38%, rgba(139, 224, 255, .36) 50%, rgba(45, 155, 232, .17) 64%, rgba(255, 255, 255, 0) 100% );
    filter: blur(3px);
    mix-blend-mode: screen;
}


/* ==========================================================================
   START SWEEP WHEN HEADER BECOMES VISIBLE
   ========================================================================== */

body.vh-motion-on
.vh-header-effect.vh-reveal-visible
.vh-header-glow {
    animation: vh-header-light-sweep 1450ms 320ms cubic-bezier(.16, 1, .3, 1) both;
}


/* ==========================================================================
   SWEEP ANIMATION
   ========================================================================== */

@keyframes vh-header-light-sweep {

    0% {
        opacity: 0;
        transform: translate3d(-180%, 0, 0) skewX(-18deg);
    }


    12% {
        opacity: .25;
    }


    35% {
        opacity: 1;
    }


    70% {
        opacity: .85;
    }


    100% {
        opacity: 0;
        transform: translate3d(720%, 0, 0) skewX(-18deg);
    }
}


/* ==========================================================================
   HEADER COLOR / SHADOW PULSE
   ========================================================================== */

body.vh-motion-on
.vh-header-effect.vh-reveal-visible {
    animation: vh-header-color-pulse 1400ms 80ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-header-color-pulse {

    0% {
        filter: brightness(.94) saturate(.88);
        box-shadow: 0 8px 22px rgba(5, 67, 73, .06);
    }


    25% {
        filter: brightness(1.045) saturate(1.12);
        box-shadow: 0 0 0 1px rgba(28, 189, 184, .12), 0 16px 40px rgba(19, 166, 166, .19), 0 0 34px rgba(67, 176, 228, .10);
    }


    55% {
        filter: brightness(1.02) saturate(1.06);
        box-shadow: 0 0 0 1px rgba(36, 181, 188, .08), 0 13px 32px rgba(9, 91, 104, .13);
    }


    100% {
        filter: brightness(1) saturate(1);
        /*
         * Return to normal visual state.
         */
    }
}


/* ==========================================================================
   ACCENT LINE GLOW
   Catalog / LinkedIn / Tester / Relay
   ========================================================================== */

body.vh-motion-on
.vh-header-effect.vh-reveal-visible::before,
body.vh-motion-on
.vh-header-effect.vh-reveal-visible::after {
    /*
     * We intentionally DO NOT replace existing pseudo-elements.
     *
     * Only their filter is animated where applicable.
     */

    animation: vh-header-accent-glow 1250ms 160ms ease-out;
}


@keyframes vh-header-accent-glow {

    0% {
        filter: brightness(.9);
    }


    38% {
        filter: brightness(1.35) drop-shadow( 0 0 7px rgba(43, 205, 198, .42) );
    }


    100% {
        filter: brightness(1);
    }
}


/* ==========================================================================
   MOBILE
   Softer effect
   ========================================================================== */

@media (max-width: 768px) {

    body.vh-motion-on
    .vh-header-glow {
        width: 32%;
        filter: blur(4px);
        background: linear-gradient( 90deg, transparent, rgba(70, 210, 205, .10), rgba(122, 210, 244, .25), rgba(70, 210, 205, .10), transparent );
    }


    body.vh-motion-on
    .vh-header-effect.vh-reveal-visible
    .vh-header-glow {
        animation-duration: 1250ms;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .vh-header-glow {
        display: none !important;
    }


    .vh-header-effect {
        animation: none !important;
        filter: none !important;
    }
}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {

    .vh-header-glow {
        display: none !important;
    }


    .vh-header-effect {
        animation: none !important;
        filter: none !important;
    }
}



/* ==========================================================================
   VEBKO MEDIA PORTAL
   Cinematic image / video opening effect

   Applies to:
   - Tester images
   - Tester videos
   - Relay images
   - Relay videos
   - LinkedIn images
   - LinkedIn videos
   ========================================================================== */


/* ==========================================================================
   1. OPEN OVERLAY
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"],
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"],
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"] {
    animation: vh-media-backdrop-in 520ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-backdrop-in {

    0% {
        opacity: 0;
        backdrop-filter: blur(0px) saturate(.8);
        -webkit-backdrop-filter: blur(0px) saturate(.8);
    }


    45% {
        opacity: 1;
    }


    100% {
        opacity: 1;
        backdrop-filter: blur(6px) saturate(1.05);
        -webkit-backdrop-filter: blur(6px) saturate(1.05);
    }
}


/* ==========================================================================
   2. MEDIA CONTAINER
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel {
    position: relative !important;
    isolation: isolate;
    transform-origin: center center;
    animation: vh-media-portal-in 980ms cubic-bezier(.14, 1.05, .24, 1) both;
    will-change: transform, opacity, filter;
}


@keyframes vh-media-portal-in {

    0% {
        opacity: 0;
        transform: perspective(1200px) translate3d(0, 44px, -180px) rotateX(8deg) scale(.76);
        filter: blur(18px) brightness(.82) saturate(.75);
    }


    28% {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 10px, -35px) rotateX(2.5deg) scale(1.035);
        filter: blur(3px) brightness(1.06) saturate(1.12);
    }


    58% {
        transform: perspective(1200px) translate3d(0, -3px, 0) rotateX(-.5deg) scale(.992);
        filter: blur(0) brightness(1.025) saturate(1.05);
    }


    100% {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0) scale(1);
        filter: blur(0) brightness(1) saturate(1);
    }
}


/* ==========================================================================
   3. COLORED AURA BEHIND MEDIA
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content::before,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content::before,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: -26px;
    border-radius: 34px;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( ellipse at 25% 25%, rgba(37, 207, 200, .34), transparent 48% ), radial-gradient( ellipse at 78% 75%, rgba(57, 137, 229, .28), transparent 52% );
    filter: blur(18px);
    animation: vh-media-aura 1450ms 130ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-aura {

    0% {
        opacity: 0;
        transform: scale(.65);
    }


    34% {
        opacity: .95;
        transform: scale(1.06);
    }


    70% {
        opacity: .52;
        transform: scale(1.015);
    }


    100% {
        opacity: .18;
        transform: scale(1);
    }
}


/* ==========================================================================
   4. LIGHT RING
   A very short expanding energy ring
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content::after,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content::after,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel::after {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 0;
    border: 1px solid rgba(94, 226, 219, .0);
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(63, 204, 199, .0);
    animation: vh-media-energy-ring 1050ms 100ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-energy-ring {

    0% {
        opacity: 0;
        inset: 20%;
        border-color: rgba(92, 226, 220, .85);
        box-shadow: 0 0 22px rgba(47, 207, 202, .45);
    }


    30% {
        opacity: 1;
        inset: -5px;
        border-color: rgba(92, 226, 220, .55);
        box-shadow: 0 0 36px rgba(53, 164, 226, .24);
    }


    100% {
        opacity: 0;
        inset: -18px;
        border-color: rgba(92, 226, 220, 0);
        box-shadow: 0 0 60px rgba(53, 164, 226, 0);
    }
}


/* ==========================================================================
   5. IMAGE / VIDEO ITSELF
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
#helpImageLightboxImage,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
#helpVideoModalPlayer,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxImage,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxVideo {
    animation: vh-media-content-reveal 1000ms 130ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-content-reveal {

    0% {
        opacity: 0;
        clip-path: inset( 48% 12% 48% 12% round 30px );
        transform: scale(1.08);
        filter: blur(12px) brightness(1.15);
    }


    38% {
        opacity: 1;
        clip-path: inset( 7% 3% 7% 3% round 20px );
        transform: scale(1.025);
        filter: blur(2px) brightness(1.06);
    }


    100% {
        opacity: 1;
        clip-path: inset( 0 0 0 0 round 16px );
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}


/* ==========================================================================
   6. SPECTRAL LIGHT PASS
   Creates a moving light reflection above the media
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content
.vh-media-shine,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content
.vh-media-shine,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel
.vh-media-shine {
    pointer-events: none;
}



/* ==========================================================================
   7. MOVING SPECTRAL SHINE
   ========================================================================== */

.vh-media-shine {
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -42%;
    width: 18%;
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-220%) skewX(-16deg);
    background: linear-gradient( 90deg, transparent 0%, rgba(62, 205, 200, .04) 18%, rgba(85, 221, 215, .20) 38%, rgba(188, 238, 255, .52) 50%, rgba(70, 153, 235, .22) 64%, transparent 100% );
    filter: blur(4px);
    mix-blend-mode: screen;
}


/* Tester / Relay image */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.vh-media-shine,
/* Tester / Relay video */
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.vh-media-shine,
/* LinkedIn image / video */
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.vh-media-shine {
    animation: vh-media-spectral-pass 1350ms 390ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-spectral-pass {

    0% {
        opacity: 0;
        transform: translateX(-220%) skewX(-16deg);
    }


    18% {
        opacity: .45;
    }


    40% {
        opacity: 1;
    }


    72% {
        opacity: .75;
    }


    100% {
        opacity: 0;
        transform: translateX(900%) skewX(-16deg);
    }
}


/* ==========================================================================
   8. CLOSE BUTTON ENTRANCE
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-media-modal-close,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-media-modal-close,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxCloseBtn {
    animation: vh-media-close-button-in 720ms 520ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-media-close-button-in {

    0% {
        opacity: 0;
        transform: rotate(-35deg) scale(.45);
        filter: blur(5px);
    }


    55% {
        opacity: 1;
        transform: rotate(5deg) scale(1.10);
        filter: blur(0);
    }


    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
        filter: blur(0);
    }
}


/* ==========================================================================
   9. MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #helpImageLightbox[aria-hidden="false"]
    .help-image-lightbox-content,
    body.help-body.help-ui-2026
    #helpVideoModal[aria-hidden="false"]
    .help-video-modal-content,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    .media-lightbox-panel {
        animation-duration: 780ms;
    }


    body.help-body.help-ui-2026
    #helpImageLightbox[aria-hidden="false"]
    #helpImageLightboxImage,
    body.help-body.help-ui-2026
    #helpVideoModal[aria-hidden="false"]
    #helpVideoModalPlayer,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    #lightboxImage,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    #lightboxVideo {
        animation-duration: 820ms;
    }


    .vh-media-shine {
        width: 28%;
    }
}


/* ==========================================================================
   10. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    #helpImageLightbox,
    #helpVideoModal,
    #mediaLightbox,
    #helpImageLightbox *,
    #helpVideoModal *,
    #mediaLightbox * {
        animation: none !important;
        transition: none !important;
    }


    .vh-media-shine {
        display: none !important;
    }
}



/* ==========================================================================
   VEBKO MEDIA PORTAL — SMOOTH TIMELINE FIX

   Fixes the small pause near the end of image/video opening.
   All main effects now share one continuous motion timeline.
   ========================================================================== */


/* ==========================================================================
   1. MAIN PORTAL
   No overshoot / no settle pause
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel {
    animation: vh-media-portal-smooth 920ms cubic-bezier(.16, .84, .24, 1) both !important;
    will-change: transform, opacity, filter !important;
}


@keyframes vh-media-portal-smooth {

    0% {
        opacity: 0;
        transform: perspective(1200px) translate3d(0, 38px, -130px) rotateX(5deg) scale(.84);
        filter: blur(11px) brightness(.88) saturate(.82);
    }


    100% {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
        filter: blur(0) brightness(1) saturate(1);
    }
}


/* ==========================================================================
   2. IMAGE / VIDEO REVEAL
   Same timing as container
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
#helpImageLightboxImage,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
#helpVideoModalPlayer,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxImage,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxVideo {
    animation: vh-media-content-smooth 920ms cubic-bezier(.16, .84, .24, 1) both !important;
    will-change: transform, opacity, clip-path, filter !important;
}


@keyframes vh-media-content-smooth {

    0% {
        opacity: 0;
        clip-path: inset( 24% 9% 24% 9% round 28px );
        transform: scale(1.055);
        filter: blur(8px) brightness(1.10);
    }


    100% {
        opacity: 1;
        clip-path: inset( 0 0 0 0 round 16px );
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}


/* ==========================================================================
   3. BACKDROP
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"],
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"],
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"] {
    animation: vh-media-backdrop-smooth 720ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-media-backdrop-smooth {

    0% {
        opacity: 0;
        backdrop-filter: blur(0) saturate(.9);
        -webkit-backdrop-filter: blur(0) saturate(.9);
    }


    100% {
        opacity: 1;
        backdrop-filter: blur(6px) saturate(1.04);
        -webkit-backdrop-filter: blur(6px) saturate(1.04);
    }
}


/* ==========================================================================
   4. AURA
   Reaches its final state continuously
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content::before,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content::before,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel::before {
    animation: vh-media-aura-smooth 920ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-media-aura-smooth {

    0% {
        opacity: 0;
        transform: scale(.72);
    }


    55% {
        opacity: .60;
    }


    100% {
        opacity: .18;
        transform: scale(1);
    }
}


/* ==========================================================================
   5. ENERGY RING
   Runs inside the SAME opening timeline
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-image-lightbox-content::after,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-video-modal-content::after,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.media-lightbox-panel::after {
    animation: vh-media-energy-ring-smooth 900ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-media-energy-ring-smooth {

    0% {
        opacity: 0;
        inset: 16%;
        border-color: rgba(92, 226, 220, .0);
        box-shadow: 0 0 0 rgba(47, 207, 202, 0);
    }


    28% {
        opacity: .9;
        border-color: rgba(92, 226, 220, .62);
        box-shadow: 0 0 28px rgba(47, 207, 202, .30);
    }


    100% {
        opacity: 0;
        inset: -14px;
        border-color: rgba(92, 226, 220, 0);
        box-shadow: 0 0 55px rgba(53, 164, 226, 0);
    }
}


/* ==========================================================================
   6. LIGHT PASS
   Starts earlier and finishes with the main animation.
   Previously this continued as a "second phase".
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.vh-media-shine,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.vh-media-shine,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
.vh-media-shine {
    animation: vh-media-spectral-pass-smooth 900ms 80ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-media-spectral-pass-smooth {

    0% {
        opacity: 0;
        transform: translateX(-220%) skewX(-16deg);
    }


    18% {
        opacity: .32;
    }


    46% {
        opacity: .92;
    }


    76% {
        opacity: .48;
    }


    100% {
        opacity: 0;
        transform: translateX(900%) skewX(-16deg);
    }
}


/* ==========================================================================
   7. CLOSE BUTTON
   Finish at the same time as the portal.
   No late second animation.
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox[aria-hidden="false"]
.help-media-modal-close,
body.help-body.help-ui-2026
#helpVideoModal[aria-hidden="false"]
.help-media-modal-close,
body.help-body.help-ui-2026
#mediaLightbox[aria-hidden="false"]
#lightboxCloseBtn {
    animation: vh-media-close-smooth 620ms 180ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-media-close-smooth {

    0% {
        opacity: 0;
        transform: rotate(-18deg) scale(.70);
    }


    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}


/* ==========================================================================
   8. MOBILE
   Slightly shorter but same continuous curve
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #helpImageLightbox[aria-hidden="false"]
    .help-image-lightbox-content,
    body.help-body.help-ui-2026
    #helpVideoModal[aria-hidden="false"]
    .help-video-modal-content,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    .media-lightbox-panel {
        animation-duration: 780ms !important;
    }


    body.help-body.help-ui-2026
    #helpImageLightbox[aria-hidden="false"]
    #helpImageLightboxImage,
    body.help-body.help-ui-2026
    #helpVideoModal[aria-hidden="false"]
    #helpVideoModalPlayer,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    #lightboxImage,
    body.help-body.help-ui-2026
    #mediaLightbox[aria-hidden="false"]
    #lightboxVideo {
        animation-duration: 780ms !important;
    }
}



/* ==========================================================================
   VEBKO MEDIA PORTAL — CLOSING MOTION
   Reverse cinematic transition
   ========================================================================== */


/* ==========================================================================
   1. BACKDROP OUT
   ========================================================================== */

body.help-body.help-ui-2026
:is( #helpImageLightbox, #helpVideoModal, #mediaLightbox ).vh-media-closing {
    animation: vh-media-backdrop-out 680ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-backdrop-out {

    0% {
        opacity: 1;
        backdrop-filter: blur(6px) saturate(1.04);
        -webkit-backdrop-filter: blur(6px) saturate(1.04);
    }


    100% {
        opacity: 0;
        backdrop-filter: blur(0) saturate(.9);
        -webkit-backdrop-filter: blur(0) saturate(.9);
    }
}


/* ==========================================================================
   2. CARD / PORTAL OUT
   Exact reverse feel of opening
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox.vh-media-closing
.help-image-lightbox-content,
body.help-body.help-ui-2026
#helpVideoModal.vh-media-closing
.help-video-modal-content,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
.media-lightbox-panel {
    animation: vh-media-portal-out 680ms cubic-bezier(.7, 0, .84, .16) both !important;
    pointer-events: none !important;
}


@keyframes vh-media-portal-out {

    0% {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
        filter: blur(0) brightness(1) saturate(1);
    }


    100% {
        opacity: 0;
        transform: perspective(1200px) translate3d(0, 38px, -130px) rotateX(5deg) scale(.84);
        filter: blur(11px) brightness(.88) saturate(.82);
    }
}


/* ==========================================================================
   3. IMAGE / VIDEO COLLAPSE
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox.vh-media-closing
#helpImageLightboxImage,
body.help-body.help-ui-2026
#helpVideoModal.vh-media-closing
#helpVideoModalPlayer,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
#lightboxImage,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
#lightboxVideo {
    animation: vh-media-content-out 620ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-content-out {

    0% {
        opacity: 1;
        clip-path: inset( 0 0 0 0 round 16px );
        transform: scale(1);
        filter: blur(0) brightness(1);
    }


    100% {
        opacity: 0;
        clip-path: inset( 24% 9% 24% 9% round 28px );
        transform: scale(1.055);
        filter: blur(8px) brightness(1.10);
    }
}


/* ==========================================================================
   4. AURA COLLAPSE
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox.vh-media-closing
.help-image-lightbox-content::before,
body.help-body.help-ui-2026
#helpVideoModal.vh-media-closing
.help-video-modal-content::before,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
.media-lightbox-panel::before {
    animation: vh-media-aura-out 650ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-aura-out {

    0% {
        opacity: .18;
        transform: scale(1);
    }


    45% {
        opacity: .42;
    }


    100% {
        opacity: 0;
        transform: scale(.68);
    }
}


/* ==========================================================================
   5. ENERGY RING COLLAPSES INWARD
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox.vh-media-closing
.help-image-lightbox-content::after,
body.help-body.help-ui-2026
#helpVideoModal.vh-media-closing
.help-video-modal-content::after,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
.media-lightbox-panel::after {
    animation: vh-media-energy-ring-out 560ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-energy-ring-out {

    0% {
        opacity: 0;
        inset: -14px;
        border-color: rgba(92, 226, 220, 0);
    }


    42% {
        opacity: .75;
        border-color: rgba(92, 226, 220, .48);
        box-shadow: 0 0 30px rgba(47, 207, 202, .22);
    }


    100% {
        opacity: 0;
        inset: 18%;
        border-color: rgba(92, 226, 220, 0);
        box-shadow: 0 0 0 rgba(47, 207, 202, 0);
    }
}


/* ==========================================================================
   6. REVERSE SHINE
   Light returns toward the opposite side while closing
   ========================================================================== */

body.help-body.help-ui-2026
:is( #helpImageLightbox, #helpVideoModal, #mediaLightbox ).vh-media-closing
.vh-media-shine {
    animation: vh-media-shine-out 600ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-shine-out {

    0% {
        opacity: 0;
        transform: translateX(900%) skewX(-16deg);
    }


    42% {
        opacity: .72;
    }


    70% {
        opacity: .30;
    }


    100% {
        opacity: 0;
        transform: translateX(-220%) skewX(-16deg);
    }
}


/* ==========================================================================
   7. CLOSE BUTTON OUT
   ========================================================================== */

body.help-body.help-ui-2026
#helpImageLightbox.vh-media-closing
.help-media-modal-close,
body.help-body.help-ui-2026
#helpVideoModal.vh-media-closing
.help-media-modal-close,
body.help-body.help-ui-2026
#mediaLightbox.vh-media-closing
#lightboxCloseBtn {
    animation: vh-media-close-button-out 380ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-media-close-button-out {

    0% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }


    100% {
        opacity: 0;
        transform: rotate(16deg) scale(.65);
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    :is( #helpImageLightbox, #helpVideoModal, #mediaLightbox ).vh-media-closing {
        animation-duration: 580ms !important;
    }


    body.help-body.help-ui-2026
    #helpImageLightbox.vh-media-closing
    .help-image-lightbox-content,
    body.help-body.help-ui-2026
    #helpVideoModal.vh-media-closing
    .help-video-modal-content,
    body.help-body.help-ui-2026
    #mediaLightbox.vh-media-closing
    .media-lightbox-panel {
        animation-duration: 580ms !important;
    }
}



/* ==========================================================================
   VEBKO TOOL DIALOG MOTION

   Applies to:
   - Sharing Window
   - Play Video / Resources Window
   ========================================================================== */


/* ==========================================================================
   BACKDROP OPEN
   ========================================================================== */

body.help-body.help-ui-2026
:is( #sharingModal, #helpToolbarVideoModal ).vh-tool-dialog-opening {
    display: flex !important;
    animation: vh-tool-backdrop-in 520ms cubic-bezier(.16, .84, .24, 1) both !important;
}


@keyframes vh-tool-backdrop-in {

    0% {
        opacity: 0;
        backdrop-filter: blur(0) saturate(.88);
        -webkit-backdrop-filter: blur(0) saturate(.88);
    }


    100% {
        opacity: 1;
        backdrop-filter: blur(6px) saturate(1.04);
        -webkit-backdrop-filter: blur(6px) saturate(1.04);
    }
}


/* ==========================================================================
   PANEL OPEN

   Sharing:
   .help-sharing-modal-dialog

   Video resources:
   .help-toolbar-video-content
   ========================================================================== */

body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-opening
.help-sharing-modal-content
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-content {
    position: relative !important;
    isolation: isolate;
    animation: vh-tool-panel-in 820ms cubic-bezier(.16, .84, .24, 1) both !important;
    will-change: opacity, transform, filter;
}


@keyframes vh-tool-panel-in {

    0% {
        opacity: 0;
        transform: perspective(1100px) translate3d(0, 46px, -90px) rotateX(6deg) scale(.89);
        filter: blur(12px) brightness(.90);
    }


    100% {
        opacity: 1;
        transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
        filter: blur(0) brightness(1);
    }
}


/* ==========================================================================
   GLOW AURA
   ========================================================================== */

body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-opening
.help-sharing-modal-dialog::before,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-content::before {
    content: "";
    position: absolute;
    inset: -20px;
    z-index: -2;
    pointer-events: none;
    border-radius: 28px;
    opacity: 0;
    background: radial-gradient( ellipse at 18% 20%, rgba(30, 205, 198, .28), transparent 48% ), radial-gradient( ellipse at 82% 80%, rgba(50, 143, 226, .22), transparent 52% );
    filter: blur(20px);
    animation: vh-tool-aura-in 950ms 80ms cubic-bezier(.16, .84, .24, 1) both;
}


@keyframes vh-tool-aura-in {

    0% {
        opacity: 0;
        transform: scale(.72);
    }


    55% {
        opacity: .70;
    }


    100% {
        opacity: .20;
        transform: scale(1);
    }
}


/* ==========================================================================
   MOVING LIGHT
   ========================================================================== */

.vh-tool-dialog-shine {
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -40%;
    width: 19%;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-220%) skewX(-17deg);
    background: linear-gradient( 90deg, transparent, rgba(34, 199, 194, .05), rgba(79, 223, 217, .22), rgba(196, 240, 255, .58), rgba(62, 145, 230, .20), transparent );
    filter: blur(4px);
    mix-blend-mode: screen;
}


.vh-tool-dialog-opening
.vh-tool-dialog-shine {
    animation: vh-tool-shine-in 920ms 160ms cubic-bezier(.16, .84, .24, 1) both;
}


@keyframes vh-tool-shine-in {

    0% {
        opacity: 0;
        transform: translateX(-220%) skewX(-17deg);
    }


    28% {
        opacity: .45;
    }


    52% {
        opacity: 1;
    }


    78% {
        opacity: .40;
    }


    100% {
        opacity: 0;
        transform: translateX(850%) skewX(-17deg);
    }
}


/* ==========================================================================
   CHILD STAGGER
   ========================================================================== */

.vh-tool-dialog-child {
    opacity: 1;
}


.vh-tool-dialog-opening
.vh-tool-dialog-child {
    animation: vh-tool-child-in 620ms var(--vh-tool-delay, 180ms) cubic-bezier(.16, .84, .24, 1) both;
}


@keyframes vh-tool-child-in {

    0% {
        opacity: 0;
        transform: translateY(18px) scale(.97);
        filter: blur(6px);
    }


    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ==========================================================================
   TABLE ROW MICRO-STAGGER
   ========================================================================== */

#helpToolbarVideoModal.vh-tool-dialog-opening
#TableDefultDownloadFilesVideo
tbody tr {
    animation: vh-tool-row-in 520ms cubic-bezier(.16, .84, .24, 1) both;
}


    #helpToolbarVideoModal.vh-tool-dialog-opening
    #TableDefultDownloadFilesVideo
    tbody tr:nth-child(1) {
        animation-delay: 300ms;
    }


    #helpToolbarVideoModal.vh-tool-dialog-opening
    #TableDefultDownloadFilesVideo
    tbody tr:nth-child(2) {
        animation-delay: 350ms;
    }


    #helpToolbarVideoModal.vh-tool-dialog-opening
    #TableDefultDownloadFilesVideo
    tbody tr:nth-child(3) {
        animation-delay: 400ms;
    }


    #helpToolbarVideoModal.vh-tool-dialog-opening
    #TableDefultDownloadFilesVideo
    tbody tr:nth-child(4) {
        animation-delay: 450ms;
    }


    #helpToolbarVideoModal.vh-tool-dialog-opening
    #TableDefultDownloadFilesVideo
    tbody tr:nth-child(n+5) {
        animation-delay: 500ms;
    }


@keyframes vh-tool-row-in {

    0% {
        opacity: 0;
        transform: translateX(-12px);
    }


    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================================
   CLOSING BACKDROP
   ========================================================================== */

body.help-body.help-ui-2026
:is( #sharingModal, #helpToolbarVideoModal ).vh-tool-dialog-closing {
    display: flex !important;
    animation: vh-tool-backdrop-out 590ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-tool-backdrop-out {

    0% {
        opacity: 1;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }


    100% {
        opacity: 0;
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}


/* ==========================================================================
   PANEL CLOSE
   ========================================================================== */

body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-closing
.help-sharing-modal-content
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-video-content {
    animation: vh-tool-panel-out 590ms cubic-bezier(.7, 0, .84, .16) both !important;
    pointer-events: none !important;
}


@keyframes vh-tool-panel-out {

    0% {
        opacity: 1;
        transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0deg) scale(1);
        filter: blur(0) brightness(1);
    }


    100% {
        opacity: 0;
        transform: perspective(1100px) translate3d(0, 38px, -85px) rotateX(5deg) scale(.90);
        filter: blur(10px) brightness(.90);
    }
}


/* ==========================================================================
   CHILDREN CLOSE
   ========================================================================== */

.vh-tool-dialog-closing
.vh-tool-dialog-child {
    animation: vh-tool-child-out 390ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-tool-child-out {

    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }


    100% {
        opacity: 0;
        transform: translateY(12px) scale(.97);
        filter: blur(5px);
    }
}


/* ==========================================================================
   REVERSE LIGHT PASS
   ========================================================================== */

.vh-tool-dialog-closing
.vh-tool-dialog-shine {
    animation: vh-tool-shine-out 500ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-tool-shine-out {

    0% {
        opacity: 0;
        transform: translateX(850%) skewX(-17deg);
    }


    45% {
        opacity: .65;
    }


    100% {
        opacity: 0;
        transform: translateX(-220%) skewX(-17deg);
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #sharingModal.vh-tool-dialog-opening
    .help-sharing-modal-dialog,
    body.help-body.help-ui-2026
    #helpToolbarVideoModal.vh-tool-dialog-opening
    .help-toolbar-video-content {
        animation-duration: 700ms !important;
    }


    body.help-body.help-ui-2026
    :is( #sharingModal, #helpToolbarVideoModal ).vh-tool-dialog-closing {
        animation-duration: 500ms !important;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .vh-tool-dialog-opening,
    .vh-tool-dialog-closing,
    .vh-tool-dialog-opening *,
    .vh-tool-dialog-closing * {
        animation: none !important;
    }


    .vh-tool-dialog-shine {
        display: none !important;
    }
}


/* ==========================================================================
   TOOL DIALOG — STABLE OPEN STATE

   Keeps Share / Video modal visible after the opening animation finishes.
   ========================================================================== */

body.help-body.help-ui-2026
:is( #sharingModal, #helpToolbarVideoModal ).vh-tool-dialog-open {
    display: flex !important;
    opacity: 1;
}


/* ==========================================================================
   SHARING WINDOW — BETTER LIGHT CONTAINMENT
   ========================================================================== */

/* ==========================================================================
   SHARING WINDOW — KEEP ORIGINAL ROUNDED CORNERS
   ========================================================================== */

body.help-body.help-ui-2026
#sharingModal
.help-sharing-modal-content {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--vbk-radius-xl, 22px) !important;
    isolation: isolate;
}

body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-opening
.help-sharing-modal-content,
body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-open
.help-sharing-modal-content,
body.help-body.help-ui-2026
#sharingModal.vh-tool-dialog-closing
.help-sharing-modal-content {
    border-radius: var(--vbk-radius-xl, 22px) !important;
    overflow: hidden !important;
}


/*
   Move the shine visually into the visible content area.
*/

body.help-body.help-ui-2026
#sharingModal
.vh-tool-dialog-shine {
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 16% !important;
    z-index: 8 !important;
    pointer-events: none !important;
    filter: blur(3px) !important;
}



/* ==========================================================================
   PLAY VIDEO / RESOURCES
   FINAL SMOOTH MOTION FIX

   - Animate the dialog as ONE surface
   - No child stagger
   - No table row animation
   - No scrollbar flash
   - Keep scrolling functional
   ========================================================================== */


/* ==========================================================================
   ALWAYS HIDE VISUAL SCROLLBAR
   Scrolling itself remains enabled.
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal
.help-toolbar-video-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}


    body.help-body.help-ui-2026
    #helpToolbarVideoModal
    .help-toolbar-video-content::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }


/* Table can still scroll horizontally if ever required,
   but its scrollbar is visually hidden. */

body.help-body.help-ui-2026
#helpToolbarVideoModal
.help-toolbar-resource-table-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}


    body.help-body.help-ui-2026
    #helpToolbarVideoModal
    .help-toolbar-resource-table-scroll::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
    }


/* ==========================================================================
   OPENING
   One continuous movement only.
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-content {
    animation: vh-toolbar-video-open 720ms cubic-bezier(.16, 1, .3, 1) both !important;
    will-change: transform, opacity !important;
}


@keyframes vh-toolbar-video-open {

    0% {
        opacity: 0;
        transform: translate3d(0, 34px, 0) scale(.92);
    }


    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}


/* ==========================================================================
   IMPORTANT
   DISABLE CHILD ANIMATIONS INSIDE PLAY VIDEO MODAL

   They were causing the stop / second phase.
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.vh-tool-dialog-child,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
#TableDefultDownloadFilesVideo
tbody tr,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-title,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-player-wrap,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-video-note,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.help-toolbar-resource-table-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}


/* ==========================================================================
   KEEP THE LIGHT EFFECT, BUT SOFTER
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-opening
.vh-tool-dialog-shine {
    animation: vh-toolbar-video-shine 760ms 40ms cubic-bezier(.16, 1, .3, 1) both !important;
}


@keyframes vh-toolbar-video-shine {

    0% {
        opacity: 0;
        transform: translateX(-220%) skewX(-17deg);
    }


    42% {
        opacity: .70;
    }


    100% {
        opacity: 0;
        transform: translateX(850%) skewX(-17deg);
    }
}


/* ==========================================================================
   CLOSING
   Same movement in reverse.
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-video-content {
    animation: vh-toolbar-video-close 580ms cubic-bezier(.7, 0, .84, .16) both !important;
    will-change: transform, opacity !important;
}


@keyframes vh-toolbar-video-close {

    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }


    100% {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(.93);
    }
}


/* ==========================================================================
   NO CHILD ANIMATION DURING CLOSE EITHER
   ========================================================================== */

body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.vh-tool-dialog-child,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
#TableDefultDownloadFilesVideo
tbody tr,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-video-title,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-video-player-wrap,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-video-note,
body.help-body.help-ui-2026
#helpToolbarVideoModal.vh-tool-dialog-closing
.help-toolbar-resource-table-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #helpToolbarVideoModal.vh-tool-dialog-opening
    .help-toolbar-video-content {
        animation-duration: 620ms !important;
    }


    body.help-body.help-ui-2026
    #helpToolbarVideoModal.vh-tool-dialog-closing
    .help-toolbar-video-content {
        animation-duration: 500ms !important;
    }
}



/* ==========================================================================
   CATALOG PDF — CINEMATIC FULLSCREEN + PAGE PORTAL
   ========================================================================== */


/* ==========================================================================
   1. FULLSCREEN ENTER
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-entering:fullscreen {
    animation: vh-catalog-fs-background-in 700ms cubic-bezier(.16, 1, .3, 1) both !important;
}


@keyframes vh-catalog-fs-background-in {

    0% {
        background: #dbe5e8;
        box-shadow: inset 0 0 120px rgba(31, 181, 180, .18);
    }


    45% {
        background: #eaf2f4;
        box-shadow: inset 0 0 180px rgba(44, 157, 220, .13);
    }


    100% {
        background: #e8eff1;
        box-shadow: inset 0 0 0 transparent;
    }
}


/* Toolbar enters from above */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-entering:fullscreen
.catalog-pdf-toolbar {
    animation: vh-catalog-fs-toolbar-in 650ms cubic-bezier(.16, 1, .3, 1) both !important;
}


@keyframes vh-catalog-fs-toolbar-in {

    0% {
        opacity: 0;
        transform: translateY(-18px);
        filter: blur(6px);
    }


    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}


/* PDF surface rises from depth */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-entering:fullscreen
.catalog-pdf-scroll {
    animation: vh-catalog-fs-content-in 720ms cubic-bezier(.16, 1, .3, 1) both !important;
}


@keyframes vh-catalog-fs-content-in {

    0% {
        opacity: .20;
        transform: perspective(1400px) translate3d(0, 28px, -100px) scale(.965);
        filter: blur(7px) saturate(.88);
    }


    100% {
        opacity: 1;
        transform: perspective(1400px) translate3d(0, 0, 0) scale(1);
        filter: blur(0) saturate(1);
    }
}


/* ==========================================================================
   2. FULLSCREEN LIGHT PORTAL
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-entering:fullscreen::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: 100;
    pointer-events: none;
    background: radial-gradient( circle at center, rgba(101, 235, 226, .24) 0%, rgba(72, 164, 226, .11) 26%, transparent 58% );
    opacity: 0;
    transform: scale(.35);
    animation: vh-catalog-fs-flash 720ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-catalog-fs-flash {

    0% {
        opacity: 0;
        transform: scale(.35);
    }


    36% {
        opacity: 1;
    }


    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}


/* ==========================================================================
   3. FULLSCREEN EXIT
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-leaving:fullscreen
.catalog-pdf-toolbar {
    animation: vh-catalog-fs-toolbar-out 340ms cubic-bezier(.7, 0, .84, .16) both !important;
}


body.help-body.help-ui-2026
.catalog-preview.vh-fs-leaving:fullscreen
.catalog-pdf-scroll {
    animation: vh-catalog-fs-content-out 340ms cubic-bezier(.7, 0, .84, .16) both !important;
}


@keyframes vh-catalog-fs-toolbar-out {

    0% {
        opacity: 1;
        transform: translateY(0);
    }


    100% {
        opacity: .20;
        transform: translateY(-12px);
        filter: blur(4px);
    }
}


@keyframes vh-catalog-fs-content-out {

    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }


    100% {
        opacity: .26;
        transform: scale(.965) translateY(16px);
        filter: blur(6px);
    }
}


/* ==========================================================================
   4. RETURN FROM FULLSCREEN
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview.vh-fs-returning:not(:fullscreen) {
    animation: vh-catalog-fs-return 580ms cubic-bezier(.16, 1, .3, 1) both !important;
}


@keyframes vh-catalog-fs-return {

    0% {
        opacity: .55;
        transform: translateY(16px) scale(.975);
        filter: blur(5px);
    }


    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


/* ==========================================================================
   5. PAGE TRANSITION HOST
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-pdf-scroll.vh-pdf-transitioning {
    position: relative !important;
    overflow: hidden !important;
    perspective: 1600px;
}


    /* Both pages temporarily occupy the same space */

    body.help-body.help-ui-2026
    .catalog-pdf-scroll.vh-pdf-transitioning
    .catalog-pdf-page {
        transform-origin: center center;
        backface-visibility: hidden;
        will-change: transform, opacity, filter, clip-path;
    }


    /* New page overlays current page */

    body.help-body.help-ui-2026
    .catalog-pdf-scroll.vh-pdf-transitioning
    .vh-pdf-page-enter {
        position: absolute !important;
        top: 0;
        left: 50%;
        z-index: 4;
        margin: 16px 0 0 !important;
    }


/* ==========================================================================
   6. NEXT PAGE — INITIAL
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-enter-next {
    opacity: 0;
    transform: translateX(calc(-50% + 52px)) perspective(1600px) rotateY(-3.2deg) scale(.975);
    clip-path: inset( 0 0 0 14% round 8px );
    filter: blur(3px) brightness(1.04);
}


/* ==========================================================================
   7. PREVIOUS PAGE — INITIAL
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-enter-prev {
    opacity: 0;
    transform: translateX(calc(-50% - 52px)) perspective(1600px) rotateY(3.2deg) scale(.975);
    clip-path: inset( 0 14% 0 0 round 8px );
    filter: blur(3px) brightness(1.04);
}


/* ==========================================================================
   8. NEW PAGE ACTIVE
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-enter-active {
    opacity: 1 !important;
    transform: translateX(-50%) perspective(1600px) rotateY(0deg) scale(1) !important;
    clip-path: inset( 0 0 0 0 round 0 ) !important;
    filter: blur(0) brightness(1) !important;
    transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1), clip-path 700ms cubic-bezier(.16, 1, .3, 1), filter 620ms cubic-bezier(.16, 1, .3, 1);
}


/* ==========================================================================
   9. OLD PAGE — NEXT EXIT
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-exit-next.vh-pdf-page-exit-active {
    opacity: 0;
    transform: translateX(-42px) perspective(1600px) rotateY(2deg) scale(.985);
    clip-path: inset( 0 12% 0 0 round 8px );
    filter: blur(2px) brightness(.94);
    transition: opacity 560ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1), clip-path 700ms cubic-bezier(.16, 1, .3, 1), filter 560ms ease;
}


/* ==========================================================================
   10. OLD PAGE — PREVIOUS EXIT
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-exit-prev.vh-pdf-page-exit-active {
    opacity: 0;
    transform: translateX(42px) perspective(1600px) rotateY(-2deg) scale(.985);
    clip-path: inset( 0 0 0 12% round 8px );
    filter: blur(2px) brightness(.94);
    transition: opacity 560ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1), clip-path 700ms cubic-bezier(.16, 1, .3, 1), filter 560ms ease;
}


/* ==========================================================================
   11. SPECIAL LIGHT PASS ON NEW PDF PAGE
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-page-enter {
    overflow: hidden;
}


    body.help-body.help-ui-2026
    .vh-pdf-page-enter::after {
        content: "";
        position: absolute;
        top: -15%;
        bottom: -15%;
        left: -30%;
        width: 15%;
        z-index: 10;
        pointer-events: none;
        opacity: 0;
        transform: skewX(-14deg) translateX(-250%);
        background: linear-gradient( 90deg, transparent, rgba(56, 206, 200, .06), rgba(173, 235, 255, .42), rgba(59, 151, 229, .11), transparent );
        filter: blur(3px);
    }


body.help-body.help-ui-2026
.vh-pdf-page-enter-active::after {
    animation: vh-pdf-page-light-pass 720ms 60ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-pdf-page-light-pass {

    0% {
        opacity: 0;
        transform: skewX(-14deg) translateX(-250%);
    }


    34% {
        opacity: .85;
    }


    100% {
        opacity: 0;
        transform: skewX(-14deg) translateX(950%);
    }
}


/* ==========================================================================
   12. FULLSCREEN PAGE TRANSITION
   Keep transition centered and stable.
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview:fullscreen
.catalog-pdf-scroll.vh-pdf-transitioning {
    overflow: hidden !important;
}


/* ==========================================================================
   13. MOBILE
   Softer movement
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    .vh-pdf-page-enter-next {
        transform: translateX(calc(-50% + 28px)) scale(.985);
        rotate: 0deg;
    }


    body.help-body.help-ui-2026
    .vh-pdf-page-enter-prev {
        transform: translateX(calc(-50% - 28px)) scale(.985);
        rotate: 0deg;
    }


    body.help-body.help-ui-2026
    .vh-pdf-page-exit-next.vh-pdf-page-exit-active {
        transform: translateX(-22px) scale(.99);
    }


    body.help-body.help-ui-2026
    .vh-pdf-page-exit-prev.vh-pdf-page-exit-active {
        transform: translateX(22px) scale(.99);
    }
}


/* ==========================================================================
   14. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .catalog-preview,
    .catalog-preview *,
    .catalog-pdf-page {
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }
}


/* ==========================================================================
   CATALOG PDF — STABLE CINEMATIC PAGE TURN V2

   No resize
   No zoom jump
   No floating small page
   Both PDF pages keep exact geometry during transition
   ========================================================================== */


/* ==========================================================================
   HOST
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-pdf-scroll.vh-pdf-turning-clean {
    position: relative !important;
    overflow: hidden !important;
    perspective: 1800px;
    contain: layout paint;
}


    /* ==========================================================================
   BOTH PAGES DURING TRANSITION
   ========================================================================== */

    body.help-body.help-ui-2026
    .catalog-pdf-scroll.vh-pdf-turning-clean
    .catalog-pdf-page {
        position: absolute !important;
        top: 16px !important;
        left: 50% !important;
        width: fit-content !important;
        margin: 0 !important;
        transform-origin: center center;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform, opacity, filter, clip-path;
    }


/* ==========================================================================
   OLD PAGE — BASE
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-old {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
    filter: blur(0) brightness(1);
}


/* ==========================================================================
   NEW PAGE — BASE
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-new {
    z-index: 4;
    opacity: 0;
    filter: blur(2px) brightness(1.035);
}


    /* ==========================================================================
   NEXT PAGE — NEW PAGE STARTS FROM RIGHT

   IMPORTANT:
   No scale here.
   Width and height remain exactly the final PDF size.
   ========================================================================== */

    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-next {
        transform: translate3d( calc(-50% + 42px), 0, 0 );
        clip-path: inset( 0 0 0 48% round 3px );
    }


    /* ==========================================================================
   PREVIOUS PAGE — NEW PAGE STARTS FROM LEFT
   ========================================================================== */

    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-prev {
        transform: translate3d( calc(-50% - 42px), 0, 0 );
        clip-path: inset( 0 48% 0 0 round 3px );
    }


    /* ==========================================================================
   NEW PAGE — FINAL STATE
   ========================================================================== */

    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-active {
        opacity: 1 !important;
        transform: translate3d( -50%, 0, 0 ) !important;
        clip-path: inset( 0 0 0 0 round 0 ) !important;
        filter: blur(0) brightness(1) !important;
        transition: opacity 560ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1), clip-path 680ms cubic-bezier(.16, 1, .3, 1), filter 520ms ease;
    }


/* ==========================================================================
   OLD PAGE — NEXT
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-old.vh-pdf-turn-next.vh-pdf-turn-active {
    opacity: .08;
    transform: translate3d( calc(-50% - 38px), 0, 0 );
    clip-path: inset( 0 18% 0 0 round 2px );
    filter: blur(2px) brightness(.95);
    transition: opacity 520ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1), clip-path 680ms cubic-bezier(.16, 1, .3, 1), filter 520ms ease;
}


/* ==========================================================================
   OLD PAGE — PREVIOUS
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-old.vh-pdf-turn-prev.vh-pdf-turn-active {
    opacity: .08;
    transform: translate3d( calc(-50% + 38px), 0, 0 );
    clip-path: inset( 0 0 0 18% round 2px );
    filter: blur(2px) brightness(.95);
    transition: opacity 520ms ease, transform 680ms cubic-bezier(.16, 1, .3, 1), clip-path 680ms cubic-bezier(.16, 1, .3, 1), filter 520ms ease;
}


/* ==========================================================================
   LIGHT EDGE — NEW PAGE
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-new::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 54px;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    filter: blur(5px);
}


/* Next = light starts from left reveal edge */

body.help-body.help-ui-2026
.vh-pdf-turn-new.vh-pdf-turn-next::after {
    left: -24px;
    background: linear-gradient( 90deg, transparent, rgba(49, 203, 199, .12), rgba(174, 238, 255, .58), rgba(68, 154, 230, .11), transparent );
}


/* Previous = mirror */

body.help-body.help-ui-2026
.vh-pdf-turn-new.vh-pdf-turn-prev::after {
    right: -24px;
    background: linear-gradient( 270deg, transparent, rgba(49, 203, 199, .12), rgba(174, 238, 255, .58), rgba(68, 154, 230, .11), transparent );
}


/* ==========================================================================
   LIGHT ANIMATION
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-new.vh-pdf-turn-active::after {
    animation: vh-pdf-turn-edge-light 660ms 20ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-pdf-turn-edge-light {

    0% {
        opacity: 0;
    }


    26% {
        opacity: .95;
    }


    62% {
        opacity: .55;
    }


    100% {
        opacity: 0;
    }
}


/* ==========================================================================
   SUBTLE SHADOW BETWEEN BOTH PAGES
   ========================================================================== */

body.help-body.help-ui-2026
.vh-pdf-turn-new {
    box-shadow: -14px 0 30px rgba(10, 61, 68, .06);
}


    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-prev {
        box-shadow: 14px 0 30px rgba(10, 61, 68, .06);
    }


/* ==========================================================================
   MOBILE / TABLET

   Less horizontal movement but same effect.
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-next {
        transform: translate3d( calc(-50% + 24px), 0, 0 );
    }


    body.help-body.help-ui-2026
    .vh-pdf-turn-new.vh-pdf-turn-prev {
        transform: translate3d( calc(-50% - 24px), 0, 0 );
    }


    body.help-body.help-ui-2026
    .vh-pdf-turn-old.vh-pdf-turn-next.vh-pdf-turn-active {
        transform: translate3d( calc(-50% - 22px), 0, 0 );
    }


    body.help-body.help-ui-2026
    .vh-pdf-turn-old.vh-pdf-turn-prev.vh-pdf-turn-active {
        transform: translate3d( calc(-50% + 22px), 0, 0 );
    }
}



/* ==========================================================================
   CATALOG PDF PAGE TURN — FINAL GRID VERSION

   Critical difference:
   No absolute PDF pages.
   No scale.
   No width/height animation.
   ========================================================================== */


/* =========================================================
   TRANSITION STAGE
   ========================================================= */

body.help-body.help-ui-2026
.catalog-pdf-turn-stage {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
}


    /* =========================================================
   BOTH PAGES OCCUPY SAME GRID CELL

   They remain NORMAL grid items.
   Their size never changes.
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-page {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: center !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: fit-content !important;
        height: auto !important;
        margin: 16px auto 0 !important;
        transform-origin: center center !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: opacity, transform, filter, clip-path;
    }


    /* =========================================================
   ABSOLUTELY NEVER SCALE PDF DURING PAGE TURN
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-page,
    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-canvas {
        scale: 1 !important;
    }


    /* =========================================================
   OLD PAGE
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-turn-old {
        z-index: 1;
    }


    /* =========================================================
   NEW PAGE
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-turn-new {
        z-index: 2;
    }


    /* =========================================================
   CANVAS
   VERY IMPORTANT

   Never allow transition layout to resize the canvas.
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-pdf-turn-stage
    .catalog-pdf-canvas {
        display: block !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        transform: none;
    }


/* =========================================================
   LIGHT EDGE
   ========================================================= */

body.help-body.help-ui-2026
.catalog-pdf-turn-light {
    position: absolute;
    top: 16px;
    bottom: 0;
    width: 70px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    filter: blur(5px);
    mix-blend-mode: screen;
}


    body.help-body.help-ui-2026
    .catalog-pdf-turn-light.is-next {
        left: calc(50% - 35px);
        background: linear-gradient( 90deg, transparent, rgba(44, 201, 196, .08), rgba(171, 237, 255, .52), rgba(55, 148, 229, .13), transparent );
    }


    body.help-body.help-ui-2026
    .catalog-pdf-turn-light.is-prev {
        right: calc(50% - 35px);
        background: linear-gradient( 270deg, transparent, rgba(44, 201, 196, .08), rgba(171, 237, 255, .52), rgba(55, 148, 229, .13), transparent );
    }














/* ==========================================================================
   VEBKO SIDEBAR MOTION — CLEAN V2

   Goals:
   - Sidebar surface animates ONLY on initial page load.
   - Category contents can replay independently.
   - Section topics can replay independently when expanded.
   - Does NOT interfere with sidebar-collapsed.
   - Does NOT change sidebar width / margin / layout.
   ========================================================================== */


/* ==========================================================================
   1. PRELOAD

   Sidebar is already hidden before JS gets its first chance to run.
   This prevents:
       visible sidebar -> hidden sidebar -> animated sidebar
   ========================================================================== */

/* ==========================================================================
   1. SIDEBAR PRELOAD — NAVIGATION AWARE

   Three states:

   Normal first load:
       hide sidebar + controls + navigation items

   Topic navigation:
       hide NOTHING in sidebar

   Category navigation:
       keep sidebar + controls visible
       hide ONLY navigation items so they can stagger in
   ========================================================================== */


/* ==========================================================================
   FIRST REAL HELP LOAD — SIDEBAR SURFACE
   ========================================================================== */

html.vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left {
    filter: blur(5px) brightness(.88) saturate(.86);
}


html[dir="ltr"].vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left {
    clip-path: inset(0 100% 0 0);
}


html[dir="rtl"].vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left {
    clip-path: inset(0 0 0 100%);
}


/* ==========================================================================
   FIRST REAL HELP LOAD — SEARCH / CATEGORY
   ========================================================================== */

html.vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left
.serach-div,
html.vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left
.hr-sidebar,
html.vh-motion-preload:not(.vh-sidebar-topic-load):not(.vh-sidebar-category-load)
body.help-body.help-ui-2026
.panel-left
.categury_div {
    opacity: 0;
}


/* ==========================================================================
   NAVIGATION ITEMS

   Initial load:
       hidden -> stagger reveal

   Category navigation:
       hidden -> stagger reveal

   Topic navigation:
       NOT hidden
       therefore absolutely no sidebar animation
   ========================================================================== */

html.vh-motion-preload:not(.vh-sidebar-topic-load)
body.help-body.help-ui-2026
#tabBlock-content
[data-help-category-panel]:not(.none-display) > .sub-menu,
html.vh-motion-preload:not(.vh-sidebar-topic-load)
body.help-body.help-ui-2026
#tabBlock-content
[data-help-category-panel]:not(.none-display)
.sub-menu.open > .sub > li {
    opacity: 0;
}

/* ==========================================================================
   2. SIDEBAR SURFACE INTRO

   IMPORTANT:
   No transform here.

   Desktop open/close already uses margin.
   Mobile open/close already uses transform.
   Therefore this animation only uses:
   clip-path + filter.
   ========================================================================== */

@media (min-width: 769px) {

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .panel-left.vh-sidebar-boot.is-vh-sidebar-ready {
        animation: vh-sidebar-surface-in-ltr 920ms cubic-bezier(.16, 1, .3, 1) both;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .panel-left.vh-sidebar-boot.is-vh-sidebar-ready {
        animation: vh-sidebar-surface-in-rtl 920ms cubic-bezier(.16, 1, .3, 1) both;
    }
}


@keyframes vh-sidebar-surface-in-ltr {

    0% {
        clip-path: inset(0 100% 0 0);
        filter: blur(5px) brightness(.88) saturate(.86);
    }

    38% {
        filter: blur(1.8px) brightness(.97) saturate(.95);
    }

    100% {
        clip-path: inset(0 0 0 0);
        filter: blur(0) brightness(1) saturate(1);
    }
}


@keyframes vh-sidebar-surface-in-rtl {

    0% {
        clip-path: inset(0 0 0 100%);
        filter: blur(5px) brightness(.88) saturate(.86);
    }

    38% {
        filter: blur(1.8px) brightness(.97) saturate(.95);
    }

    100% {
        clip-path: inset(0 0 0 0);
        filter: blur(0) brightness(1) saturate(1);
    }
}


/* ==========================================================================
   3. TEAL / BLUE LIGHT SWEEP

   Temporary element created by JS.
   Removed after intro finishes.
   ========================================================================== */

body.help-body.help-ui-2026
.panel-left
.vh-sidebar-light-sweep {
    position: absolute;
    top: -14%;
    bottom: -14%;
    left: -38%;
    width: 18%;
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-190%, 0, 0) skewX(-15deg);
    background: linear-gradient( 90deg, transparent 0%, rgba(54, 213, 205, .03) 18%, rgba(76, 228, 219, .16) 38%, rgba(183, 240, 255, .34) 50%, rgba(70, 151, 225, .14) 64%, transparent 100% );
    filter: blur(4px);
    mix-blend-mode: screen;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.panel-left.is-vh-sidebar-ready
.vh-sidebar-light-sweep {
    animation: vh-sidebar-light-ltr 1050ms 120ms cubic-bezier(.16, 1, .3, 1) both;
}


html[dir="rtl"]
body.help-body.help-ui-2026
.panel-left.is-vh-sidebar-ready
.vh-sidebar-light-sweep {
    animation: vh-sidebar-light-rtl 1050ms 120ms cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-sidebar-light-ltr {

    0% {
        opacity: 0;
        transform: translate3d(-190%, 0, 0) skewX(-15deg);
    }

    30% {
        opacity: .38;
    }

    52% {
        opacity: .92;
    }

    76% {
        opacity: .35;
    }

    100% {
        opacity: 0;
        transform: translate3d(880%, 0, 0) skewX(-15deg);
    }
}


@keyframes vh-sidebar-light-rtl {

    0% {
        opacity: 0;
        transform: translate3d(880%, 0, 0) skewX(15deg);
    }

    30% {
        opacity: .38;
    }

    52% {
        opacity: .92;
    }

    76% {
        opacity: .35;
    }

    100% {
        opacity: 0;
        transform: translate3d(-190%, 0, 0) skewX(15deg);
    }
}


/* ==========================================================================
   4. SEARCH / DIVIDER / CATEGORY INTRO
   ========================================================================== */

body.help-body.help-ui-2026
.panel-left
.vh-sidebar-control-in {
    animation: vh-sidebar-control-enter 680ms var(--vh-sidebar-control-delay, 100ms) cubic-bezier(.16, 1, .3, 1) both;
}


@keyframes vh-sidebar-control-enter {

    0% {
        opacity: 0;
        transform: translate3d(0, -12px, 0);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* ==========================================================================
   5. NAVIGATION ITEM MOTION

   Used for:
   - initial page load
   - Tester -> Relay
   - Relay -> Tester
   - LinkedIn category
   - opening a section
   ========================================================================== */

body.help-body.help-ui-2026
#tabBlock-content
.vh-sidebar-item-in {
    animation: vh-sidebar-item-enter 650ms var(--vh-sidebar-item-delay, 0ms) cubic-bezier(.16, 1, .3, 1) both;
}


html[dir="ltr"]
body.help-body.help-ui-2026 {
    --vh-sidebar-item-x: -14px;
}


html[dir="rtl"]
body.help-body.help-ui-2026 {
    --vh-sidebar-item-x: 14px;
}


@keyframes vh-sidebar-item-enter {

    0% {
        opacity: 0;
        transform: translate3d( var(--vh-sidebar-item-x, -14px), 9px, 0 );
        filter: blur(4px);
    }

    42% {
        opacity: .86;
        filter: blur(1.2px);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}


/* ==========================================================================
   6. MOBILE

   Sidebar itself already slides with the existing mobile system.
   We intentionally do NOT replace that animation.
   Only category/topic item motion is used on mobile.
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #tabBlock-content
    .vh-sidebar-item-in {
        animation-duration: 560ms;
    }


    html[dir="ltr"]
    body.help-body.help-ui-2026 {
        --vh-sidebar-item-x: -10px;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026 {
        --vh-sidebar-item-x: 10px;
    }
}