:root {
  --preto: #0F0F0F;
  --branco: #FFFFFF;
  --rosa: #FF004C;
  --cinza: #F2F2F2;
  --gutter: clamp(16px, 4.86vw, 70px); /* 70px em 1440 */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

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

html, body { margin: 0; height: 100%; }

/* texto selecionado no rosa da marca, em vez do azul do sistema */
::selection {
  background: var(--rosa);
  color: var(--branco);
}

/* imagens fora da seleção, senão o navegador pinta o símbolo e as mãos de rosa */
img {
  -webkit-user-select: none;
  user-select: none;
}

body {
  background: var(--branco);
  color: var(--rosa);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero: frame "home" 1440x800 */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--branco);
}

/* Foto 1440x960 alinhada ao topo, cortada pelo frame de 800 */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Degradê no pé da foto até o #F2F2F2 da seção seguinte, para a passagem não ter corte.
   Paradas suavizadas (curva ease-out) para não formar uma faixa visível. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgb(242 242 242 / 0) 0%,
    rgb(242 242 242 / .08) 20%,
    rgb(242 242 242 / .28) 42%,
    rgb(242 242 242 / .58) 66%,
    rgb(242 242 242 / .86) 86%,
    rgb(242 242 242 / 1) 100%);
}

/* Header das duas páginas: símbolo à esquerda, Manifesto à direita */
.site-header {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27px var(--gutter) 0;
}

.site-header__mark { display: inline-block; }
.site-header__mark img { display: block; width: 48px; height: 60px; }

/* Logo 3D (logo3d.js): o canvas WebGL ocupa a caixa de 72px; o logo plano fica por baixo
   como reserva e some quando o primeiro quadro 3D é desenhado. */
.logo3d {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
}

.logo3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo3d.is-3d img { visibility: hidden; }


.site-header__link {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--preto);
  text-decoration: none;
  opacity: .75;
  transition: opacity 180ms var(--ease-out), color 180ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .site-header__link:hover { opacity: 1; color: var(--rosa); }
}

.site-header__link:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; border-radius: 4px; }

/* Logo extense: Cal Sans 60/78, -0.05em. Dois estados no mesmo lugar, sem animação. */
.hero__wordmark {
  align-self: center;
  margin: 0;
  font-family: "Cal Sans", "Be Vietnam Pro", sans-serif;
  font-weight: 400;
  font-size: clamp(32px, 9vw, 60px);
  line-height: 1.3; /* 78/60 */
  letter-spacing: -0.05em;
  color: var(--rosa);
}

/* Os dois estados ocupam a mesma célula. Só o que está visível recebe o ponteiro,
   então o hover começa em cima do "ndna", não na largura toda do outro estado. */
