/* =========================================================
   Milena Ornelas · Webdesigner
   Identidade: marfim, preto e um único gesto âmbar.
   Cormorant Garamond (display) + Jost (rótulos e corpo).

   Cores tiradas do arquivo do logotipo "1 (2).png":
   creme #F4F1EB (fundo do logo) e âmbar #F07818 (núcleo da fita).
   ========================================================= */

:root{
  /* cor */
  --bg:        #0B0A09;   /* preto quente, base */
  --raise:     #141210;   /* superfície levantada */
  --ink:       #F4F1EB;   /* marfim da marca */
  --ink-soft:  #B8B0A5;
  --dim:       #8E857A;
  --amber:     #F07818;   /* núcleo da fita do logotipo */
  --amber-lt:  #F9BD76;   /* brilho da fita */
  --amber-dp:  #C25E10;
  --line:      #292520;
  --dash:      #3A342C;

  /* tipografia */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Jost, "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ritmo */
  --gut: 48px;
  --max: 1240px;
  --sec: 112px;

  /* curvas */
  --saida: cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Não usar overflow-x aqui: transforma o body em contêiner de rolagem
   próprio, zera window.scrollY e quebra sticky, revelações e a fita.
   As auréolas já são cortadas pelo overflow das seções .hero e .talk. */

img{ display:block; max-width:100%; height:auto }
a{ color:inherit }

h1,h2,h3{
  font-family:var(--serif); font-weight:300;
  letter-spacing:-.015em; text-wrap:balance; margin:0;
}

:where(a,button):focus-visible{
  outline:2px solid var(--amber-lt); outline-offset:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--bg);
  padding:12px 20px; font-size:13px; text-decoration:none;
}
.skip:focus{ left:12px; top:12px }

.eyebrow{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--dim); margin:0 0 28px;
  display:flex; align-items:center; gap:16px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line) }

/* =======================================================
   MOVIMENTO
   Estados iniciais só existem quando o JS está ativo,
   então sem JS a página aparece inteira e legível.
   ======================================================= */
.js .reveal,
.js .hero [data-seq]{
  opacity:0; transform:translateY(18px);
  transition:opacity .85s var(--saida), transform .85s var(--saida);
}
.js .reveal.dentro,
.js .hero [data-seq].dentro{ opacity:1; transform:none }

/* título da hero: cada linha sobe por trás de uma máscara */
.hero h1 .ln{
  display:block; overflow:hidden;
  padding:.14em 0; margin:-.14em 0;
}
.js .hero h1 .ln{ opacity:1; transform:none }   /* a máscara faz o trabalho */
.hero h1 .ln i{ display:block; font-style:normal }
.js .hero h1 .ln i{
  transform:translateY(108%);
  transition:transform 1s var(--saida);
}
.js .hero h1 .ln.dentro i{ transform:none }
.hero h1 em{ font-style:italic; color:var(--amber-lt) }

/* =======================================================
   CABEÇALHO
   ======================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  border-bottom:1px solid transparent;
  transition:background-color .45s ease, border-color .45s ease, backdrop-filter .45s ease;
}
.nav.grudado{
  background:rgba(11,10,9,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.mark{ display:flex; align-items:center; gap:14px; text-decoration:none }
.mark-logo{ width:auto; height:34px; flex:none }
.wordmark{ line-height:1.25 }
.wordmark i{
  display:block; font-family:var(--serif); font-style:normal;
  font-size:17px; letter-spacing:.01em;
}
.wordmark small{
  display:block; font-size:8.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dim); margin-top:3px;
}
.menu{ display:flex; align-items:center; gap:34px }
.menu a{
  position:relative;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; transition:color .25s ease;
}
.menu a:not(.menu-cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--saida);
}
.menu a:hover{ color:var(--ink) }
.menu a:not(.menu-cta):hover::after{ transform:scaleX(1) }
.menu .menu-cta{
  color:var(--amber-lt); border:1px solid var(--line); padding:11px 20px;
  transition:border-color .3s ease, color .3s ease, background-color .3s ease;
}
.menu .menu-cta:hover{ border-color:var(--amber); background:rgba(240,120,24,.10) }

/* =======================================================
   BOTÕES
   ======================================================= */
