/* Futari: página inicial em papel sobre a mesa escura.
   Cores e fontes do ../DESIGN.md: o fundo é o tema escuro do app ("Noite a dois":
   noite, champanhe e creme) e os objetos de papel guardam as próprias cores (creme,
   vinho, dourado e oliva). Bodoni Moda e Jost.
   O movimento fica em home.js: as cenas presas na tela andam junto com o scroll, com
   amortecimento; o resto sobe e aparece com calma quando entra na tela. O que rola
   com a página anda por aqui quando o navegador liga animação ao scroll (classe
   scrolly, no fim do arquivo). Nada treme. */

:root {
  --canvas: #e8e0d6;
  --cream: #efe7dc;
  --paper: #f3ede4;
  --surface: #fffdf8;
  --ink: #211f1d;
  --muted: #625c56;
  --wine: #6f2635;
  --wine-deep: #5c1f2c;
  --gold: #b89454;
  --gold-line: rgb(184 148 84 / 0.6);
  --gold-wine: #f0d58a;
  --on-wine: #f3e7d7;
  --on-wine-muted: #dcc6b8;

  /* a página (tema escuro do app); --ink e --muted ficam para o que está escrito
     nos objetos de papel */
  --night: #1d1216;
  --night-2: #2a1a20;
  --night-3: #34222a;
  --fg: #f3e7d7;
  --fg-muted: #bca89c;
  --accent: #c9a267;
  --line: rgb(201 162 103 / 0.34);
  --cream-button: #efe4d8;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --text: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;

  --gutter: clamp(20px, 6.5vw, 112px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-paper: 0 1px 2px rgb(0 0 0 / 0.35), 0 14px 30px -12px rgb(0 0 0 / 0.75);
  --shadow-phone: 0 2px 4px rgb(0 0 0 / 0.4), 0 30px 54px -22px rgb(0 0 0 / 0.85);
  --tab-h: 60px;
  --h2: clamp(2.3rem, 3.6vw, 3.6rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--tab-h);
}

html.motion {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--fg);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--wine);
  color: var(--on-wine);
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sheet-wine :focus-visible {
  outline-color: var(--gold-wine);
}

h1,
h2,
h3,
.h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  color: var(--accent);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--wine);
  color: var(--on-wine);
  padding: 10px 16px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Entrar na tela: sobe um pouco e aparece ---------- */

.motion .rise {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity 900ms var(--ease-soft),
    transform 1300ms var(--ease-soft);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.motion .is-in .rise,
.motion .rise.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Botões ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: 2px;
  font: 500 1rem/1 var(--text);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 140ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button-wine {
  background: var(--wine);
  color: var(--on-wine);
  box-shadow:
    inset 0 0 0 1px rgb(240 213 138 / 0.18),
    0 8px 18px -10px rgb(111 38 53 / 0.7);
}

/* o botão principal no escuro: creme com texto escuro, como no app */
.button-cream {
  background: var(--cream-button);
  color: var(--night);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.8);
}

.button-line {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .button-wine:hover {
    background: var(--wine-deep);
  }
  .button-cream:hover {
    background: #fff6ea;
  }
  .button-line:hover {
    background: rgb(201 162 103 / 0.14);
  }
}

.button-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.button-big {
  min-height: 78px;
  min-width: min(100%, 26rem);
  padding: 0 56px;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
}

.hero-note {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

/* ---------- A aba de cima ---------- */

.tab {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--tab-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--gutter);
  background: var(--night);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
}

.wordmark img {
  width: 30px;
  height: auto;
}

.tab-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  font-size: 0.875rem;
}

.tab-anchor {
  text-decoration: none;
  color: var(--fg-muted);
  padding: 8px 0;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition:
    background-size 180ms var(--ease-out),
    color 160ms var(--ease-out);
}

.tab-anchor:hover,
.tab-anchor:focus-visible {
  color: var(--fg);
  background-size: 100% 1px;
}

@media (max-width: 860px) {
  .tab-anchor {
    display: none;
  }
}

/* ---------- Folhas ---------- */

.sheet {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

/* as cenas presas não cortam de lado (o palco já corta o que é dele): um
   overflow-x: clip acima de um position: sticky faz o palco inteiro tremer no
   iPhone enquanto as barras do Safari mudam de tamanho no scroll (WebKit 247130).
   Pelo mesmo motivo o body não corta de lado; nada passa da largura da tela */
.sheet.scene {
  overflow-x: visible;
}

/* a textura do papel, por cima da cor e por baixo de tudo; no escuro ela clareia
   de leve, como feltro */
.sheet::before,
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/assets/papel/textura.webp') 0 0 / 360px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}

.scene > .stage::before {
  z-index: 0;
}

.sheet-night,
.sheet-night > .stage {
  background-color: var(--night);
}

.sheet-night-2 {
  background-color: var(--night-2);
}

.sheet-wine {
  background-color: var(--wine);
  color: var(--on-wine);
}

.sheet-wine::before {
  opacity: 0.4;
}

/* folha nova entrando por cima: um fio champanhe e a sombra na folha de baixo */
.sheet + .sheet {
  box-shadow:
    0 -1px 0 rgb(201 162 103 / 0.22),
    0 -24px 44px -16px rgb(0 0 0 / 0.7);
}

/* sem movimento (ou sem JS): as cenas são páginas normais */
.scene > .stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.motion .scene {
  height: calc((var(--span, 1) + 2) * 100vh);
}

.motion .scene > .stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}

.motion .scene + .sheet {
  margin-top: -100vh;
}

/* a folha de baixo escurece um pouco enquanto a de cima entra */
.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: #0c0709;
  opacity: calc(var(--dim, 0) * 0.4);
}

/* ---------- Objetos na mesa ---------- */

.desk {
  position: absolute;
  container-type: size;
}

.obj,
.futi {
  position: absolute;
}

.futi > .rise {
  position: relative;
}

/* as poses ficam empilhadas pelos pés; trocar de pose é só cruzar a opacidade */
.futi .pose {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 420ms var(--ease-out);
}

.futi .pose:first-of-type {
  position: relative;
}

.futi .pose.is-on {
  opacity: 1;
}

.futi .contact {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -3%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  opacity: var(--contact, 1);
}

.phone {
  aspect-ratio: 720 / 1558;
  padding: 1.6%;
  border-radius: 12.4% / 5.8%;
  background: linear-gradient(150deg, #2e2724, #151110 42%, #262019);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 0 0 1px rgb(201 162 103 / 0.28),
    var(--shadow-phone);
}

.phone > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11.2% / 5.2%;
}

.polaroid {
  container-type: inline-size;
  margin: 0;
  padding: 5% 5% 0;
  background: #fbf7ef;
  box-shadow: var(--shadow-paper);
}

.polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.polaroid figcaption {
  font-family: var(--display);
  font-style: italic;
  font-size: 10cqw;
  line-height: 1;
  white-space: nowrap;
  padding: 0.7em 0 0.8em;
  color: var(--muted);
}

/* ---------- 1. A mesa ---------- */

/* a mesa não fica presa: rola com a página, e as camadas andam em velocidades
   diferentes (home.js), então tudo se mexe desde o primeiro gesto */
