/*
 * NA LENHA — Ambient Fill cinematográfico para o mobile.
 * Usa EXCLUSIVAMENTE a própria imagem panorâmica já renderizada na experiência.
 * Isolamento absoluto: só atua em html.nalenha-cardapio (/cardapio/nalenha).
 */

@media (max-width:640px){
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]{
    --nl-ambient-top:calc(env(safe-area-inset-top) + 58px);
    position:relative;
    isolation:isolate;
    background:#070403!important;
  }

  /* Segunda cópia da própria mesa: cobre as áreas verticais que a foto 16:9 não alcança.
     Ela é propositalmente ampliada/desfocada; a foto original e os hotspots não mudam. */
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]::before{
    content:"";
    position:fixed;
    z-index:0;
    pointer-events:none;
    top:var(--nl-ambient-top);
    right:-14vw;
    bottom:-9vh;
    left:-14vw;
    background:
      linear-gradient(180deg,
        rgba(6,3,2,.74) 0%,
        rgba(6,3,2,.32) 15%,
        rgba(6,3,2,.08) 34%,
        rgba(6,3,2,.05) 58%,
        rgba(6,3,2,.30) 82%,
        rgba(6,3,2,.78) 100%),
      radial-gradient(ellipse at 50% 48%,rgba(245,130,32,.13),transparent 58%),
      var(--nl-mesa-image) center 48% / cover no-repeat;
    filter:blur(15px) saturate(1.18) contrast(1.06) brightness(.62);
    transform:scale(1.14);
    transform-origin:center;
    opacity:.98;
    will-change:transform,opacity;
    animation:nlMesaAmbient 11s ease-in-out infinite alternate;
  }

  /* Vinheta + brasas discretas: mantém leitura do header/dock sem voltar à tarja preta. */
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]::after{
    content:"";
    position:fixed;
    z-index:0;
    pointer-events:none;
    top:var(--nl-ambient-top);
    right:0;
    bottom:0;
    left:0;
    background:
      radial-gradient(circle at 12% 28%,rgba(255,115,18,.25) 0 1px,transparent 2px),
      radial-gradient(circle at 84% 72%,rgba(255,132,22,.18) 0 1px,transparent 2px),
      radial-gradient(circle at 62% 16%,rgba(255,171,60,.12) 0 1px,transparent 2px),
      radial-gradient(ellipse at 50% 49%,transparent 30%,rgba(0,0,0,.34) 100%),
      linear-gradient(180deg,rgba(5,3,2,.58) 0%,transparent 26%,transparent 70%,rgba(5,3,2,.62) 100%);
    background-size:113px 127px,157px 173px,197px 211px,100% 100%,100% 100%;
    opacity:.86;
  }

  @keyframes nlMesaAmbient{
    from{transform:scale(1.13) translate3d(-.5%,0,0);opacity:.94}
    to{transform:scale(1.17) translate3d(.5%,-.6%,0);opacity:1}
  }

  /* A fotografia aprovada continua nítida; apenas suas extremidades se dissolvem no ambiente. */
  html.nalenha-cardapio img[alt="Mesa panorâmica"][data-nl-ambient-source="1"]{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%);
    filter:saturate(1.08) contrast(1.03) brightness(.99)!important;
  }

  /* Substitui o fade preto rígido anterior por uma transição translúcida. */
  html.nalenha-cardapio [data-nl-camera="1"]::before{
    top:-24px!important;
    height:62px!important;
    background:linear-gradient(180deg,rgba(7,4,3,.28) 0%,rgba(7,4,3,.08) 48%,transparent 100%)!important;
  }
  html.nalenha-cardapio [data-nl-camera="1"]::after{
    bottom:-24px!important;
    height:62px!important;
    background:linear-gradient(0deg,rgba(7,4,3,.30) 0%,rgba(7,4,3,.08) 48%,transparent 100%)!important;
  }

  /* Chrome flutua sobre a cena contínua. */
  html.nalenha-cardapio .gv-top{
    z-index:50!important;
    background:linear-gradient(180deg,rgba(8,4,2,.96) 0%,rgba(8,4,2,.84) 78%,rgba(8,4,2,.56) 100%)!important;
    box-shadow:0 12px 34px -24px rgba(245,130,32,.28),0 1px 0 rgba(245,130,32,.13)!important;
  }
  html.nalenha-cardapio .gv-tour{
    z-index:45!important;
    background:linear-gradient(180deg,rgba(18,10,6,.62),rgba(9,5,3,.78))!important;
    border-color:rgba(245,130,32,.24)!important;
    box-shadow:0 18px 48px -20px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.025) inset!important;
    backdrop-filter:blur(18px) saturate(1.18)!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
  }

  /* Preserva a área clicável dos seis pontos e evita que o preenchimento capture gestos. */
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]::before,
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]::after{
    touch-action:none;
    user-select:none;
  }
}

@media (max-width:640px) and (prefers-reduced-motion:reduce){
  html.nalenha-cardapio #root>div[data-nl-ambient-ready="1"]::before{
    animation:none!important;
    transform:scale(1.14)!important;
  }
}