html.ui-scale,
html.pre-force-desktop {
    transition: none !important;
}

html.ui-scale {
    zoom: var(--ui-zoom, 1);
    transition: none !important;
}

@supports not (zoom: 1) {
    html.ui-scale {
        transform-origin: top left;
        width: calc(100% / var(--ui-zoom, 1));
    }
}

@media (max-width: 991.98px) {
    html.ui-scale {
        zoom: 1;
    }

    @supports not (zoom: 1) {
        html.ui-scale {
            width: 100%;
        }
    }
}

/* ── Init lock: keep page invisible but NOT white blank ── */
html.scale-init-lock body {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Freeze all animations & transitions during lock */
html.scale-init-lock *,
html.scale-init-lock *::before,
html.scale-init-lock *::after {
    animation-play-state: paused !important;
    transition: none !important;
}

html.scale-init-lock body.page-fade {
    opacity: 0 !important;
    transition: none !important;
}

/* Prevent any img/iframe pop during lock */
html.scale-init-lock img,
html.scale-init-lock iframe,
html.scale-init-lock video {
    opacity: 0 !important;
}

/* ── Smooth reveal ── */
html.scale-revealed body {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease-out !important;
}

html.scale-revealed body.page-fade {
    opacity: 1 !important;
    transition: opacity 0.3s ease-out !important;
}

/* Restore media after reveal */
html.scale-revealed img,
html.scale-revealed iframe,
html.scale-revealed video {
    opacity: revert;
    transition: opacity 0.25s ease-out;
}

/* Fallback for pages that never get lock/reveal classes */
html:not(.scale-init-lock):not(.scale-revealed) body {
    opacity: 1;
}

/* ── Prevent layout shift from zoom change ── */
html.ui-scale body {
    overflow-x: hidden;
}

/* ── Prevent FOUC on carousel / slide elements during init ── */
html.scale-init-lock .carousel,
html.scale-init-lock .main-carousel,
html.scale-init-lock .carousel-item {
    opacity: 0 !important;
    transition: none !important;
}

html.scale-revealed .carousel,
html.scale-revealed .main-carousel,
html.scale-revealed .carousel-item.active {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}