/* ============================================================
   Camada de efeitos — Esquina do Boteco
   Aditiva: nao altera nenhuma regra de style.css.
   Regra de ouro: o estado "escondido" so existe quando o JS
   confirma que vai rodar (html.js-fx). Sem JS, o site aparece
   inteiro e normal — efeito nunca pode engolir conteudo.
   ============================================================ */

/* --- acessibilidade: pular direto pro cardapio --- */
.skip-link{position:absolute;z-index:100;top:-100px;left:12px;padding:12px 18px;border-radius:0 0 8px 8px;background:var(--yellow);color:#000;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;transition:top 160ms}
.skip-link:focus{top:0}
:where(a,button,summary):focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

/* --- paineis do cardapio --- */
.menu-list[hidden]{display:none}

/* --- barra de progresso de leitura --- */
.scroll-progress{position:fixed;z-index:60;top:0;right:0;left:0;height:3px;background:transparent;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:var(--progress,0%);background:linear-gradient(90deg,#ffd400,#fff1a0);box-shadow:0 0 12px rgba(255,212,0,.55)}

/* --- spotlight que segue o cursor no hero --- */
.hero[data-spotlight]::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:0;transition:opacity 420ms;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,212,0,.16),transparent 62%)}
.hero[data-spotlight].spot-on::after{opacity:1}

/* --- bolhas de chopp subindo --- */
.hero-bubbles{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.hero-bubbles i{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.5),rgba(255,212,0,.16) 60%,transparent 72%);border:1px solid rgba(255,212,0,.22);opacity:0;animation:bubble-up linear infinite}
@keyframes bubble-up{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.7)}
  12%{opacity:.75}
  80%{opacity:.5}
  100%{opacity:0;transform:translateY(-104vh) translateX(var(--drift,14px)) scale(1.15)}
}
.hero-bubbles i:nth-child(1){left:6%;width:9px;height:9px;animation-duration:15s;animation-delay:-2s;--drift:22px}
.hero-bubbles i:nth-child(2){left:14%;width:5px;height:5px;animation-duration:12s;animation-delay:-6s;--drift:-16px}
.hero-bubbles i:nth-child(3){left:23%;width:13px;height:13px;animation-duration:19s;animation-delay:-1s;--drift:18px}
.hero-bubbles i:nth-child(4){left:31%;width:6px;height:6px;animation-duration:13s;animation-delay:-9s;--drift:-24px}
.hero-bubbles i:nth-child(5){left:44%;width:10px;height:10px;animation-duration:17s;animation-delay:-4s;--drift:12px}
.hero-bubbles i:nth-child(6){left:52%;width:4px;height:4px;animation-duration:11s;animation-delay:-7s;--drift:-10px}
.hero-bubbles i:nth-child(7){left:61%;width:12px;height:12px;animation-duration:18s;animation-delay:-12s;--drift:26px}
.hero-bubbles i:nth-child(8){left:69%;width:7px;height:7px;animation-duration:14s;animation-delay:-3s;--drift:-18px}
.hero-bubbles i:nth-child(9){left:77%;width:9px;height:9px;animation-duration:16s;animation-delay:-10s;--drift:14px}
.hero-bubbles i:nth-child(10){left:85%;width:5px;height:5px;animation-duration:12s;animation-delay:-5s;--drift:-20px}
.hero-bubbles i:nth-child(11){left:92%;width:11px;height:11px;animation-duration:20s;animation-delay:-14s;--drift:16px}
.hero-bubbles i:nth-child(12){left:37%;width:8px;height:8px;animation-duration:15s;animation-delay:-11s;--drift:-13px}

/* --- parallax do hero (a foto anda mais devagar que o texto) --- */
.js-fx .hero{background-position:center calc(50% + var(--par,0px))}
@media(max-width:680px){.js-fx .hero{background-position:63% calc(50% + var(--par,0px))}}

