/* iuriveiga.com · tema "brand designer" (preto, Switzer, arco) */

:root{
  /* tema escuro (padrão) */
  color-scheme:dark;
  --fundo:#000;
  --texto:#fff;
  --cinza-1:#b8b8b8;
  --cinza-2:#8f8f8f;
  --cinza-3:#666;
  --cinza-4:#3a3a3a;
  --linha:rgba(255,255,255,.14);
  --superficie:#0a0a0a;
  --filete:rgba(255,255,255,.08);
  --filete-forte:rgba(255,255,255,.22);
  --sans:"Switzer","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grot:"Schibsted Grotesk","Switzer","Inter",system-ui,sans-serif;
  --mono:"Chivo Mono","SFMono-Regular",Menlo,monospace;
  --gut:clamp(16px,3.2vw,32px);
  --larg:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
}
/* tema claro, ligado pelo botão do canto superior direito (data-theme no <html>) */
:root[data-theme="light"]{
  color-scheme:light;
  --fundo:#f6f5f2;
  --texto:#0b0b0b;
  --cinza-1:#444;
  --cinza-2:#6a6a6a;
  --cinza-3:#a3a3a3;
  --cinza-4:#bdbdbd;
  --linha:rgba(0,0,0,.12);
  --superficie:#e8e6e1;
  --filete:rgba(0,0,0,.06);
  --filete-forte:rgba(0,0,0,.2);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--texto);transition:background-color .45s var(--ease),color .45s var(--ease);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0;font-weight:400}
ol,ul{margin:0;padding:0;list-style:none}
section{scroll-margin-top:24px}

