/* ============================================================================
   CONCEITO 03 — TRAVESSIA
   Direção: nada de interface. O mundo ocupa a tela inteira e o texto pousa
   sobre ele como legenda de lugar — leve, espaçado, sempre fora do centro,
   nunca em caixa. A jornada vai da noite ao amanhecer e a página inteira
   muda de temperatura junto com ela.
   ========================================================================== */

:root {
  --ink: #f4f1ee;
  --ink-70: rgba(244, 241, 238, .72);
  --ink-40: rgba(244, 241, 238, .42);
  --ink-18: rgba(244, 241, 238, .18);
  --night: #080c18;
  --focus: #f4f1ee;

  --font: "Space Grotesk", system-ui, sans-serif;
  --m: clamp(1.25rem, 5vw, 5rem);
}

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  /* A cor de fundo do documento acompanha a região — o amanhecer não para
     na borda do canvas. */
  transition: background-color 1.2s linear;
}

/* --------------------------------------------------------- a travessia */

/* A altura da travessia É a duração da jornada. Mais curta no mobile:
   a mesma narrativa, menos dedo. */
.journey {
  position: relative;
  --travel: 1250vh;
  height: calc(100svh + var(--travel));
}
@media (max-width: 780px) { .journey { --travel: 760vh; } }

.viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Névoa de borda: cola o mundo à tela e protege o texto nos cantos. */
.haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 42%, transparent 42%, rgba(0, 0, 0, .42) 100%),
    /* As laterais são onde os capítulos pousam — precisam de chão de contraste
       em qualquer região, inclusive contra o horizonte do amanhecer. */
    linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, transparent 36%, transparent 64%, rgba(0, 0, 0, .58) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 62%, rgba(0, 0, 0, .6) 100%);
}

/* ------------------------------------------------------------ capítulos */

.chapters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chapter {
  position: absolute;
  width: min(46ch, 76vw);
  display: grid;
  gap: clamp(.8rem, 2vh, 1.4rem);
  pointer-events: auto;
  will-change: transform, opacity;
}

/* Cada lugar tem seu enquadramento. É isso que faz parecer travessia e não
   uma pilha de slides centralizados. */
.chapter[data-place="0"] { left: var(--m); bottom: 22vh; width: min(58ch, 84vw); }
/* Os capítulos alinhados à direita precisam abrir espaço para a régua de
   waypoints, que mora na mesma borda. */
.chapter[data-place="1"] { right: calc(var(--m) + 9.5rem); top: 24vh; text-align: right; justify-items: end; }
.chapter[data-place="2"] { left: var(--m); top: 26vh; }
.chapter[data-place="3"] { left: 50%; transform: translateX(-50%); bottom: 18vh; width: min(72ch, 88vw); text-align: center; justify-items: center; }
.chapter[data-place="4"] { right: calc(var(--m) + 9.5rem); bottom: 20vh; text-align: right; justify-items: end; }
.chapter[data-place="5"] { left: var(--m); top: 50%; width: min(58ch, 86vw); }

@media (max-width: 780px) {
  .chapter,
  .chapter[data-place="0"],
  .chapter[data-place="3"],
  .chapter[data-place="5"] {
    left: var(--m);
    right: var(--m);
    width: auto;
    text-align: left;
    justify-items: start;
    transform: none;
  }
  .chapter[data-place="1"], .chapter[data-place="4"] { text-align: left; justify-items: start; }
  .chapter[data-place="0"] { bottom: 14vh; top: auto; }
  .chapter[data-place="1"], .chapter[data-place="2"] { top: 18vh; bottom: auto; }
  .chapter[data-place="3"], .chapter[data-place="4"] { bottom: 14vh; top: auto; }
  .chapter[data-place="5"] { top: 24vh; }
}

.place {
  font-size: .62rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.chapter h1,
.chapter h2 {
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.chapter h1 { font-size: clamp(2.4rem, 7.2vw, 6.6rem); }

.chapter p {
  color: var(--ink-70);
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  line-height: 1.7;
  max-width: 42ch;
}

.chapter .wordmark {
  font-size: clamp(2.6rem, 9vw, 8.5rem);
  font-weight: 300;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
}

/* Listas espaciais: sem caixa, sem borda, só ritmo. */
.spatial {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  list-style: none;
  font-size: clamp(.9rem, 1.5vw, 1.25rem);
  color: var(--ink-70);
}
.spatial a { text-decoration: none; transition: color .3s ease; }
.spatial a:hover { color: var(--ink); }
.spatial li::after {
  content: "·";
  margin-left: 1.6rem;
  color: var(--ink-18);
}
.spatial li:last-child::after { content: ""; margin: 0; }

.pair {
  display: grid;
  gap: 1.6rem;
  margin-top: .5rem;
}
@media (min-width: 640px) { .pair { grid-template-columns: 1fr 1fr; } }
.pair h3 {
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-bottom: .35rem;
}
.pair p { font-size: .92rem; }

.go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: .8rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--ink-18);
  border-radius: 100px;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}
