/* =========================================================
   JOHNNIE GRILL — hero animado
   portado de hero-anim-preview.html (GSAP + vídeo de faíscas)
   adaptado para seção de topo de página rolável
   ========================================================= */

.hero{
  position:relative;
  width:100%;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  cursor:pointer;
  background:radial-gradient(120% 90% at 50% 62%, #1d0707 0%, #0b0303 46%, #000 100%);
}

/* brilho da brasa atrás do burger */
.hero-glow{
  position:absolute; left:50%; top:62%;
  width:120vmin; height:120vmin;
  transform:translate(-50%,-50%) scale(.4);
  background:radial-gradient(circle,
    rgba(255,150,40,.85) 0%,
    rgba(225,30,10,.5) 30%,
    rgba(120,8,8,.22) 50%,
    rgba(0,0,0,0) 70%);
  opacity:0; filter:blur(2px); z-index:1; pointer-events:none;
}

/* faíscas: vídeo com fundo preto -> screen apaga o preto */
.hero-embers{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; mix-blend-mode:screen;
  z-index:2; pointer-events:none; opacity:0;
}

.hero-shadow{
  position:absolute; left:50%; top:81%;
  width:40vmin; height:6.5vmin; border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  background:radial-gradient(circle, rgba(0,0,0,.7), rgba(0,0,0,0) 70%);
  opacity:0; z-index:2; pointer-events:none;
}

.hero-bwrap{
  position:absolute; left:50%; top:55%; z-index:3;
  transform:translate(-50%,-50%);
  width:min(56vmin, 520px);
}
.hero-burger{
  display:block; width:100%; height:auto;
  transform-origin:50% 100%;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
  opacity:0; will-change:transform,opacity;
}

.hero-copy{
  position:absolute; z-index:4; top:8%; left:0; right:0;
  text-align:center; pointer-events:none; padding:0 var(--gutter);
}
.hero-kicker{
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:700; opacity:0;
}
.hero-title{
  font-family:system-ui, "Segoe UI", Roboto, sans-serif; font-weight:900;
  font-size:clamp(2.4rem, 8vw, 4.6rem); line-height:.9;
  text-transform:uppercase; letter-spacing:.005em;
  color:#fff; text-shadow:0 4px 34px rgba(0,0,0,.8);
  margin-top:.22em; min-height:1.05em;
}
.hero-title .caret{
  display:inline-block; width:4px; height:.84em;
  background:var(--red); margin-left:.05em; vertical-align:-.04em; opacity:0;
}
.hero-title .caret.on{ animation:hero-blink .8s steps(1) infinite; }
@keyframes hero-blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.hero-title .brk{ display:none; }   /* quebra só no mobile */

.hero-tagline{
  font-family:Georgia, "Times New Roman", serif; font-style:italic; font-weight:400;
  font-size:clamp(1.05rem, 3.4vw, 1.6rem);
  color:var(--gold); margin-top:.1em; opacity:0;
}

.hero-cta{
  position:absolute; z-index:4; left:50%; bottom:11%;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--red); color:#fff;
  font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.98rem; padding:.95em 2em; border-radius:999px;
  box-shadow:0 10px 30px rgba(225,20,20,.45);
  opacity:0;
  transition:transform .2s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-cta:hover{ background:var(--red-deep); transform:translateX(-50%) translateY(-3px); box-shadow:0 16px 38px rgba(225,20,20,.55); }

/* dica de scroll */
.hero-scroll{
  position:absolute; left:50%; bottom:26px; z-index:5;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5em;
  color:var(--smoke-dim);
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; pointer-events:none;
}
.hero-scroll .chev{
  width:18px; height:18px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  animation:hero-bob 1.8s ease-in-out infinite;
}
@keyframes hero-bob{ 0%,100%{transform:rotate(45deg) translate(0,0)} 50%{transform:rotate(45deg) translate(3px,3px)} }

/* mobile: burger e título maiores, título em 2 linhas */
@media (max-width:720px){
  .hero-bwrap{ width:min(90vw, 520px); top:60%; }
  .hero-copy{ top:6%; padding:0 4vw; }
  .hero-title{ font-size:min(15vw, 5rem); line-height:.95; min-height:2.1em; }
  .hero-title .brk{ display:block; }
  .hero-kicker{ font-size:.72rem; letter-spacing:.28em; }
  .hero-tagline{ font-size:clamp(1.2rem, 5vw, 1.8rem); }
  .hero-cta{ bottom:11%; }
}

/* reduced-motion: estado final estático, sem queda */
@media (prefers-reduced-motion:reduce){
  .hero{ cursor:default; }
  .hero-burger{ opacity:1 !important; }
  .hero-glow{ opacity:.8 !important; transform:translate(-50%,-50%) scale(1); }
  .hero-embers{ opacity:.7 !important; }
  .hero-shadow{ opacity:.6 !important; transform:translate(-50%,-50%) scale(1); }
  .hero-kicker,.hero-tagline,.hero-cta,.hero-scroll{ opacity:1 !important; }
  .hero-title .caret{ display:none; }
}

/* fallback quando o GSAP não carrega (classe .no-anim no body via JS) */
.no-anim .hero-burger{ opacity:1; }
.no-anim .hero-glow{ opacity:.8; transform:translate(-50%,-50%) scale(1); }
.no-anim .hero-embers{ opacity:.7; }
.no-anim .hero-shadow{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
.no-anim .hero-kicker,
.no-anim .hero-tagline,
.no-anim .hero-cta,
.no-anim .hero-scroll{ opacity:1; }