/* =========================================================
   Seção "Momentos" — 5 etapas
   Cada etapa (.moment) ocupa uma tela inteira. Com JS + movimento
   liberado, a seção fica fixada (.is-pinned) e as etapas se empilham;
   sem JS ou com movimento reduzido, elas aparecem uma abaixo da outra.

   Desktop (≥ 900px): replica o frame 1440 × 1024 do Figma, escalado por
   --su para caber INTEIRO na tela (largura e altura), colado no rodapé.
   Mobile: coluna (título → texto → foto colada no rodapé).

   Os adesivos ficam dentro de .moment__media e são posicionados em %
   da foto (mesmas proporções do Figma em qualquer tamanho de tela).
   ========================================================= */

.moments {
  position: relative;
  background: var(--c-bg);
}

/* Esconde as etapas até o JS assumir (o JS mostra uma por vez) */
.js .moments.is-pinned .moment { visibility: hidden; }

/* ---------- Etapa ---------- */
.moment {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.moments.is-pinned { height: 100vh; height: 100svh; overflow: hidden; }
.moments.is-pinned .moment { position: absolute; inset: 0; }

/* Dados de layout de cada etapa (px do frame 1440 × 1024 do Figma) */
.moment--1 { --media-x: 406; --media-w: 595; --media-h: 793; --title-x: 1035; --title-y: 330; --text-x: 58;  --text-y: 776; }
.moment--2 { --media-x: 432; --media-w: 594; --media-h: 831; --title-x: 1090; --title-y: 327; --text-x: 58;  --text-y: 774; }
.moment--3 { --media-x: 443; --media-w: 555; --media-h: 831; --title-x: 1040; --title-y: 320; --text-x: 122; --text-y: 753; }
.moment--4 { --media-x: 437; --media-w: 555; --media-h: 831; --title-x: 1080; --title-y: 318; --text-x: 108; --text-y: 764; }
.moment--5 { --media-x: 430; --media-w: 555; --media-h: 831; --title-x: 1040; --title-y: 372; --text-x: 65;  --text-y: 779; }

/* Mobile: coluna */
.moment__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 76px 24px 0;
}
/* No HTML a foto vem primeiro; no mobile ela vai para o rodapé */
.moment__title { order: 1; }
.moment__text  { order: 2; }
.moment__media { order: 3; }

/* Título (texto grande) — hierarquia principal */
.moment__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(36px, 10.5vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--c-text);
}
.moment__title .accent { color: var(--c-accent); }

/* Texto secundário — peso regular e tom suave para não competir com o título */
.moment__text {
  margin-top: 14px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  color: var(--c-text-muted);
}

/* Linhas com máscara (o JS anima o <span> interno de baixo pra cima) */
.moment .line {
  display: block;
  overflow: hidden;
  /* espaço para descendentes (g, p, ç) não serem cortados pela máscara */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.moment .line > span { display: block; will-change: transform; }

/* Foto + adesivos */
.moment__media {
  position: relative;
  margin-top: auto;           /* empurra a foto para o rodapé */
  align-self: center;
  width: min(74vw, calc(52svh * var(--media-w) / var(--media-h)));
  aspect-ratio: var(--media-w) / var(--media-h);
}

.moment__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-moment) var(--r-moment) 0 0;
  background: var(--c-placeholder);
  transform-origin: 50% 100%;   /* cresce/encolhe a partir do rodapé */
  will-change: transform;
}
/* Leve gradiente no topo: dá profundidade e suaviza o recorte no fundo preto */
.moment__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.18), transparent 22%);
  pointer-events: none;
}
.moment__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.moment__asset {
  position: absolute;
  z-index: 2;
  left: calc(var(--l) * 1%);
  top: calc(var(--t) * 1%);
  width: calc(var(--w) * 1%);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.45));
}

/* Posição dos adesivos em % da foto (do Figma: (x - fotoX) / fotoW, (y - fotoY) / fotoH) */
.asset--happy-birthday { --l: 0;      --t: 57.63; --w: 100;   }
.asset--tulipas        { --l: -36.7;  --t: -19.25; --w: 75.25; }
.asset--coracao-a      { --l: -46.31; --t: 2.17;  --w: 33.69; }
.asset--coracao-b      { --l: 123.42; --t: 59.69; --w: 33.69; }
.asset--favorite-person{ --l: 37.48;  --t: -19.61; --w: 60.36; }
.asset--coracao-c      { --l: 118.56; --t: 59.93; --w: 39.46; }
.asset--pintura        { --l: -25.77; --t: -5.42; --w: 37.12; }
.asset--olhar          { --l: 86.49;  --t: -3.01; --w: 65.41; }

/* Flor da etapa 5: fora do frame, colada na borda direita da tela */
.asset--flor {
  left: auto;
  top: auto;
  right: 0;
  bottom: -2svh;
  width: min(38vw, 21svh);   /* mobile: menor, para não cobrir a foto */
}

/* Mobile: puxa para dentro da tela os adesivos que ficariam fora */
@media (max-width: 899.98px) {
  .asset--tulipas   { --l: -24;  --t: -20;  --w: 64; }
  .asset--coracao-a { --l: -12;  --t: -10;  --w: 32; }
  .asset--coracao-b { --l: 82;   --t: 58;   --w: 32; }
  .asset--coracao-c { --l: 76;   --t: 62;   --w: 36; }
  .asset--favorite-person { --l: 42; --t: -14; --w: 54; }
  .asset--pintura   { --l: -14;  --t: -10;  --w: 34; }
  .asset--olhar     { --l: 44;   --t: -14;  --w: 62; }
}

/* Posição do indicador (componente .steps-nav em style.css) */
.moments__nav {
  position: absolute;
  z-index: 6;
  left: 24px;
  top: 28px;
}

/* ---------------------------------------------------------
   Desktop — frame 1440 × 1024, sempre inteiro na tela
   --------------------------------------------------------- */
@media (min-width: 900px) {
  .moments { --su: min(calc(100vw / 1440), calc(100svh / 1024)); }

  .moment__frame {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: block;
    width: calc(1440 * var(--su));
    height: calc(1024 * var(--su));
    padding: 0;
    transform: translateX(-50%);
  }

  .moment__media {
    position: absolute;
    left: calc(var(--media-x) * var(--su));
    bottom: 0;
    width: calc(var(--media-w) * var(--su));
    height: calc(var(--media-h) * var(--su));
    margin: 0;
  }

  .moment__title {
    position: absolute;
    left: calc(var(--title-x) * var(--su));
    top: calc(var(--title-y) * var(--su));
    font-size: calc(72 * var(--su));
    white-space: nowrap;
  }

  .moment__text {
    position: absolute;
    left: calc(var(--text-x) * var(--su));
    top: calc(var(--text-y) * var(--su));
    margin: 0;
    font-size: calc(30 * var(--su));
    line-height: 1.3;
    white-space: nowrap;
  }

  /* Flor: mesmo tamanho/altura do Figma, mas presa na borda direita da tela */
  .asset--flor {
    bottom: calc(-39 * var(--su));
    width: calc(437 * var(--su));
  }

  /* Indicador horizontal no topo, alinhado à margem esquerda do frame */
  .moments__nav {
    left: max(24px, calc(50% - 720 * var(--su) + 64 * var(--su)));
    top: 32px;
  }
}