.hero-stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

.hero-copy {
  position: absolute;
  z-index: 5;
  left: var(--gutter);
  top: var(--tab-h);
  bottom: 4vh;
  width: min(34rem, 40vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-copy h1 {
  font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: 0.98;
}

.hero-copy h1 em {
  display: block;
}

.lead {
  margin-top: 24px;
  max-width: 30ch;
  font-size: clamp(1.08rem, 1.3vw, 1.25rem);
  color: var(--fg-muted);
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
}

.hero-desk {
  z-index: 2;
  right: calc(var(--gutter) * 0.4);
  bottom: 2vh;
  width: min(84vh - var(--tab-h), 54vw);
  aspect-ratio: 1;
}

.hero-phone {
  left: 37%;
  top: 5%;
  width: 33%;
  z-index: 3;
}

.hero-pol-a {
  left: 6%;
  top: 21%;
  width: 30%;
  rotate: -6deg;
  z-index: 2;
}

.hero-pol-b {
  left: 64%;
  top: 45%;
  width: 28%;
  rotate: 5deg;
  z-index: 4;
}

.hero-tacas {
  left: 74%;
  top: -1%;
  width: 20%;
  z-index: 1;
}

.hero-futi {
  left: 12%;
  top: 56%;
  width: 28%;
  z-index: 6;
}

/* ---------- 2. Mêsversário ---------- */

.mes-wipe {
  position: absolute;
  inset: -110vh -20vw -24vh -120vw;
  z-index: 2;
  transform-origin: 0 50%;
  background: var(--wine);
  box-shadow: -24px 0 46px -16px rgb(30 10 12 / 0.5);
}

.mes-wipe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/papel/textura.webp') 0 0 / 360px;
  opacity: 0.2;
  mix-blend-mode: multiply;
}

.motion .mes-wipe {
  transform: translateX(200vw);
}

.mes-copy {
  position: absolute;
  z-index: 6;
  left: var(--gutter);
  top: 50%;
  width: min(32rem, 38vw);
  translate: 0 -50%;
}

.mes-state h2,
.mes-state .h2 {
  font-size: clamp(2.6rem, 4.4vw, 4.4rem);
  line-height: 1;
}

.mes-state h2 em,
.mes-state .h2 em {
  display: block;
}

.mes-sub {
  margin-top: 20px;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  line-height: 1.2;
  color: var(--fg-muted);
}

.mes-sub em {
  color: var(--accent);
}

.mes-state p:not(.mes-sub) {
  margin-top: 20px;
  max-width: 32ch;
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.65;
}

.mes-state-light {
  color: var(--on-wine);
}

.mes-state-light .h2 em {
  color: var(--gold-wine);
}

.mes-state-light p {
  color: var(--on-wine-muted);
}

/* sem movimento: os dois primeiros estados, um embaixo do outro, já no vinho */
.mes-state[data-state='0'] {
  color: var(--on-wine);
}
.mes-state[data-state='0'] h2 em,
.mes-state[data-state='0'] .mes-sub em {
  color: var(--gold-wine);
}
.mes-state[data-state='0'] .mes-sub {
  color: var(--on-wine-muted);
}
.mes-state[data-state='1'] {
  margin-top: 44px;
}
.mes-state[data-state='2'] {
  display: none;
}

.motion .mes-copy {
  height: 60vh;
}

.motion .mes-state {
  position: absolute;
  inset: 50% 0 auto;
  translate: 0 -50%;
  margin: 0;
  display: block;
  opacity: 0;
}

.motion .mes-state[data-state='0'] {
  opacity: 1;
  color: var(--fg);
}
.motion .mes-state[data-state='0'] h2 em,
.motion .mes-state[data-state='0'] .mes-sub em {
  color: var(--accent);
}
.motion .mes-state[data-state='0'] .mes-sub {
  color: var(--fg-muted);
}

.mes-desk {
  z-index: 3;
  right: calc(var(--gutter) * 0.4);
  bottom: 0;
  width: min(90vh - var(--tab-h), 54vw);
  aspect-ratio: 1;
}

.calendar {
  left: 4%;
  top: 14%;
  width: 46%;
  aspect-ratio: 0.86;
  rotate: -3deg;
  z-index: 1;
  display: grid;
  grid-template-rows: 22% 1fr auto;
  justify-items: center;
  background: #fbf7ef;
  box-shadow: var(--shadow-paper);
}

.cal-rings {
  position: absolute;
  top: -3%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 22%;
}

.cal-rings i {
  width: 4.5%;
  min-width: 6px;
  aspect-ratio: 0.5;
  border-radius: 99px;
  background: linear-gradient(90deg, #5b5148, #a29484 45%, #5b5148);
}

.cal-month {
  width: 100%;
  display: grid;
  place-items: center;
  background: var(--wine);
  color: var(--on-wine);
  font-weight: 500;
  font-size: 3.4cqw;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.cal-day {
  align-self: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25cqw;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}

.cal-week {
  padding-bottom: 9%;
  font-family: var(--display);
  font-style: italic;
  font-size: 3.6cqw;
  color: var(--muted);
}

.cal-circle {
  position: absolute;
  left: 12%;
  top: 22%;
  width: 76%;
  overflow: visible;
}

.cal-circle path {
  stroke: var(--wine);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.motion .cal-circle path {
  stroke-dashoffset: 1;
}

.lock {
  left: 46%;
  top: 6%;
  width: 39%;
  z-index: 4;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.lock > img {
  grid-area: 1 / 1;
  min-height: 0;
}

/* a manhã: a mesma tela com a foto do dia, que aparece por cima da da noite */
.lock .lock-day {
  opacity: 0;
  filter: brightness(0.86);
}

/* o dia clareando sobre a folha vinho */
.mes-dawn {
  position: absolute;
  inset: -110vh -20vw -24vh -120vw;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      max(56vw, 560px) 66vh at 80% 60%,
      rgb(255 204 128 / 0.55),
      rgb(255 204 128 / 0) 72%
    ),
    linear-gradient(180deg, rgb(214 126 92 / 0.08), rgb(255 206 140 / 0.22));
  mix-blend-mode: screen;
}

.lock-head {
  position: absolute;
  inset: 8% 0 auto;
  display: grid;
  justify-items: center;
  color: #fffaf2;
  text-shadow:
    0 1px 2px rgb(0 0 0 / 0.3),
    0 1px 14px rgb(0 0 0 / 0.45);
}

.lock-date,
.lock-time {
  display: grid;
  justify-items: center;
  overflow: hidden;
}

.lock-date > span,
.lock-time > span {
  grid-area: 1 / 1;
}

.lock-date {
  font-weight: 500;
  font-size: 2.3cqw;
}

.lock-time {
  font-weight: 500;
  font-size: 10.5cqw;
  line-height: 1.04;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

[data-part='d2'],
[data-part='t2'] {
  visibility: hidden;
}

.motion [data-part='d2'],
.motion [data-part='t2'] {
  visibility: visible;
  opacity: 0;
}

.notice {
  position: absolute;
  left: -27%;
  width: 154%;
  top: 33%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 3.4cqw;
  align-items: center;
  padding: 3cqw 3.6cqw;
  border-radius: 3.6cqw;
  background: rgb(252 248 242 / 0.97);
  color: var(--ink);
  box-shadow:
    0 2px 3px rgb(30 12 10 / 0.2),
    0 22px 40px -16px rgb(30 12 10 / 0.55);
  font-size: 2.6cqw;
  line-height: 1.3;
  transform-origin: 50% 0;
}

.notice img {
  grid-row: 1 / span 3;
  width: 8cqw;
  height: 8cqw;
  border-radius: 22%;
  align-self: start;
}

.notice-app {
  font-weight: 600;
  font-size: 2.1cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.notice-when {
  font-size: 2.1cqw;
  color: var(--muted);
}

.notice strong {
  grid-column: 2 / span 2;
  font-weight: 600;
  font-size: 2.5cqw;
  white-space: nowrap;
}

.notice-body {
  grid-column: 2 / span 2;
  font-size: 2.4cqw;
}

.notice[data-part='n2'] {
  display: none;
}

.motion .notice {
  opacity: 0;
}

.motion .notice[data-part='n2'] {
  display: grid;
}

.mes-futi {
  left: 1%;
  top: 60%;
  width: 30%;
  z-index: 5;
}

.mes-futi .pose {
  transition: none;
}

/* ---------- 3. Memórias ---------- */

.flow {
  padding: clamp(72px, 11vh, 128px) var(--gutter);
}

.mem-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.mem-copy h2,
.recado-copy h3,
.rail-head h2,
.faq h2,
.close h2 {
  font-size: var(--h2);
}

.mem-copy h2 em {
  display: block;
}

.mem-copy p {
  margin-top: 20px;
  max-width: 34ch;
  font-size: 1.1rem;
}

.mem-copy .mem-aside {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 1rem;
  max-width: 36ch;
}

.mem-aside strong {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--accent);
}

.mem-desk {
  position: relative;
  width: 100%;
  aspect-ratio: 1.24;
}

.mem-phone-wrap {
  left: 36%;
  top: 3%;
  width: 28%;
  z-index: 2;
}

.mem-pol {
  width: 27%;
}

.mem-pol-1 {
  left: 3%;
  top: 5%;
  rotate: -5deg;
}
.mem-pol-2 {
  left: 69%;
  top: 1%;
  rotate: 4deg;
}
.mem-pol-3 {
  left: 8%;
  top: 53%;
  rotate: 3deg;
  z-index: 1;
}
.mem-pol-4 {
  left: 67%;
  top: 51%;
  rotate: -4deg;
  z-index: 3;
}

.mem-futi {
  left: 22%;
  top: 63%;
  width: 20%;
  z-index: 4;
}

.recado-row {
  margin-top: clamp(48px, 8vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.recado-desk {
  position: relative;
  aspect-ratio: 1.8;
  container-type: size;
}

.paper-note {
  left: 6%;
  top: 10%;
  width: 62%;
  padding: 8% 8% 6%;
  rotate: -2deg;
  background: #fbf6ec;
  box-shadow: var(--shadow-paper);
}

.paper-note p {
  font-family: var(--display);
  font-style: italic;
  font-size: 4cqw;
  line-height: 1.25;
  color: var(--wine);
}

.note-sign {
  display: block;
  margin-top: 1.1em;
  font-size: 2cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.tape {
  position: absolute;
  left: 38%;
  top: -5%;
  width: 24%;
  height: 12%;
  background: rgb(214 186 124 / 0.62);
  box-shadow: 0 1px 2px rgb(60 30 20 / 0.12);
}

.plane {
  position: absolute;
  left: 71%;
  top: 4%;
  width: 8%;
  overflow: visible;
  rotate: 8deg;
}

.plane path {
  fill: #fbf6ec;
  stroke: var(--gold);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.motion .plane {
  opacity: 0;
}

.recado-futi {
  left: 69%;
  top: 30%;
  width: 22%;
  z-index: 2;
}

.recado-copy p {
  margin-top: 20px;
  max-width: 34ch;
  font-size: 1.1rem;
}

.recado-copy h3 em {
  display: block;
}

.lists-row {
  margin-top: clamp(48px, 8vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.lists-copy h3 {
  font-size: var(--h2);
}

.lists-copy h3 em {
  display: block;
}

.lists-copy p {
  margin-top: 20px;
  max-width: 36ch;
  font-size: 1.1rem;
}

.lists-desk {
  position: relative;
  aspect-ratio: 1.5;
  container-type: size;
}

.lists-phone-wrap {
  left: 10%;
  top: 2%;
  width: 29%;
  z-index: 1;
}

/* o duelo do ranking, como na tela do app: um ou outro */
.duel-wrap {
  left: 44%;
  top: 14%;
  width: 44%;
  z-index: 2;
}

.duel {
  container-type: inline-size;
  position: relative;
  display: grid;
  padding: 9% 9% 10%;
  background: #fbf7ef;
  color: var(--ink);
  box-shadow: var(--shadow-paper);
}

.duel::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgb(184 148 84 / 0.75);
  pointer-events: none;
}

.duel-kicker {
  font-size: 4.6cqw;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.duel-q {
  margin: 0.25em 0 0.7em;
  font-family: var(--display);
  font-weight: 500;
  font-size: 9.4cqw;
  line-height: 1.1;
}

.duel-pick {
  padding: 0.75em 0.8em;
  background: #efe6d8;
  font-family: var(--display);
  font-size: 7cqw;
  line-height: 1.15;
}

.duel-or {
  display: flex;
  align-items: center;
  gap: 0.8em;
  margin: 0.45em 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 5.6cqw;
  color: var(--muted);
}

.duel-or::before,
.duel-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgb(184 148 84 / 0.6);
}

.lists-futi {
  left: 72%;
  top: 60%;
  width: 24%;
  z-index: 3;
}

/* ---------- 4. Coleções ---------- */

.rail-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  padding: calc(var(--tab-h) + 2vh) 0 3vh;
}

.rail-head {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter);
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px 48px;
  flex-wrap: wrap;
}

.rail-head p {
  max-width: 30ch;
  color: var(--fg-muted);
  font-size: 1.05rem;
  padding-bottom: 0.3em;
}

.rail {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0 var(--gutter);
  display: flex;
  gap: var(--rail-gap);
  width: max-content;
  will-change: transform;
}

.rail {
  --rail-gap: clamp(24px, 3vw, 48px);
}

/* no computador as cinco fichas cabem na largura, então o trilho só prende onde
   não cabem (telas estreitas) */
.item {
  position: relative;
  width: clamp(190px, calc((100vw - 2 * var(--gutter) - 4 * var(--rail-gap)) / 5), 280px);
  display: flex;
  flex-direction: column;
}

.frame {
  position: relative;
  background: var(--surface);
  padding: 12px;
  box-shadow: var(--shadow-paper);
}

.frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgb(184 148 84 / 0.75);
  pointer-events: none;
}

.item-media {
  height: min(40vh, 370px);
}

.item-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
}

.item-media .item-futi,
.item-media .item-art {
  position: absolute;
  right: -16%;
  bottom: -8%;
  width: 50%;
  height: auto;
  z-index: 2;
}

.item-media .item-art {
  width: 42%;
  right: -12%;
}

/* em Filmes, o Futi da pipoca senta no canto de cima, longe das notas */
.item-media .item-futi-top {
  top: -13%;
  bottom: auto;
  right: -15%;
  width: 42%;
}

.item-media .item-art-stamps {
  width: 66%;
  right: -22%;
  bottom: -6%;
}

.item h3 {
  margin-top: 22px;
  font-size: clamp(1.3rem, 1.6vw, 1.55rem);
}

.item p {
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 0.975rem;
  line-height: 1.5;
  max-width: 26ch;
}

/* Filmes e séries: a sala escura do app, com o ingresso da sessão e a nota de cada um */
.sala {
  container-type: size;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 9% 7%;
  background: var(--night);
  border-radius: 4px;
}

.sala-art {
  width: 78%;
}

.ticket {
  position: relative;
  display: flex;
  background: var(--night-2);
  color: var(--accent);
  font-family: var(--display);
  font-size: 9cqw;
  line-height: 1.1;
}

.ticket > span {
  display: grid;
  gap: 2px;
  padding: 7cqw 6cqw;
}

.ticket-main {
  flex: 1;
}

.ticket-stub {
  position: relative;
  border-left: 1px dashed rgb(201 162 103 / 0.5);
}

/* os dois recortes do ingresso, na cor da sala */
.ticket-stub::before,
.ticket-stub::after {
  content: '';
  position: absolute;
  left: -4.5cqw;
  width: 9cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--night);
}

.ticket-stub::before {
  top: -4.5cqw;
}

.ticket-stub::after {
  bottom: -4.5cqw;
}

.ticket small {
  font-family: var(--text);
  font-size: 5.6cqw;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.ticket b {
  font-weight: 500;
  white-space: nowrap;
}

.sala-notes {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: start;
  align-items: center;
  gap: 2cqw 4cqw;
  font-size: 6.4cqw;
  line-height: 1.2;
  color: var(--fg);
}

.sala-notes b {
  font-family: var(--display);
  font-weight: 500;
  color: var(--accent);
}

/* cinco estrelas em contorno e, por cima, as cheias até a nota */
.stars {
  position: relative;
  width: 40cqw;
  aspect-ratio: 5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l2.5 5.3 5.7.7-4.2 4 1.1 5.7-5.1-2.8-5.1 2.8 1.1-5.7-4.2-4 5.7-.7z' fill='none' stroke='%23bca89c' stroke-width='1.2'/%3E%3C/svg%3E")
    0 0 / 20% 100% repeat-x;
}

.stars::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--r, 0) * 20%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.8l2.5 5.3 5.7.7-4.2 4 1.1 5.7-5.1-2.8-5.1 2.8 1.1-5.7-4.2-4 5.7-.7z' fill='%23c9a267'/%3E%3C/svg%3E")
    0 0 / calc(100% / var(--r, 1)) 100% repeat-x;
}

/* Sonhos e apostas no mesmo quadro: a madrugada em cima, o placar embaixo */
.item-duo {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}

.duo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.duo-sonhos {
  background: #131a2a;
}

.duo-apostas {
  background: var(--night);
}

.duo-art {
  position: absolute;
  height: auto;
}

.duo-futi {
  position: absolute;
  bottom: 6%;
  height: auto;
}

.duo-sonhos .duo-art {
  right: 8%;
  top: 8%;
  width: 34%;
}

.duo-sonhos .duo-futi {
  left: 10%;
  width: 44%;
}

.duo-apostas .duo-art {
  left: 9%;
  top: 10%;
  width: 30%;
}

.duo-apostas .duo-futi {
  right: 9%;
  width: 44%;
}

.rail-progress {
  display: none;
  margin: 0 var(--gutter);
  height: 1px;
  background: var(--line);
}

.rail-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.motion .rail-progress {
  display: block;
}

/* sem movimento: o trilho rola de lado com o dedo ou o trackpad */
.rail-stage {
  overflow-x: auto;
}

.motion .rail-stage {
  overflow: hidden;
}

/* ---------- 5. Privacidade ---------- */

.priv {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 0 48px;
}

.priv h2 {
  grid-column: 1 / -1;
  font-size: clamp(3.2rem, 8.6vw, 7.8rem);
  line-height: 0.94;
  color: var(--on-wine);
}

.priv h2 em {
  color: var(--gold-wine);
}

.motion .wipe {
  clip-path: inset(-12% 100% -24% -4%);
  transition: clip-path 1500ms var(--ease-soft) 80ms;
}

.motion .is-in .wipe {
  clip-path: inset(-12% -4% -24% -4%);
}

.priv-lines {
  list-style: none;
  margin: clamp(28px, 5vh, 56px) 0 0;
  padding: 0;
  max-width: 40rem;
  align-self: start;
}

.priv-lines li {
  padding: 14px 0;
  border-top: 1px solid rgb(240 213 138 / 0.45);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.4;
}

.priv-lines li:last-child {
  border-bottom: 1px solid rgb(240 213 138 / 0.45);
}

.priv-futi {
  position: relative;
  align-self: end;
  justify-self: end;
  width: clamp(120px, 12vw, 180px);
  text-align: center;
}

.priv-futi .futi {
  position: relative;
}

.priv-futi .contact {
  background: radial-gradient(closest-side, rgb(20 6 8 / 0.5), rgb(20 6 8 / 0));
}

.priv-caption {
  display: block;
  white-space: nowrap;
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-wine);
}

/* ---------- 6. Perguntas ---------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 5vw, 80px);
  align-items: start;
}

.faq-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 3.4vh, 36px);
}

.faq-sheet {
  padding-block: clamp(56px, 9vh, 104px);
}

.faq-futi {
  width: clamp(80px, 6.5vw, 100px);
}

.faq-list details {
  border-bottom: 1px solid rgb(201 162 103 / 0.42);
  transition: background-color 220ms var(--ease-out);
}

.faq-list details:first-child {
  border-top: 1px solid rgb(201 162 103 / 0.42);
}

/* a pergunta aberta vira um painel, com um fio champanhe do lado */
.faq-list details[open] {
  background: var(--night-3);
  box-shadow: inset 2px 0 0 var(--accent);
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 14px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.3;
  transition: color 160ms var(--ease-out);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  font-family: var(--text);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
  transition: rotate 180ms var(--ease-out);
}

.faq-list details[open] summary::after {
  rotate: 45deg;
}

.faq-list summary:hover,
.faq-list details[open] summary {
  color: var(--accent);
}

.faq-list details p {
  padding: 0 14px 20px;
  max-width: 58ch;
  color: var(--fg);
  font-size: 1rem;
}

/* ---------- 7. Fecho ---------- */

.close {
  padding: clamp(72px, 11vh, 120px) var(--gutter) 32px;
}

.close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}

.close h2 em {
  display: block;
}

.count-form {
  margin-top: 32px;
  max-width: 30rem;
}

.count-form label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-muted);
}

