/*
Theme Name: Blocksy Child
Theme URI: https://creativethemes.com/blocksy/
Template: blocksy
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Tags: accessibility-ready,blog,block-patterns,e-commerce,wide-blocks,block-styles,grid-layout,one-column,two-columns,three-columns,four-columns,right-sidebar,left-sidebar,translation-ready,custom-colors,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments
Version: 2.1.51.1786030786
Updated: 2026-08-06 15:39:46
*/


/*
|--------------------------------------------------------------------------
| SCROLL VIDEO TRANSITION
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| GLAVNA PINNED SEKCIJA
|--------------------------------------------------------------------------
|
| ScrollTrigger pin-uje ovaj element.
| NE stavljati !important na position.
|
*/

.scroll-transition-section {
    position: relative;

    /*
     * ScrollTrigger mora trenutno da promeni pin transform na ulazu/izlazu.
     * Elementorov transition je ranije animirao translateY(0 <-> 5500px),
     * zbog čega je content-layer vizuelno padao u oba smera.
     */
    transition: none !important;

    width: 100%;
    height: 100vh !important;
    min-height: 100vh !important;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #F1F5F6;
}

/*
 * Elementor boxed container mora da prosledi celu visinu i širinu stage-u.
 * Bez ovoga njegova responsive podešavanja skraćuju sekciju na oko 87vh.
 */
.scroll-transition-section > .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;

    align-items: stretch !important;

    gap: 0 !important;
}

@supports (height: 100dvh) {
    .scroll-transition-section {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }
}

/*
|--------------------------------------------------------------------------
| GLAVNI STAGE
|--------------------------------------------------------------------------
|
| Zauzima celu pinned sekciju.
| Grid omogućava da video i content budu tačno jedan preko drugog.
|
*/

.scroll-stage {
    position: relative;

    width: 100%;
    height: 100% !important;
    min-height: 100% !important;

    margin: 0;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);

    place-items: center !important;

    overflow: hidden;

    background: transparent;

    border: none;
    box-shadow: none;
    border-radius: 0;
}

/*
|--------------------------------------------------------------------------
| VIDEO I CONTENT LAYER
|--------------------------------------------------------------------------
|
| Oba elementa zauzimaju ISTU grid ćeliju.
| Više ne koristimo absolute positioning.
|
*/

.video-layer,
.content-layer {
    grid-column: 1;
    grid-row: 1;

    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


/*
|--------------------------------------------------------------------------
| VIDEO LAYER
|--------------------------------------------------------------------------
*/

.video-layer {
    z-index: 2;

    padding: 0 !important;

    background: transparent !important;
}

/*
 * Elementor HTML widget je dodatni omotač oko .video-reveal elementa.
 * Mora da prati ceo stage; u suprotnom njegova veličina zavisi od
 * intrinzičnih dimenzija trenutno izabranog video-fajla.
 */
.video-layer > .elementor-widget-html,
.video-layer > .elementor-widget-html > .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/*
|--------------------------------------------------------------------------
| FULLSCREEN VIDEO
|--------------------------------------------------------------------------
*/

.video-reveal {
    --video-logo-size: 75%;
    --video-full-reveal-opacity: 0;

    position: relative;

    width: 100%;
    height: 100%;

    flex: 0 0 auto;

    margin: 0;

    overflow: hidden;

    border-radius: 0;

    border: none;
    box-shadow: none;

    background: transparent;

    /*
     * Logo je početni otvor. GSAP uvećava njegovu masku, a drugi sloj tek
     * pred kraj blago dopunjava ostatak videa do pune vidljivosti.
     */
    -webkit-mask-image:
        url("assets/goski-logo-mask.png"),
        linear-gradient(
            rgba(0, 0, 0, var(--video-full-reveal-opacity)),
            rgba(0, 0, 0, var(--video-full-reveal-opacity))
        );
    mask-image:
        url("assets/goski-logo-mask.png"),
        linear-gradient(
            rgba(0, 0, 0, var(--video-full-reveal-opacity)),
            rgba(0, 0, 0, var(--video-full-reveal-opacity))
        );

    -webkit-mask-position: center, center;
    mask-position: center, center;

    -webkit-mask-size: var(--video-logo-size) auto, 100% 100%;
    mask-size: var(--video-logo-size) auto, 100% 100%;

    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;

    -webkit-mask-composite: source-over;
    mask-composite: add;

    clip-path: none;
}

/* Posle reveala video se više ne kompozituje kroz skupu CSS masku. */
.video-reveal.is-mask-disabled {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* Diskretan indikator dok prvi frejm ili naredni segment još nije spreman. */
.video-reveal::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 34px;
    height: 34px;

    margin: -17px 0 0 -17px;

    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.18s ease;
}

.scroll-transition-section.is-video-loading .video-reveal::after {
    opacity: 1;
    animation: goski-video-loading 0.75s linear infinite;
}

@keyframes goski-video-loading {
    to {
        transform: rotate(360deg);
    }
}

/*
|--------------------------------------------------------------------------
| VIDEO
|--------------------------------------------------------------------------
*/

.video-reveal video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /* Stabilan kompozitni sloj tokom kontinuiranog scroll scruba. */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;

    border: none;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-transition-section.prefers-reduced-motion .video-reveal {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .scroll-transition-section.prefers-reduced-motion .video-reveal video {
        transform: none;
        will-change: auto;
    }

    .scroll-transition-section.is-video-loading .video-reveal::after {
        animation: none;
    }
}


/*
|--------------------------------------------------------------------------
| ELEMENTOR CONTENT LAYER
|--------------------------------------------------------------------------
*/

.content-layer {
    z-index: 3;

    padding: 40px 30px !important;

    background: transparent;

    /*
     * JS kasnije kontroliše opacity i visibility.
     */
    opacity: 0;
    visibility: hidden;

    /*
     * JS menja na auto kada se content pojavi.
     */
    pointer-events: none;

    overflow: hidden;
}


/*
|--------------------------------------------------------------------------
| ELEMENTOR CONTENT
|--------------------------------------------------------------------------
|
| Originalni Elementor layout se ne dira.
| Samo ograničavamo maksimalnu širinu i centriramo ga.
|
*/

.content-layer > .e-con,
.content-layer > .elementor-element {
    width: min(1200px, 100%) !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    max-height: none;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/*
 * Elementor je ovde dodavao margin-bottom 120/80/60px. Flex je tu marginu
 * uračunavao u centriranje i vidljiv sadržaj pomerao nagore.
 */
.content-fit > .transition-content-inner {
    --content-fit-scale: 1;

    width: 100% !important;

    flex: 0 0 auto !important;

    margin: 0 !important;

    transform: scale(var(--content-fit-scale));
    transform-origin: center center;
    will-change: transform;
}

/*
 * Content prikazuje isključivo GSAP fade. Elementorov bounceIn je ranije
 * ponovo pokretao potomke pri izlasku sekcije iz pin stanja.
 */
.content-layer .elementor-invisible {
    visibility: inherit !important;
}

.content-layer .animated,
.content-layer .bounceIn {
    animation: none !important;
    transform: none !important;
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {

    .video-reveal {
        --video-logo-size: 82%;
    }

    .content-layer {
        padding: 30px 20px !important;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {

    .video-reveal {
        --video-logo-size: 90%;
    }

    .content-layer {
        padding: 20px 16px !important;
    }

}