/* ============================================================
   Shift Systems · v2 "mar aberto"
   navy profundo + dourado-âmbar · logo permanece roxa
   sem WebGL, sem noise, sem boot screen — velocidade é a energia
   ============================================================ */

:root {
  color-scheme: dark;
  --navy: #191918;
  --navy-2: #1c1b18;
  --paper: #eae5dc;
  --muted: rgba(234,229,220, 0.68);
  --accent: #eae5dc;
  --accent-deep: #d5d0c6;
  --accent-glow: rgba(234,229,220, 0.5);
  --gold: #eae5dc;
  --gold-glow: rgba(234,229,220, 0.35);
  --border: rgba(234,229,220, 0.1);
  --glass: linear-gradient(180deg, rgba(31,30,27, 0.72), rgba(25,25,24, 0.55));
  --glass-strong: linear-gradient(180deg, rgba(34,33,30, 0.9), rgba(25,25,24, 0.78));
  --focus: rgba(234,229,220, 0.85);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
}

*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; }

html { scroll-padding-top: 96px; scroll-behavior: smooth; }
html, body {
  background: var(--navy);
  color: var(--paper);
  font-family: 'Geist', system-ui, sans-serif;
}
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-size: 16px;
}

/* fundo estático em camadas — oceano no topo, pôr-do-sol no horizonte.
   nenhuma animação, nenhum canvas: pinta instantâneo em qualquer aparelho. */
.page-bg {
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(101,100,97, 0.16), transparent 60%),
    radial-gradient(800px 620px at -10% 28%, rgba(60,59,56, 0.2), transparent 60%),
    radial-gradient(1000px 620px at 50% 115%, rgba(234,229,220, 0.12), transparent 62%),
    radial-gradient(700px 420px at 78% 112%, rgba(234,229,220, 0.07), transparent 60%),
    var(--navy);
}