.count-row {
  margin-top: 8px;
  display: flex;
  gap: 16px;
  align-items: end;
}

.count-row input {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  border: 0;
  border-bottom: 1.5px solid var(--fg-muted);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  color-scheme: dark;
  font: 400 1.3rem var(--display);
  padding: 6px 2px;
  accent-color: var(--accent);
}

.count-row input:focus-visible {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: 0 1.5px 0 var(--accent);
}

.count-hint {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.count-hint.is-error {
  color: #eca99b;
}

/* a ficha do Futi: painel reto com fio dourado por dentro */
.ledger-card {
  position: relative;
  justify-self: center;
  width: min(100%, 34rem);
  display: grid;
  grid-template-columns: auto minmax(0, max-content);
  justify-content: center;
  align-items: center;
  gap: 0 clamp(20px, 2.6vw, 40px);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 44px) clamp(24px, 2.6vw, 38px);
  background: var(--surface);
  box-shadow: var(--shadow-paper);
}

.ledger-card::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(184 148 84 / 0.75);
  pointer-events: none;
}

/* a caixa do Futi cabe as duas poses com o Futi do mesmo tamanho: a do calendário
   ocupa a largura, e a que escreve (desenhada maior) entra a 82%, pelos pés */
.close-futi {
  position: relative;
  width: clamp(110px, 9vw, 140px);
  aspect-ratio: 0.96;
}

