/* Scape Burguer · components
   Pieces used across the page: nav, mobile menu, loader, order dialog, WhatsApp button, jump scare. */

/* =============================== NAV =============================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1001;
  padding:18px var(--pad);
  padding-top:calc(18px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;justify-content:space-between;
  transition:background .35s,border-color .35s,padding .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,10,8,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-color:var(--line); padding-block:12px;
}
.nav__brand{display:flex;align-items:center;gap:11px}
.nav__brand-mark{display:grid;place-items:center;animation:brandMarkFloat 4.8s ease-in-out infinite}
.nav__brand img{height:38px;width:auto;transition:transform .3s;transform-origin:center}
.nav__brand:hover img{transform:rotate(-6deg) scale(1.08)}
.nav__brand-name{font-family:var(--font-display);font-size:1.28rem;letter-spacing:.02em;color:var(--bone);white-space:nowrap}
@keyframes brandMarkFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-3px) rotate(-4deg)}
  65%{transform:translateY(1px) rotate(3deg)}
}
@media (prefers-reduced-motion:reduce){.nav__brand-mark{animation:none}}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{font-size:.92rem;font-weight:500;color:var(--bone-dim);position:relative;padding-block:4px;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--orange);transition:width .3s}
.nav__links a:hover,.nav__links a.active{color:var(--bone)}
.nav__links a:hover::after,.nav__links a.active::after{width:100%}
.nav__right{display:flex;align-items:center;gap:16px}
/* 44px tap area around a 24px icon */
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;margin-right:-10px;z-index:210}
.nav__burger span{width:24px;height:2px;background:var(--bone);border-radius:2px;transition:transform .3s,opacity .3s}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.open span:nth-child(2){opacity:0}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:999;background:#0a0908;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  visibility:hidden;pointer-events:none;
  clip-path:circle(2% at calc(100% - 38px) 34px);
  transition:clip-path .5s cubic-bezier(.16,.8,.24,1),visibility 0s linear .5s;
}
.mobile-menu.open{
  visibility:visible;pointer-events:auto;
  clip-path:circle(150% at calc(100% - 38px) 34px);
  transition:clip-path .5s cubic-bezier(.16,.8,.24,1),visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu{transition:visibility 0s linear .2s}
  .mobile-menu.open{transition:none}
}
.mobile-menu a{font-family:var(--font-display);font-size:2rem;color:var(--bone)}
.mobile-menu a:hover{color:var(--orange)}

/* =============================== LOADER =============================== */
/* Welcome screen shown while the intro video loads (~2s). It leaves by rising
   like a curtain, with blood dripping from its bottom edge. */
.loader{
  position:fixed;inset:0;z-index:1002;display:grid;place-items:center;
  background:radial-gradient(60% 50% at 50% 45%,rgba(242,106,27,.16),transparent 70%),var(--void);
  transition:transform 1s cubic-bezier(.7,0,.25,1);
}
.loader.done{transform:translateY(calc(-100% - 70px))}
.loader__drip{position:absolute;left:0;top:100%;width:100%;height:64px;display:block}
.loader__inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:var(--pad);transition:opacity .4s ease,transform .6s ease}
.loader.done .loader__inner{opacity:0;transform:translateY(-30px)}
.loader__logo{width:clamp(110px,14vw,150px);height:auto;filter:drop-shadow(0 0 28px rgba(242,106,27,.55));animation:lampFlicker 2.4s linear infinite}
/* a failing lamp: mostly on, with a few quick dropouts */
@keyframes lampFlicker{
  0%,18%,22%,52%,55%,100%{opacity:1}
  20%{opacity:.25}
  53%{opacity:.45}
  54%{opacity:.9}
}
.loader__welcome{margin-top:22px;font-weight:600;font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;color:var(--orange-2)}
.loader__brand{font-family:var(--font-display);font-size:clamp(2.4rem,8vw,4.4rem);line-height:1;color:var(--bone);margin-top:10px;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.loader__brand span{color:var(--orange)}
.loader__bar{position:relative;width:min(280px,70vw);height:4px;margin-top:30px;border-radius:99px;background:rgba(244,236,220,.1);overflow:visible}
.loader__bar span{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--blood),var(--orange));box-shadow:0 0 14px rgba(242,106,27,.6)}
/* a drop hanging from the tip of the bar */
.loader__bar span::after{content:"";position:absolute;right:-2px;top:2px;width:6px;height:9px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--orange);animation:barDrop 1.1s ease-in infinite}
@keyframes barDrop{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(16px) scale(1);opacity:0}}
.loader__meta{display:flex;justify-content:space-between;gap:20px;width:min(280px,70vw);margin-top:12px;font-size:.8rem;color:var(--bone-dim)}
.loader__meta b{font-family:var(--font-display);font-weight:400;color:var(--orange-2);letter-spacing:.04em}
#loaderMsg{transition:opacity .25s ease}
/* embers drifting up */
.loader__embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loader__embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:var(--orange-2);box-shadow:0 0 8px var(--orange);opacity:0;animation:ember 3.2s linear infinite}
.loader__embers i:nth-child(1){left:12%;animation-delay:.1s}
.loader__embers i:nth-child(2){left:24%;animation-delay:1.3s;width:3px;height:3px}
.loader__embers i:nth-child(3){left:37%;animation-delay:.6s}
.loader__embers i:nth-child(4){left:49%;animation-delay:2s;width:5px;height:5px}
.loader__embers i:nth-child(5){left:61%;animation-delay:.9s;width:3px;height:3px}
.loader__embers i:nth-child(6){left:73%;animation-delay:1.7s}
.loader__embers i:nth-child(7){left:84%;animation-delay:.3s;width:3px;height:3px}
.loader__embers i:nth-child(8){left:92%;animation-delay:2.4s}
@keyframes ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(30px,-105vh);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .loader{transition:opacity .4s ease}
  .loader.done{transform:none;opacity:0}
  .loader__logo,.loader__embers i,.loader__bar span::after{animation:none}
  .loader__embers{display:none}
}

