/* =========================================================
   Nosso site — Feliz aniversário
   Mobile-first. Desktop (≥ 900px) replica o frame de 1440×1024
   do Figma em escala proporcional via a unidade --u.
   ========================================================= */

:root {
  --c-bg: #000;
  --c-text: #fff;
  --c-text-soft: #e7e3e1;
  --c-accent: #d22500;
  --c-placeholder: #141414;

  --f-display: "Inria Serif", Georgia, "Times New Roman", serif;
  --f-body: "Abel", "Helvetica Neue", Arial, sans-serif;

  --r-photo: 20px;
  --r-moment: 30px;         /* cantos superiores das fotos da seção Momentos */
  --c-text-muted: #cfcfcf;  /* texto secundário da seção Momentos */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
h1, p { margin: 0; }

::selection { background: var(--c-accent); color: #fff; }

.accent { color: var(--c-accent); }

/* Evita "flash" antes do GSAP — o JS revela tudo com autoAlpha */
.js [data-reveal],
.js [data-split-title],
.js [data-split-text],
.js [data-photo],
.js [data-sticker],
.js .scroll-cue { visibility: hidden; }

/* ---------------------------------------------------------
   Layout base (mobile)
   --------------------------------------------------------- */
.page {
  max-width: 480px;
  margin-inline: auto;
  min-height: 100svh;
}

/* Mensagem */
.message {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 88px 24px 32px;   /* respiro para o botão do menu */
}

.message__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -1px;
  color: var(--c-text);
}
.message__line { display: block; }
.message__title .accent { color: var(--c-accent); }

.message__text {
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-text-soft);
  text-wrap: pretty;
}

/* Retratos e lembranças */
.memories {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-inline: 24px;
}

/* Foto central + adesivos. Tudo em % da largura do bloco,
   então escala junto com a tela. */
.featured {
  position: relative;
  padding-block: 14% 16%; /* espaço para o buquê (em cima) e o "i love you" (embaixo) */
}

/* Fotos */
.photo { position: relative; }

.photo__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-photo);
  background: var(--c-placeholder);
  transform-style: preserve-3d;
  will-change: transform;
  /* corrige overflow + border-radius durante transforms no Safari */
  isolation: isolate;
}

.photo__inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* Proporções iguais às do Figma */
.photo--central  { width: 78%; margin-inline: auto; aspect-ratio: 368 / 491; }
.photo--esquerda { flex: 1 1 0; min-width: 0; aspect-ratio: 329 / 530; }
.photo--direita  { width: 100%; aspect-ratio: 297 / 528; }

.photo--esquerda .photo__inner img { object-position: 50% 20%; }

.childhood {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.childhood__offset { flex: 1 1 0; min-width: 0; padding-top: 24px; }

/* Adesivos (i love you / buquê) */
.sticker {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  z-index: 2;
}
.sticker__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: grab;
  will-change: transform;
}
/* Os PNG/WebP dos adesivos já vêm recortados e na inclinação do Figma,
   então a arte só preenche a caixa do adesivo (sem rotação via CSS). */
.sticker__art { position: relative; width: 100%; height: 100%; }
.sticker__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Mobile: adesivos grandes, sobrepondo os cantos da foto central */
.sticker--love    { left: -2%; bottom: 2%; width: 58%; aspect-ratio: 233 / 131; }
.sticker--bouquet { right: -6%; top: -9%; width: 56%; aspect-ratio: 1; }

/* Convite para rolar — tudo deriva de --s (tamanho do selo),
   então o anel de letras escala igual no mobile e no desktop. */
.scroll-cue {
  display: flex;
  justify-content: center;
  padding-block: 32px;
}
.scroll-cue__badge {
  --s: 112px;
  position: relative;
  width: var(--s);
  height: var(--s);
  color: var(--c-text);
}
.scroll-cue__ring { position: absolute; inset: 0; }
.scroll-cue__ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1.3em;
  margin: -0.65em 0 0 -0.5em;
  font-size: calc(var(--s) * 0.125);
  line-height: 1.3em;
  text-align: center;
  transform: rotate(var(--a)) translateY(calc(var(--s) * -0.41));
}
.scroll-cue__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s) * 0.27);
  height: calc(var(--s) * 0.27);
  margin: calc(var(--s) * -0.135) 0 0 calc(var(--s) * -0.135);
  stroke-width: 1.5;
  overflow: visible;
}

