/* Capa v2 · driano.digital · teste da esteira imagem -> código (29/09/2026)
   Camadas, de trás para frente: fundo > luz > chuva > nome > retrato > texto > régua */

:root{
  --fundo:#121214;
  --fundo-base:#0c0c0e;
  --cobre:#BB7333;
  --cobre-claro:#E0A063;
  --cobre-botao:#DE9752;
  --branco:#F5EDE0;
  --texto:#ddd6ca;
  --suave:#a39a8c;
  --linha:rgba(224,160,99,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --margem:clamp(20px,11.4vw,190px);
  --titulo:'Archivo',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --h1:clamp(64px,11.6vw,196px);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--titulo);
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- fundo ---------- */

.chuva{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.30) 10%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.8) 80%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.30) 10%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.08) 52%,rgba(0,0,0,.8) 80%,#000 100%);
}

.luz{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(900px 760px at 80% 46%,rgba(187,115,51,.32),transparent 62%),
    radial-gradient(700px 500px at 100% 100%,rgba(187,115,51,.18),transparent 70%),
    linear-gradient(180deg,transparent 60%,var(--fundo-base) 100%);
}

/* ---------- nav ---------- */

.nav{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,9.4vw,157px);
}

.marca{
  font-weight:700;
  font-size:clamp(18px,1.5vw,25px);
  letter-spacing:-.01em;
  color:var(--branco);
}
.marca b{font-weight:500;color:var(--cobre-claro)}

.nav nav{display:flex;align-items:center}

.lnk{
  font-size:clamp(14px,1.02vw,17px);
  color:var(--branco);
  transition:color .25s var(--ease);
}
.lnk + .lnk::before{
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--suave);
  vertical-align:middle;
  margin:0 clamp(12px,1.3vw,22px);
}
.lnk:hover{color:var(--cobre-claro)}

/* ---------- hero ---------- */

.hero{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(96px,11vh,130px) var(--margem) clamp(130px,17vh,170px);
}

/* o nome fica ATRÁS do retrato: é isso que dá a profundidade */
.h1{
  position:absolute;
  z-index:1;
  left:var(--margem);
  top:calc(50% - var(--h1) * 1.42);
  font-family:var(--titulo);
  font-stretch:118%;
  font-weight:800;
  font-size:var(--h1);
  line-height:.8;
  letter-spacing:-.045em;
  color:var(--branco);
  white-space:nowrap;
  will-change:transform;
}
.h1-linha{display:block}
.h1-recuo{padding-left:1.12em}

.media{
  position:absolute;
  z-index:2;
  top:8%;
  right:-4.5%;
  height:128%;
  aspect-ratio:1066/1368;
  pointer-events:none;
  will-change:transform;
}

.retrato{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.35) 70%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.35) 70%,transparent 78%);
  filter:drop-shadow(-40px 10px 70px rgba(0,0,0,.6));
}

/* 09/10/2026: o retrato vivo (vídeo transparente) deita por cima da imagem e só aparece quando já está tocando */
.retrato-vivo{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.media.vivo .retrato-vivo{opacity:1}
.media.vivo .retrato:not(.retrato-vivo){opacity:0;transition:opacity .6s var(--ease)}
@media (max-width:860px), (prefers-reduced-motion: reduce){
  .retrato-vivo{display:none}
}

.conteudo{
  position:relative;
  z-index:3;
  max-width:min(44vw,640px);
}

/* o vão guarda o lugar do nome, que é absoluto */
.vao{height:calc(var(--h1) * 1.72)}

.t3{
  position:absolute;
  z-index:3;
  left:var(--margem);
  top:calc(50% - var(--h1) * 1.42 - 2.6em);
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(11px,.95vw,15px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--cobre-claro);
}

.h2{
  font-weight:700;
  font-size:clamp(24px,2.65vw,44px);
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--cobre-claro);
}

.t1{
  margin-top:clamp(12px,1.5vh,18px);
  font-size:clamp(16px,1.32vw,22px);
  line-height:1.48;
  color:var(--texto);
}

