/* ============================================================
   CHEF JU LIMA — CORE
   Conceito: "FOGO · CORTE · PONTO" — faroeste da brasa
   Assinatura: a ESCALA DE PONTO (cru → brasa → carvão)
   ============================================================ */

:root{
  /* Carvão */
  --coal:      #0A0908;
  --coal-2:    #121010;
  --coal-3:    #1B1817;
  --hairline:  rgba(235,216,188,.13);
  --hairline-2:rgba(235,216,188,.07);

  /* Brasa (âncora real da marca) */
  --ember:     #FF6700;
  --ember-hot: #FFA23A;
  --blood:     #841A1A;
  --raw:       #C4344A;

  /* Papel de açougue */
  --paper:     #EBD8BC;
  --paper-dim: rgba(235,216,188,.62);
  --ash:       #8C857C;

  /* Escala de ponto — o device da marca */
  --scale: linear-gradient(90deg,#C4344A 0%,#E1462F 26%,#FF6700 54%,#FFA23A 74%,#4A2C18 92%,#120C08 100%);

  --ease:   cubic-bezier(.76,0,.24,1);
  --ease-2: cubic-bezier(.2,.7,.2,1);

  --pad: clamp(20px,5vw,84px);
  --maxw: 1560px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--coal); color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(15px,1.02vw,17px); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"ss01","cv01";
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--ember);color:#0A0908}

/* ---------- Tipografia ---------- */
.display{
  font-family:'Anton',Impact,'Haettenschweiler',sans-serif;
  font-weight:400; text-transform:uppercase;
  letter-spacing:-.022em;
  /* 1 e não .845: em PT-BR as caixas-altas acentuadas (Ê, Ã, Í) invadem a linha
     de cima e a cedilha (Ç) some sob a de baixo em entrelinhas mais fechadas.
     Em condensada pesada, 1 ainda lê como cartaz. */
  line-height:1;
}
.mono{
  font-family:'Space Mono','SFMono-Regular',ui-monospace,monospace;
  text-transform:uppercase; letter-spacing:.2em; font-size:.66rem;
}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

.h-xl{font-size:clamp(3.1rem,12.4vw,13.2rem)}
.h-lg{font-size:clamp(2.5rem,7.4vw,7.4rem)}
.h-md{font-size:clamp(1.85rem,4.1vw,4.05rem)}
.h-sm{font-size:clamp(1.3rem,2.1vw,2.05rem);letter-spacing:-.012em}

.em{color:var(--ember)}
.paper-dim{color:var(--paper-dim)}
.lede{font-size:clamp(1.02rem,1.42vw,1.32rem);line-height:1.56;color:var(--paper-dim)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{position:relative;padding-block:clamp(76px,10.5vw,168px)}
.sec--tight{padding-block:clamp(56px,7vw,104px)}

/* Cabeçalho de seção: número + label, régua de ponto */
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(28px,4vw,58px)}
.sec-head .n{color:var(--ember);font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.18em}
.sec-head .l{color:var(--paper-dim);font-family:'Space Mono',monospace;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase}
.sec-head .rule{flex:1;height:1px;background:var(--hairline);position:relative;top:-3px}
.sec-head .rule::after{content:"";position:absolute;inset:0;width:64px;background:var(--scale);opacity:.9}

/* Régua de ponto solta */
.scale-rule{height:2px;background:var(--scale);border-radius:2px}

/* ---------- Grão de filme ---------- */
.grain{position:fixed;inset:-120%;z-index:9998;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 7s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-3%,6%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}

/* ---------- Grelha (grid blueprint = barras da grelha) ---------- */
.grill{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(180deg,var(--hairline-2) 0 1px,transparent 1px 76px)}

/* ---------- Loader / cortina de abertura ---------- */
.loader{position:fixed;inset:0;z-index:10000;background:var(--coal);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:transform 1.05s var(--ease)}
.loader.done{transform:translateY(-101%)}
.loader .mark{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.5rem,4.6vw,3.4rem);letter-spacing:.02em;line-height:1;
  color:var(--paper);text-align:center}
