/* =========================================================
   Seção "Meu presente" — galeria infinita (marquee) de fotos
   Desktop: medidas do frame de 1440px do Figma, escaladas por --gu.
   Cada fileira tem as fotos duas vezes; o JS desliza 50% e repete,
   então o loop não tem emenda.
   ========================================================= */

.gift {
  --gu: calc(min(100vw, 1440px) / 1440);
  --gift-red: #ff0000;                     /* vermelho do design desta seção */
  --row-h: clamp(220px, 60vw, 300px);      /* altura das fotos (mobile) */
  --gap: 10px;
  --radius: 6px;

  position: relative;
  padding: 88px 0 72px;
  overflow: hidden;
  background: var(--c-bg);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Cabeçalho ---------- */
.gift__header {
  max-width: 720px;
  margin: 0 auto 44px;
  padding-inline: 24px;
  text-align: center;
}

.gift__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 8.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-text);
  text-wrap: balance;
}
.gift__word { display: inline-block; }   /* o JS anima palavra por palavra */
.gift__accent { color: var(--gift-red); }

.gift__subtitle {
  max-width: 34ch;
  margin: 14px auto 0;
  font-size: 16px;
  line-height: 1.45;
  color: #d9d9d9;
  text-wrap: balance;
}
.gift__subtitle strong { font-weight: 600; }

/* ---------- Fileiras ---------- */
.gift__rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  /* esmaece as bordas da tela: as fotos "surgem" e "somem" com suavidade */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.gift__row { overflow: hidden; }

.gift__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* margin-right (em vez de gap) mantém as duas metades exatamente iguais */
.gift__item {
  flex: none;
  height: var(--row-h);
  aspect-ratio: var(--ar);
  margin: 0 var(--gap) 0 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-placeholder);
}
.gift__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
  user-select: none;
  -webkit-user-drag: none;
}

@media (hover: hover) and (pointer: fine) {
  .gift__item:hover img { transform: scale(1.05); }
}

/* Sem animação: cada fileira vira um carrossel com rolagem lateral */
.gift.is-static .gift__row {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.gift.is-static .gift__row::-webkit-scrollbar { display: none; }
.gift.is-static .gift__item { scroll-snap-align: start; }
.gift.is-static .gift__item[aria-hidden="true"] { display: none; }

/* ---------------------------------------------------------
   Desktop — frame de 1440px do Figma
   --------------------------------------------------------- */
@media (min-width: 900px) {
  .gift {
    --row-h: calc(490 * var(--gu));
    --gap: calc(20 * var(--gu));
    --radius: calc(8 * var(--gu));
    padding: calc(135 * var(--gu)) 0 calc(120 * var(--gu));
  }

  .gift__header {
    max-width: none;
    margin-bottom: calc(90 * var(--gu));
  }

  .gift__title { font-size: calc(50 * var(--gu)); }

  .gift__subtitle {
    max-width: calc(520 * var(--gu));
    text-wrap: wrap;
    margin-top: calc(22 * var(--gu));
    font-size: calc(20 * var(--gu));
  }
}