/* rafaelkulka.com.br — identidade GRAFITE, dose D.
   Lima PODE: kicker, régua, e todos os estados de interação (hover, foco, progresso).
   Lima NÃO ENTRA: botão principal, numeração em repouso, faixa chapada, texto corrido.
   O anel de foco lima é ACESSIBILIDADE, não decoração — não remover. */

@font-face {
  font-family: 'Inter Var';
  src: url('fontes/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --grafite: #0E1116;
  --secao: #141922;
  --branco: #FFFFFF;
  --lima: #C8FF3D;
  --cinza-texto: #B8C2CC;
  --cinza-fraco: #9AA6B2;
  --cinza-meta: #5C6A78;
  --linha: #232A33;
  --env: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--grafite);
  color: var(--cinza-texto);
  font-family: 'Inter Var', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.env { max-width: var(--env); margin: 0 auto; padding: 0 56px; }

/* ---------- progresso e foco: lima como interação ---------- */
#progresso {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--lima); z-index: 60; will-change: width;
}
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--lima); outline-offset: 3px; border-radius: 1px;
}

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14,17,22,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo .env { display: flex; justify-content: space-between; align-items: center; height: 74px; }
.marca { color: var(--branco); font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.topo nav { display: flex; gap: 30px; }
.topo nav a {
  color: var(--cinza-fraco); text-decoration: none; font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; transition: color .18s;
}
.topo nav a:hover { color: var(--branco); }

/* ---------- tipografia ---------- */
.kicker {
  color: var(--lima); font-size: 12px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; margin-bottom: 26px;
}
h1 {
  color: var(--branco); font-size: clamp(42px, 5.6vw, 76px); font-weight: 900;
  line-height: .98; letter-spacing: -.045em; max-width: 16ch;
}
h2 {
  color: var(--branco); font-size: clamp(32px, 3.9vw, 54px); font-weight: 900;
  line-height: 1.03; letter-spacing: -.04em; max-width: 19ch;
}
.regua { width: 72px; height: 3px; background: var(--lima); margin: 34px 0 28px; }
p + p { margin-top: 22px; }
.texto { max-width: 62ch; }
.texto em { color: var(--cinza-fraco); font-style: italic; }

/* ---------- seções ---------- */
section { padding: 104px 0; border-top: 1px solid var(--linha); }
section.alt { background: var(--secao); }
.abertura { padding: 96px 0 104px; border-top: 0; }
.abertura .env { display: grid; grid-template-columns: 1.3fr .85fr; gap: 64px; align-items: center; }
.duas { display: grid; grid-template-columns: .95fr 1.15fr; gap: 64px; align-items: start; }

/* ---------- retrato com vinheta ----------
   O fundo do estúdio é mais claro e mais quente que o --grafite. Sem a vinheta
   nas quatro bordas o retângulo da foto aparece recortado contra a página. */
.retrato { position: relative; aspect-ratio: 3/4; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.retrato::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,  var(--grafite) 0%, rgba(14,17,22,0) 24%),
    linear-gradient(to left,   var(--grafite) 0%, rgba(14,17,22,0) 20%),
    linear-gradient(to top,    var(--grafite) 0%, rgba(14,17,22,0) 26%),
    linear-gradient(to bottom, var(--grafite) 0%, rgba(14,17,22,0) 18%);
}
.alt .retrato::after {
  background:
    linear-gradient(to right,  var(--secao) 0%, rgba(20,25,34,0) 24%),
    linear-gradient(to left,   var(--secao) 0%, rgba(20,25,34,0) 20%),
    linear-gradient(to top,    var(--secao) 0%, rgba(20,25,34,0) 26%),
    linear-gradient(to bottom, var(--secao) 0%, rgba(20,25,34,0) 18%);
}
figure { margin: 0; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--linha); }
figcaption {
  margin-top: 14px; font-size: 14px; color: var(--cinza-meta);
  letter-spacing: .02em; line-height: 1.5;
}

