.sky-frt {
    --sky-frt-progress: 1;
    --sky-frt-start-y: 100px;
    --sky-frt-translate-y: 0px;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: transparent !important;
    box-sizing: border-box;
}

.sky-frt *,
.sky-frt *::before,
.sky-frt *::after {
    box-sizing: border-box;
}

.sky-frt__inner {
    position: relative;
    display: block;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.sky-frt__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/*
 * Safe frontend fallback: the text stays visible until JavaScript confirms
 * the scroll animation is ready. This avoids an empty frontend when scripts
 * are delayed by caching, optimization, or consent tools.
 */
.sky-frt__text {
    display: block;
    padding: 0;
    transform: none;
    opacity: 1;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.sky-frt.sky-frt--ready .sky-frt__text {
    transform: translate3d(0, var(--sky-frt-translate-y), 0);
    opacity: var(--sky-frt-progress);
}

/* Always keep the widget visible inside Elementor editing/canvas contexts. */
.elementor-editor-active .sky-frt .sky-frt__text,
.elementor-edit-area .sky-frt .sky-frt__text {
    transform: none !important;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .sky-frt,
    .sky-frt.sky-frt--ready {
        --sky-frt-progress: 1 !important;
        --sky-frt-translate-y: 0px !important;
    }

    .sky-frt__text,
    .sky-frt.sky-frt--ready .sky-frt__text {
        transform: none !important;
        opacity: 1 !important;
    }
}