.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(234,229,220, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234,229,220, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* ===== superfícies ===== */
.glass {
  background: var(--glass);
  border: 1px solid var(--border);
  box-shadow: 0 18px 70px rgba(22,21,18, 0.35), inset 0 1px 0 rgba(234,229,220, 0.05);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.25s;
}
.glass:hover {
  border-color: rgba(234,229,220, 0.4);
  background: linear-gradient(180deg, rgba(234,229,220, 0.07), rgba(25,25,24, 0.6));
  box-shadow: 0 22px 80px rgba(22,21,18, 0.45), inset 0 1px 0 rgba(234,229,220, 0.07);
}
.glass-strong {
  background: var(--glass-strong);
  border: 1px solid rgba(234,229,220, 0.12);
  box-shadow: 0 24px 90px rgba(22,21,18, 0.45), inset 0 1px 0 rgba(234,229,220, 0.06);
}

/* ===== botões ===== */
.btn-primary {
  background: linear-gradient(135deg, #eae5dc 0%, var(--accent) 52%, var(--accent-deep) 100%);
  color: #12100d;
  border: 1px solid rgba(234,229,220, 0.18);
  box-shadow: 0 12px 40px -10px var(--accent-glow), inset 0 1px 0 rgba(234,229,220, 0.3);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  cursor: pointer;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 52px -10px rgba(234,229,220, 0.65), inset 0 1px 0 rgba(234,229,220, 0.34);
  filter: brightness(1.05);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-ghost {
  background: rgba(25,25,24, 0.45);
  border: 1px solid rgba(234,229,220, 0.14);
  color: var(--paper);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(234,229,220, 0.09); border-color: rgba(234,229,220, 0.35); }
.btn-ghost:active { transform: translateY(1px) scale(0.99); }

/* ===== tipografia ===== */

.display {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.0;
  text-wrap: balance;
}
/* descendentes e acentos precisam de ar em tipo pequeno */
@media (max-width: 640px) {
  .display { line-height: 1.06; }
}
.eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 22px var(--gold-glow);
}
/* frase longa como rótulo: caixa alta só em rótulos curtos; aqui fica
   em caixa normal, com o mesmo mono dourado e um tracking mais leve. */
.eyebrow.eyebrow-long { text-transform: none; letter-spacing: 0.08em; }
.num-tag {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(234,229,220, 0.9);
}

::selection { background: var(--gold); color: #14100a; }

.hr-grad {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234,229,220, 0.28), rgba(234,229,220, 0.22), transparent);
}

/* ===== entrada do site — uma vez por load, só transform/opacity ===== */
@keyframes header-drop {
  from { transform: translateY(-18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
body > header { animation: header-drop 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both; }

/* ============================================================
   HERO · o improviso entra, o sistema sai
   ============================================================ */
.hero-home {
  position: relative;
  min-height: 900px;
  padding: 104px 0 88px;
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(101,100,97, 0.16), transparent 60%),
    radial-gradient(800px 620px at -10% 28%, rgba(60,59,56, 0.2), transparent 60%),
    radial-gradient(1000px 620px at 50% 115%, rgba(234,229,220, 0.12), transparent 62%),
    var(--navy);
}
.hero-home::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(234,229,220, 0.22), rgba(234,229,220, 0.55), rgba(234,229,220, 0.22), transparent);
}
.hero-home > .grid-overlay { opacity: 0.82; }

.hero-visual {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 460px;
}
/* a máscara vive num wrapper à parte — só a arte do canvas esmaece nas
   bordas. A legenda ("improviso · shift · sistema") é irmã, não filha:
   presa dentro da máscara ela ficava ilegível, porque no desktop a caixa
   é baixa e larga e o raio "closest-side" já some quase toda a metade
   inferior antes de chegar nos 34px onde a legenda mora. */
.hero-visual-canvas {
  position: absolute;
  inset: 0;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000000 56%, transparent 100%);
  mask-image: radial-gradient(closest-side ellipse at 50% 50%, #000000 56%, transparent 100%);
}
.hero-visual-canvas hero-shift,
.hero-visual-canvas .hero-static-fallback {
  position: absolute;
  inset: 0;
}
.hero-visual-canvas hero-shift {
  z-index: 2;
  opacity: 0;
  transition: opacity 0.55s var(--ease-out-cubic);
  touch-action: pan-y;
}
.hero-visual.hero-visual-ready hero-shift { opacity: 1; }

/* Quadro estático imediato e fallback caso canvas/JS não esteja disponível. */
.hero-static-fallback {
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 8%;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.hero-visual.hero-visual-ready .hero-static-fallback { opacity: 0; }
.hero-static-chaos,
.hero-static-system {
  display: block;
  height: 150px;
}
.hero-static-chaos { grid-column: 1; }
.hero-static-system { grid-column: 3; }
.hero-static-chaos {
  background:
    radial-gradient(circle at 12% 22%, rgba(193,192,189, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 25% 68%, rgba(193,192,189, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 43% 38%, rgba(193,192,189, 0.5) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 65% 78%, rgba(193,192,189, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 45%, rgba(193,192,189, 0.5) 0 2px, transparent 3px);
}
.hero-static-system {
  background:
    linear-gradient(rgba(234,229,220, 0.2), rgba(234,229,220, 0.2)) 0 18% / 100% 1px no-repeat,
    linear-gradient(rgba(234,229,220, 0.18), rgba(234,229,220, 0.18)) 0 34% / 100% 1px no-repeat,
    linear-gradient(rgba(234,229,220, 0.22), rgba(234,229,220, 0.22)) 0 50% / 100% 1px no-repeat,
    linear-gradient(rgba(234,229,220, 0.18), rgba(234,229,220, 0.18)) 0 66% / 100% 1px no-repeat,
    linear-gradient(rgba(234,229,220, 0.2), rgba(234,229,220, 0.2)) 0 82% / 100% 1px no-repeat;
}

.hero-visual-legend {
  position: absolute;
  z-index: 3;
  right: max(7vw, 64px);
  bottom: 34px;
  left: max(7vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(234,229,220, 0.42);
  pointer-events: none;
}
.hero-visual-legend span:last-child { text-align: right; color: rgba(234,229,220, 0.64); }
.hero-legend-center {
  padding: 6px 10px;
  border: 1px solid rgba(234,229,220, 0.18);
  border-radius: 999px;
  color: rgba(234,229,220, 0.62);
  background: rgba(25,25,24, 0.5);
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.hero-eyebrow-dot {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(234,229,220, 0.4);
}
.hero-title {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3.25rem, 5vw, 4rem);
  line-height: 1.04;
}
.hero-title > span:last-child { display: inline; }
.hero-lead {
  max-width: 720px;
  margin-top: 28px;
  color: rgba(234,229,220, 0.75);
  font-size: 21px;
  line-height: 1.5;
}
.hero-support {
  max-width: 620px;
  margin-top: 14px;
  color: rgba(234,229,220, 0.55);
  font-size: 16px;
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}
.hero-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 36px;
  color: rgba(234,229,220, 0.75);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-meta-separator { color: rgba(234,229,220, 0.4); }

@media (max-width: 1023px) {
  .hero-home { min-height: 0; padding: 92px 0 72px; }
  .hero-visual { height: 340px; }
  .hero-copy { padding: 0 24px; }
  .hero-title { max-width: 780px; font-size: clamp(2.5rem, 7vw, 3.25rem); }
  .hero-visual-legend { right: 32px; bottom: 25px; left: 32px; }
}

@media (max-width: 640px) {
  .hero-home { padding-top: 80px; padding-bottom: 60px; }
  .hero-visual { height: 300px; }
  .hero-visual-canvas {
    -webkit-mask-image: radial-gradient(ellipse at center, #000000 48%, transparent 96%);
    mask-image: radial-gradient(ellipse at center, #000000 48%, transparent 96%);
  }
  .hero-static-fallback { grid-template-columns: 1fr 82px 1fr; gap: 12px; padding: 0 3%; }
  .hero-visual-legend { right: 22px; bottom: 20px; left: 22px; font-size: 11px; letter-spacing: 0.13em; }
  .hero-legend-center { padding: 5px 7px; }
  .hero-title { font-size: clamp(2.25rem, 10.5vw, 3rem); }
  .hero-lead { margin-top: 24px; font-size: 18px; }
  .hero-support { font-size: 15px; }
  .hero-actions { width: 100%; margin-top: 32px; }
  .hero-actions a { width: 100%; min-height: 52px; }
  .hero-meta { gap: 10px 18px; margin-top: 30px; font-size: 11px; }
  .hero-meta-separator { display: none; }
}

/* ============================================================
   O MAR · amanhecer no hero
   ------------------------------------------------------------
   Luz difusa, nunca geometria: num layout de largura cheia uma
   linha reta de 1px atravessando o conteúdo lê como borda, não
   como água. A máscara radial apaga TODAS as bordas da camada,
   senão a caixa aparece. A única aresta dura é a linha do
   horizonte, e ela fica na borda inferior do hero — abaixo de
   tudo, onde vira o limite entre o hero e o resto da página.
   Tudo ATRÁS do conteúdo: o texto está legível no primeiro quadro.
   ============================================================ */
.sea {
  position: absolute;
  left: -10%; right: -10%; bottom: 0;
  height: 64%;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 100%, #000000 38%, transparent 80%);
  mask-image: radial-gradient(125% 105% at 50% 100%, #000000 38%, transparent 80%);
}
html.js .sea { animation: sea-rise 1.25s var(--ease-out-quint) 0.05s both; }
@keyframes sea-rise {
  from { opacity: 0; transform: scaleY(0.4); }
  to   { opacity: 1; transform: none; }
}

/* o sol logo abaixo da linha d'água */
.sea-glow {
  position: absolute;
  left: 50%; bottom: -42%;
  width: 108%; height: 132%;
  margin-left: -54%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(234,229,220, 0.18) 0%,
    rgba(234,229,220, 0.105) 34%,
    rgba(234,229,220, 0.035) 60%,
    transparent 76%);
}

/* luz na água — massas borradas, sem aresta nenhuma.
   `alternate` em vez de loop linear: não existe salto no fim do ciclo.
   É o único movimento perpétuo do hero. */
.sea-band {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}
.sea-band.b1 {
  left: 4%; bottom: -20%;
  width: 46%; height: 56%;
  background: rgba(234,229,220, 0.14);
  animation: sea-drift-a 26s ease-in-out infinite alternate;
}
.sea-band.b2 {
  left: 34%; bottom: -30%;
  width: 56%; height: 66%;
  background: rgba(234,229,220, 0.11);
  animation: sea-drift-b 37s ease-in-out infinite alternate;
}
.sea-band.b3 {
  left: 62%; bottom: -16%;
  width: 42%; height: 48%;
  background: rgba(234,229,220, 0.09);
  animation: sea-drift-a 48s ease-in-out infinite alternate-reverse;
}
@keyframes sea-drift-a {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to   { transform: translate3d(6%, -8%, 0) scale(1.12); }
}
@keyframes sea-drift-b {
  from { transform: translate3d(4%, 2%, 0) scale(1.08); }
  to   { transform: translate3d(-5%, -7%, 0) scale(0.95); }
}

/* a linha do horizonte: única aresta dura de todo o efeito.
   Fica FORA da camada mascarada pra poder ser ancorada onde faz sentido em
   cada tela — na borda de baixo do hero no desktop, na dobra no celular.
   Se abre do centro pra fora junto com a luz subindo. */
.sea-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(234,229,220, 0.35) 18%,
    rgba(234,229,220, 0.85) 50%,
    rgba(234,229,220, 0.35) 82%,
    transparent);
}
html.js .sea-line { animation: sea-line 1.15s var(--ease-out-quint) 0.24s both; }
@keyframes sea-line {
  from { transform: scaleX(0); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: none; opacity: 1; }
}

/* o título entra na direção da leitura */
html.js .hero-title {
  animation: title-wipe 0.72s var(--ease-out-quint) 0.1s both;
}
@keyframes title-wipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(9px); }
  to   { clip-path: inset(0 -12% 0 0); opacity: 1; transform: none; }
}

/* Empilhado, o hero é muito mais alto que a tela e a luz cairia toda abaixo
   da dobra — no aparelho por onde chega a maior parte do tráfego. Aqui a
   camada é ancorada no topo e mede uma viewport, então o brilho termina
   exatamente na dobra, onde a linha do horizonte o corta. */
@media (max-width: 1023px) {
  .sea {
    top: 0; bottom: auto;
    height: 100svh;
    -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000000 48%, #000000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 4%, #000000 48%, #000000 86%, transparent 100%);
  }
  .sea-glow { bottom: -24%; height: 76%; }
  .sea-band.b1 { left: 0%;  bottom: -6%;  width: 62%; height: 40%; }
  .sea-band.b2 { left: 28%; bottom: -14%; width: 72%; height: 48%; }
  .sea-band.b3 { left: 52%; bottom: -2%;  width: 58%; height: 34%; }
  .sea-line { bottom: auto; top: calc(100svh - 1px); }
}

/* ===== barra de progresso de leitura ===== */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 90;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--gold));
  box-shadow: 0 0 10px rgba(234,229,220, 0.55);
}

/* ===== header ===== */
#site-header {
  max-width: 80rem;
  border: 1px solid transparent;
  transition: max-width 0.3s ease, background 0.3s, border-color 0.3s, box-shadow 0.3s, padding 0.3s;
}
#site-header.scrolled { max-width: 64rem; }
#site-header.scrolled {
  background: rgba(23,22,19, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(234,229,220, 0.08);
  box-shadow: 0 8px 40px -12px rgba(22,21,18, 0.7);
}
.nav-link {
  color: rgba(234,229,220, 0.66);
  transition: color 0.2s, background 0.2s;
  border-radius: 9999px;
}
.nav-link:hover { color: var(--paper); background: rgba(234,229,220, 0.05); }
.nav-link.active { color: var(--paper); }
.nav-link.active::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 9999px;
  background: var(--accent);
  margin-left: 7px;
  vertical-align: middle;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* menu mobile */