.loader .mark span{color:var(--ember)}
.loader .lbar{width:min(340px,58vw);height:2px;background:rgba(235,216,188,.14);overflow:hidden;border-radius:2px}
.loader .lbar i{display:block;height:100%;width:0;background:var(--scale);
  background-size:340px 100%;animation:ld 1.15s var(--ease-2) forwards}
@keyframes ld{to{width:100%}}
.loader .tag{font-family:'Space Mono',monospace;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ash)}

/* ---------- Progresso de scroll ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9000;background:var(--scale);
  background-size:100vw 100%;transition:width .1s linear}

/* ---------- Cursor cinematográfico ---------- */
.cursor{position:fixed;top:0;left:0;width:30px;height:30px;border:1px solid rgba(255,103,0,.62);
  border-radius:50%;pointer-events:none;z-index:9500;
  transform:translate3d(-100px,-100px,0);transition:width .28s var(--ease-2),height .28s var(--ease-2),
  background-color .28s var(--ease-2),border-color .28s var(--ease-2);margin:-15px 0 0 -15px}
.cursor.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(255,103,0,.13);border-color:rgba(255,103,0,.9)}
@media (pointer:coarse),(max-width:900px){.cursor{display:none}}

/* ---------- Reveals ---------- */
/* padding+margem negativa: amplia a área de recorte para caber acento (É, Í, Ã)
   sem alterar o layout */
.ln{display:block;overflow:hidden;padding-top:.18em;margin-top:-.18em}
.ln>span{display:block;transform:translateY(114%);transition:transform 1.02s var(--ease)}
.ready .ln>span{transform:translateY(0)}
.ready .ln:nth-child(2)>span{transition-delay:.07s}
.ready .ln:nth-child(3)>span{transition-delay:.14s}
.ready .ln:nth-child(4)>span{transition-delay:.21s}

.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-2),transform .9s var(--ease-2)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}.rv[data-d="6"]{transition-delay:.48s}

/* clip-reveal de imagem (wipe de cinema) */
.clipr{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
.clipr.in{clip-path:inset(0 0 0 0)}

/* ---------- Botões ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:22px 40px;background:var(--ember);color:#140A02;
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(.98rem,1.42vw,1.34rem);line-height:1;overflow:hidden;
  border-radius:2px;transition:transform .3s var(--ease-2),box-shadow .3s var(--ease-2);
  box-shadow:0 0 0 rgba(255,103,0,0)}
.btn::after{content:"";position:absolute;inset:0;background:var(--ember-hot);
  transform:translateY(101%);transition:transform .42s var(--ease);z-index:0}
.btn span{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 44px -14px rgba(255,103,0,.72)}
.btn:hover::after{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--paper);border:1px solid var(--hairline)}
.btn--ghost::after{background:var(--paper)}
.btn--ghost:hover{color:#0A0908;box-shadow:none}
.btn--lg{padding:26px 52px;width:100%;max-width:620px}

/* ---------- Marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--hairline);padding-block:17px;
  background:var(--coal-2);position:relative}
.marq__t{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:mq 34s linear infinite}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marq__i{font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(.95rem,1.7vw,1.5rem);letter-spacing:.012em;color:var(--paper);
  display:flex;align-items:center;gap:44px;opacity:.88}
.marq__i b{color:var(--ember);font-weight:400}
.marq__i::after{content:"";width:7px;height:7px;background:var(--ember);border-radius:50%;flex:none}

/* ---------- Cartão base ---------- */
.card{position:relative;background:var(--coal-2);border:1px solid var(--hairline);
  border-radius:3px;overflow:hidden;transition:border-color .4s var(--ease-2),transform .4s var(--ease-2)}
.card:hover{border-color:rgba(255,103,0,.42);transform:translateY(-4px)}

/* ---------- Tratamento coeso de imagem ---------- */
.ph{position:relative;overflow:hidden;background:var(--coal-3)}
.ph img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.04) contrast(1.06) brightness(.96)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 130px 26px rgba(10,9,8,.62)}
.ph--kb img{animation:kb 26s var(--ease-2) infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.17)}}

/* ---------- Acessibilidade ---------- */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:10001;background:var(--ember);color:#0A0908;padding:12px 18px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .loader{display:none}
  .ln>span{transform:none}
  .rv{opacity:1;transform:none}
  .clipr{clip-path:none}
  .grain{display:none}
  .cursor{display:none}
}