.skip{position:absolute;left:-999px;top:8px;background:var(--texto);color:var(--fundo);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.h-grot{font-family:var(--grot);font-weight:700;font-size:36px;line-height:1.1;text-transform:uppercase;letter-spacing:-.04em}

/* Hero: medidas tiradas do DOM do template "Julian David" com a animação concluída
   (desktop >= 1200, tablet 810 a 1199, celular < 810). O arco de 390×575 fica com o
   centro a 47,05% da faixa útil (15px do topo a 54px do fim); o nome, em 165px com
   entrelinha 0,7, termina a 127px do fim. Ao rolar, o nome sobe 20% mais rápido que a
   página (JS). Não há parallax de mouse no template. */
/* o fundo da seção precisa ter a cor do tema: o blend difference do nome compara com ele (transparente = nome branco sumindo no tema claro) */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;background:var(--fundo);transition:background-color .45s var(--ease)}
.hero-arco{
  position:absolute;left:50%;top:calc(47.05% - 305px);margin-left:-195px;
  width:390px;height:575px;border-radius:999px 999px 0 0;overflow:hidden;background:#000;
  transform-origin:50% 50%;
  /* curva medida no template: zoom acelerando (ease-in) em 1,01 s; linear() com os pontos amostrados, cubic-bezier como reserva */
  animation:aproxima 1.01s cubic-bezier(.45,0,.9,.55) both;
  animation-timing-function:linear(0,.013 4%,.047 12%,.087 20%,.133 30.6%,.197 39%,.26 47%,.333 55%,.4 63%,.497 71.5%,.603 80%,.733 88%,.893 96%,1);
}
.hero-arco::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.6))}
/* no tema claro o pé da foto se dissolve no fundo, senão o nome (difference) fica cortado em duas cores na borda do arco */
:root[data-theme="light"] .hero-arco::after{background:linear-gradient(180deg,rgba(246,245,242,0) 48%,rgba(246,245,242,.85) 80%,#f6f5f2 100%)}
.retrato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%;filter:grayscale(1) contrast(1.05)}
.nome{
  position:absolute;left:50%;bottom:127px;z-index:2;
  width:max-content;translate:-50% 0;will-change:translate;
  font-weight:900;font-size:165px;line-height:.7;letter-spacing:-.06em;text-align:center;
  color:#fff;mix-blend-mode:difference;
}
/* as duas linhas sobem juntas, 90px com fade, só depois que o zoom do arco termina (1,01 s); desaceleração exponencial medida */
.nome span{
  display:block;opacity:0;translate:0 90px;
  animation:aparece 1.07s cubic-bezier(.16,1,.3,1) 1.01s forwards;
  animation-timing-function:linear(0,.32 7.7%,.569 15.3%,.702 23%,.811 30.7%,.881 38.5%,.924 46%,.952 54%,.97 61.5%,.981 69%,.988 77%,.992 84.5%,.996 92%,1);
}
@keyframes aproxima{from{transform:scale(1.3)}to{transform:scale(1)}}
@keyframes aparece{to{opacity:1;translate:0 0}}

/* Marca no alto à esquerda, na posição do logo do template (23px da borda, 20px do topo); sobe com a página */
.marca-topo{position:absolute;top:20px;left:23px;z-index:3;color:var(--texto);opacity:0;animation:surge .8s var(--ease) 1.2s forwards;transition:opacity .3s}
.marca-topo .logo-v{width:34px;height:34px}
.marca-topo:hover{opacity:.6!important}
@keyframes surge{to{opacity:1}}

/* Botão de tema no alto à direita, espelhando o logo */
.tema{
  position:absolute;top:17px;right:20px;z-index:3;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  background:transparent;color:var(--texto);border:1px solid var(--linha);
  opacity:0;animation:surge .8s var(--ease) 1.2s forwards;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.tema:hover{background:var(--texto);color:var(--fundo);border-color:var(--texto)}
.tema:focus-visible{outline:2px solid var(--texto);outline-offset:3px}
.tema svg{width:18px;height:18px;grid-area:1/1;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .4s var(--ease),transform .6s var(--ease)}
.tema .lua{opacity:0;transform:rotate(-90deg) scale(.6)}
:root[data-theme="light"] .tema .sol{opacity:0;transform:rotate(90deg) scale(.6)}
:root[data-theme="light"] .tema .lua{opacity:1;transform:none}

/* Tablet: mesmo arco, centro a 51,9% da faixa útil; nome em 165px com entrelinha 0,8 e base a 225px do fim */
@media (min-width:810px) and (max-width:1199px){
  .hero-arco{top:calc(51.9% - 308px)}
  .nome{bottom:225px;line-height:.8}
}

/* Celular: arco fixo de 280×454 com o centro a 45% da faixa útil; nome em 90px, entrelinha 0,8, base a 216px do fim */
/* O hero termina logo abaixo do arco (o vão que sobrava era o lugar da frase do template, que não usamos) */
@media (max-width:809px){
  .hero{height:calc(45svh + 261px);min-height:0}
  .hero-arco{width:280px;height:454px;margin-left:-140px;top:calc(45svh - 243px)}
  .nome{bottom:30px;font-size:90px;line-height:.8}
  .intro{padding-top:40px}
  .marca-topo{top:20px;left:20px}
  .tema{top:14px;right:14px;width:36px;height:36px}
  .tema svg{width:16px;height:16px}
  .marca-topo .logo-v{width:28px;height:28px}
  .intro .assinatura{width:32px;height:32px;margin-top:40px}
}

/* Manifesto */
.intro{max-width:var(--larg);margin:0 auto;padding:clamp(48px,8vh,96px) var(--gut) clamp(90px,16vh,180px)}
.intro{text-align:center}
.manifesto{
  font-weight:700;font-size:clamp(1.4rem,6.3vw,2.8rem);line-height:1.2;letter-spacing:-.025em;
  margin:0 auto;
}
.verso{display:block}
.assinatura{width:40px;height:40px;margin:52px auto 0;color:var(--texto)}
.pal{color:var(--cinza-3);transition:color .35s}
.pal.on{color:var(--texto)}

/* Conheça: grade uniforme, 3 + 2 centrados no desktop, 2 colunas no tablet, 1 no celular */
.casos{max-width:var(--larg);margin:0 auto;padding:0 var(--gut) clamp(90px,16vh,180px)}
.casos-cab{margin-bottom:32px}
.grade{display:grid;grid-template-columns:1fr;gap:48px 24px}
.caso{display:flex;flex-direction:column;min-width:0}
.caso-img{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--superficie);border-radius:18px;
  isolation:isolate;
}
.caso-img::after{ /* filete interno: dá borda às capas escuras sem pesar */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--filete);transition:box-shadow .5s var(--ease);
}
.caso-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1s var(--ease),filter .6s var(--ease)}
.caso-seta{
  position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--texto);color:var(--fundo);
  opacity:0;transform:translate(-6px,6px) scale(.85);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.caso:hover .caso-img img,.caso:focus-visible .caso-img img{transform:scale(1.045);filter:brightness(1.08)}
