/* ==========================================================================
   ei, conta — tela de download / apresentação
   Referência: Figma "Apresentação" (node 512:345), frame 375 × 812.
   As medidas abaixo vêm direto do design; o layout é fluido para se adaptar
   a alturas e larguras diferentes mantendo a mesma hierarquia visual.
   ========================================================================== */

/* O título usa Sofia Pro Semi Bold. A fonte é licenciada e não é redistribuída
   neste repositório, então visitantes recebem o fallback (Inter 600) — a menos
   que tenham Sofia Pro instalada localmente. Para servir a fonte de verdade,
   converta o .ttf para .woff2, coloque em assets/fonts/ e descomente o bloco
   abaixo. Ver README (inclui nota de licenciamento web).

@font-face {
  font-family: "Sofia Pro";
  src: url("assets/fonts/sofia-pro-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --color-ink: #0C0007;
  --color-paper: #FBFBFB;
  --color-green: #56D590;

  /* Largura do frame do design, menos as margens laterais de 15px */
  --frame-width: 375px;
  --frame-gutter: 15px;

  --font-display: "Sofia Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Tela
   -------------------------------------------------------------------------- */

.screen {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
}

/* Foto de fundo.
   No design a imagem é escalada pela altura (410,61% de largura) e deslocada
   para a esquerda em -134,48%, o que equivale a um `cover` com o ponto
   horizontal em 43,3%. */
.screen__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 43.3% 50%;
}

/* Gradiente verde por cima da foto: transparente até 27,857% e sólido em
   105,86% (a parada acima de 100% mantém o verde do design sem chegar ao
   tom cheio na base). */
.screen__gradient {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(86, 213, 144, 0) 27.857%,
    var(--color-green) 105.86%
  );
}

.screen__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--frame-width);
  padding-inline: var(--frame-gutter);

  /* Teto para o flex-shrink da esteira ter contra o que empurrar em telas
     muito baixas — sem isto a coluna cresce e o excedente é cortado pelo
     `overflow: hidden` da .screen. */
  max-height: 100vh;
  max-height: 100svh;
}

/* --------------------------------------------------------------------------
   Logo — 144 × 24,0744 a 70,7px do topo (8,71% de 812)
   -------------------------------------------------------------------------- */

.logo {
  display: block;
  flex: none; /* quem cede altura em tela baixa é a esteira, não a logo */
  width: 144px;
  height: 24.0744px;
  margin-top: 70.7px;
}

/* --------------------------------------------------------------------------
   Esteira de telas do app

   Faixa horizontal que rola sem parar. O truque do loop: a lista tem duas
   cópias das 6 telas e a animação desloca a trilha exatamente uma volta —
   6 cartões + 6 intervalos — de modo que o quadro final é idêntico ao inicial
   e o reinício não aparece.

   O cálculo do deslocamento: a trilha mede 12·cartão + 11·gap. Metade disso
   (`-50%`) dá 6·cartão + 5,5·gap, meio intervalo a menos do que uma volta —
   daí o `- var(--marquee-gap) / 2` extra no keyframe. Sem isso a esteira
   desliza meio gap por ciclo e vai desalinhando.
   -------------------------------------------------------------------------- */