#mobile-menu {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(22,21,18, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
#mobile-menu.open { opacity: 1; pointer-events: auto; }
#mobile-menu a { font-size: 28px; padding: 12px 24px; min-height: 44px; }

/* ===== entrada no scroll — uma convenção só para o site todo =====
   .reveal          o elemento sobe e aparece quando entra na tela
   .stagger         os filhos diretos entram em cascata (70ms entre um e outro)
   .reveal-words    título grande: o JS separa as palavras e elas sobem em sequência
   .enter / .enter-stagger   topo da página: entra no carregamento, só com CSS,
                    sem esperar rolagem nem JS (nada acima da dobra fica escondido)
   .d1 … .d4        atraso extra de 1 a 4 passos num .reveal ou .enter
   Só opacity e translate (a propriedade, não transform: não briga com o
   transform próprio de nenhum componente). Cada elemento anima uma vez.
   Fail-open: o estado escondido só existe com html.js, sem movimento pausado
   (html.motion-paused) e sem prefers-reduced-motion; na impressão, nunca.
   Depois de revelado, o JS põe .done e o componente volta às próprias
   transições (hover etc.), sem herdar atraso de cascata. */
:root { --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --reveal-dur: 0.7s; --reveal-step: 70ms; }
.rw { display: inline-block; }
.stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; } .stagger > :nth-child(4) { --i: 3; }
.stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; } .stagger > :nth-child(7) { --i: 6; }
.stagger > :nth-child(8) { --i: 7; } .stagger > :nth-child(n+9) { --i: 8; }
.enter-stagger > :nth-child(2) { --i: 1; } .enter-stagger > :nth-child(3) { --i: 2; } .enter-stagger > :nth-child(4) { --i: 3; }
.enter-stagger > :nth-child(5) { --i: 4; } .enter-stagger > :nth-child(n+6) { --i: 5; }
.d1 { --i: 1; } .d2 { --i: 2; } .d3 { --i: 3; } .d4 { --i: 4; }
@keyframes shift-enter { from { opacity: 0; translate: 0 18px; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html.js:not(.motion-paused) .reveal:not(.done),
  html.js:not(.motion-paused) .stagger:not(.done) > * {
    transition: opacity var(--reveal-dur) var(--reveal-ease), translate var(--reveal-dur) var(--reveal-ease);
    transition-delay: calc(var(--i, 0) * var(--reveal-step));
  }
  html.js:not(.motion-paused) .reveal:not(.in),
  html.js:not(.motion-paused) .stagger:not(.in) > * { opacity: 0; translate: 0 20px; }
  html.js:not(.motion-paused) .reveal-words:not(.done) .rw {
    transition: opacity 0.6s var(--reveal-ease), translate 0.6s var(--reveal-ease);
    transition-delay: calc(var(--w, 0) * 45ms);
  }
  html.js:not(.motion-paused) .reveal-words:not(.in) .rw { opacity: 0; translate: 0 0.45em; }
  html.js:not(.motion-paused) .enter,
  html.js:not(.motion-paused) .enter-stagger > * {
    animation: shift-enter 0.8s var(--reveal-ease) both;
    animation-delay: calc(0.05s + var(--i, 0) * 90ms);
  }
}

/* ===== spotlight que segue o cursor (mantido da v1 — é bom) ===== */
.spot { position: relative; }
.spot::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(234,229,220, 0.07), transparent 48%),
    radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(234,229,220, 0.14), transparent 56%);
  opacity: 0; transition: opacity 0.3s;
}
.spot:hover::before { opacity: 1; }