.go:hover { border-color: var(--ink); background: var(--ink); color: var(--night); }
.chapter[data-place="1"] .go,
.chapter[data-place="4"] .go { justify-self: end; }
.chapter[data-place="3"] .go { justify-self: center; }

/* Com o mundo ativo, os nomes de parceiros e tecnologias passam dentro da cena.
   As listas do
   DOM continua existindo para leitores de tela e para o modo plano — só sai
   do caminho visualmente, para não duplicar a mesma informação. */
/* O nome grande da empresa é o desfecho do mundo 3D — o wordmark do DOM
   existe só para o modo plano e para leitores de tela. */
body:not(.flat) .chapter[data-region="5"] .wordmark,
body:not(.flat) .chapter[data-region="4"] [data-stacks],
body:not(.flat) .chapter[data-region="3"] [data-partners] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------- contato */

/* O contato faz parte da chegada, não de um rodapé colado embaixo do mundo:
   quem termina a travessia já tem o e-mail e o telefone na mesma tela. */
.contact {
  font-style: normal;
  margin-top: clamp(1.2rem, 3vh, 2rem);
  padding-top: clamp(1rem, 2.4vh, 1.4rem);
  border-top: 1px solid var(--ink-18);
  display: grid;
  gap: .7rem;
}

.contact ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  list-style: none;
  font-size: clamp(.82rem, 1vw, .92rem);
  color: var(--ink-70);
}
.contact a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s ease, border-color .3s ease;
}
.contact a:hover { color: var(--ink); border-bottom-color: var(--ink-40); }

.imprint {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* Nas posições alinhadas à direita o bloco acompanha o alinhamento. */
.chapter[data-place="1"] .contact ul,
.chapter[data-place="4"] .contact ul { justify-content: flex-end; }

@media (max-width: 780px) {
  .chapter[data-place="1"] .contact ul,
  .chapter[data-place="4"] .contact ul { justify-content: flex-start; }
}

/* ------------------------------------------------------------- waypoints */

.waypoints {
  position: absolute;
  right: var(--m);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .9rem;
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 780px) { .waypoints { display: none; } }

.waypoints li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-18);
  transition: color .5s ease;
}
.waypoints li span {
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width .5s cubic-bezier(.2, .8, .2, 1);
}
.waypoints li[data-on="true"] { color: var(--ink); }
.waypoints li[data-on="true"] span { width: 40px; }

/* -------------------------------------------------------- dica de scroll */

.hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  transform: translateX(-50%);
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-40);
  display: grid;
  justify-items: center;
  gap: .6rem;
  pointer-events: none;
}
.hint i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--ink-40), transparent);
}

/* -------------------------------------------------------- marca fixa */

.brand {
  position: absolute;
  top: clamp(1.2rem, 3vh, 2rem);
  left: var(--m);
  z-index: 6;
}
.brand img { height: clamp(17px, 2vw, 22px); }

/* --------------------------------------------------------- degradações */

/* Sem WebGL ou sem movimento a travessia vira uma sequência de lugares
   empilhados: a mesma narrativa, sem câmera. */
.js .chapter { opacity: 0; }

body.flat .viewport { position: static; height: auto; overflow: visible; }
body.flat #world, body.flat .haze, body.flat .waypoints, body.flat .hint { display: none; }
body.flat .chapters { position: static; }
body.flat .chapter {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  width: auto;
  max-width: none;
  text-align: left;
  justify-items: start;
  padding: clamp(3rem, 9vh, 6rem) var(--m);
  border-top: 1px solid var(--ink-18);
}
/* A régua atravessa a página inteira; a medida de leitura fica no conteúdo. */
body.flat .chapter > * { max-width: 62ch; }
body.flat .journey { min-height: 0; height: auto !important; }
body.flat .brand { position: static; margin: var(--m) var(--m) 0; }

@media (prefers-reduced-motion: reduce) {
  .js .chapter { opacity: 1; }
}