/* ==========================================================================
   Motorola promocija — "Pokloni koje ne dobijaš svakoga dana" — landing page
   ========================================================================== */

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

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

/* --- Hero illustration: full-bleed background band --------------------------
   The image (1600×820, all text baked in) is shown at a FIXED pixel size per
   breakpoint and centered, so it does NOT scale as the window narrows — the
   outer (decorative) edges simply pass out of view (clipped by overflow:hidden
   on .motorola-promo). It only steps down to a smaller fixed size when a
   breakpoint is crossed (responsive.css). Same technique as the previous
   Samsung promo landings. The whole band is one link. */
.promo-illustration {
    display: block;
    height: 820px;
    background: #cfe4e5 url("/custom/motorola-promocija/assets/images/illustration-desktop.jpg") no-repeat center center;
    background-size: 1600px auto;
}

/* --- Product slides ---------------------------------------------------------
   Each slide is one full-width link: a soft teal gradient band (bg image,
   cover — it's a plain gradient so scaling is invisible) carrying the device
   composition (PNG at native px × --k) with the text block underneath.
   --k = 1 on desktop and drops on smaller breakpoints (responsive.css) so the
   whole composition shrinks proportionally. */
.promo-section {
    --k: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #231f20;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.promo-section:hover {
    color: #231f20;
    text-decoration: none;
}

/* bg images are 1600×813 / 1600×817; paddings + content add up to those
   heights on desktop (--k = 1) and shrink together with --k */
.promo-section--edge {
    padding: calc(97px * var(--k)) 20px calc(50px * var(--k));
    background-image: url("/custom/motorola-promocija/assets/images/bg-motorola-edge-60-pro.jpg");
}

.promo-section--g77 {
    padding: calc(83px * var(--k)) 20px calc(66px * var(--k));
    background-image: url("/custom/motorola-promocija/assets/images/bg-motorola-g77.jpg");
}

/* device compositions render at native px × --k (698×542 / 713×544) */
.promo-section__device {
    display: block;
    height: auto;
}

.promo-section--edge .promo-section__device { width: calc(698px * var(--k)); }
.promo-section--g77  .promo-section__device { width: calc(713px * var(--k)); }

/* text block: centered as a block, lines left-aligned (per design) */
.promo-section__text {
    display: flex;
    flex-direction: column;
    gap: calc(8px * var(--k));
    margin-top: calc(40px * var(--k));
    text-align: left;
}

.promo-section__lead {
    font-size: calc(25px * var(--k));
    line-height: 1.3;
}

.promo-section__headline {
    font-size: calc(33px * var(--k));
    line-height: 1.3;
}

/* --- Bottom note ------------------------------------------------------- */
.promo-note {
    margin: 0;
    padding: 55px 20px 125px; /* text sits high in the white band, per design */
    background: #fff;
    color: #231f20;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}

/* ============================ Reveal animations ==========================
   Enabled only when JS adds `.anim` to .motorola-promo (progressive
   enhancement; also skipped under prefers-reduced-motion — see the view
   script). Elements start hidden and settle in once revealed. Reveals fire
   ONCE — nothing plays in reverse when scrolling back up. ---------------- */

/* hero illustration: gentle fade-in on load */
.anim .promo-illustration {
    opacity: 0;
    transition: opacity 1s ease;
    will-change: opacity;
}
.anim .promo-illustration.is-visible {
    opacity: 1;
}

/* product slides: reveal device -> text, staggered & fluid */
.anim .promo-section__device,
.anim .promo-section__text {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.anim .promo-section.is-visible .promo-section__device,
.anim .promo-section.is-visible .promo-section__text {
    opacity: 1;
    transform: none;
}
.anim .promo-section.is-visible .promo-section__device { transition-delay: 0s; }
.anim .promo-section.is-visible .promo-section__text   { transition-delay: .18s; }

/* bottom note: simple fade-up */
.anim .promo-note {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}
.anim .promo-note.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .anim .promo-illustration,
    .anim .promo-section__device,
    .anim .promo-section__text,
    .anim .promo-note {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}