/* Breakpointovi: 991 (tablet) / 767 (mobile). Sve iznad 991 je desktop i
   NE mijenja se (fiksna visina slajda, bg cover centriran, elementi px-pinani
   na centar — vidi default.css).

   Ispod 991 slajd prelazi na aspect-ratio skaliranje: pozicije i širine u %
   slajda pa se elementi i pozadina proporcionalno smanjuju/povećavaju.
   Vrijednosti su ručno složene po sekciji (verificirane na renderima
   860px/tablet i 375px/mobile) da kompozicija prati dizajn i na užem kadru
   (cover krati bg bočno). right-anchore s desktopa vraćamo na left. */

/* ---- Mali desktop (992–1199px) ----
   Slajd i pozadina ostaju isti (fiksna visina, cover, pin na centar), samo
   se foreground elementi smanjuju (~×0.8, offseti prema centru skalirani)
   da komotno stanu u uži kadar. Slajd 2 staje i bez smanjivanja. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /* Slajd 1 — manji tekstovi, čista zona do čaše */
    .slide-1 .fg-text-1 { width: 319px; left: max(30px, calc(50% - 426px)); top: 210px; }
    .slide-1 .fg-text-2 { width: 487px; left: max(20px, calc(50% - 435px)); top: 295px; }

    /* Slajd 3 */
    .slide-3 .fg-device   { width: 358px; left: calc(50% - 303px); top: 170px; }
    .slide-3 .fg-text-1   { width: 237px; right: max(90px, calc(50% - 321px)); top: 227px; }
    .slide-3 .fg-text-2   { width: 320px; right: max(6px, calc(50% - 402px));  top: 254px; }
    .slide-3 .fg-text-3   { width: 104px; left: calc(50% + 86px); top: 604px; }
    .slide-3 .fg-bubble-1 { width: 119px; right: calc(50% - 201px); top: 345px; }
    .slide-3 .fg-bubble-2 { width: 119px; right: calc(50% - 239px); top: 344px; }
    .slide-3 .fg-bubble-3 { width: 119px; right: calc(50% - 281px); top: 345px; }
    .slide-3 .fg-bubble-4 { width: 119px; right: calc(50% - 321px); top: 344px; }
    .slide-3 .fg-bubble-5 { width: 226px; left: calc(50% - 374px);  top: 400px; }

    /* Slajd 4 */
    .slide-4 .fg-device { width: 515px; left: calc(50% - 254px); top: 160px; }
    .slide-4 .fg-bubble { width: 218px; left: calc(50% - 282px); top: 330px; }

    /* Slajd 5 */
    .slide-5 .fg-bubble { width: 229px; left: max(10px, calc(50% - 392px)); top: 240px; }

    /* Slajd 6 */
    .slide-6 .fg-text-1 { width: 348px; left: max(20px, calc(50% - 446px)); top: 126px; }
    .slide-6 .fg-text-2 { width: 306px; left: max(30px, calc(50% - 436px)); top: 357px; }
    .slide-6 .fg-bubble { width: 233px; left: calc(50% + 142px); top: 30px; }
}

@media only screen and (max-width: 991px) {
    .main-section-wrapper {
        padding-top: 76px;
    }

    .slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6 {
        height: auto;
        aspect-ratio: 1.8 / 1;
    }

    /* Slajd 1 */
    .slide-1 .fg-text-1 { width: 29.4%;  left: 9.5%; top: 23.65%; }
    .slide-1 .fg-text-2 { width: 44.85%; left: 7.8%; top: 34.92%; }
    .slide-1 .fg-bubble { width: 19.55%; right: auto; left: 65.72%; top: 8.76%; }

    /* Slajd 2 */
    .slide-2 .fg-text-1   { width: 22.14%; left: 50.93%; top: 13.91%; }
    .slide-2 .fg-text-2   { width: 36.08%; left: 43.71%; top: 21.93%; }
    .slide-2 .fg-text-3   { width: 27.02%; left: 48.55%; top: 37.85%; }
    .slide-2 .fg-bubble-1 { width: 21.35%; left: 37.17%; top: 53.38%; }
    .slide-2 .fg-bubble-2 { width: 15.74%; left: 53.1%;  top: 48.87%; }
    .slide-2 .fg-bubble-3 { width: 17.61%; left: 62.23%; top: 55.51%; }

    /* Slajd 3 */
    .slide-3 .fg-device   { width: 30%;   left: 20%;   top: 7%; }
    .slide-3 .fg-text-1   { width: 20%;   right: auto; left: 56.5%; top: 26%; }
    .slide-3 .fg-text-2   { width: 27.2%; right: auto; left: 56.4%; top: 30.2%; }
    .slide-3 .fg-text-3   { width: 9.3%;  right: auto; left: 56.8%; top: 80%; }
    .slide-3 .fg-bubble-1 { width: 10.6%; right: auto; left: 56.4%; top: 39.6%; }
    .slide-3 .fg-bubble-2 { width: 10.6%; right: auto; left: 60.9%; top: 39.6%; }
    .slide-3 .fg-bubble-3 { width: 10.6%; right: auto; left: 65.4%; top: 39.6%; }
    .slide-3 .fg-bubble-4 { width: 10.6%; right: auto; left: 70.4%; top: 39.6%; }
    .slide-3 .fg-bubble-5 { width: 20%;   left: 11.2%; top: 44%; }

    /* Slajd 4 */
    .slide-4 .fg-device { width: 46.29%; left: 27.17%; top: 12.78%; }
    .slide-4 .fg-bubble { width: 19.55%; left: 26.66%; top: 38.22%; }

    /* Slajd 5 */
    .slide-5 .fg-bubble { width: 20.56%; left: 19.2%; top: 26.66%; }

    /* Slajd 6 */
    .slide-6 .fg-text-1 { width: 31.27%; left: 8.5%; top: 13.25%; }
    .slide-6 .fg-text-2 { width: 27.46%; left: 9.5%; top: 44%; }
    .slide-6 .fg-bubble { width: 20.92%; left: 59.7%; top: 3%; }
}