.close-futi .pose,
.close-futi .pose:first-of-type {
  position: absolute;
}

.close-futi [data-pose='escrevendo'] {
  left: 10%;
  width: 82%;
}

.ledger {
  min-width: min(100%, 15rem);
}

.ledger-number {
  font-family: var(--display);
  font-weight: 500;
  line-height: 0.9;
  color: var(--wine);
}

.ledger-number [data-count-number] {
  display: block;
  font-size: clamp(3.4rem, 5.8vw, 5.8rem);
  font-variant-numeric: lining-nums tabular-nums;
}

.ledger-unit {
  display: block;
  margin-top: 10px;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-style: italic;
  color: var(--ink);
}

.ledger-detail {
  margin-top: 14px;
  min-height: 1.6em;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--muted);
}

.close-cta {
  margin-top: clamp(48px, 8vh, 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer {
  margin-top: clamp(48px, 7vh, 80px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.footer .wordmark {
  color: var(--fg);
  font-size: 1.25rem;
}

.footer .wordmark img {
  width: 28px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a {
  text-decoration: none;
  padding: 6px 0;
}

.footer-links a:hover {
  color: var(--fg);
  text-decoration: underline;
}

.footer-fine {
  flex-basis: 100%;
  font-size: 0.85rem;
}

/* ---------- Telefone, tablet em pé e telas estreitas ---------- */

@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  :root {
    --tab-h: 56px;
    --h2: clamp(2.1rem, 9.4vw, 2.7rem);
  }

  body {
    font-size: 1rem;
  }

  .wordmark {
    font-size: 1.2rem;
  }

  .wordmark img {
    width: 26px;
  }

  .button-small {
    min-height: 38px;
    padding: 0 13px;
  }

  .hero-copy {
    top: calc(var(--tab-h) + 4vh);
    bottom: auto;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    display: block;
  }

  .hero-copy h1 {
    font-size: clamp(2.5rem, 11vw, 4.4rem);
  }

  .hero-copy h1 em {
    display: inline;
  }

  .lead {
    margin-top: 12px;
    font-size: 1.02rem;
    max-width: 34ch;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .hero-desk {
    left: 50%;
    right: auto;
    translate: -50% 0;
    bottom: 0;
    width: min(100vw, 46vh);
    aspect-ratio: 0.8;
  }

  .hero-phone {
    left: 31%;
    top: 3%;
    width: 39%;
  }

  .hero-pol-a {
    left: 2%;
    top: 26%;
    width: 34%;
  }

  .hero-pol-b {
    left: 65%;
    top: 47%;
    width: 33%;
  }

  .hero-tacas {
    left: 76%;
    top: -1%;
    width: 22%;
  }

  .hero-futi {
    left: 5%;
    top: 63%;
    width: 31%;
  }

  .mes-copy {
    top: calc(var(--tab-h) + 3vh);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    translate: none;
  }

  .motion .mes-copy {
    height: 34vh;
  }

  .motion .mes-state {
    top: 0;
    translate: none;
  }

  .mes-state h2,
  .mes-state .h2 {
    font-size: clamp(2.2rem, 10vw, 2.8rem);
  }

  .mes-state h2 em,
  .mes-state .h2 em {
    display: inline;
  }

  .mes-sub {
    margin-top: 10px;
    font-size: 1.25rem;
  }

  .mes-state p:not(.mes-sub) {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.55;
  }

  /* a mesa ocupa a altura que sobra embaixo do texto, sem encostar nele */
  .mes-desk {
    left: 50%;
    right: auto;
    translate: -50% 0;
    width: min(100vw, calc((100svh - var(--tab-h) - 17rem) * 0.74));
    aspect-ratio: 0.74;
  }

  .lock {
    left: 45%;
    top: 4%;
    width: 49%;
  }

  .lock-date {
    font-size: 2.9cqw;
  }

  .notice {
    left: -48%;
    width: 144%;
    column-gap: 3.6cqw;
    padding: 3.4cqw 3.8cqw;
    font-size: 3.2cqw;
  }

  .notice img {
    width: 9cqw;
    height: 9cqw;
  }

  .notice-app,
  .notice-when {
    font-size: 2.6cqw;
  }

  .notice strong {
    font-size: 3.1cqw;
  }

  .notice-body {
    font-size: 3cqw;
  }

  .calendar {
    left: 9%;
    top: 8%;
    width: 62%;
  }

  .mes-futi {
    left: 2%;
    top: 63%;
    width: 34%;
  }

  .mem-grid,
  .recado-row,
  .lists-row,
  .close-grid {
    grid-template-columns: 1fr;
  }

  .lists-desk {
    margin-inline: -8px;
    aspect-ratio: 1.15;
  }

  .lists-phone-wrap {
    left: 4%;
    width: 38%;
  }

  .duel-wrap {
    left: 40%;
    top: 12%;
    width: 57%;
  }

  .lists-futi {
    left: 66%;
    top: 66%;
    width: 30%;
  }

  .recado-desk {
    order: 2;
  }

  .mem-desk {
    margin-inline: -8px;
    width: calc(100% + 16px);
  }

  .rail-stage {
    gap: 24px;
  }

  .rail-head p {
    font-size: 1rem;
  }

  .item {
    width: min(62vw, 300px);
  }

  .item-media {
    height: min(44vh, 380px);
  }

  .item h3 {
    margin-top: 16px;
    font-size: 1.4rem;
  }

  .priv {
    grid-template-columns: 1fr;
  }

  .priv-futi {
    justify-self: center;
    margin-top: 36px;
  }

  .faq {
    grid-template-columns: 1fr;
  }

  .faq-head {
    gap: 12px;
  }

  .faq-head h2 em {
    display: inline;
  }

  .faq-futi {
    width: 62px;
  }

  .faq-list + .faq-list details:first-child {
    border-top: 0;
  }

  .ledger-card {
    padding: 24px 22px 22px;
  }

  .close-futi {
    width: 100px;
  }

  .ledger {
    min-width: 0;
  }

  .count-row {
    flex-wrap: wrap;
  }

  .count-row input {
    flex-basis: 100%;
  }

  .count-row .button {
    width: 100%;
  }

  .close-cta .button {
    width: 100%;
    max-width: 26rem;
    min-height: 70px;
    font-size: 1.3rem;
  }
}

@media (max-width: 420px) {
  /* o "Grátis para baixar" fica ao lado do botão (em duas linhas, se precisar),
     para o texto da mesa não descer até o celular */
  .hero-actions {
    flex-wrap: nowrap;
    gap: 14px;
  }

  .hero-actions .hero-note {
    line-height: 1.3;
  }
}

@media (max-width: 380px) {
  .tab .button-small {
    padding: 0 10px;
  }
}

/* celular baixo (iPhone SE e afins): o texto sobe um pouco e a mesa encolhe, para
   os dois não se encostarem */
@media (max-width: 760px) and (max-height: 720px) {
  .hero-copy {
    top: calc(var(--tab-h) + 2vh);
  }

  .lead {
    margin-top: 8px;
  }

  .hero-actions {
    margin-top: 14px;
  }

  .hero-desk {
    width: min(100vw, 42vh);
  }
}

@media (max-width: 760px) and (max-height: 600px) {
  .hero-desk {
    width: min(100vw, 36vh);
  }
}

@media (max-width: 340px) {
  .hero-actions .hero-note {
    display: none;
  }
}

/* ---------- O que anda com o scroll, pelo próprio navegador ----------
   Quando o navegador liga a animação ao scroll (classe scrolly, posta no index.html),
   a mesa do começo, as fotos das memórias e das listas e o aviãozinho andam por aqui,
   no mesmo quadro do scroll. Pelo home.js eles andavam um quadro atrás no celular (o
   iPhone rola a 120 quadros e o script desenha a 60) e tremiam. As contas são as
   mesmas que o home.js faz quando o navegador não sabe. */

/* 1. A mesa: cada camada anda numa velocidade enquanto a primeira tela e um quinto
   sobem (no home.js, t vai de 0 a 1,2) */
.motion.scrolly [data-hero] [data-part] {
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: scroll(root);
  animation-range: 0px 120vh;
}

.motion.scrolly [data-hero] [data-part='copy'] {
  animation-name: hero-copy;
}

.motion.scrolly [data-hero] [data-part='tacas'] {
  animation-name: hero-tacas;
}

.motion.scrolly [data-hero] [data-part='polA'] {
  animation-name: hero-pol-a;
}

.motion.scrolly [data-hero] [data-part='phone'] {
  animation-name: hero-phone;
}

.motion.scrolly [data-hero] [data-part='polB'] {
  animation-name: hero-pol-b;
}

.motion.scrolly [data-hero] [data-part='futi'] {
  animation-name: hero-futi;
}

/* o texto fica para trás e some devagar até 40% entre t 0,15 e 0,85 */
@keyframes hero-copy {
  0% {
    translate: 0 0;
    opacity: 1;
  }
  12.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  70.833% {
    opacity: 0.4;
  }
  100% {
    translate: 0 26.4vh;
    opacity: 0.4;
  }
}

@keyframes hero-tacas {
  to {
    translate: 0 14.4vh;
  }
}

@keyframes hero-pol-a {
  to {
    translate: -3.6vh -6vh;
  }
}

@keyframes hero-phone {
  to {
    translate: 0 -12vh;
  }
}

@keyframes hero-pol-b {
  to {
    translate: 3.6vh -21.6vh;
  }
}

@keyframes hero-futi {
  to {
    translate: 0 -36vh;
  }
}

/* empilhado (telefone e tablet em pé), as camadas andam menos */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .motion.scrolly [data-hero] [data-part='copy'] {
    animation-name: hero-copy-narrow;
  }

  .motion.scrolly [data-hero] [data-part='tacas'] {
    animation-name: hero-tacas-narrow;
  }

  .motion.scrolly [data-hero] [data-part='polA'] {
    animation-name: hero-pol-a-narrow;
  }

  .motion.scrolly [data-hero] [data-part='phone'] {
    animation-name: hero-phone-narrow;
  }

  .motion.scrolly [data-hero] [data-part='polB'] {
    animation-name: hero-pol-b-narrow;
  }

  .motion.scrolly [data-hero] [data-part='futi'] {
    animation-name: hero-futi-narrow;
  }
}

@keyframes hero-copy-narrow {
  0% {
    translate: 0 0;
    opacity: 1;
  }
  12.5% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  70.833% {
    opacity: 0.4;
  }
  100% {
    translate: 0 12vh;
    opacity: 0.4;
  }
}

@keyframes hero-tacas-narrow {
  to {
    translate: 0 7.2vh;
  }
}

@keyframes hero-pol-a-narrow {
  to {
    translate: -2.4vh -3.6vh;
  }
}

@keyframes hero-phone-narrow {
  to {
    translate: 0 -6vh;
  }
}

@keyframes hero-pol-b-narrow {
  to {
    translate: 2.4vh -12vh;
  }
}

@keyframes hero-futi-narrow {
  to {
    translate: 0 -19.2vh;
  }
}

/* 3. Memórias e listas: cada foto anda data-depth px por tela rolada, contada do
   centro da tela, até 1,2 tela para cada lado (a tela inteira: sem o 0px, o navegador
   descontaria a altura da barra do topo, o scroll-padding) */
.motion.scrolly [data-depth] {
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view(block 0px);
  animation-range: cover calc(50% - 120vh) cover calc(50% + 120vh);
}

.motion.scrolly [data-depth='34'] {
  animation-name: depth-34;
}

.motion.scrolly [data-depth='-22'] {
  animation-name: depth-m22;
}

.motion.scrolly [data-depth='12'] {
  animation-name: depth-12;
}

.motion.scrolly [data-depth='46'] {
  animation-name: depth-46;
}

.motion.scrolly [data-depth='-36'] {
  animation-name: depth-m36;
}

.motion.scrolly [data-depth='58'] {
  animation-name: depth-58;
}

.motion.scrolly [data-depth='14'] {
  animation-name: depth-14;
}

.motion.scrolly [data-depth='-26'] {
  animation-name: depth-m26;
}

.motion.scrolly [data-depth='40'] {
  animation-name: depth-40;
}

@keyframes depth-34 {
  from {
    translate: 0 -40.8px;
  }
  to {
    translate: 0 40.8px;
  }
}

@keyframes depth-m22 {
  from {
    translate: 0 26.4px;
  }
  to {
    translate: 0 -26.4px;
  }
}

@keyframes depth-12 {
  from {
    translate: 0 -14.4px;
  }
  to {
    translate: 0 14.4px;
  }
}

@keyframes depth-46 {
  from {
    translate: 0 -55.2px;
  }
  to {
    translate: 0 55.2px;
  }
}

@keyframes depth-m36 {
  from {
    translate: 0 43.2px;
  }
  to {
    translate: 0 -43.2px;
  }
}

@keyframes depth-58 {
  from {
    translate: 0 -69.6px;
  }
  to {
    translate: 0 69.6px;
  }
}

@keyframes depth-14 {
  from {
    translate: 0 -16.8px;
  }
  to {
    translate: 0 16.8px;
  }
}

@keyframes depth-m26 {
  from {
    translate: 0 31.2px;
  }
  to {
    translate: 0 -31.2px;
  }
}

@keyframes depth-40 {
  from {
    translate: 0 -48px;
  }
  to {
    translate: 0 48px;
  }
}

/* o aviãozinho: entra quando a fileira dos recados passa de 8% da tela, de baixo
   para cima, e pousa quando ela chega a 68%; o arco é o mesmo do home.js */
.motion.scrolly [data-recado] {
  view-timeline: --recado block;
  view-timeline-inset: 0px;
}

.motion.scrolly [data-plane] {
  animation: plane linear both;
  animation-timeline: --recado;
  animation-range: cover 8vh cover 68vh;
}

@keyframes plane {
  0% {
    translate: -460px 150px;
    rotate: -16deg;
    opacity: 0;
  }
  2% {
    translate: -431.8px 122.9px;
    rotate: -14.59deg;
    opacity: 0.33;
  }
  4% {
    translate: -404.9px 99.1px;
    rotate: -13.23deg;
    opacity: 0.64;
  }
  6% {
    translate: -379.3px 78.2px;
    rotate: -11.93deg;
    opacity: 0.94;
  }
  8% {
    translate: -354.7px 59.9px;
    rotate: -10.69deg;
    opacity: 1;
  }
  10% {
    translate: -331.4px 44.2px;
    rotate: -9.5deg;
  }
  13% {
    translate: -298.4px 24.6px;
    rotate: -7.8deg;
  }
  16% {
    translate: -267.8px 9.2px;
    rotate: -6.22deg;
  }
  20% {
    translate: -230.5px -5.7px;
    rotate: -4.29deg;
  }
  25% {
    translate: -189.2px -17.2px;
    rotate: -2.13deg;
  }
  30% {
    translate: -153.3px -22.9px;
    rotate: -0.23deg;
  }
  36% {
    translate: -116.7px -24.5px;
    rotate: 1.71deg;
  }
  43% {
    translate: -82.2px -22px;
    rotate: 3.56deg;
  }
  50% {
    translate: -55.3px -17.3px;
    rotate: 5deg;
  }
  60% {
    translate: -28.2px -10.2px;
    rotate: 6.46deg;
  }
  70% {
    translate: -11.9px -4.6px;
    rotate: 7.35deg;
  }
  80% {
    translate: -3.5px -1.4px;
    rotate: 7.81deg;
  }
  90% {
    translate: -0.4px -0.2px;
    rotate: 7.98deg;
  }
  100% {
    translate: 0 0;
    rotate: 8deg;
    opacity: 1;
  }
}

/* 2 e 4. As cenas presas, no celular: o mêsversário e o trilho das coleções também
   andam por aqui, porque desenhadas pelo home.js elas tremiam no iPhone do mesmo
   jeito. Cada peça tem os quadros-chave das contas do home.js (p de 0 a 1 ao longo de
   --span telas, a partir de quando a cena encosta no topo); as curvas cúbicas viram
   cubic-bezier exatos. No computador elas seguem no home.js, com o amortecimento da
   roda do mouse. */
@media (pointer: coarse) {
  .motion.scrolly [data-scene='mes'] {
    view-timeline: --mes block;
    view-timeline-inset: 0px;
  }

  .motion.scrolly [data-scene='rail'] {
    view-timeline: --rail block;
    view-timeline-inset: 0px;
  }

  .motion.scrolly [data-scene='mes'] .mes-desk,
  .motion.scrolly [data-scene='mes'] .mes-copy,
  .motion.scrolly [data-scene='mes'] .mes-state,
  .motion.scrolly [data-scene='mes'] [data-part],
  .motion.scrolly [data-scene='mes'] [data-part='futi'] .contact,
  .motion.scrolly [data-scene='mes'] [data-part='futi'] .pose,
  .motion.scrolly [data-scene='rail'] [data-part] {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --mes;
    animation-range: exit-crossing 0% exit-crossing calc(var(--span) * 100vh);
  }

  .motion.scrolly [data-scene='rail'] [data-part] {
    animation-timeline: --rail;
  }

  .motion.scrolly [data-scene='mes'] .mes-desk {
    animation-name: mes-desk;
  }

  .motion.scrolly [data-scene='mes'] .mes-copy {
    animation-name: mes-copy;
  }

  .motion.scrolly [data-scene='mes'] [data-part='circle'] {
    animation-name: mes-circle;
  }

  .motion.scrolly [data-scene='mes'] [data-part='futi'] {
    animation-name: mes-futi-move, mes-futi-show;
  }

  .motion.scrolly [data-scene='mes'] [data-part='futi'] .contact {
    animation-name: mes-contact;
  }

  .motion.scrolly [data-scene='mes'] [data-part='futi'] .pose:nth-of-type(1) {
    animation-name: mes-pose-0;
  }

  .motion.scrolly [data-scene='mes'] [data-part='futi'] .pose:nth-of-type(2) {
    animation-name: mes-pose-1;
  }

  /* a folha vinho anda contada da borda da tela; o home.js desconta onde a mesa
     começa (translate) */
  .motion.scrolly [data-scene='mes'] [data-part='wipe'] {
    animation-name: mes-wipe;
  }

  .motion.scrolly [data-scene='mes'] [data-part='lock'] {
    animation-name: mes-lock-move, mes-lock-show;
  }

  .motion.scrolly [data-scene='mes'] [data-part='n1'] {
    animation-name: mes-n1;
  }

  .motion.scrolly [data-scene='mes'] [data-part='n2'] {
    animation-name: mes-n2;
  }

  .motion.scrolly [data-scene='mes'] [data-part='dawn'] {
    animation-name: mes-dawn;
  }

  .motion.scrolly [data-scene='mes'] [data-part='day'] {
    animation-name: mes-day;
  }

  .motion.scrolly [data-scene='mes'] [data-part='t1'] {
    animation-name: mes-t1;
  }

  .motion.scrolly [data-scene='mes'] [data-part='t2'] {
    animation-name: mes-t2;
  }

  .motion.scrolly [data-scene='mes'] [data-part='d1'] {
    animation-name: mes-d1;
  }

  .motion.scrolly [data-scene='mes'] [data-part='d2'] {
    animation-name: mes-d2;
  }

  .motion.scrolly [data-scene='mes'] .mes-state[data-state='0'] {
    animation-name: mes-state-0;
  }

  .motion.scrolly [data-scene='mes'] .mes-state[data-state='1'] {
    animation-name: mes-state-1-show, mes-state-1-move;
  }

  .motion.scrolly [data-scene='mes'] .mes-state[data-state='2'] {
    animation-name: mes-state-2;
  }

  /* o trilho anda a largura que sobra da tela; quando tudo cabe, o home.js desliga */
  .motion.scrolly [data-scene='rail'] [data-part='rail'] {
    animation-name: rail-track;
  }

  .motion.scrolly [data-scene='rail'] [data-part='bar'] {
    animation-name: rail-bar;
  }

  /* a folha de baixo escurece enquanto a de cima entra (a tela seguinte à cena) */
  .motion.scrolly [data-scene] > .stage::after {
    animation-name: stage-dim;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-range: exit-crossing calc(var(--span) * 100vh) exit-crossing
      calc((var(--span) + 1) * 100vh);
  }

  .motion.scrolly [data-scene='mes'] > .stage::after {
    animation-timeline: --mes;
  }

  .motion.scrolly [data-scene='rail'] > .stage::after {
    animation-timeline: --rail;
  }
}

@keyframes stage-dim {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.4;
  }
}

@keyframes mes-desk {
  0% {
    transform: translate3d(0, 4.5vh, 0);
  }
  100% {
    transform: translate3d(0, -4.5vh, 0);
  }
}

@keyframes mes-copy {
  0% {
    transform: translate3d(0, 2vh, 0);
  }
  100% {
    transform: translate3d(0, -2vh, 0);
  }
}

@keyframes mes-circle {
  0% {
    stroke-dashoffset: 1;
  }
  2% {
    stroke-dashoffset: 1;
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  7% {
    stroke-dashoffset: 0.5;
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  12% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes mes-futi-move {
  0% {
    transform: translate3d(0, 105%, 0);
  }
  7% {
    transform: translate3d(0, 105%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  16% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes mes-futi-show {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 0;
  }
  7.235% {
    opacity: 0.191;
  }
  7.47% {
    opacity: 0.372;
  }
  7.705% {
    opacity: 0.543;
  }
  7.939% {
    opacity: 0.704;
  }
  8.174% {
    opacity: 0.856;
  }
  8.409% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-contact {
  0% {
    opacity: 0;
  }
  7% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  16% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-wipe {
  0% {
    transform: translate3d(calc(220vw + 60px), 0, 0) rotate(1.6deg);
  }
  20% {
    transform: translate3d(calc(220vw + 60px), 0, 0) rotate(1.6deg);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  27% {
    transform: translate3d(calc(170vw + 24px), 0, 0) rotate(0.8deg);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  34% {
    transform: translate3d(calc(120vw + -12px), 0, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(calc(120vw + -12px), 0, 0) rotate(0deg);
  }
}

@keyframes mes-lock-move {
  0% {
    transform: translate3d(0, 34%, 0);
  }
  27% {
    transform: translate3d(0, 34%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  39% {
    transform: translate3d(0, 0%, 0);
  }
  100% {
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes mes-lock-show {
  0% {
    opacity: 0;
  }
  27% {
    opacity: 0;
  }
  27.418% {
    opacity: 0.161;
  }
  27.837% {
    opacity: 0.312;
  }
  28.255% {
    opacity: 0.451;
  }
  28.673% {
    opacity: 0.58;
  }
  29.092% {
    opacity: 0.699;
  }
  29.51% {
    opacity: 0.809;
  }
  29.928% {
    opacity: 0.909;
  }
  30.347% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-n1 {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(-28px + 0%), 0) scale(0.96);
  }
  40% {
    opacity: 0;
    transform: translate3d(0, calc(-28px + 0%), 0) scale(0.96);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  47% {
    opacity: 1;
    transform: translate3d(0, calc(0px + 0%), 0) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate3d(0, calc(0px + 0%), 0) scale(1);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  82% {
    opacity: 0.88;
    transform: translate3d(0, calc(0px + 110%), 0) scale(0.96);
  }
  100% {
    opacity: 0.88;
    transform: translate3d(0, calc(0px + 110%), 0) scale(0.96);
  }
}

@keyframes mes-n2 {
  0% {
    opacity: 0;
    transform: translate3d(0, -28px, 0) scale(0.96);
  }
  74% {
    opacity: 0;
    transform: translate3d(0, -28px, 0) scale(0.96);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  82% {
    opacity: 1;
    transform: translate3d(0, 0px, 0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0px, 0) scale(1);
  }
}

@keyframes mes-dawn {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  68% {
    opacity: 0.5;
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  76% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-day {
  0% {
    opacity: 0;
  }
  62% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  68% {
    opacity: 0.5;
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-t1 {
  0% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  67% {
    opacity: 0.5;
    transform: translate3d(0, -30%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  72% {
    opacity: 0;
    transform: translate3d(0, -60%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -60%, 0);
  }
}

@keyframes mes-t2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 60%, 0);
  }
  62% {
    opacity: 0;
    transform: translate3d(0, 60%, 0);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  67% {
    opacity: 0.5;
    transform: translate3d(0, 30%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes mes-d1 {
  0% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  67% {
    opacity: 0.5;
    transform: translate3d(0, -35%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  72% {
    opacity: 0;
    transform: translate3d(0, -70%, 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -70%, 0);
  }
}

@keyframes mes-d2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 70%, 0);
  }
  62% {
    opacity: 0;
    transform: translate3d(0, 70%, 0);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  67% {
    opacity: 0.5;
    transform: translate3d(0, 35%, 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0%, 0);
  }
}

@keyframes mes-pose-0 {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  46% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes mes-pose-1 {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mes-state-0 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
  }
  19% {
    opacity: 1;
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
  }
  25% {
    opacity: 0;
    transform: translate3d(0, calc(min(54px, 7vh) * -1), 0);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, calc(min(54px, 7vh) * -1), 0);
  }
}

@keyframes mes-state-1-show {
  0% {
    opacity: 0;
  }
  31% {
    opacity: 0;
  }
  39% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  66% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes mes-state-1-move {
  0% {
    transform: translate3d(0, calc(min(54px, 7vh) * 1), 0);
  }
  31% {
    transform: translate3d(0, calc(min(54px, 7vh) * 1), 0);
  }
  39% {
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
  }
  60% {
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
    animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0);
  }
  63% {
    transform: translate3d(0, calc(min(54px, 7vh) * -0.5), 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  66% {
    transform: translate3d(0, calc(min(54px, 7vh) * -1), 0);
  }
  100% {
    transform: translate3d(0, calc(min(54px, 7vh) * -1), 0);
  }
}

@keyframes mes-state-2 {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(min(54px, 7vh) * 1), 0);
  }
  66% {
    opacity: 0;
    transform: translate3d(0, calc(min(54px, 7vh) * 1), 0);
    animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1);
  }
  74% {
    opacity: 1;
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, calc(min(54px, 7vh) * 0), 0);
  }
}

@keyframes rail-track {
  0% {
    transform: translate3d(calc((100vw - 100%) * 0), 0, 0);
    animation-timing-function: cubic-bezier(0.3333, 0.2667, 0.6667, 0.5333);
  }
  50% {
    transform: translate3d(calc((100vw - 100%) * 0.5), 0, 0);
    animation-timing-function: cubic-bezier(0.3333, 0.4667, 0.6667, 0.7333);
  }
  100% {
    transform: translate3d(calc((100vw - 100%) * 1), 0, 0);
  }
}

@keyframes rail-bar {
  0% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.3333, 0.2667, 0.6667, 0.5333);
  }
  50% {
    transform: scaleX(0.5);
    animation-timing-function: cubic-bezier(0.3333, 0.4667, 0.6667, 0.7333);
  }
  100% {
    transform: scaleX(1);
  }
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}