.acts{ display:flex; align-items:center; gap:32px; flex-wrap:wrap }
.btn{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block; padding:15px 32px;
  border:1px solid var(--amber); color:var(--amber-lt);
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; transition:color .35s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--saida);
}
.btn:hover{ color:#0B0A09 }
.btn:hover::before{ transform:scaleX(1) }
.lnk{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); text-decoration:none;
  border-bottom:1px solid var(--line); padding-bottom:6px;
  transition:color .25s ease, border-color .25s ease;
}
.lnk:hover{ color:var(--ink); border-color:var(--amber) }

/* =======================================================
   HERO
   ======================================================= */
.hero{ position:relative; overflow:hidden; padding-bottom:26px }
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:84px var(--gut) 40px;
  display:grid; grid-template-columns:1.3fr .95fr; gap:72px; align-items:stretch;
}
.hero-say{ align-self:center }
.hero h1{ font-size:clamp(42px,5.2vw,68px); line-height:1.06; margin:0 0 30px }
.lead{
  font-size:16px; line-height:1.85; color:var(--ink-soft);
  max-width:48ch; margin:0 0 40px;
}

/* auréola âmbar: a luz da fita, respirando devagar */
.aura{ position:absolute; inset:0; pointer-events:none; z-index:0 }
.aura span{
  position:absolute; display:block; border-radius:50%;
  filter:blur(50px); will-change:transform;
}
.aura-a{
  width:620px; height:620px; right:-4%; top:-16%;
  background:radial-gradient(circle,
    rgba(240,120,24,.24), rgba(240,120,24,.07) 46%, transparent 70%);
  animation:derivaA 24s ease-in-out infinite alternate;
}
.aura-b{
  width:440px; height:440px; right:22%; top:34%;
  background:radial-gradient(circle,
    rgba(249,189,118,.14), rgba(249,189,118,.04) 50%, transparent 72%);
  animation:derivaB 31s ease-in-out infinite alternate;
}
@keyframes derivaA{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(-58px,44px,0) scale(1.12) }
}
@keyframes derivaB{
  from{ transform:translate3d(0,0,0) scale(1.06) }
  to  { transform:translate3d(46px,-52px,0) scale(.94) }
}

.hero-side{ display:flex; flex-direction:column; gap:44px }
.hero-logo{ position:relative; align-self:flex-end; width:min(320px,100%) }
.hero-logo img{ position:relative; z-index:1; width:100% }
.hero-logo__glow{
  position:absolute; inset:6%; border-radius:50%; z-index:0;
  background:radial-gradient(circle at 42% 52%,
    rgba(240,120,24,.30), rgba(240,120,24,.08) 48%, transparent 70%);
  filter:blur(26px);
  animation:pulso 7s ease-in-out infinite alternate;
}
@keyframes pulso{ from{ opacity:.7; transform:scale(.96) } to{ opacity:1; transform:scale(1.06) } }

.facts{ list-style:none; margin:auto 0 0; padding:0; display:grid; gap:22px }
.facts li{
  display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:baseline;
  padding-bottom:20px; border-bottom:1px solid var(--line);
}
.facts b{
  font-family:var(--serif); font-weight:300; font-size:46px; line-height:.9;
  color:var(--amber-lt); font-variant-numeric:tabular-nums;
}
.facts span{ font-size:12.5px; line-height:1.6; color:var(--dim) }

.cue{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto; padding:0 var(--gut) 30px;
  display:flex; align-items:center; gap:14px;
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; width:fit-content;
}
.cue i{ display:block; width:1px; height:34px; background:linear-gradient(var(--amber),transparent) }
.cue:hover{ color:var(--amber-lt) }