.marquee {
  --marquee-gap: 12px;
  --marquee-duration: 44s;

  /* Sangra para além da coluna de 375px: a faixa continua além da tela em vez
     de terminar junto com o conteúdo. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  /* Fecha a tela: quem empurra o conjunto para baixo é o `margin-top: auto`
     do .pitch, logo acima. O padding de baixo é o respiro de 29px do design;
     o de cima separa a faixa dos botões (e dá folga para o anel do pulso). */
  margin-block: 0;
  padding-block: 26px 29px;

  /* A esteira é a única parte elástica da coluna: quando a tela é baixa
     demais, ela cede altura em vez de empurrar os botões para fora do
     `overflow: hidden` da .screen. Os cartões acompanham via `height: 100%`.

     Os 55px do `padding-block` entram nesta altura (box-sizing: border-box),
     então o cartão em si fica 55px menor que os valores abaixo.

     Os 420px descontados são o que o resto da coluna ocupa em altura fixa
     (logo + sua margem de topo + todo o bloco de texto e botões). Sem esse
     min() a esteira pede 41vh mesmo quando não cabe, e como a .screen cresce
     junto com o conteúdo o flex-shrink nunca chega a agir. */
  height: clamp(150px, min(41vh, 100vh - 420px), 372px);
  height: clamp(150px, min(41svh, 100svh - 420px), 372px);
  flex: 0 1 auto;
  min-height: 0;

  overflow: hidden;

  /* Esmaece as pontas para a faixa entrar e sair de cena sem corte seco.
     Em px, não em %: numa tela de 375 uma parada percentual encolhe a ponto
     de o corte voltar a aparecer. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 52px, #000 calc(100% - 52px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 52px, #000 calc(100% - 52px), transparent);
}

.marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0);
  }
}

/* Segura a esteira enquanto a pessoa olha uma tela específica. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  flex: none;
}

.marquee__item img {
  display: block;
  height: 100%;
  width: auto; /* a proporção 1242 × 2688 vem dos atributos do <img> */
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(12, 0, 7, 0.18);
}

/* Sem animação: a faixa vira uma tira que se arrasta na mão, e a cópia do
   loop sai de cena para as telas não aparecerem duas vezes. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .marquee::-webkit-scrollbar {
    display: none;
  }

  .marquee__track {
    animation: none;
  }

  .marquee__item {
    scroll-snap-align: center;
  }

  .marquee__item[aria-hidden="true"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Bloco inferior — ancorado à base, com 29px de respiro
   -------------------------------------------------------------------------- */

.pitch {
  flex: none; /* o texto e os botões nunca são espremidos — ver .marquee */
  width: 100%;
  margin-top: auto;
  text-align: center;
}

.pitch__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em; /* -0,48px em 24px */
  color: var(--color-paper);
}

/* Colado ao título: no design as caixas de texto são adjacentes
   (topo da altura-de-caixa do subtítulo cai no fim da última linha do título). */
.pitch__text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.02em; /* -0,28px em 14px */
  color: var(--color-paper);
}

/* --------------------------------------------------------------------------
   Indicador de slides — caixa 119,345 × 4,283 com a arte transbordando
   (-2,09% à esquerda, -8,84% no topo), igual ao design.
   -------------------------------------------------------------------------- */

.dots {
  position: relative;
  width: 119.345px;
  height: 4.283px;
  margin: 25.34px auto 0;
}

.dots__art {
  position: absolute;
  top: -0.3786px;
  left: -2.4945px;
  display: block;
  width: 123.332px;
  height: 5.03935px;
}

/* --------------------------------------------------------------------------
   Botões das lojas — 345 × 65, 10,25px entre eles
   -------------------------------------------------------------------------- */

.stores {
  display: flex;
  flex-direction: column;
  gap: 10.25px;
  margin-top: 30.33px;
}

.store {
  display: block;
  width: 100%;
  aspect-ratio: 345 / 65; /* preserva a geometria do botão ao encolher */
  border-radius: 15px;
  transition: transform 150ms ease, filter 150ms ease;
}

/* O pulso vai na imagem, não no <a>: assim o `transform` do :active continua
   livre no elemento pai e os dois efeitos se somam em vez de disputar a mesma
   propriedade (uma animação vence qualquer declaração normal). */
.store img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px; /* o anel do pulso segue o raio do botão */
  animation: store-pulse 2.6s ease-out infinite;
}

/* Meio ciclo de defasagem: os dois botões respiram alternados em vez de
   piscarem juntos, que a essa escala vira estrobo. */
.store:last-child img {
  animation-delay: 1.3s;
}

@keyframes store-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 251, 251, 0.5);
  }

  45% {
    transform: scale(1.028);
    box-shadow: 0 0 0 14px rgba(251, 251, 251, 0);
  }

  70%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(251, 251, 251, 0);
  }
}

.store:hover {
  filter: brightness(0.97);
}

.store:active {
  transform: scale(0.985);
}

.store:focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .store {
    transition: none;
  }

  .store:active {
    transform: none;
  }

  .store img {
    animation: none;
  }
}