/* ============================================================
   Vector — Landing zoom-through parallax
   Marca: verde #A4D12C acento · papel #FBFCF8 · tinta #0E1408
   Sem dependências externas. Tudo self-contained p/ Hostinger.
   ============================================================ */

:root{
  --green:#a4d12c; --green-bright:#c3eb34; --green-deep:#5f7d17;
  --ink:#0e1408; --paper:#fbfcf8; --gray:#5b6152; --line:#e7ebe0;
  --black:#0b0f08;
  --stage-ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden}
html{scroll-behavior:auto} /* o scroll é dirigido por JS; nada de smooth nativo */
body{
  font-family:'Space Grotesk','Trebuchet MS',Arial,sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ---- palco fixo: as cenas vivem aqui e são animadas pelo scroll ---- */
#stage{
  position:fixed; inset:0; overflow:hidden;
  background:var(--paper);
  z-index:1;
}
.scene{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  will-change:transform,opacity;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  opacity:0;
}
.scene .layer{
  position:absolute; inset:0;
  will-change:transform;
}
.scene .bg{
  background-size:cover; background-position:center;
  transform:scale(1.06);           /* respiro p/ parallax do mouse */
}
/* véu de foco: escurece/apaga o fundo p/ 20% quando o texto aparece parado */
.scene .veil{
  position:absolute; inset:0; z-index:2;
  background:var(--paper); opacity:0; pointer-events:none;
}
/* bordas já derretem no papel (feather nas imagens); sem véu p/ não lavar a arte */

/* ---- legenda de cada cena (dentro da área segura central) ---- */
.caption{
  position:relative; z-index:3;
  width:100%; max-width:min(900px,86vw); min-width:0; /* min-width:0 = fix flex overflow */
  text-align:center; padding:0 24px;
}
.caption h2,.caption p{ max-width:100% }
/* leitura garantida pelos marcadores verdes em cada texto (sem placa) */
.caption .idx{
  font-family:'Space Mono','Courier New',monospace;
  font-size:14px; letter-spacing:4px; color:var(--green-deep);
  text-transform:uppercase; margin-bottom:14px;
}
.caption h2{
  font-size:clamp(29px,5vw,68px); line-height:1.24; letter-spacing:-.5px;
  color:var(--ink); font-weight:700; overflow-wrap:break-word;
}
/* marcador verde só nos títulos grandes; o texto fica sobreposto ao traço */
.mk{
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  color:var(--ink); border-radius:2px; background-repeat:no-repeat; background-size:100% 100%;
  background-image:url('../img/marker.svg'); padding:.04em .48em .1em;
}
.caption p{
  font-family:Inter,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(15px,1.6vw,20px); line-height:1.9; color:var(--ink); font-weight:500;
  margin-top:18px; max-width:660px; margin-left:auto; margin-right:auto;
}
.caption{will-change:opacity}
.caption .rule{width:56px;height:3px;background:var(--green);margin:20px auto 0;border-radius:2px}

/* cena escura (núcleo de IA / cidade) usa texto claro */
.scene.dark .caption h2{color:#fff}
.scene.dark .caption p{color:#c7cdbe}
.scene.dark .caption .idx{color:var(--green-bright)}

/* ---- CTA final fixo (aparece na última cena, controlado por JS) ---- */
#cta{
  position:fixed; left:50%; bottom:8vh; transform:translateX(-50%) translateY(20px);
  z-index:5; opacity:0; pointer-events:none; transition:opacity .5s var(--stage-ease),transform .5s var(--stage-ease);
  text-align:center;
}
#cta.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#cta a{
  display:inline-block; background:var(--green); color:var(--ink);
  font-weight:700; font-size:17px; letter-spacing:.3px; white-space:nowrap;
  padding:16px 34px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 30px rgba(95,125,23,.35); max-width:90vw;
}
#cta small{display:block;margin-top:12px;color:var(--gray);font-family:Inter,Arial,sans-serif;font-size:13px}

/* ---- barra de progresso do scroll ---- */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green-deep),var(--green-bright));
  z-index:6;
}
/* pontos de cena (índice lateral) */
#dots{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:6; display:flex; flex-direction:column; gap:12px}
#dots b{width:8px;height:8px;border-radius:50%;background:rgba(14,20,8,.18);transition:all .3s var(--stage-ease);cursor:pointer;display:block}
#dots b.on{background:var(--green);transform:scale(1.5)}
@media (prefers-color-scheme:dark){ /* não invertemos o site; só os dots ganham contraste */
  #dots b{background:rgba(255,255,255,.25)}
}

/* ---- spacer que cria a distância de rolagem ---- */
#scroller{position:relative; z-index:0}

/* ---- topo: wordmark (marca só no chrome, NUNCA nas animações) ---- */
#brand{
  position:fixed; top:22px; left:26px; z-index:6;
  font-weight:700; letter-spacing:3px; font-size:18px; color:var(--ink);
  text-shadow:0 1px 10px rgba(251,252,248,.9),0 0 2px rgba(251,252,248,.9);
}
/* seta tripla piscando para baixo (indica o scroll) */
#hint{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:6;
  transition:opacity .4s;
}
#hint.hide{opacity:0}
.chev{
  display:block; width:20px; height:20px; margin:-8px auto 0;
  border-right:3px solid var(--green-deep); border-bottom:3px solid var(--green-deep);
  transform:rotate(45deg); opacity:.2; animation:chevblink 1.5s infinite;
}
.chev:nth-child(1){animation-delay:0s}
.chev:nth-child(2){animation-delay:.18s}
.chev:nth-child(3){animation-delay:.36s}
@keyframes chevblink{0%,100%{opacity:.15}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.chev{animation:none;opacity:.5}}

/* ---- mobile: tipografia e espaçamentos ajustados p/ portrait ---- */
@media (max-width:640px){
  .caption{ max-width:92vw; padding:0 16px }
  .caption h2{ font-size:clamp(23px,7.2vw,38px); line-height:1.26 }
  .mk{ padding:.03em .36em .09em }
  .caption p{ font-size:15px; line-height:1.75; margin-top:14px; max-width:88vw }
  .caption .idx{ font-size:12px; letter-spacing:2.5px; margin-bottom:10px }
  #brand{ font-size:16px; top:18px; left:18px }
  #cta{ bottom:6vh }
  #cta a{ font-size:16px; padding:15px 26px }
  #dots{ right:14px; gap:10px }
}

/* acessibilidade: quem pede menos movimento vê as cenas em fade simples */
@media (prefers-reduced-motion:reduce){
  .scene{transition:opacity .4s}
  .scene .bg{transform:none !important}
}