.wordmark {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.wordmark:focus-visible { outline: 2px solid var(--rosa); outline-offset: 6px; border-radius: 8px; }

/* Troca sutil: fade com 3% de escala e um pouco de desfoque para disfarçar o cruzamento.
   Volta mais rápida (180ms) do que abre (260ms). */
.wordmark__short,
.wordmark__full {
  grid-area: 1 / 1;
  white-space: nowrap;
  pointer-events: auto;
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    filter 180ms var(--ease-out),
    visibility 0s linear;
}

/* visibility só vira "hidden" quando o fade termina; ao aparecer, vira na hora */
.wordmark__full { transition-delay: 0s, 0s, 0s, 180ms; }

.wordmark__full,
.wordmark--open .wordmark__short {
  opacity: 0;
  transform: scale(.97);
  filter: blur(2px);
  visibility: hidden;
}

.wordmark--open .wordmark__full {
  opacity: 1;
  transform: none;
  filter: none;
  visibility: visible;
}

.wordmark--open .wordmark__short,
.wordmark--open .wordmark__full {
  transition-duration: 260ms, 260ms, 260ms, 0s;
  transition-delay: 0s, 0s, 0s, 0s;
}
.wordmark--open .wordmark__short { transition-delay: 0s, 0s, 0s, 260ms; }

/* Hover em cada letra do "ndna": primeiro o símbolo do DNA, e com o mouse parado
   mais um pouco, a mão em Libras da letra. A letra alarga até caber o símbolo ou
   a mão, e as vizinhas abrem espaço. Larguras medidas no script.js, em em.
   Como a palavra é centralizada, a letra alarga para os dois lados e continua
   embaixo do cursor. */
.wordmark__ch {
  position: relative;
  display: inline-block;
  width: var(--w0, auto);
  text-align: center;
  transition: width 180ms var(--ease-out);
}

.wordmark__ch[data-show] { transition-duration: 260ms; }
.wordmark__ch[data-show="icon"] { width: var(--w-icon, auto); }
.wordmark__ch[data-show="hand"] { width: var(--w-hand, auto); }

.wordmark__g,
.wordmark__icon,
.wordmark__hand {
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms var(--ease-out),
    filter 180ms var(--ease-out);
}

.wordmark__g { display: inline-block; }

.wordmark__icon,
.wordmark__hand {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: auto;
  max-width: none;
  opacity: 0;
  transform: scale(.97);
  filter: blur(2px);
  pointer-events: none;
}

.wordmark__icon { height: 0.78em; }

/* mãos na mesma escala entre si: o D, de dedo levantado, é a mais alta */
.wordmark__hand--n  { height: 0.91em; }
.wordmark__hand--d  { height: 1.15em; }
.wordmark__hand--n2 { height: 0.9em; }
.wordmark__hand--a  { height: 0.74em; }

.wordmark__ch[data-show] .wordmark__g,
.wordmark__ch[data-show="icon"] .wordmark__icon,
.wordmark__ch[data-show="hand"] .wordmark__hand { transition-duration: 260ms; }

.wordmark__ch[data-show] .wordmark__g {
  opacity: 0;
  transform: scale(.97);
  filter: blur(2px);
}

.wordmark__ch[data-show="icon"] .wordmark__icon,
.wordmark__ch[data-show="hand"] .wordmark__hand {
  opacity: 1;
  transform: none;
  filter: none;
}


@media (prefers-reduced-motion: reduce) {
  .wordmark__short,
  .wordmark__full,
  .wordmark__g,
  .wordmark__icon,
  .wordmark__hand { transform: none !important; filter: none !important; }
  .wordmark__ch { transition: none; }
}

/* Frame 2: 261x57, padding 16/32, raio 57, fundo branco 10%. Topo em 707 (36px da base).
   Vidro: o fundo desfoca e satura a foto, uma borda refrata a luz (clara no alto à
   esquerda, quase sumindo embaixo) e um brilho suave cobre a metade de cima. */
.hero__cta {
  position: relative;
  isolation: isolate;
  margin-bottom: max(36px, calc(env(safe-area-inset-bottom) + 16px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 57px;
  --tint: .1;
  background: rgb(255 255 255 / var(--tint));
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.04);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / .55),
    inset 0 -1px 1px rgb(255 255 255 / .12),
    0 1px 2px rgb(15 15 15 / .06),
    0 12px 32px -12px rgb(15 15 15 / .22);
  color: var(--rosa);
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.05em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease;
}

/* borda de luz: 1px em gradiente, recortada por máscara para ficar só no contorno */
.hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgb(255 255 255 / .9) 0%,
    rgb(255 255 255 / .25) 35%,
    rgb(255 255 255 / .06) 60%,
    rgb(255 255 255 / .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.hero__cta[data-glass="ready"]::before { z-index: 1; }

/* brilho na metade de cima, como a luz batendo numa superfície curva */
.hero__cta::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / .28) 0%, rgb(255 255 255 / 0) 55%);
  pointer-events: none;
}

/* Vidro líquido (glass.js, só no Chromium): o fundo é refratado nas bordas em vez
   de desfocado. O branco a 10% do Figma passa para a camada refratada. */
.hero__cta[data-glass="ready"] {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: rgb(255 255 255 / var(--tint));
  transition: background-color 200ms ease;
}

.glass svg { position: absolute; }

/* luz vinda do alto à esquerda, em vez da faixa de brilho do vidro fosco */
.hero__cta[data-glass="ready"]::after {
  inset: 0;
  background: radial-gradient(80% 140% at 28% 8%,
    rgb(255 255 255 / .15) 0%,
    rgb(255 255 255 / .035) 38%,
    rgb(255 255 255 / 0) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover { --tint: .16; }
}

.hero__cta:active { transform: scale(.97); --tint: .2; }
.hero__cta:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; }

/* Sem suporte a backdrop-filter: vidro mais opaco para manter a leitura */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__cta { background: rgb(255 255 255 / .7); }
}

/* nos dois casos abaixo o vidro líquido sai e fica um fundo quase sólido */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hero__cta .glass { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .hero__cta,
  .hero__cta[data-glass="ready"] {
    background: rgb(255 255 255 / .85);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .hero__cta,
  .hero__cta[data-glass="ready"] {
    background: var(--branco);
    box-shadow: inset 0 0 0 2px var(--rosa);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta { transition: background-color 200ms ease; }
  .hero__cta:active { transform: none; }
}

/* ── Seção 2: F*ck Your Pace' ───────────────────────────────────────────────
   A frase ocupa a tela inteira em Instrument Serif; o ndna fica discreto embaixo. */
.pace {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter);
  background: var(--cinza);
  color: var(--preto);
}

.pace__title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: min(18.5vw, 36svh);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
}

.pace__logo {
  position: absolute;
  left: 50%;
  bottom: max(40px, env(safe-area-inset-bottom));
  translate: -50% 0;
  margin: 0;
  font-family: "Cal Sans", "Be Vietnam Pro", sans-serif;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -0.05em;
}

/* celular em pé: uma palavra por linha, para continuar enchendo a tela */
@media (max-aspect-ratio: 4/5) {
  .pace__title { font-size: min(30vw, 20svh); }
  .pace__title span { display: block; }
}