/* ===== a rota (o caminho do lead) ===== */
.route-line {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(234,229,220, 0.45), rgba(234,229,220, 0.45), transparent);
  overflow: visible;
}
/* a linha se desenha quando entra na tela (fail-open sem JS) */
html.js [data-draw] { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.3, 1); }
html.js [data-draw].in { transform: scaleX(1); }

/* o marcador percorre a linha só com transform (sem animar left, que
   força layout a cada quadro). 100cqw = largura da própria .route-line. */
.route-line { container-type: inline-size; }
@keyframes sail-x {
  0%   { transform: translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(100cqw); opacity: 0; }
}
.sail-ship {
  position: absolute; top: 50%; left: 0;
  width: 20px; height: 15px;
  margin-top: -13px; margin-left: -10px;
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(234,229,220, 0.55));
  animation: sail-x 9s linear infinite;
}
html.js [data-draw]:not(.in) .sail-ship { visibility: hidden; animation-play-state: paused; }
.waypoint {
  width: 12px; height: 12px;
  border-radius: 9999px;
  border: 2px solid rgba(234,229,220, 0.6);
  background: var(--navy);
  transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.waypoint.lit {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}

/* linha vertical do processo + ponto viajante (mantidos — baratos e bonitos) */
/* mesmo movimento de antes (topo do ponto de 0% a 100% da linha), só com
   transform: a caixa tem a altura da linha, então translateY(100%) percorre
   a linha inteira; o ponto visível é o ::before, preso no topo da caixa. */
@keyframes travel-y {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.travel-dot {
  position: absolute; top: 0; left: 50%;
  width: 7px; height: 100%;
  margin-left: -3.5px;
  pointer-events: none;
  animation: travel-y 5s linear infinite;
}
.travel-dot::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ===== quiz (log pose) ===== */
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: step-in 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes step-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.quiz-option {
  cursor: pointer;
  text-align: left;
  width: 100%;
  min-height: 44px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.quiz-option:hover { border-color: rgba(234,229,220, 0.45); background: rgba(234,229,220, 0.07); }
.quiz-option:active { transform: scale(0.99); }
.quiz-option.picked { border-color: var(--accent); background: rgba(234,229,220, 0.12); }

@keyframes compass-spin {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(380deg); }
  80%  { transform: rotate(350deg); }
  100% { transform: rotate(360deg); }
}
.compass-needle { transform-origin: 12px 12px; }
.compass-spin .compass-needle { animation: compass-spin 1.1s cubic-bezier(0.3, 0, 0.2, 1) both; }

/* contador de destaque no resultado */
.treasure-num {
  color: var(--gold);
  text-shadow: 0 0 34px var(--gold-glow);
}

/* ===== banner de cookies (desativado por padrão — ver site.js) ===== */
@keyframes banner-up {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
#cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  max-width: 600px; margin: 0 auto;
  background: var(--glass-strong);
  border: 1px solid rgba(234,229,220, 0.12);
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 24px 90px rgba(22,21,18, 0.6), inset 0 1px 0 rgba(234,229,220, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: banner-up 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
#cookie-banner p { color: rgba(234,229,220, 0.72); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
#cookie-banner a { color: var(--gold); text-decoration: none; }
#cookie-banner a:hover { text-decoration: underline; }
#cookie-banner .cb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#cookie-banner button { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  #cookie-banner { animation: none; }
}

/* ===== foco visível (teclado) ===== */
:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--cinema-gold, #eae5dc);
  outline-offset: 4px;
  border-radius: 2px; /* cantos retos, como o resto do site */
}
:where(a, button, [role="button"]) { -webkit-tap-highlight-color: rgba(234,229,220, 0.18); }

/* partes do navegador também na paleta: barra de rolagem e cursor de texto */
html { scrollbar-color: #383734 #191918; scrollbar-width: thin; }
input, textarea { caret-color: #eae5dc; }

/* ===== mobile ===== */
@media (max-width: 767px) {
  /* alvo de toque: links de lista do rodape vinham com 18px de altura */
  footer li > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  footer ul.space-y-3 > li + li { margin-top: 0; }
  /* links de texto miúdo (rodapé em linha do diagnóstico, "Por que isso não
     pode esperar" na home, "abrir o site" em sites.html): a área de toque
     cresce para 44px pela altura mínima, e a margem negativa devolve o espaço,
     então o desenho e o ritmo vertical ficam iguais. */
  footer span.flex-wrap > a,
  .hero-bottomline a,
  main a.font-mono.inline-flex {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    margin-block: -14px;
  }
  /* a marca no header tinha 146x24 */
  #site-header [data-mark] { min-height: 44px; }
  .display { letter-spacing: -0.025em; }
  .glass {
    background: linear-gradient(180deg, rgba(29,28,25, 0.94), rgba(25,25,24, 0.82));
    border-color: rgba(234,229,220, 0.14);
  }
  .grid-overlay { opacity: 0.5; background-size: 52px 52px; }
}

/* ===== respeito a quem prefere menos movimento ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .sail-ship, .travel-dot { animation: none !important; visibility: visible !important; }
  .compass-spin .compass-needle { animation: none !important; }
  .sea { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sea-line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .sea-band { animation: none !important; }
  html.js .hero-title { animation: none !important; clip-path: none !important; }
  .animate-ping { animation: none !important; }
  .hero-visual hero-shift,
  .hero-static-fallback { transition: none !important; }
  html.js [data-draw] { transition: none !important; }
  body > header { animation: none !important; }
  html.js [data-draw] { transform: none !important; }
  .quiz-step.active { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; }
}

/* logo "Em dados" (27/09/2026) */
.brand-logo { display: block; height: auto; }