/* ==========================================================================
   Samsung promocija 07-2026 — landing page
   ========================================================================== */

.samsung-promo {
    max-width: 1598px;
    margin: 0 auto;
    padding-bottom: 100px;
    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 background banner (image is 1600×668).
       The image is shown at a FIXED pixel size per breakpoint and centered, so
       it does NOT scale as the window narrows — the left/right edges simply pass
       out of view (clipped by overflow:hidden on .samsung-promo). It only steps
       down to a smaller fixed size when a breakpoint is crossed (responsive.css).
       On mobile it switches to 100% so the whole illustration stays visible. --- */
.promo-illustration {
    height: 668px;
    background-color: #dce8f7;
    background-image: url("/custom/samsung-promo-07-2026/assets/images/illustration.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1600px auto; /* native width; sides clip on narrower viewports */
}

/* --- Intro copy (headline + note) --------------------------------------- */
.promo-intro {
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 75px;
    padding-top: 26px;
    padding-bottom: 6px;
}

.promo-intro p {
    margin: 0;
    font-size: 28px;
    font-weight: 500;
}

/* the note sits under the headline: smaller and lighter, with a gap and column */
.promo-intro p + p {
    max-width: 640px;
    margin: 14px auto 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
}

/* --- Rules button, centered in the bottom outro block ------------------- */
.promo-outro {
    text-align: center;
    padding: 20px 20px 0;
}

.promo-btn {
    display: inline-block;
    background: #231f20;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    padding: 13px 28px;
    border-radius: 4px;
}

.promo-btn:hover {
    color: #fff;
    opacity: .85;
}

/* --- Product rows -------------------------------------------------------
   Every image is sized from its native pixel width multiplied by --k.
   On desktop --k = 1 (real pixel size); smaller breakpoints lower --k
   (see responsive.css) so the whole composition shrinks proportionally. */
.promo-rows {
    --k: 1;
    max-width: 860px;
    margin: 0 auto;
    /* 10% padding each side narrows the rows' usable width by 20%
       (mobile overrides this back to a small fixed padding) */
    padding: 10px 10% 20px;
}

.promo-row {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 55px auto;
}

/* extra bottom spacing on every row except the second-to-last (Z Flip7).
   Desktop/tablet values; mobile (<=767) overrides these smaller in responsive.css */
.promo-row:not(:nth-last-child(2)) {
    margin-bottom: 40px;
}

/* 1st row (S25): margin-bottom bumped ~30% (65px -> 85px) */
.promo-row:nth-child(1) {
    margin-bottom: 85px;
}

/* 2nd & 3rd rows (S25 Edge, S25 Ultra) */
.promo-row:nth-child(2),
.promo-row:nth-child(3) {
    margin-bottom: 110px;
}

/* last row (Z Fold7): pull it up ~100% of the ~55px gap above it (gap ~closed) */
.promo-row:last-child {
    margin-top: -55px;
}

.promo-row__label,
.promo-row__device,
.promo-row__gift {
    flex: 0 0 auto;
    display: block;
    height: auto;
    position: relative;
}

/* stacking so the label bubble and device sit above the gift */
.promo-row__gift   { z-index: 1; }
.promo-row__device { z-index: 2; margin-left: calc(-8px * var(--k)); margin-right: calc(-8px * var(--k)); }
.promo-row__label  { z-index: 3; align-self: center; }

/* --- Per-row sizing (native pixel width × --k) -------------------------- */
.promo-row__label { width: calc(146px * var(--k)); }
.promo-row__gift  { width: calc(275px * var(--k)); }

.promo-row--s25   .promo-row__device { width: calc(369px * var(--k)); }
.promo-row--edge  .promo-row__device { width: calc(255px * var(--k)); }
.promo-row--ultra .promo-row__device { width: calc(313px * var(--k)); }
.promo-row--flip  .promo-row__device { width: calc(270px * var(--k)); }
.promo-row--fold  .promo-row__device { width: calc(342px * var(--k)); }

.promo-row--edge  .promo-row__gift { width: calc(289px * var(--k)); }
.promo-row--flip  .promo-row__gift { width: calc(289px * var(--k)); }

/* per-row cloud nudges (scale with --k to stay proportional) */
.promo-row--edge  .promo-row__label { left: calc(50px * var(--k)); }
.promo-row--ultra .promo-row__label { top: calc(40px * var(--k)); }
.promo-row--fold  .promo-row__label { left: calc(-40px * var(--k)); }

/* --- Scroll-in animation -------------------------------------------------
   Each row's three parts (cloud/label, device, gift) fade + slide into place
   whenever the row enters the viewport, and reset when it leaves so they
   re-animate on every entry. The hidden start state is scoped to .anim-ready,
   a class added by JS (view) — so without JS everything stays visible. --- */
.anim-ready .promo-row__label,
.anim-ready .promo-row__device,
.anim-ready .promo-row__gift {
    opacity: 0;
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

/* start positions: cloud drops from above, device + gift rise from below */
.anim-ready .promo-row__label  { transform: translateY(-28px); }
.anim-ready .promo-row__device { transform: translateY(38px) scale(.96); }
.anim-ready .promo-row__gift   { transform: translateY(38px); }

/* in-view: settle to natural position (transform:none keeps the top/left
   cloud nudges intact — those use top/left, not transform) */
.anim-ready .promo-row.is-visible .promo-row__label,
.anim-ready .promo-row.is-visible .promo-row__device,
.anim-ready .promo-row.is-visible .promo-row__gift {
    opacity: 1;
    transform: none;
}

/* stagger the three parts: device first, then cloud, then gift */
.anim-ready .promo-row.is-visible .promo-row__device { transition-delay: 0s; }
.anim-ready .promo-row.is-visible .promo-row__label  { transition-delay: .12s; }
.anim-ready .promo-row.is-visible .promo-row__gift   { transition-delay: .24s; }

/* Top illustration: a cinematic reveal on load — fades in while it un-zooms
   (scale 1.08 -> 1) and sharpens (blur -> 0). Plays before the first row. */
.anim-ready .promo-illustration {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(6px);
    transition: opacity 1s ease, transform 1.3s 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;
}

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