body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
}

/*
 * Poppins SemiBold (600), subset to only the glyphs the wordmark needs
 * (F, O, S, d, o), inlined as base64 (~1.3KB) to avoid a render-blocking
 * request to fonts.googleapis.com before first paint. Self-hosting is
 * permitted under the SIL Open Font License 1.1.
 */
@font-face {
  font-family: 'FoodOS Wordmark';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url(data:font/woff2;base64,d09GMgABAAAAAAPIAAwAAAAABpQAAAN7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cLgZgAFwKhCCDYgsQAAE2AiQDHAQgBYNUByAbcwXIBB4AT/sXVOkZOQ5yJqUDlB2R+5C7L6rph9kYNp1tQelXBqs69rG3WqpU4doqgpAIW4mrY0wHL2E7lNvCOoaxi8voQwAUVjEThGKtSseNDEnati2X6NEYEjQvGxjcmcgizPSKpY6ak2WpT2zBAeKJYgsOV7o9QheJQhXKudDsAQf3Lte1Wh5FxZBXhPwMyIa4TYWzcEOMFB9ioI6ii7IuwdIipHm1FyFTBmnm4EbEiYpGLY0MYMzHGZ9pf2w/aN9p32ZfYZ/X0lWTMDtHn431a5jIX6VBGY7dgGgWRFniWsq8eTEL4VVnO2bLs8Zn+VqamwYlvbVJH2cWXhRRcXxsWYIZDHpPCgQ4/OabShBeJpiWpZz45pscDgS8Acta773kNe9Jrwjmw89rVtXFPuXSl5UTX+TwQ8+VBBri3dwnYySvrAg3vqmcaFnCp/14nxQMCoGxeMITSu+Dvz3428wJ+nWhZ6KuC10XOu3/0HWhk4I78Ot9Wzbc8aHxYdjJ97PZOdPe7R8e6vbPtPf1+9u7/EPDXXSH3P3d6SmjmpYy0p2Wl9eTljIC/uRoT3oe3zm3JxR1zj03sjc+4eDmtc3Hri5aqG/OrinMzWk34ssmjh1xdl648NS4CE/4quKhNUULfWE5tQXpGd1GejXqWKG5raQ0tTf2adepn53acH5nQq62rbTwiO+O+LCyos1hYQWbwssSE8MrCsM2hxVtDitL4hv3Ia3M9PkqTFOrqzO1CtPnqzKPaPWb9hRuDCtPqW3Qs7Pr9NraGj0b4B5vkwVnTcmu/O652b+7JemrrOZbV173lDvz3SWpL/3/8f+3eF6Wi+5BVLz90n307Xnw/4//Tve8fGsKLuE3RvsBUokLKJHms0HsJUm8mnXiQdbX9OfidGaxHWc7SP0X3Qzd5ITsYSt+XgyJgMqNRGQOlxKJXHoG5XLiQKFJeAORVFiYQyp85Ajb2c4028gkjji20c9WRplmO9uIZRujTBCLwVaGiaMWjSrqMJiGhVGmmENjaGSQSUYpxGCCAZKJJZ54kilHf2WjslBbhFYFbGv1e32k08Agw+xggl62tkVRGfbMHcOr6qokEm+Op6IzwuAM9DpkNRhjkP7a1gJ2sJ2R1Qplw8P3pzTMqDx7B33E0o/BJHHpwhAGa55igK3sgS7jIOJ34nkv+y4S0QA=) format('woff2');
}

#loading-bg {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #F7F5F2);
}

/*
 * ---------------------------------------------------------------------------
 * Timing scale
 * ---------------------------------------------------------------------------
 * A marca e o Lottie oficial (foodos-splash.json), carregado e recortado por
 * src/splash.ts via lottie-web (build "light", SVG-only). O proprio Lottie
 * original demora ~3200ms (frame 0 -> 96 @30fps) so para desenhar a marca;
 * src/splash.ts acelera a reproducao (setSpeed) para caber no orcamento de
 * 900ms * --splash-scale abaixo. A duracao real da marca agora e ditada pelo
 * Lottie (evento 'complete'), nao por este delay em CSS: o wordmark comeca
 * escondido (opacity: 0) e so anima quando main.ts adiciona a classe
 * `.foodos-wordmark-in`, apos receber o sinal splashMarkDone de src/splash.ts.
 * --splash-scale continua controlando a velocidade da reproducao do Lottie
 * (ver src/splash.ts) e a duracao da propria animacao do wordmark abaixo.
 */
:root {
  --splash-scale: 0.833;
}

.foodos-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/*
 * Symbol size e derivado do tamanho do wordmark usando a mesma proporcao ja
 * calibrada visualmente (~3.395:1 altura). O width segue o aspect ratio do
 * recorte usado em src/splash.ts (viewBox "872 221 176 465" no espaco global
 * do stage do Lottie -> 176/465 ~= 0.3785), calculado a partir do bbox real
 * das layers fork/circuit/node (com margem para o stroke). clamp()/vmin
 * mantem responsivo.
 */
.foodos-wordmark {
  --foodos-wordmark-size: clamp(1.125rem, 4.5vmin, 1.75rem);
}

.foodos-mark {
  height: calc(var(--foodos-wordmark-size, clamp(1.125rem, 4.5vmin, 1.75rem)) * 3.395);
  width: calc(calc(var(--foodos-wordmark-size, clamp(1.125rem, 4.5vmin, 1.75rem)) * 3.395) * 0.3785);
}

/* o SVG injetado pelo lottie-web deve preencher o container responsivo acima */
.foodos-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * wordmark: comeca escondido e so anima quando main.ts adiciona a classe
 * `.foodos-wordmark-in` (apos o sinal splashMarkDone de src/splash.ts
 * confirmar que a marca terminou). Sem delay fixo: o gatilho e o evento, nao
 * o tempo decorrido.
 */
.foodos-wordmark {
  font-family: 'FoodOS Wordmark', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--foodos-wordmark-size);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--initial-loader-fg, #0F172A);
  opacity: 0;
  transform: translateY(0.2em);
}

.foodos-wordmark.foodos-wordmark-in {
  animation: foodos-fade-up calc(900ms * var(--splash-scale)) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes foodos-fade-up {
  0% {
    opacity: 0;
    transform: translateY(0.2em);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fade-out do splash completo, disparado por main.ts apos o tempo minimo de exibicao */
#loading-bg.foodos-splash-hiding {
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease-out;
}

/*
 * prefers-reduced-motion: a marca em si nao tem animacao CSS (e o SVG
 * desenhado pelo lottie-web) - src/splash.ts detecta a preferencia e chama
 * `goToAndStop` no ultimo frame da marca em vez de reproduzir a animacao.
 * Aqui so precisamos neutralizar o fade-up do wordmark.
 */
@media (prefers-reduced-motion: reduce) {
  .foodos-wordmark {
    transform: none;
  }

  .foodos-wordmark.foodos-wordmark-in {
    animation: foodos-static-fade 280ms ease-out forwards;
  }

  @keyframes foodos-static-fade {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}