/* Fan-out maski (slajd 3): početni offset = razmak do pozicije crne maske,
   u % vlastite širine elementa — na tablet/mobile layoutu su razmaci u redu
   drukčiji nego na desktopu (px), pa se početne pozicije usklađuju ovdje. */
@media only screen and (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    .slide-3 .fg-bubble-1 { transform: translateX(132%); }
    .slide-3 .fg-bubble-2 { transform: translateX(90%); }
    .slide-3 .fg-bubble-3 { transform: translateX(47%); }
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .slide-3 .fg-bubble-1 { transform: translateX(136%); }
    .slide-3 .fg-bubble-2 { transform: translateX(92%); }
    .slide-3 .fg-bubble-3 { transform: translateX(48%); }
}

@media only screen and (max-width: 767px) {
    .main-section-wrapper {
        padding-top: 61.05px;
    }

    .slide-1, .slide-2, .slide-3, .slide-4, .slide-5, .slide-6 {
        aspect-ratio: 1.4 / 1;
    }

    /* slajdovi 5 i 6 su niži (mirniji kadar, oblak ne bježi udesno) */
    .slide-5, .slide-6 {
        aspect-ratio: 1.55 / 1;
    }

    /* bg pomak da bitan sadržaj (čaša / par) ostane u kadru na uskom cropu */
    .slide-1 { background-position: 30% center; }
    .slide-5 { background-position: 75% center; }

    /* Slajd 1 */
    .slide-1 .fg-text-1 { width: 36%; left: 7%;  top: 20%; }
    .slide-1 .fg-text-2 { width: 55%; left: 6%;  top: 31%; }
    .slide-1 .fg-bubble { width: 21%; left: 73%; top: 4%; }

    /* Slajd 2 */
    .slide-2 .fg-text-1   { width: 26%;   left: 53%;   top: 12%; }
    .slide-2 .fg-text-2   { width: 43%;   left: 46%;   top: 19.5%; }
    .slide-2 .fg-text-3   { width: 32%;   left: 51%;   top: 37.5%; }
    .slide-2 .fg-bubble-1 { width: 26%;   left: 36%;   top: 52%; }
    .slide-2 .fg-bubble-2 { width: 19%;   left: 55.5%; top: 46.5%; }
    .slide-2 .fg-bubble-3 { width: 21.5%; left: 67%;   top: 54%; }

    /* Slajd 3 */
    .slide-3 .fg-device   { width: 39%;   left: 15%;   top: 6.5%; }
    .slide-3 .fg-text-1   { width: 27%;   left: 57%;   top: 25%; }
    .slide-3 .fg-text-2   { width: 36%;   left: 57%;   top: 29.5%; }
    .slide-3 .fg-text-3   { width: 11%;   left: 57.4%; top: 78%; }
    .slide-3 .fg-bubble-1 { width: 12.5%; left: 57%;   top: 40%; }
    .slide-3 .fg-bubble-2 { width: 12.5%; left: 62.5%; top: 40%; }
    .slide-3 .fg-bubble-3 { width: 12.5%; left: 68%;   top: 40%; }
    .slide-3 .fg-bubble-4 { width: 12.5%; left: 74%;   top: 40%; }
    .slide-3 .fg-bubble-5 { width: 26%;   left: 9%;    top: 42%; }

    /* Slajd 4 */
    .slide-4 .fg-device { width: 55%; left: 23%; top: 12%; }
    .slide-4 .fg-bubble { width: 24%; left: 18%; top: 40%; }

    /* Slajd 5 */
    .slide-5 .fg-bubble { width: 25%; left: 6.5%; top: 27%; }

    /* Slajd 6 */
    .slide-6 .fg-text-1 { width: 35%; left: 4%;  top: 12%; }
    .slide-6 .fg-text-2 { width: 28%; left: 4%;  top: 42.5%; }
    .slide-6 .fg-bubble { width: 26%; left: 70%; top: 4%; }
}