/* ---------------------------------------------------------
   Componente: indicador de etapas ("01 / 05" + traços)
   Criado por js/steps-nav.js; cada seção define a posição.
   --------------------------------------------------------- */
.steps-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.steps-nav[hidden] { display: none; }

.steps-nav__count {
  min-width: 4.5ch;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}
.steps-nav__count b { font-weight: 700; color: var(--c-text); }

.steps-nav__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }

.steps-nav__dot {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;          /* área de toque maior que o traço visível */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.steps-nav__dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.28);
  transition: background-color 0.5s var(--ease-out);
}
.steps-nav__dot:hover::before { background: rgb(255 255 255 / 0.6); }
.steps-nav__dot[aria-current="step"]::before { background: var(--c-accent); }
.steps-nav__dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

@media (min-width: 900px) {
  .steps-nav { gap: 16px; }
  .steps-nav__dot { width: 24px; }
}

/* ---------------------------------------------------------
   Desktop — frame 1440 × 1024 do Figma
   --u = 1px quando a tela tem 1440px; escala proporcionalmente.
   --------------------------------------------------------- */
@media (min-width: 900px) {
  :root { --u: calc(min(100vw, 1440px) / 1440); }

  .page {
    position: relative;
    max-width: none;
    width: calc(1440 * var(--u));
    height: calc(1024 * var(--u));
    min-height: 0;
  }

  /* Os wrappers saem do fluxo: tudo é posicionado em relação ao frame */
  .message,
  .memories,
  .featured,
  .childhood,
  .childhood__offset,
  .scroll-cue { position: static; display: block; padding: 0; height: auto; }

  .message__title {
    position: absolute;
    left: calc(299 * var(--u));
    top: calc(135 * var(--u));
    font-size: calc(64 * var(--u));
    line-height: normal;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .message__line { display: inline; }

  .message__text {
    position: absolute;
    left: calc(392 * var(--u));
    top: calc(236 * var(--u));
    width: calc(657 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: normal;
    color: var(--c-text);
  }

  .photo { position: absolute; margin: 0; aspect-ratio: auto; }

  .photo--esquerda {
    left: calc(167 * var(--u));
    top: calc(402 * var(--u));
    width: calc(329 * var(--u));
    height: calc(530 * var(--u));
  }
  .photo--central {
    left: calc(544 * var(--u));
    top: calc(368 * var(--u));
    width: calc(368 * var(--u));
    height: calc(491 * var(--u));
  }
  .photo--direita {
    left: calc(955 * var(--u));
    top: calc(402 * var(--u));
    width: calc(297 * var(--u));
    height: calc(528 * var(--u));
  }

  .sticker { right: auto; bottom: auto; aspect-ratio: auto; }

  .sticker--love {
    left: calc(64 * var(--u));
    top: calc(271 * var(--u));
    width: calc(233 * var(--u));
    height: calc(131 * var(--u));
  }

  .sticker--bouquet {
    left: calc(1073 * var(--u));
    top: calc(223 * var(--u));
    width: calc(358.66 * var(--u));
    height: calc(358.22 * var(--u));
  }

  /* Selo com anel de letras, centralizado onde fica a seta no Figma */
  .scroll-cue__badge {
    --s: calc(130 * var(--u));
    position: absolute;
    left: calc(687.8 * var(--u));
    top: calc(883.8 * var(--u));
  }
}

/* Telas muito largas: centraliza o frame */
@media (min-width: 1441px) {
  .page { margin-inline: auto; }
}

/* Acessibilidade: sem animação para quem prefere */
@media (prefers-reduced-motion: reduce) {
  .sticker__inner { cursor: default; }
}