/* --- titulo revelando linha a linha ---
   O style.css tem `.hero h1 span{color:yellow;font-style:italic}` mirando o
   unico span que existia no original. Os wrappers de linha tambem sao span,
   entao precisam reverter cor e italico — so a linha .accent mantem. */
.hero h1 .line{display:block;overflow:hidden;color:#fff;font-style:normal}
.hero h1 .line.accent{color:var(--yellow);font-style:italic}
.js-fx .hero h1[data-split] .line{opacity:0;transform:translateY(102%)}
.js-fx .hero h1[data-split].is-in .line{opacity:1;transform:none;transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity 700ms}
.js-fx .hero h1[data-split].is-in .line:nth-child(2){transition-delay:110ms}

/* --- reveal ao entrar na viewport --- */
.js-fx [data-reveal]{opacity:0;transform:translateY(26px)}
.js-fx [data-reveal].is-in{opacity:1;transform:none;transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1)}
.js-fx [data-reveal-group]>*{opacity:0;transform:translateY(30px)}
.js-fx [data-reveal-group].is-in>*{opacity:1;transform:none;transition:opacity 700ms cubic-bezier(.16,1,.3,1),transform 700ms cubic-bezier(.16,1,.3,1)}
.js-fx [data-reveal-group].is-in>*:nth-child(2){transition-delay:110ms}
.js-fx [data-reveal-group].is-in>*:nth-child(3){transition-delay:220ms}

/* --- tilt 3D nos cards da experiencia --- */
.experience-grid{perspective:1100px}
[data-tilt]{transform-style:preserve-3d;will-change:transform}
.js-fx [data-tilt].tilting{transition:transform 120ms ease-out}
[data-tilt] .line-icon,[data-tilt] h3{transform:translateZ(26px)}

/* --- stagger na troca de aba do cardapio --- */
.menu-list.swap .menu-item{animation:menu-in 360ms both cubic-bezier(.16,1,.3,1)}
.menu-list.swap .menu-item:nth-child(2){animation-delay:45ms}
.menu-list.swap .menu-item:nth-child(3){animation-delay:90ms}
.menu-list.swap .menu-item:nth-child(4){animation-delay:135ms}
.menu-list.swap .menu-item:nth-child(5){animation-delay:180ms}
.menu-list.swap .menu-item:nth-child(6){animation-delay:225ms}

/* --- neon sutil na marca --- */
.brand-mark{animation:neon 7s ease-in-out infinite;will-change:filter}
@keyframes neon{
  0%,92%,100%{filter:drop-shadow(0 0 0 rgba(255,212,0,0))}
  93%{filter:drop-shadow(0 0 7px rgba(255,212,0,.85))}
  94.5%{filter:drop-shadow(0 0 1px rgba(255,212,0,.25))}
  96%{filter:drop-shadow(0 0 11px rgba(255,212,0,.95))}
  98%{filter:drop-shadow(0 0 4px rgba(255,212,0,.5))}
}

/* --- header ganha fundo ao rolar --- */
.js-fx .site-header{transition:background 300ms,backdrop-filter 300ms,border-color 300ms}
.js-fx .site-header.stuck{position:fixed;background:rgba(9,9,9,.82);backdrop-filter:blur(14px);border-bottom-color:rgba(255,212,0,.24)}

/* ============================================================
   Quem pediu menos movimento, recebe menos movimento.
   Desliga TUDO que se move e garante que nada fique invisivel.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .hero-bubbles,.scroll-progress{display:none}
  .brand-mark{animation:none}
  .hero[data-spotlight]::after{display:none}
  .js-fx .hero{background-position:center}
  .js-fx [data-reveal],.js-fx [data-reveal-group]>*,.js-fx .hero h1[data-split] .line{opacity:1!important;transform:none!important;transition:none!important}
  .menu-list.swap .menu-item{animation:none}
  .js-fx .site-header.stuck{backdrop-filter:none}
}