.botoes{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(12px,1.3vw,22px);
  margin-top:clamp(20px,2.6vh,30px);
}

.btn,.btn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:clamp(48px,3.3vw,56px);
  padding:0 clamp(22px,1.85vw,32px);
  border-radius:9px;
  font-weight:500;
  font-size:clamp(15px,1.08vw,18px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,border-color .25s;
}

.btn{
  background:var(--cobre-botao);
  color:#1a1009;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(0,0,0,.8)}

.btn2{
  border:1.5px solid var(--cobre-claro);
  color:var(--branco);
}
.btn2:hover{transform:translateY(-3px);background:rgba(224,160,99,.10)}

.btn:focus-visible,.btn2:focus-visible,.lnk:focus-visible,.marca:focus-visible{
  outline:2px solid var(--branco);
  outline-offset:4px;
}

/* ---------- régua ---------- */

.rail{
  position:absolute;
  z-index:4;
  left:clamp(20px,5.6vw,94px);
  right:clamp(20px,5.6vw,94px);
  bottom:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linha);
  padding:clamp(18px,2.6vh,28px) 0 clamp(22px,4vh,40px);
}

.rail li{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.5vw,26px);
}
.rail li + li{border-left:1px solid var(--linha)}

.h3{
  font-weight:700;
  font-size:clamp(26px,2.3vw,39px);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--cobre-claro);
  font-variant-numeric:tabular-nums;
}

.t2{
  font-size:clamp(14px,1.08vw,18px);
  color:var(--texto);
}

/* ---------- entrada: enfeita o que já está visível ---------- */

@media (prefers-reduced-motion:no-preference){
  .h1-linha,.t3,.h2,.t1,.botoes,.rail,.nav{animation:sobe .9s var(--ease) both}
  .t3{animation-delay:.05s}
  .h1-linha{animation-delay:.12s}
  .h1-recuo{animation-delay:.2s}
  .h2{animation-delay:.34s}
  .t1{animation-delay:.42s}
  .botoes{animation-delay:.5s}
  .rail{animation-delay:.62s}
  .media{animation:chega 1.2s var(--ease) both}
}
@keyframes sobe{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes chega{from{opacity:0;transform:translateX(40px) scale(1.03)}to{opacity:1;transform:none}}

/* ---------- celular ---------- */

@media (max-width:860px){
  :root{--h1:clamp(58px,19.5vw,120px)}

  .nav{padding:18px 20px}
  .nav nav{display:none}

  .hero{
    min-height:0;
    padding:0 20px;
    justify-content:flex-start;
  }

  .media{
    order:1;
    position:relative;
    top:auto;
    right:auto;
    height:auto;
    width:min(100vw,480px);
    margin:58px auto 0;
    align-self:center;
  }
  .retrato{
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 92%);
    mask-image:linear-gradient(180deg,#000 62%,transparent 92%);
  }

  /* no celular o nome vem na FRENTE, pisando na base esfumada do retrato */
  .t3{
    order:2;
    position:relative;
    left:auto;
    top:auto;
    margin-top:calc(min(100vw,480px) * -.34);
    letter-spacing:.3em;
  }
  .h1{
    order:3;
    position:relative;
    z-index:3;
    left:auto;
    top:auto;
    margin-top:14px;
    line-height:.84;
  }
  .h1-recuo{padding-left:.42em}

  .conteudo{
    order:4;
    max-width:none;
    margin-top:22px;
  }
  .vao{display:none}

  .btn,.btn2{flex:1 1 100%}

  .rail{
    order:5;
    position:relative;
    left:auto;
    right:auto;
    margin-top:38px;
    grid-template-columns:repeat(2,1fr);
    padding:0 0 34px;
  }
  .rail li{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:4px;
    padding:18px 0 18px 16px;
  }
  .rail li + li{border-left:0}
  .rail li:nth-child(even){border-left:1px solid var(--linha)}
  .rail li:nth-child(n+3){border-top:1px solid var(--linha)}
  .rail li:nth-child(odd){padding-left:0}

  .chuva{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.08) 100%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.08) 100%);
  }
}