/* =============================== JUMP SCARE =============================== */
/* Jigsaw jump scare (once per visit, when the intro video reaches its last scene) ---- */
.jumpscare{
  position:fixed;inset:0;z-index:1003;pointer-events:none;display:grid;place-items:center;
  visibility:hidden;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(120,8,18,.92),rgba(11,10,8,.97) 62%);
}
.jumpscare.on{visibility:visible;animation:jsBg 1.9s ease forwards}
@keyframes jsBg{0%{opacity:0}4%{opacity:1}82%{opacity:1}100%{opacity:0}}
.jumpscare__inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:var(--pad)}
.jumpscare img{width:min(78vw,62vh,560px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.8)) contrast(1.1)}
.jumpscare.on img{animation:jsFace 1.9s cubic-bezier(.2,1.5,.35,1) forwards}
@keyframes jsFace{
  0%{transform:scale(.25);opacity:0}
  6%{transform:scale(1.18) rotate(-2deg);opacity:1}
  9%{transform:scale(1.1) translateX(-8px) rotate(2deg)}
  12%{transform:scale(1.14) translateX(8px) rotate(-1deg)}
  15%{transform:scale(1.1) translateX(0) rotate(0)}
  80%{transform:scale(1.04);opacity:1}
  100%{transform:scale(1.5);opacity:0}
}
.jumpscare p{font-family:var(--font-display);font-size:clamp(1.6rem,4.6vw,3rem);color:var(--bone);margin-top:6px;text-shadow:0 6px 30px #000;opacity:0}
.jumpscare small{display:block;font-family:var(--font-body);font-weight:600;font-size:clamp(.85rem,1.6vw,1rem);color:var(--orange-2);margin-top:8px;opacity:0}
.jumpscare.on p{animation:jsText 1.9s ease forwards .25s}
.jumpscare.on small{animation:jsText 1.9s ease forwards .45s}
@keyframes jsText{0%{opacity:0;transform:translateY(10px)}15%{opacity:1;transform:none}70%{opacity:1}90%,100%{opacity:0}}

/* Ghostface: a knife slash crosses the screen and he lunges up from the bottom
   (the source image is cut at the bottom and right, so those edges stay off-screen).
   Plays once per visit when a menu is chosen in "Qual cardápio?" (js/sustos.js). */
.ghostscare{
  position:fixed;inset:0;z-index:1004;overflow:hidden;pointer-events:none;
  visibility:hidden;opacity:0;
  background:radial-gradient(70% 55% at 50% 62%,#5c0912,#0b0a08 72%);
}
.ghostscare.on{visibility:visible;pointer-events:auto;animation:gsBg 1.8s ease forwards}
@keyframes gsBg{0%{opacity:0}4%{opacity:1}86%{opacity:1}100%{opacity:0}}
.ghostscare__flash{position:absolute;inset:0;background:#fff;opacity:0}
.ghostscare.on .ghostscare__flash{animation:gsFlash .5s ease-out .14s}
@keyframes gsFlash{0%{opacity:.5}100%{opacity:0}}
.ghostscare__slash{
  position:absolute;left:-10%;top:44%;width:120%;height:6px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blood) 15%,#ff2b3a 50%,var(--blood) 85%,transparent);
  box-shadow:0 0 24px rgba(255,40,50,.7);transform:rotate(-14deg) scaleX(0);transform-origin:0 50%;
}
.ghostscare.on .ghostscare__slash{animation:gsSlash .9s cubic-bezier(.2,.8,.2,1) .08s forwards}
@keyframes gsSlash{0%{transform:rotate(-14deg) scaleX(0);opacity:1}25%{transform:rotate(-14deg) scaleX(1);opacity:1}100%{transform:rotate(-14deg) scaleX(1);opacity:0}}
/* the mask sits at ~40% of the image width, so --gx:-40% centres his face */
.ghostscare img{
  position:absolute;bottom:0;left:50%;width:min(140vw,880px,110vh);max-width:none;height:auto;
  --gx:-40%;transform:translate(var(--gx),100%);transform-origin:50% 100%;
  filter:drop-shadow(0 -20px 60px rgba(0,0,0,.7));
}
/* phones: bigger, so he fills the lower 60% of the screen */
@media (orientation:portrait){.ghostscare img{width:min(190vw,880px);--gx:-33%}}   /* knife stays on screen */
.ghostscare.on img{animation:gsRise 1.8s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes gsRise{
  0%{transform:translate(var(--gx),100%) scale(.9)}
  12%{transform:translate(var(--gx),0) scale(1.06) rotate(-2deg)}
  16%{transform:translate(calc(var(--gx) - 1.5%),1%) scale(1.05) rotate(2deg)}
  20%{transform:translate(calc(var(--gx) + 1.5%),0) scale(1.06) rotate(-1deg)}
  24%{transform:translate(var(--gx),0) scale(1.04) rotate(0)}
  86%{transform:translate(var(--gx),0) scale(1.02);opacity:1}
  100%{transform:translate(var(--gx),6%) scale(1.15);opacity:0}
}
.ghostscare__text{position:absolute;left:0;right:0;top:calc(10vh + env(safe-area-inset-top,0px));z-index:2;text-align:center;padding-inline:var(--pad)}
.ghostscare__text p{font-family:var(--font-display);font-size:clamp(1.9rem,7vw,3.6rem);line-height:1;color:var(--bone);text-shadow:0 6px 30px #000;opacity:0}
.ghostscare__text small{display:block;margin-top:10px;font-weight:600;font-size:clamp(.9rem,2.4vw,1.05rem);color:var(--orange-2);text-shadow:0 2px 12px #000;opacity:0}
.ghostscare.on .ghostscare__text p{animation:jsText 1.8s ease .2s forwards}
.ghostscare.on .ghostscare__text small{animation:jsText 1.8s ease .4s forwards}
/* =============================== WHATSAPP FLOAT =============================== */
.wa-float{
  position:fixed;right:clamp(16px,4vw,30px);bottom:calc(clamp(16px,4vw,30px) + env(safe-area-inset-bottom,0px));z-index:150;
  width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.45);transition:transform .3s,opacity .4s,visibility 0s linear 0s;
}
.wa-float.hide{opacity:0;visibility:hidden;transform:translateY(12px);transition:transform .3s,opacity .4s,visibility 0s linear .4s}
.wa-float:hover{transform:scale(1.08)}
.wa-float::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;opacity:0;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none}}

/* =============================== MENU PICKER =============================== */
.order-dialog{
  width:min(680px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);
  padding:clamp(24px,5vw,38px);border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(145deg,var(--panel-2),var(--void-soft));color:var(--bone);box-shadow:var(--shadow-lg);
}
.order-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.order-dialog__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.order-dialog__head h2{font-size:clamp(1.8rem,5vw,2.6rem);margin-top:14px}
.order-dialog__close{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%;font-size:1.5rem;line-height:1}
.order-dialog__close:hover{border-color:var(--orange);color:var(--orange-2)}
.order-dialog__choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:26px}
.order-choice{
  display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:150px;padding:20px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(244,236,220,.035);
  transition:border-color .25s,background .25s,transform .25s;
}
.order-choice:hover{transform:translateY(-3px);border-color:var(--orange);background:rgba(242,106,27,.09)}
.order-choice strong{font-family:var(--font-display);font-size:1.35rem;font-weight:400;line-height:1.15}
.order-choice span{color:var(--bone-dim);font-size:.9rem}
.order-choice i{color:var(--orange-2);font-style:normal;font-weight:600;font-size:.85rem}
@media (max-width:560px){.order-dialog__choices{grid-template-columns:1fr}.order-choice{min-height:125px}}