* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.main-section-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    /* clip klipa pozadine slajdova na radius (>1600), a ne lomi
       eventualni sticky sadrzaj; flow-root cuva BFC */
    display: flow-root;
    overflow: clip;
}

/* Zaobljeni svi coskovi + odmak od dna samo kad blok ima bocni spacing
   (viewport > 1600px), kao ostale custom stranice; ispod toga ide od
   ruba do ruba, ravno i bez odmaka. */
@media (min-width: 1601px) {
    .main-section-wrapper {
        border-radius: 28px;
        margin-bottom: 50px;
    }
}

.slide {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.slide-1 { background-image: url(../images/slide-1-bg.jpg?v=1.0); height: 798px; }
.slide-2 { background-image: url(../images/slide-2-bg.jpg?v=1.0); height: 799px; }
.slide-3 { background-image: url(../images/slide-3-bg.jpg?v=1.0); height: 798px; }
.slide-4 { background-image: url(../images/slide-4-bg.jpg?v=1.0); height: 800px; }

.slide .fg {
    position: absolute;
    z-index: 2;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.slide-1 .fg-logo   { width: 444px; left: max(24px, calc(50% - 548px)); top: 123px; }
.slide-1 .fg-text-1 { width: 243px; left: max(28px, calc(50% - 547px)); top: 371px; }
.slide-1 .fg-text-2 { width: 332px; left: max(28px, calc(50% - 546px)); top: 548px; }

.slide-2 .fg-text-1   { width: 394px; left: calc(50% - 327px); top: 131px; }
.slide-2 .fg-text-2   { width: 318px; left: calc(50% - 289px); top: 277px; }
.slide-2 .fg-text-3   { width: 375px; left: calc(50% - 316px); top: 321px; }
.slide-2 .fg-bubble-1 { width: 251px; left: calc(50% + 107px); top: 129px; z-index: 3; }
.slide-2 .fg-bubble-2 { width: 190px; left: max(10px, calc(50% - 524px)); top: 295px; z-index: 3; }

.slide-3 .fg-text-1 { width: 446px; left: calc(50% - 11px); top: 150px; }
.slide-3 .fg-bubble { width: 150px; left: calc(50% + 285px); top: 540px; z-index: 3; }

.slide-4 .fg-logo   { width: 512px; left: max(24px, calc(50% - 458px)); top: 208px; }
.slide-4 .fg-text-1 { width: 368px; left: calc(50% + 85px);  top: 238px; }
.slide-4 .fg-text-2 { width: 484px; left: calc(50% - 237px); top: 512px; }

.slide-4 .lp-docs {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    justify-content: center;
    gap: 14px;
}

.lp-doc-btn {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .6px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 11px 20px;
    opacity: .5;
    transition: opacity .2s ease, background-color .2s ease;
}

.lp-doc-btn:hover {
    color: #fff;
    opacity: 1;
    background-color: rgba(255, 255, 255, .14);
}

@media (prefers-reduced-motion: no-preference) {
    .slide {
        opacity: 0;
        transform: scale(1.03);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    }
    .slide.in-view {
        opacity: 1;
        transform: scale(1);
    }

    .slide .fg {
        opacity: 0;
        transition: opacity 0.7s cubic-bezier(.22, .61, .36, 1),
                    transform 0.7s cubic-bezier(.22, .61, .36, 1);
    }
    .slide.in-view .fg {
        opacity: 1;
        transform: none;
    }

    .slide-2 .fg-bubble-1, .slide-2 .fg-bubble-2, .slide-3 .fg-bubble {
        transition: opacity 0.45s ease-out,
                    transform 0.65s cubic-bezier(.34, 1.56, .64, 1);
    }

    .slide-1 .fg-logo   { transform: translateX(-44px); }
    .slide-1 .fg-text-1 { transform: translateY(40px); }
    .slide-1 .fg-text-2 { transform: translateY(28px); }

    .slide-2 .fg-text-1   { transform: scale(.55); }
    .slide-2 .fg-text-2   { transform: translateY(24px); }
    .slide-2 .fg-text-3   { transform: translateY(22px); }
    .slide-2 .fg-bubble-1 { transform: scale(.15); }
    .slide-2 .fg-bubble-2 { transform: scale(.15); }

    .slide-3 .fg-text-1 { transform: translateX(44px); }
    .slide-3 .fg-bubble { transform: scale(.2); }

    .slide-4 .fg-logo   { transform: translateX(-40px); }
    .slide-4 .fg-text-1 { transform: translateX(40px); }
    .slide-4 .fg-text-2 { transform: translateY(20px); }

    .slide-1.in-view .fg-logo   { transition-delay: .25s; }
    .slide-1.in-view .fg-text-1 { transition-delay: .45s; }
    .slide-1.in-view .fg-text-2 { transition-delay: .6s; }

    .slide-2.in-view .fg-text-1   { transition-delay: .25s; }
    .slide-2.in-view .fg-text-2   { transition-delay: .45s; }
    .slide-2.in-view .fg-text-3   { transition-delay: .6s; }
    .slide-2.in-view .fg-bubble-1 { transition-delay: .8s; }
    .slide-2.in-view .fg-bubble-2 { transition-delay: .95s; }

    .slide-3.in-view .fg-text-1 { transition-delay: .25s; }
    .slide-3.in-view .fg-bubble { transition-delay: .6s; }

    .slide-4.in-view .fg-logo   { transition-delay: .25s; }
    .slide-4.in-view .fg-text-1 { transition-delay: .4s; }
    .slide-4.in-view .fg-text-2 { transition-delay: .6s; }

    @keyframes fgBob {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-9px); }
    }

    .slide-2.in-view .fg-bubble-1 { animation: fgBob 4.6s ease-in-out 2.4s infinite; }
    .slide-2.in-view .fg-bubble-2 { animation: fgBob 4.8s ease-in-out 2.6s infinite; }
    .slide-3.in-view .fg-bubble   { animation: fgBob 4.6s ease-in-out 2.2s infinite; }

    .slide.done .fg { transition-delay: 0s !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .slide,
    .slide .fg {
        opacity: 1;
        transform: none;
    }
}