/* ==========================================================================
   Samsung promocija 09-2026 — "Jedan pokreće drugi" landing page

   Layout je mjeren template-matchingom na izvorni PSD (2000 š, landing 1600
   centriran). Svaka product sekcija je apsolutno pozicionirani "row" box
   (union device + gift + cloud); box se skalira s --k (native px × --k),
   djeca su u % boxa pa se sve smanjuje proporcionalno na breakpointima.
   ========================================================================== */

.samsung-promo {
    max-width: 1598px;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    color: #231f20;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
}

.samsung-promo img {
    max-width: 100%;
}

/* --- Top illustration: full-bleed banner (1600×825, sve upečeno: SAMSUNG
       logo, headline, copy, A57 poklon, fine print). Prikazuje se na FIKSNOJ
       px veličini po breakpointu i centrirana — pri sužavanju prozora bočni
       rubovi izlaze iz kadra (clip preko overflow:hidden), a smanjuje se tek
       prelaskom breakpointa (responsive.css) tako da visina pada i SAMSUNG
       logo uvijek ostaje u kadru. --- */
.promo-illustration {
    height: 825px;
    background-color: #fff;
    background-image: url("/custom/samsung-promo-09-2026/assets/images/illustration-desktop.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 1600px auto;
}

/* --- Product rows band ---------------------------------------------------
   Vertikalni raspored iz dizajna: band od dna ilustracije do crnog bloka
   (4473px @ --k 1), rowovi apsolutno na izmjerenim topovima. Svaki row je
   link; box mu je union njegovih triju slika, horizontalno pinan na centar
   landinga s malim izmjerenim odmakom (translateX offset). */
.promo-rows {
    --k: 1;
    position: relative;
    height: calc(4473px * var(--k));
    background: #fbfafa;
}

.promo-row {
    position: absolute;
    left: 50%;
    display: block;
}

.promo-row--1 { top: calc(128px * var(--k));  width: calc(914px * var(--k)); aspect-ratio: 914 / 612; transform: translateX(calc(-50% + 23px * var(--k))); }
.promo-row--2 { top: calc(735px * var(--k));  width: calc(831px * var(--k)); aspect-ratio: 831 / 552; transform: translateX(calc(-50% + 2px * var(--k))); }
.promo-row--3 { top: calc(1295px * var(--k)); width: calc(801px * var(--k)); aspect-ratio: 801 / 572; transform: translateX(calc(-50% + 46px * var(--k))); }
.promo-row--4 { top: calc(1927px * var(--k)); width: calc(835px * var(--k)); aspect-ratio: 835 / 557; transform: translateX(-50%); }
.promo-row--5 { top: calc(2567px * var(--k)); width: calc(793px * var(--k)); aspect-ratio: 793 / 567; transform: translateX(calc(-50% + 50px * var(--k))); }
.promo-row--6 { top: calc(3282px * var(--k)); width: calc(792px * var(--k)); aspect-ratio: 792 / 529; transform: translateX(calc(-50% + 22px * var(--k))); }
.promo-row--7 { top: calc(3851px * var(--k)); width: calc(821px * var(--k)); aspect-ratio: 821 / 620; transform: translateX(calc(-50% + 59px * var(--k))); }

.promo-row img {
    position: absolute;
    display: block;
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* z-order: cloud iznad devicea, device iznad gifta (preklapanja iz dizajna) */
.promo-row__gift   { z-index: 1; }
.promo-row__device { z-index: 2; }
.promo-row__cloud  { z-index: 3; }

/* --- Pozicije djece (% union boxa, mjereno na PSD) --- */
.promo-row--1 .promo-row__device { left: 12.91%; top: 0;      width: 41.36%; }
.promo-row--1 .promo-row__gift   { left: 55.36%; top: 17.65%; width: 44.64%; }
.promo-row--1 .promo-row__cloud  { left: 0;      top: 34.64%; width: 15.97%; }

.promo-row--2 .promo-row__device { left: 41.03%; top: 0;      width: 39.71%; }
.promo-row--2 .promo-row__gift   { left: 0;      top: 8.7%;   width: 49.1%; }
.promo-row--2 .promo-row__cloud  { left: 82.43%; top: 28.44%; width: 17.57%; }

.promo-row--3 .promo-row__device { left: 13.36%; top: 0;      width: 32.08%; }
.promo-row--3 .promo-row__gift   { left: 49.06%; top: 11.89%; width: 50.94%; }
.promo-row--3 .promo-row__cloud  { left: 0;      top: 36.36%; width: 18.23%; }

.promo-row--4 .promo-row__device { left: 41.8%;  top: 0;      width: 37.37%; }
.promo-row--4 .promo-row__gift   { left: 0;      top: 9.52%;  width: 48.86%; }
.promo-row--4 .promo-row__cloud  { left: 82.51%; top: 35.55%; width: 17.49%; }

.promo-row--5 .promo-row__device { left: 0;      top: 1.59%;  width: 54.22%; }
.promo-row--5 .promo-row__gift   { left: 48.55%; top: 11.11%; width: 51.45%; }
.promo-row--5 .promo-row__cloud  { left: 37.07%; top: 0;      width: 15.64%; }

.promo-row--6 .promo-row__device { left: 47.1%;  top: 0;      width: 29.29%; }
.promo-row--6 .promo-row__gift   { left: 0;      top: 4.73%;  width: 51.52%; }
.promo-row--6 .promo-row__cloud  { left: 81.57%; top: 29.11%; width: 18.43%; }

.promo-row--7 .promo-row__device { left: 0;      top: 5%;     width: 40.68%; }
.promo-row--7 .promo-row__gift   { left: 50.3%;  top: 18.71%; width: 49.7%; }
.promo-row--7 .promo-row__cloud  { left: 42.75%; top: 0;      width: 15.1%; }

/* --- Crni legal blok ------------------------------------------------------ */
.promo-legal {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 50px 24px 62px;
    font-size: 22px;
    line-height: 1.55;
}

.promo-legal p {
    max-width: 880px;
    margin: 0 auto 56px;
}

.promo-legal p:last-of-type {
    margin-bottom: 38px;
}

.promo-legal strong {
    font-weight: 700;
}

.promo-legal__big {
    display: inline-block;
    margin-top: 8px;
    font-size: 28px;
}

/* Gumbi: display table = shrink-wrap + auto-centriranje + prave blok margine
   (inline-block ne bi pouzdano povukao negativni margin-top prema tekstu). */
.promo-btn {
    display: table;
    margin: 0 auto;
    color: #fff;
    border-radius: 50px;
    -webkit-tap-highlight-color: transparent;
}

/* registracijski gumb stoji odmah ispod url-a (paragraf iznad ga priljubljuje) */
.promo-legal p + .promo-btn--register {
    margin-top: -39px;
}

.promo-btn--register {
    background: #c71d22;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 9px 22px;
    margin-bottom: 56px;
}

/* isti vizualni razmak od teksta kao crveni gumb (56−39 = 38−21 = 17px) */
.promo-btn--rules {
    background: #58585b;
    font-size: 16px;
    text-decoration: underline;
    padding: 8px 20px;
    margin-top: -21px;
}

.promo-btn--register:hover { background: #a8161b; color: #fff; }
.promo-btn--rules:hover    { background: #6b6b6f; color: #fff; }

/* --- Scroll-in animacije --------------------------------------------------
   Lifecycle kao na SMART Full landingu: jednom pri prvom ulasku u viewport
   (JS dodaje .is-visible i radi unobserve). Skriveno početno stanje je
   scoped na .anim-ready (dodaje ga JS) pa bez JS-a sve ostaje vidljivo.

   Koreografija po rowu: device se digne odozdo, gift ga prati, pa cloud
   POP-a iz svoje repić-točke (overshoot). Nakon ulaska cloud lagano lebdi,
   a na hover se "razveseli" (wiggle). Ilustracija: cinematic reveal
   (fade + un-zoom + izoštravanje). Legal blok: djeca ulaze staggered. --- */

.anim-ready .promo-illustration {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(8px);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .3, 1), filter 1s ease;
    will-change: opacity, transform, filter;
}
.anim-ready .promo-illustration.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

.anim-ready .promo-row__device,
.anim-ready .promo-row__gift {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

.anim-ready .promo-row__cloud {
    opacity: 0;
    transform: scale(0);
    transition: opacity .3s ease-out, transform .6s cubic-bezier(.34, 1.56, .64, 1);
    will-change: opacity, transform;
}

/* transform-origin = repić oblačića (1/3 desno, 2/4/6 lijevo, 5/7 dolje) */
.promo-row--1 .promo-row__cloud,
.promo-row--3 .promo-row__cloud { transform-origin: 94% 55%; }
.promo-row--2 .promo-row__cloud,
.promo-row--4 .promo-row__cloud,
.promo-row--6 .promo-row__cloud { transform-origin: 6% 55%; }
.promo-row--5 .promo-row__cloud,
.promo-row--7 .promo-row__cloud { transform-origin: 50% 94%; }

.anim-ready .promo-row.is-visible .promo-row__device { opacity: 1; transform: none; }
.anim-ready .promo-row.is-visible .promo-row__gift   { opacity: 1; transform: none; transition-delay: .15s; }
.anim-ready .promo-row.is-visible .promo-row__cloud  { opacity: 1; transform: scale(1); transition-delay: .38s; }

/* cloud nakon ulaska lagano lebdi (delay > ulazni delay + trajanje) */
@keyframes cloudBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.anim-ready .promo-row.is-visible .promo-row__cloud {
    animation: cloudBob 4.6s ease-in-out 2.2s infinite;
}

/* legal blok: djeca ulaze odozdo, staggered */
.anim-ready .promo-legal > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.anim-ready .promo-legal.is-visible > * { opacity: 1; transform: none; }
.anim-ready .promo-legal.is-visible > *:nth-child(2) { transition-delay: .12s; }
.anim-ready .promo-legal.is-visible > *:nth-child(3) { transition-delay: .24s; }
.anim-ready .promo-legal.is-visible > *:nth-child(4) { transition-delay: .36s; }
.anim-ready .promo-legal.is-visible > *:nth-child(5) { transition-delay: .48s; }

/* --- Interaktivnost rowova (linkovi) --- */
@media (hover: hover) {
    .samsung-promo .promo-row .promo-row__device {
        transition: opacity .55s ease, transform .45s ease;
    }
    .samsung-promo .promo-row:hover .promo-row__device {
        transform: translateY(-8px);
    }

    @keyframes cloudWiggle {
        0%   { transform: scale(1); }
        35%  { transform: scale(1.08) rotate(-3deg); }
        70%  { transform: scale(1.03) rotate(2deg); }
        100% { transform: scale(1); }
    }
    .samsung-promo .promo-row:hover .promo-row__cloud {
        animation: cloudWiggle .55s ease-in-out;
    }
}

.promo-row:focus-visible {
    outline: 3px solid #c71d22;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .anim-ready .promo-illustration,
    .anim-ready .promo-row__device,
    .anim-ready .promo-row__gift,
    .anim-ready .promo-row__cloud,
    .anim-ready .promo-legal > * {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
        animation: none;
    }
}