/* =========================================================
   JOHNNIE GRILL — base
   reset · tokens · tipografia · header/topbar · utilidades
   ========================================================= */

:root{
  /* brasa */
  --red:        #e11414;
  --red-deep:   #b50f0f;
  --amber:      #ff7a18;
  --gold:       #ffb43a;

  /* tinta */
  --black:      #000;
  --ink:        #0b0303;   /* fundo escuro base */
  --ink-2:      #150909;
  --smoke:      rgba(255,255,255,.62);
  --smoke-dim:  rgba(255,255,255,.32);
  --line:       rgba(255,255,255,.12);
  --white:      #fff;

  /* tipografia */
  --font-display: "Anton", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-accent:  "Fraunces", Georgia, "Times New Roman", serif;

  /* layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 76px;

  /* easing */
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:var(--red) #140707; }

/* barra de scroll estilizada (WebKit/Chrome/Edge) */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#140707; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--amber), var(--red)); border-radius:999px;
  border:2px solid #140707;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--gold), var(--red-deep)); }

body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--red); color:#fff; }

h1,h2,h3{ line-height:1.04; text-wrap:balance; }

.wrap{ width:min(var(--wrap), 100% - var(--gutter)*2); margin-inline:auto; }

/* foco acessível */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ===================== HEADER / TOPBAR ===================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center;
  /* escondido na primeira visão (hero puro); aparece ao rolar */
  transform:translateY(-100%); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease), opacity .4s var(--ease),
             background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-shown{
  transform:translateY(0); opacity:1; pointer-events:auto;
  background:rgba(8,3,3,.82);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  border-bottom-color:var(--line);
}
.topbar-inner{
  width:min(var(--wrap), 100% - var(--gutter)*2);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}

.brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto; }
.brand-logo{ width:46px; height:46px; object-fit:contain; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.35rem; letter-spacing:.04em; text-transform:uppercase;
  line-height:1; color:#fff;
}

.topbar-nav{ display:flex; gap:2rem; margin-left:auto; }
.topbar-nav a{
  font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--smoke); transition:color .25s var(--ease); position:relative;
}
.topbar-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:var(--red); transition:width .28s var(--ease);
}
.topbar-nav a:hover{ color:#fff; }
.topbar-nav a:hover::after{ width:100%; }

.topbar-cta{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--red); color:#fff;
  font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.7em 1.25em; border-radius:999px;
  box-shadow:0 8px 22px rgba(225,20,20,.38);
  transition:transform .2s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  flex:0 0 auto;
}
.topbar-cta svg{ width:14px; height:14px; }
.topbar-cta:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow:0 12px 28px rgba(225,20,20,.5); }

/* botão hambúrguer (mobile) */
.nav-toggle{ display:none; }

@media (max-width:860px){
  .topbar-nav{ display:none; }
}

/* ===================== UTIL ===================== */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* respeita usuários que pedem menos movimento */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}