.caso:hover .caso-img::after,.caso:focus-visible .caso-img::after{box-shadow:inset 0 0 0 1px var(--filete-forte)}
.caso:hover .caso-seta,.caso:focus-visible .caso-seta{opacity:1;transform:none}
.caso:focus-visible{outline:none}
.caso:focus-visible .caso-img{outline:2px solid var(--texto);outline-offset:3px}
.caso-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px}
.caso-titulo{font-weight:600;font-size:20px;letter-spacing:-.03em;transition:opacity .3s}
.caso-desc{margin-top:8px;color:var(--cinza-2);font-size:15px;line-height:1.55;max-width:42ch;text-wrap:pretty}
@media (hover:none){ /* no toque não há hover: a seta fica sempre à vista, discreta */
  .caso-seta{opacity:1;transform:none;width:34px;height:34px}
}
@media (min-width:600px) and (max-width:899px){
  .grade{grid-template-columns:repeat(4,minmax(0,1fr))}
  .caso{grid-column:span 2}
  .caso:nth-child(5){grid-column:2/span 2}
  .grade .caso:nth-child(2n){transition-delay:.08s}
}
@media (min-width:900px){
  .grade{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:64px}
  .caso{grid-column:span 2}
  .caso:nth-child(4){grid-column:2/span 2}
  .caso:nth-child(5){grid-column:4/span 2}
  /* entrada em cascata dentro de cada linha */
  .grade .caso:nth-child(2),.grade .caso:nth-child(5){transition-delay:.08s}
  .grade .caso:nth-child(3){transition-delay:.16s}
}

/* Conecte-se (acordeão) */
.servicos{max-width:var(--larg);margin:0 auto;padding:0 var(--gut) clamp(90px,16vh,180px)}
.servicos .h-grot{margin-bottom:28px}
/* duas colunas de três (01 a 03 na esquerda, 04 a 06 na direita), lidas de cima para baixo */
.acordeao{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:clamp(16px,4vw,56px)}
.acordeao li{border-top:1px solid var(--linha)}
.acordeao li:nth-child(3n){border-bottom:1px solid var(--linha)}
.acordeao a{
  position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;
  padding:28px 0;color:var(--cinza-4);transition:color .35s,padding .45s var(--ease);
}
.acordeao a:hover{color:var(--texto);padding-left:8px}
.acordeao sup{font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:-.04em;color:var(--cinza-1);margin-right:12px;vertical-align:top;position:relative;top:.2em}
.acordeao .it{font-family:var(--grot);font-weight:700;font-size:clamp(1.6rem,4vw,36px);text-transform:uppercase;letter-spacing:-.04em;line-height:1.1}
.acordeao .sub{grid-column:1;font-family:var(--mono);font-weight:300;font-size:13px;text-transform:uppercase;letter-spacing:-.04em;color:var(--cinza-3);margin-top:6px;margin-left:30px;transition:color .35s}
.acordeao a:hover .sub{color:var(--cinza-1)}
/* ícone da rede num círculo, no lugar do "+" do template; acende em branco no hover */
.rede-ic{
  grid-column:2;grid-row:1/3;align-self:center;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linha);color:var(--cinza-2);
  transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
}
.rede-ic svg{width:20px;height:20px}
.acordeao a:hover .rede-ic,.acordeao a:focus-visible .rede-ic{background:var(--texto);color:var(--fundo);border-color:var(--texto);transform:scale(1.06)}
@media (max-width:599px){
  .acordeao a{padding:20px 0;column-gap:8px}
  .acordeao a:hover{padding-left:0}
  .acordeao sup{font-size:10px;margin-right:6px}
  .acordeao .it{font-size:clamp(17px,5.6vw,22px)}
  .acordeao .sub{font-size:10px;margin-left:0}
  /* no celular o ícone sobe para a linha do número e o nome e o link usam a coluna inteira */
  .rede-ic{grid-row:1;align-self:center;width:30px;height:30px;margin-bottom:6px}
  .rede-ic svg{width:14px;height:14px}
  .acordeao sup{align-self:center;top:0}
  .acordeao .it,.acordeao .sub{grid-column:1/-1}
}

/* Rodapé */
/* Logotipo (o "V"): mesmo vetor do favicon, recortado no viewBox 111 112 177 176 */
.logo-v{display:block;fill:currentColor}
.marca{display:inline-block;color:var(--texto);transition:opacity .3s}
.marca:hover{opacity:.6}
.marca .logo-v{width:44px;height:44px}
.rodape{
  max-width:var(--larg);margin:0 auto;padding:40px var(--gut) 44px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;
}
.rodape-l{display:flex;flex-direction:column;gap:12px}
.copy{font-size:16px;color:var(--cinza-2)}
@media (max-width:560px){
  .marca .logo-v{width:38px;height:38px}
}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.visivel{opacity:1;transform:none}

::selection{background:var(--texto);color:var(--fundo)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-arco{animation:none}
  .marca-topo,.tema{animation:none;opacity:1}
  body,.tema svg{transition:none}
  .nome span{animation:none;opacity:1;translate:none}
  .reveal{opacity:1;transform:none;transition:none}
  .caso-img img,.caso-seta,.acordeao a,.rede-ic{transition:none}
}