/* =======================================================
   FITA: o gesto do logotipo virou fio entre as seções
   ======================================================= */
.fita{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut);
  height:90px;
}
.fita svg{ width:100%; height:100%; overflow:visible }
.fita path{
  fill:none; stroke:var(--amber); stroke-width:1.4; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;
  stroke-dashoffset:calc(100 - 100 * var(--p, 0));
}
.fita-flip svg{ transform:scaleX(-1) }

/* =======================================================
   SEÇÕES
   ======================================================= */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:38px;
}
.sec-head h2{ font-size:30px }
.sec-head span{
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim);
}

/* ---------- projetos ---------- */
.work{ max-width:var(--max); margin:0 auto; padding:56px var(--gut) var(--sec) }
.grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:28px; align-items:start }
.col{ display:grid; gap:28px; align-content:start }

.item{ display:block; text-decoration:none; color:inherit }
.shot{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); background:var(--raise);
}
.shot img{
  width:100%;
  transition:transform .7s var(--saida), filter .5s ease;
}
.item:hover .shot img{ transform:scale(1.035) }
.shot-go{
  position:absolute; left:0; right:0; bottom:0;
  padding:34px 18px 15px;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber-lt);
  background:linear-gradient(transparent, rgba(11,10,9,.88));
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .45s var(--saida);
}
.item:hover .shot-go{ opacity:1; transform:none }
.item-sm .shot{ height:205px }
.item-sm .shot img{ height:100%; object-fit:cover; object-position:top left }

.meta{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; padding-top:16px;
}
.meta-say b{
  display:inline-block; position:relative;
  font-family:var(--serif); font-weight:400; font-size:22px;
  letter-spacing:-.01em; margin-bottom:5px;
}
.meta-say b::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--saida);
}
.item:hover .meta-say b::after{ transform:scaleX(1) }
.meta-say i{
  display:block; font-style:normal; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}
.meta-side{ display:flex; flex-direction:column; align-items:flex-end; gap:9px; flex:none }
.kind{
  font-size:8.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line);
  padding:5px 10px; white-space:nowrap;
}
.kind-cli{ color:var(--amber-lt); border-color:#4A3A22 }
.meta-url{
  font-size:10.5px; letter-spacing:.12em; color:var(--dim);
  white-space:nowrap; transition:color .25s ease;
}
.item:hover .meta-url{ color:var(--amber-lt) }
.say{
  display:block; font-size:13.5px; line-height:1.75;
  color:var(--ink-soft); max-width:56ch; padding-top:12px;
}

.soon{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border:1px dashed var(--dash); padding:28px 32px; margin-top:28px;
}
.soon b{
  display:block; font-family:var(--serif); font-weight:400; font-size:20px;
  margin-bottom:6px;
}
.soon p{ margin:0; font-size:13px; color:var(--dim); line-height:1.7 }
.soon .badge{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--amber-lt); border:1px solid #4A3A22; padding:9px 16px;
  white-space:nowrap;
}

/* ---------- serviços: índice editorial, linha a linha ---------- */
.serv{ max-width:var(--max); margin:0 auto; padding:36px var(--gut) var(--sec) }
.serv-list{ list-style:none; margin:0; padding:0 }
.serv-list li{
  display:grid; grid-template-columns:.62fr 1.38fr; gap:48px;
  padding:30px 0; border-bottom:1px solid var(--line);
}
.serv-list li:first-child{ border-top:1px solid var(--line) }
.serv-list h3{ position:relative; font-size:26px; margin:0; padding-left:28px }
.serv-list h3::before{
  content:""; position:absolute; left:0; top:.66em;
  width:15px; height:1px; background:var(--amber);
}
.serv-list p{
  margin:0; font-size:14.5px; line-height:1.85;
  color:var(--ink-soft); max-width:62ch;
}

