* {
    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;
}

/* ------- SLIDES (desktop, >991px) -------
   Slajd drži FIKSNU visinu dizajna (1600×~800). Kad se viewport suzi ispod
   1600, bg se s `cover` simetrično krati po bočnim rubovima (centriran), a
   foreground elementi su px-pinani na CENTAR slajda (calc(50% ± Npx)) —
   kompozicija bg ↔ elementi ostaje identična dizajnu na svim desktop
   širinama. Elementi koji bi na 992px izašli iz kadra imaju max() clamp
   prema rubu (razmaci među srodnim elementima su očuvani u clamp stanju). */
.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: 799px; }
.slide-2 { background-image: url(../images/slide-2-bg.jpg?v=1.0); height: 798px; }
.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: 798px; }
.slide-5 { background-image: url(../images/slide-5-bg.jpg?v=1.0); height: 799px; }
.slide-6 { background-image: url(../images/slide-6-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-link {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.slide-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ------- FOREGROUND POZICIJE (desktop) -------
   Pixel vrijednosti izmjerene template-matchingom na izvorni PSD (1600 š).
   left/right: calc(50% ± Npx) = pin na centar; max(...) = edge clamp. */

/* Slajd 1 — "za mlade optimiste" + SMART Full lijevo, NOVA TARIFA gore desno uz čašu */
.slide-1 .fg-text-1 { width: 409px; left: max(36px, calc(50% - 546px)); top: 189px; }
.slide-1 .fg-text-2 { width: 624px; left: max(24px, calc(50% - 558px)); top: 279px; }
.slide-1 .fg-bubble { width: 272px; right: max(12px, calc(50% - 544px)); top: 70px; z-index: 3; }

/* Slajd 2 — "Kupi uređaj i zgrabi 960GB" blok desno od dečka, 3 kružna bubblea ispod */
.slide-2 .fg-text-1   { width: 308px; left: calc(50% + 38px);  top: 111px; }
.slide-2 .fg-text-2   { width: 502px; left: calc(50% - 63px);  top: 175px; }
.slide-2 .fg-text-3   { width: 376px; left: calc(50% + 5px);   top: 302px; }
.slide-2 .fg-bubble-1 { width: 297px; left: calc(50% - 183px); top: 426px; }
.slide-2 .fg-bubble-2 { width: 219px; left: calc(50% + 66px);  top: 390px; }
.slide-2 .fg-bubble-3 { width: 245px; left: calc(50% + 214px); top: 443px; }

/* Slajd 3 — Pixel 10a: uređaj centar-lijevo, cjenovni bubble preko njega,
   tekstovi + 4 maske desno u redu. Z-order maski raste slijeva nadesno
   (HTML redoslijed 1→4: crvena < bijela < periwinkle < crna na vrhu), pa se
   kroz izrez za kameru svake maske vidi boja one iza nje. */
.slide-3 .fg-device   { width: 448px; left: calc(50% - 379px);  top: 62px; }
.slide-3 .fg-text-1   { width: 296px; right: max(113px, calc(50% - 401px)); top: 227px; }
.slide-3 .fg-text-2   { width: 400px; right: max(8px, calc(50% - 503px));   top: 254px; }
.slide-3 .fg-text-3   { width: 130px; left: calc(50% + 107px); top: 650px; }
.slide-3 .fg-bubble-1 { width: 149px; right: calc(50% - 251px); top: 321px; }
.slide-3 .fg-bubble-2 { width: 149px; right: calc(50% - 299px); top: 320px; }
.slide-3 .fg-bubble-3 { width: 149px; right: calc(50% - 352px); top: 321px; }
.slide-3 .fg-bubble-4 { width: 149px; right: calc(50% - 402px); top: 320px; }
.slide-3 .fg-bubble-5 { width: 283px; left: calc(50% - 468px);  top: 376px; z-index: 3; }

/* Slajd 4 — iPhone 17 centar, cjenovni bubble lijevo preko ruba uređaja */
.slide-4 .fg-device { width: 644px; left: calc(50% - 317px); top: 102px; }
.slide-4 .fg-bubble { width: 272px; left: calc(50% - 353px); top: 305px; z-index: 3; }

/* Slajd 5 — Redmi: samo cjenovni bubble lijevo od para (fotka je u bg-u) */
.slide-5 .fg-bubble { width: 286px; left: max(10px, calc(50% - 490px)); top: 213px; }

/* Slajd 6 — SMART Full + postpaid subtitle lijevo, citat-bubble gore desno uz glavu */
.slide-6 .fg-text-1 { width: 435px; left: max(24px, calc(50% - 557px)); top: 106px; }
.slide-6 .fg-text-2 { width: 382px; left: max(36px, calc(50% - 545px)); top: 352px; }
.slide-6 .fg-bubble { width: 291px; left: calc(50% + 177px); top: 24px; z-index: 3; }


/* ------- ANIMACIJE -------
   Lifecycle: jednom pri prvom ulasku u viewport (JS dodaje .in-view, pa
   ~2.6s kasnije .done koji resetira tranzicijske delaye za hover efekte).
   Ulazi su TRANZICIJE (početno stanje → identity), stagger preko
   transition-delay u .in-view stanju. Bubblei ulaze pop-om (overshoot
   bezier) iz svoje transform-origin točke (repić oblačića), a nakon ulaska
   lagano lebde (bob keyframes s delayem — do tada su neaktivni pa ne
   ometaju ulaznu tranziciju). */

@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;
    }

    /* uređaji — sporiji, mekši ulazak odozdo */
    .slide .fg-device {
        transition-duration: 0.8s;
    }

    /* bubblei — pop s overshootom, brži fade */
    .slide-1 .fg-bubble, .slide-6 .fg-bubble,
    .slide-2 .fg-bubble-1, .slide-2 .fg-bubble-2, .slide-2 .fg-bubble-3,
    .slide-3 .fg-bubble-5, .slide-4 .fg-bubble, .slide-5 .fg-bubble {
        transition: opacity 0.45s ease-out,
                    transform 0.65s cubic-bezier(.34, 1.56, .64, 1);
    }

    /* ---- početna stanja (smjer ulaska) ---- */
    .slide-1 .fg-text-1 { transform: translateX(-44px); }
    .slide-1 .fg-text-2 { transform: translateY(54px); }
    .slide-1 .fg-bubble { transform: scale(.2) rotate(10deg); transform-origin: 14% 88%; }

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

    .slide-3 .fg-device   { transform: translateY(72px) scale(.97); }
    .slide-3 .fg-text-1   { transform: translateX(46px); }
    .slide-3 .fg-text-2   { transform: translateX(46px); }
    .slide-3 .fg-text-3   { transform: translateY(10px); }
    /* maske: crna se prva podigne, a ostale tri kreću SKRIVENE iza crne
       (offset = razmak do crne pozicije) pa se s razmakom "razlepezaju"
       ulijevo — svaka posebno, s malim overshootom. Offseti su u % vlastite
       širine maske pa vrijede za obje desktop veličine; tablet/mobile imaju
       drukčije razmake u redu pa se usklađuju u media-query.css. */
    .slide-3 .fg-bubble-4 { transform: translateY(40px); }
    .slide-3 .fg-bubble-1 { transform: translateX(101%); }
    .slide-3 .fg-bubble-2 { transform: translateX(69%); }
    .slide-3 .fg-bubble-3 { transform: translateX(34%); }
    .slide-3 .fg-bubble-1,
    .slide-3 .fg-bubble-2,
    .slide-3 .fg-bubble-3 {
        transition: opacity 0.25s ease-out,
                    transform 0.6s cubic-bezier(.3, 1.45, .55, 1);
    }
    .slide-3 .fg-bubble-5 { transform: scale(.2); transform-origin: 96% 42%; }

    .slide-4 .fg-device { transform: translateY(72px) scale(.97); }
    .slide-4 .fg-bubble { transform: scale(.2); transform-origin: 96% 42%; }

    .slide-5 .fg-bubble { transform: scale(.2); transform-origin: 97% 55%; }

    .slide-6 .fg-text-1 { transform: translateY(46px); }
    .slide-6 .fg-text-2 { transform: translateY(34px); }
    .slide-6 .fg-bubble { transform: scale(.2) rotate(8deg); transform-origin: 16% 90%; }

    /* ---- stagger (delay živi u .in-view stanju = vrijedi za ulaznu tranziciju) ---- */
    .slide-1.in-view .fg-text-1 { transition-delay: .25s; }
    .slide-1.in-view .fg-text-2 { transition-delay: .45s; }
    .slide-1.in-view .fg-bubble { transition-delay: .85s; }

    .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: .65s; }
    .slide-2.in-view .fg-bubble-1 { transition-delay: .85s; }
    .slide-2.in-view .fg-bubble-3 { transition-delay: 1s; }
    .slide-2.in-view .fg-bubble-2 { transition-delay: 1.15s; }

    .slide-3.in-view .fg-device   { transition-delay: .2s; }
    .slide-3.in-view .fg-text-1   { transition-delay: .4s; }
    .slide-3.in-view .fg-text-2   { transition-delay: .55s; }
    .slide-3.in-view .fg-bubble-5 { transition-delay: .75s; }
    /* maske: prvo crna, pa fan-out zdesna nalijevo (periwinkle → bijela → crvena) */
    .slide-3.in-view .fg-bubble-4 { transition-delay: .85s; }
    .slide-3.in-view .fg-bubble-3 { transition-delay: 1.05s; }
    .slide-3.in-view .fg-bubble-2 { transition-delay: 1.22s; }
    .slide-3.in-view .fg-bubble-1 { transition-delay: 1.39s; }
    .slide-3.in-view .fg-text-3   { transition-delay: 1.6s; }   /* fine print nakon fan-outa */

    .slide-4.in-view .fg-device { transition-delay: .2s; }
    .slide-4.in-view .fg-bubble { transition-delay: .6s; }

    .slide-5.in-view .fg-bubble { transition-delay: .3s; }

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

    /* ---- lebdenje bubblea nakon ulaska (delay > ulazni delay + trajanje) ---- */
    @keyframes fgBob {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-9px); }
    }

    .slide-1.in-view .fg-bubble   { animation: fgBob 4.6s ease-in-out 2.2s infinite; }
    .slide-2.in-view .fg-bubble-1 { animation: fgBob 4.2s ease-in-out 2.4s infinite; }
    .slide-2.in-view .fg-bubble-3 { animation: fgBob 4.8s ease-in-out 2.6s infinite; }
    .slide-2.in-view .fg-bubble-2 { animation: fgBob 4.5s ease-in-out 2.8s infinite; }
    .slide-3.in-view .fg-bubble-5 { animation: fgBob 4.6s ease-in-out 2.6s infinite; }
    .slide-4.in-view .fg-bubble   { animation: fgBob 4.6s ease-in-out 2.2s infinite; }
    .slide-5.in-view .fg-bubble   { animation: fgBob 4.6s ease-in-out 1.8s infinite; }
    .slide-6.in-view .fg-bubble   { animation: fgBob 4.6s ease-in-out 2.2s infinite; }

    /* ---- interaktivnost (nakon .done — delayi na 0 da hover reagira odmah) ---- */
    .slide.done .fg { transition-delay: 0s !important; }
    .slide.done .fg-device { transition-duration: .45s; }

    @media (hover: hover) {
        .slide-link.done:hover .fg-device { transform: translateY(-8px) scale(1.025); }

        /* cjenovni bubble se "razveseli" na hover (zamjena bob → wiggle,
           nakon wigglea bob se na mouseleave nastavlja od nule) */
        @keyframes fgWiggle {
            0%   { transform: scale(1); }
            35%  { transform: scale(1.07) rotate(-3deg); }
            70%  { transform: scale(1.03) rotate(2deg); }
            100% { transform: scale(1); }
        }
        .slide-3.done:hover .fg-bubble-5,
        .slide-4.done:hover .fg-bubble,
        .slide-5.done:hover .fg-bubble { animation: fgWiggle .55s ease-in-out; }
    }
}

/* prefers-reduced-motion: reduce — bez animacija, sve odmah na finalnom stateu */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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