* {
    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 -------
   Svaki slajd: max-width 1600px, aspect-ratio matching bg JPG.
   Omjer je zaključan na svim širinama (aspect-ratio property), pa se bg
   i foreground PNG-ovi uvijek poklapaju (bez cover-cropping-a po bočnim
   rubovima na <1600 širinama). Na ≥1600 slajd ide max 1600×800. */
.slide {
    position: relative;
    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); aspect-ratio: 1600 / 800; }
.slide-2 { background-image: url(../images/slide-2-bg.jpg); aspect-ratio: 1600 / 797; }
.slide-3 { background-image: url(../images/slide-3-bg.jpg); aspect-ratio: 1600 / 800; }
.slide-4 { background-image: url(../images/slide-4-bg.jpg); aspect-ratio: 1600 / 800; }
.slide-5 { background-image: url(../images/slide-5-bg.jpg); aspect-ratio: 1600 / 796; }

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

/* ------- FOREGROUND POZICIJE (% relativno na slide) -------
   Pozicije izmjerene prema mockup-u (1600×800 po slajdu).
   bubble z-index podignut na 3 gdje overlap-a text/baked-in wordmark. */

/* Slajd 1 — SMART Full gore, NOVA tarifa bubble preklapa donji dio "Full" slova */
.slide-1 .fg-text   { width: 32.5%; left: 12.5%;  top: 11.5%; }
.slide-1 .fg-bubble { width: 17%;   left: 21.25%; top: 36.25%; z-index: 3; }

/* Slajd 2 — 40GB tekst desno gore, 20KM bubble ispod njega na desnoj strani */
.slide-2 .fg-text   { width: 27%;     left: 53.75%;  top: 18.19%; }
.slide-2 .fg-bubble { width: 24.625%; right: 17.75%; top: 49.94%; }

/* Slajd 3 — red od 5 šarenih krugova gore, UREĐAJ na rate ispod (preko telefona) */
.slide-3 .fg-bubble { width: 52.94%; left: 10.38%; top: 8.13%; }
.slide-3 .fg-text   { width: 39.94%; left: 19.44%; top: 31.25%; }

/* Slajd 4 — 960GB tekst lijevo dolje, +200min/+100SMS bubbles desno preklapaju SMART Full wordmark */
.slide-4 .fg-text   { width: 31.375%;  left: 16.56%; top: 62.88%; }
.slide-4 .fg-bubble { width: 31.0625%; left: 46.63%; top: 44.13%; z-index: 3; }

/* Slajd 5 — SMART Full gore, Postpaid subtitle ispod */
.slide-5 .fg-text-1 { width: 31.94%; left: 18.35%; top: 11.18%; }
.slide-5 .fg-text-2 { width: 27.5%;  left: 18.88%; top: 47.49%; }


/* ------- ANIMACIJE -------
   Lifecycle: jednom pri prvom ulasku u viewport (.in-view klasa).
   Bg: scale(1.04→1) + opacity 0→1 (0.6s).
   Text: slide-in iz smjera ovisno o slajdu, stagger 0.4s nakon bg-a.
   Bubble: pop-bounce (scale 0→1.1→1), stagger 0.6s nakon bg-a.
   Iznimka: slajd 3 bubble — clip-path wipe slijeva nadesno (5 krugova
   "ulijeću" jedan po jedan kao pojas otkrivanja). */

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

    .slide .fg {
        opacity: 0;
    }

    /* TEXT — početne pozicije (smjer ulaska) */
    .slide-1 .fg-text   { transform: translateY(60px); }
    .slide-2 .fg-text   { transform: translateX(80px); }
    .slide-3 .fg-text   { transform: translateY(60px); }
    .slide-4 .fg-text   { transform: translateX(-80px); }
    .slide-5 .fg-text-1 { transform: translateY(60px); }
    .slide-5 .fg-text-2 { transform: translateY(60px); }

    .slide.in-view .fg-text,
    .slide.in-view .fg-text-1,
    .slide.in-view .fg-text-2 {
        animation: fgTextIn 0.7s cubic-bezier(.2, .7, .25, 1) forwards;
    }

    @keyframes fgTextIn {
        to { opacity: 1; transform: translate(0, 0); }
    }

    .slide-1.in-view .fg-text   { animation-delay: 0.4s; }
    .slide-2.in-view .fg-text   { animation-delay: 0.4s; }
    .slide-3.in-view .fg-text   { animation-delay: 0.9s; }   /* nakon bubble pop-a */
    .slide-4.in-view .fg-text   { animation-delay: 1.35s; }  /* elementi su dolje — duži delay da se vide u viewportu */
    .slide-5.in-view .fg-text-1 { animation-delay: 0.4s; }
    .slide-5.in-view .fg-text-2 { animation-delay: 0.6s; }

    /* BUBBLE — pop-bounce (osim slajda 3) */
    .slide .fg-bubble {
        transform: scale(0) rotate(-12deg);
    }
    .slide.in-view .fg-bubble {
        animation: fgBubblePop 0.65s cubic-bezier(.34, 1.56, .64, 1) forwards;
    }

    @keyframes fgBubblePop {
        to { opacity: 1; transform: scale(1) rotate(0); }
    }

    .slide-1.in-view .fg-bubble { animation-delay: 0.65s; }
    .slide-2.in-view .fg-bubble { animation-delay: 0.65s; }
    .slide-3.in-view .fg-bubble { animation-delay: 0.35s; }
    .slide-4.in-view .fg-bubble { animation-delay: 1.6s; }   /* elementi su dolje — duži delay */
}

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