/* ---------- processo ---------- */
.how{ max-width:var(--max); margin:0 auto; padding:36px var(--gut) var(--sec) }
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:52px;
}
.steps li{ border-top:1px solid var(--line); padding-top:26px; position:relative }
.steps li::before{
  content:""; position:absolute; top:-1px; left:0; height:1px;
  width:34px; background:var(--amber);
}
.steps h3{ font-size:23px; margin:0 0 14px }
.steps p{ margin:0; font-size:14px; line-height:1.8; color:var(--ink-soft) }

/* ---------- sobre ---------- */
.about{
  max-width:var(--max); margin:0 auto; padding:0 var(--gut) var(--sec);
  display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start;
}
.retrato{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line);
}
.about h2{ font-size:clamp(28px,3.2vw,40px); line-height:1.18; margin:0 0 26px }
.about p{ font-size:15px; line-height:1.9; color:var(--ink-soft); margin:0 0 20px; max-width:60ch }
.about p:last-child{ margin-bottom:0 }

/* ---------- contato ---------- */
.talk{
  position:relative; overflow:hidden;
  max-width:var(--max); margin:0 auto; padding:56px var(--gut) var(--sec);
}
.talk-aura{
  position:absolute; z-index:0; pointer-events:none;
  width:560px; height:560px; left:-8%; bottom:-42%;
  border-radius:50%; filter:blur(60px);
  background:radial-gradient(circle,
    rgba(240,120,24,.16), rgba(240,120,24,.04) 50%, transparent 72%);
  animation:derivaB 27s ease-in-out infinite alternate;
}
.talk > *:not(.talk-aura){ position:relative; z-index:1 }
.talk h2{ font-size:clamp(30px,3.8vw,46px); line-height:1.18; margin:0 0 22px; max-width:18ch }
.talk-lead{ font-size:15.5px; line-height:1.85; color:var(--ink-soft); max-width:50ch; margin:0 0 40px }

/* ---------- rodapé ---------- */
.foot{
  border-top:1px solid var(--line);
  max-width:var(--max); margin:0 auto; padding:40px var(--gut) 56px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.foot-mark{ display:flex; align-items:center; gap:14px }
.foot-note{ margin:0; font-size:11.5px; line-height:1.8; color:var(--dim); text-align:right }

/* =======================================================
   RESPONSIVO
   ======================================================= */
@media (max-width:1000px){
  :root{ --gut:32px; --sec:80px }
  .hero-inner{ grid-template-columns:1fr; gap:48px; padding-top:56px }
  .hero-logo{ align-self:flex-start; width:230px }
  .grid{ grid-template-columns:1fr }
  .item-sm .shot{ height:auto }
  .item-sm .shot img{ height:auto; object-fit:cover }
  .steps{ grid-template-columns:1fr; gap:34px }
  .serv-list li{ grid-template-columns:1fr; gap:14px }
  .about{ grid-template-columns:1fr; gap:40px }
  .about-img{ max-width:280px }
  .fita{ height:64px }
}

@media (max-width:680px){
  :root{ --gut:20px }
  .nav{ flex-direction:column; align-items:flex-start; gap:16px; padding-top:16px }
  .menu{ gap:18px; flex-wrap:wrap }
  .hero h1{ font-size:36px }
  .hero-logo{ width:186px }
  .meta{ flex-direction:column; align-items:flex-start; gap:10px }
  .meta-side{ flex-direction:row; align-items:center; gap:12px }
  .soon{ flex-direction:column; align-items:flex-start }
  .foot{ flex-direction:column; align-items:flex-start }
  .foot-note{ text-align:left }
}

/* =======================================================
   MOVIMENTO REDUZIDO: tudo parado, tudo visível
   ======================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal, .js .hero [data-seq]{ opacity:1; transform:none }
  .js .hero h1 .ln i{ transform:none }
  .fita path{ stroke-dashoffset:0 }
}
.estatico .reveal, .estatico .hero [data-seq]{ opacity:1; transform:none }
.estatico .hero h1 .ln i{ transform:none }
.estatico .aura, .estatico .hero-logo__glow, .estatico .talk-aura{ animation:none }