/* ---------- ações ---------- */
.acoes { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 16px 28px; border-radius: 2px; font-size: 16px;
  font-weight: 700; text-decoration: none; border: 1.5px solid transparent; transition: .18s;
}
.btn-1 { background: var(--branco); color: var(--grafite); }
.btn-1:hover { background: #E7EDF3; }
.btn-2 { border-color: #2C3542; color: var(--branco); font-weight: 600; }
.btn-2:hover { border-color: var(--cinza-fraco); }

/* ---------- condições ---------- */
.condicoes { list-style: none; margin-top: 12px; }
.condicoes li { border-bottom: 1px solid var(--linha); padding: 26px 0; }
.condicoes li:first-child { border-top: 1px solid var(--linha); }
.condicoes h3 {
  color: var(--branco); font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  margin-bottom: 10px;
}
.condicoes p { font-size: 17.5px; }

/* ---------- contato ---------- */
.contato { list-style: none; margin-top: 34px; }
.contato li { padding: 20px 0; border-bottom: 1px solid var(--linha); }
.contato li:first-child { border-top: 1px solid var(--linha); }
.contato .rot {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cinza-meta); margin-bottom: 6px;
}
.contato a { color: var(--branco); text-decoration: none; font-weight: 700; font-size: 22px;
  letter-spacing: -.02em; border-bottom: 1px solid var(--linha); transition: border-color .18s; }
.contato a:hover { border-bottom-color: var(--lima); }
.contato .end { color: var(--cinza-texto); font-size: 17.5px; }

/* ---------- rodapé ---------- */
footer { padding: 56px 0 80px; border-top: 1px solid var(--linha); }
footer .env { display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; align-items: baseline; }
.assinatura {
  color: var(--cinza-meta); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
footer .local { color: var(--cinza-meta); font-size: 14px; }

/* ---------- régua: salta para a seção em leitura ----------
   Marcador funcional, não enfeite — diz onde o leitor está. Lima aqui é interação,
   dentro do orçamento da dose D. */
.marcador {
  position: fixed; z-index: 40; width: 3px; height: 40px; background: var(--lima);
  left: calc((100vw - min(100vw, var(--env)))/2 + 56px - 22px); top: 0;
  transform: translateY(-80px); pointer-events: none;
}

/* ---------- revelação ao rolar ----------
   O conteúdo NASCE visível. Só esconde sob html.anima, que o JS só acrescenta
   depois de garantir que tem como revelar de volta. Sem JS, com JS quebrado ou
   sem IntersectionObserver, a página aparece inteira. */
.anima .rev { opacity: 0; transform: translateY(14px); }
.anima .rev.vis {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
 /* Retrato da cena 5: emerge do escuro. O rosto aparece primeiro, e a escala
    assenta devagar. Dramático pelo tempo e pelo corte, não por efeito. */
.anima .retrato-dram img {
  clip-path: inset(0 0 100% 0); transform: scale(1.06);
  transition: clip-path .45s ease-in, transform .45s ease-in;
}
.anima .retrato-dram.vis img {
  clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1.15s cubic-bezier(.16,1,.3,1) .1s,
              transform 1.6s cubic-bezier(.16,1,.3,1) .1s;
}
.anima .retrato-dram::after { opacity: 0; transition: opacity .35s ease-in; }
.anima .retrato-dram.vis::after { opacity: 1; transition: opacity .9s ease .55s; }

.anima .condicoes li { --d: 0ms; opacity: 0; transform: translateX(-10px); }
.anima .condicoes li.vis {
  opacity: 1; transform: none;
  transition: opacity .4s ease-out var(--d), transform .5s cubic-bezier(.16,1,.3,1) var(--d);
}


@media (max-width: 900px) {
  body { font-size: 18px; }
  .env { padding: 0 24px; }
  .abertura .env, .duas { grid-template-columns: 1fr; gap: 40px; }
  .abertura { padding: 56px 0 64px; }
  section { padding: 68px 0; }
  .topo nav { display: none; }
  h1 { max-width: none; }
  h2 { max-width: none; }
}

/* Sem animação para quem pediu menos movimento — e nada pode ficar invisível. */
@media (max-width: 1100px) { .marcador { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marcador { display: none; }
  .anima .rev, .anima .rev.vis,
  .anima .condicoes li, .anima .condicoes li.vis { opacity: 1; transform: none; transition: none; }
  .anima .retrato-dram img, .anima .retrato-dram.vis img {
    clip-path: none; transform: none; transition: none; }
  .anima .retrato-dram::after, .anima .retrato-dram.vis::after { opacity: 1; transition: none; }
  #progresso { display: none; }
}