/* ==========================================================================
   Acelera Burguer — Friboi
   Apresentação em sequência de frames com scrub por scroll
   Palco de referência: 1920 x 1080 (todas as medidas em px desse palco)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonte: Source Sans 3 (SIL OFL). É o parente próximo da Myriad Pro usada na
   arte original e vai embutida no projeto — assim a apresentação renderiza
   igual em qualquer máquina, com ou sem internet.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:400;
  font-display:block; src:url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:600;
  font-display:block; src:url("../fonts/source-sans-3-600.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:700;
  font-display:block; src:url("../fonts/source-sans-3-700.woff2") format("woff2");
}
@font-face{
  font-family:"Source Sans 3"; font-style:normal; font-weight:800;
  font-display:block; src:url("../fonts/source-sans-3-800.woff2") format("woff2");
}

:root{
  /* cores amostradas dos próprios frames e da arte tela01 */
  --marrom-fundo:   #1a0c03;   /* letterbox fora do palco */
  --marrom-escuro:  #2d1604;
  --marrom-medio:   #4c2b1c;
  --marrom-claro:   #68361b;
  --laranja:        #fea60b;   /* laranja do logo "acelera" */
  --vermelho-friboi:#e11d25;
  --texto:          #f9f7f6;

  --fonte: "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui,
           -apple-system, sans-serif;

  --escala: 1;                 /* definido por JS: palco -> viewport */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; overflow:hidden; }

body{
  background:var(--marrom-fundo);
  color:var(--texto);
  font-family:var(--fonte);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
  touch-action:none;
  cursor:default;
}

img{ display:block; max-width:100%; }

/* ==========================================================================
   PALCO
   ========================================================================== */

.viewport{
  position:fixed; inset:0;
  overflow:hidden;
}

/* Preenche a tela inteira quando a proporção do monitor não é 16:9. É uma
   versão borrada do próprio frame, então o que sobra das bordas continua o
   marrom da cena em vez de virar tarja. */
.backdrop{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:scale(1.25);
  filter:blur(34px) brightness(.88) saturate(1.02);
  z-index:0;
}

/* Centralização por posicionamento absoluto, e não por grid/flex: quando o
   item é MAIOR que o container, `place-items:center` degrada para `start`
   (comportamento "safe" do CSS) e o palco sairia deslocado. */
.stage{
  position:absolute; left:50%; top:50%;
  width:1920px; height:1080px;
  z-index:1;
  transform:translate(-50%,-50%) scale(var(--escala));
  transform-origin:center center;
  background:var(--marrom-escuro);
  /* o palco só aparece depois que o primeiro frame é desenhado */
  opacity:0; transition:opacity .5s ease;
}
.stage.pronto{ opacity:1; }

.film{
  position:absolute; inset:0;
  width:1920px; height:1080px;
  display:block;
}

.screens{ position:absolute; inset:0; pointer-events:none; }

/* ==========================================================================
   TELAS DE CONTEÚDO (overlay sobre o frame congelado)
   ========================================================================== */

.tela{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s;
}
.tela.ativa{ opacity:1; visibility:visible; }

/* elemento genérico posicionado em coordenadas do palco */
.el{
  position:absolute;
  opacity:0;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.tela.ativa .el{ opacity:1; transform:none !important; }

/* direções de entrada */
.el[data-anim="left"]  { transform:translateX(-70px); }
.el[data-anim="right"] { transform:translateX(70px);  }
.el[data-anim="up"]    { transform:translateY(40px);  }
.el[data-anim="down"]  { transform:translateY(-40px); }
.el[data-anim="scale"] { transform:scale(.88);        }
.el[data-anim="fade"]  { transform:none;              }

/* texto corrido das telas */
.el--texto{
  font-size:34px;
  line-height:40px;
  letter-spacing:.1px;
  color:var(--texto);
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}
.el--texto strong{ font-weight:700; }
.el--texto em{ font-style:normal; color:var(--laranja); }

/* Na arte original o bloco de texto dissolve na borda esquerda, onde encosta
   na sombra do burger. Reproduzido com máscara em degradê. */
.el--fade-esq{
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.58) 14%, rgba(0,0,0,.90) 30%, #000 44%);
          mask-image:linear-gradient(90deg,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.58) 14%, rgba(0,0,0,.90) 30%, #000 44%);
}

/* títulos / kickers reaproveitáveis nas próximas telas */
.el--titulo{
  font-size:78px; line-height:.94; font-weight:800;
  letter-spacing:-1.6px; text-transform:lowercase;
  text-shadow:0 4px 26px rgba(0,0,0,.5);
}
.el--kicker{
  font-size:20px; line-height:1.2; font-weight:700;
  letter-spacing:3.4px; text-transform:uppercase;
  color:var(--laranja);
}
/* Véu em degradê: dá contraste para o texto quando a cena não tem sobra
   livre (o burger em camadas, por exemplo, ocupa quase toda a largura). */
.el--painel{ pointer-events:none; }

/* --------------------------------------------------------------------------
   Grupos — um rótulo e uma linha de itens separados por bolinha.
   -------------------------------------------------------------------------- */
.grupo{ margin-bottom:26px; }
.grupo:last-child{ margin-bottom:0; }

.grupo__rotulo{
  display:block; margin-bottom:7px;
  font-size:15px; font-weight:700; letter-spacing:2.8px; text-transform:uppercase;
  color:var(--laranja);
}
.grupo__itens{
  font-size:19px; line-height:28px; color:rgba(255,255,255,.93);
  /* sombra forte: sem véu, o texto encosta no burger e precisa se destacar */
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.7);
  /* reparte as linhas em tamanhos parecidos em vez de largar um item sozinho
     na última linha */
  text-wrap:balance;
}
/* cada KPI é indivisível: a linha quebra entre itens, nunca no meio de um
   nome como "Mix de SKUs" ou "Custo por incremento" */
.grupo__itens span{ white-space:nowrap; }
.grupo__itens i{
  font-style:normal; color:var(--laranja); opacity:.75;
  margin-right:7px;
}

/* --------------------------------------------------------------------------
   Acordeão — só os títulos aparecem; clicar abre a explicação.
   É o único elemento clicável das telas, então precisa reativar os cliques
   (o overlay inteiro é pointer-events:none para não roubar o avanço).
   -------------------------------------------------------------------------- */
.el--acordeao{ pointer-events:auto; }

.acordeao__item{ border-top:1px solid rgba(255,255,255,.15); }
.acordeao__item:last-child{ border-bottom:1px solid rgba(255,255,255,.15); }

.acordeao__cabeca{
  display:flex; align-items:center; gap:14px;
  width:100%; padding:12px 2px;
  border:0; background:none; cursor:pointer;
  font-family:inherit; color:var(--texto); text-align:left;
  transition:color .2s;
}
.acordeao__cabeca:hover{ color:var(--laranja); }
.acordeao__cabeca:focus-visible{ outline:2px solid var(--laranja); outline-offset:2px; }

.acordeao__num{
  flex:none; width:26px;
  font-size:14px; font-weight:700; letter-spacing:1px;
  color:var(--laranja); font-variant-numeric:tabular-nums;
}
.acordeao__titulo{
  flex:1; font-size:23px; line-height:1.22; font-weight:600;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.7);
  text-wrap:balance;
}
.acordeao__seta{
  flex:none; width:17px; height:17px;
  fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.45; transition:transform .38s cubic-bezier(.22,.61,.36,1), opacity .2s;
}
.acordeao__cabeca:hover .acordeao__seta{ opacity:1; }
.acordeao__item.aberto .acordeao__seta{ transform:rotate(180deg); opacity:1; }
.acordeao__item.aberto .acordeao__titulo{ color:var(--laranja); }

/* grid-template-rows 0fr -> 1fr anima até a altura real do conteúdo,
   coisa que max-height não faz sem chutar um valor. */
.acordeao__corpo{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.acordeao__corpo > div{ overflow:hidden; }
.acordeao__corpo p{
  padding:0 2px 15px 40px;
  font-size:19px; line-height:27px; color:rgba(255,255,255,.82);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.acordeao__item.aberto .acordeao__corpo{ grid-template-rows:1fr; opacity:1; }

.el--lista{ font-size:30px; line-height:52px; list-style:none; }
.el--lista li{ position:relative; padding-left:34px; }
.el--lista li::before{
  content:""; position:absolute; left:0; top:23px;
  width:16px; height:3px; background:var(--laranja);
}

/* ==========================================================================
   CARREGAMENTO
   ========================================================================== */

.loader{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,
             var(--marrom-claro) 0%, var(--marrom-escuro) 62%, #200f03 100%);
  transition:opacity .6s ease, visibility .6s;
}
.loader.oculto{ opacity:0; visibility:hidden; }

.loader__inner{ display:grid; justify-items:center; gap:26px; }

.loader__logo{
  width:min(300px,52vw); height:auto;
  animation:pulsa 2.1s ease-in-out infinite;
}
@keyframes pulsa{ 0%,100%{opacity:.92} 50%{opacity:.55} }

.loader__bar{
  width:min(300px,52vw); height:3px; border-radius:3px;
  background:rgba(255,255,255,.16); overflow:hidden;
}
.loader__fill{
  display:block; height:100%; width:0%;
  background:var(--laranja);
  transition:width .25s ease;
}
.loader__pct{
  font-size:13px; letter-spacing:2.6px; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.loader__friboi{
  position:absolute; bottom:38px; left:50%; transform:translateX(-50%);
  width:96px; opacity:.85;
}

/* ==========================================================================
   INTERFACE
   ========================================================================== */

.ui{
  position:fixed; inset:auto 0 0 0; z-index:40;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:26px 30px;
  transition:opacity .4s ease;
}
.ui.escondida{ opacity:0; pointer-events:none; }

.ui__left{ display:flex; align-items:center; gap:16px; pointer-events:none; }
.ui__right{ display:flex; align-items:center; gap:10px; }

.counter{
  font-size:13px; letter-spacing:2px; color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}
.counter b{ color:var(--texto); font-weight:600; }
.counter i{ font-style:normal; margin:0 3px; opacity:.4; }

.dots{ display:flex; gap:7px; }
.dots span{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.22);
  transition:background .3s, transform .3s;
}
.dots span.on{ background:var(--laranja); transform:scale(1.25); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 15px;
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  background:rgba(28,14,5,.5); backdrop-filter:blur(9px);
  color:var(--texto); font-family:inherit; font-size:14px; font-weight:600;
  letter-spacing:.3px; cursor:pointer;
  transition:background .22s, border-color .22s, opacity .22s, transform .12s;
}
.btn:hover:not(:disabled){ background:rgba(60,30,10,.72); border-color:rgba(255,255,255,.38); }
.btn:active:not(:disabled){ transform:scale(.96); }
.btn:disabled{ opacity:.3; cursor:default; }
.btn:focus-visible{ outline:2px solid var(--laranja); outline-offset:3px; }

.btn svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.btn--icon{ width:44px; padding:0; justify-content:center; }

/* o ícone de som troca as ondas pelo X conforme o estado */
#btnSom .som-off{ display:none; }
#btnSom.mudo .som-on { display:none; }
#btnSom.mudo .som-off{ display:inline; }
#btnSom.mudo{ opacity:.55; }
.btn--next{
  background:var(--laranja); border-color:var(--laranja); color:#3a1c0b;
  padding:0 8px 0 19px;
}
.btn--next:hover:not(:disabled){
  background:#ffb734; border-color:#ffb734;
}

.scrollhint{
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%);
  display:flex; align-items:center; gap:11px;
  font-size:12px; letter-spacing:2.4px; text-transform:uppercase;
  color:rgba(255,255,255,.42); white-space:nowrap;
  transition:opacity .5s ease;
}
.scrollhint.oculta{ opacity:0; }
.scrollhint__wheel{
  width:19px; height:29px; border:1.5px solid rgba(255,255,255,.34);
  border-radius:11px; position:relative; flex:none;
}
.scrollhint__wheel i{
  position:absolute; left:50%; top:6px; margin-left:-1.5px;
  width:3px; height:6px; border-radius:2px; background:var(--laranja);
  animation:rola 1.7s ease-in-out infinite;
}
@keyframes rola{
  0%{ transform:translateY(0); opacity:0 }
  35%{ opacity:1 }
  100%{ transform:translateY(11px); opacity:0 }
}

.install{
  position:fixed; top:24px; right:26px; z-index:41;
  height:38px; padding:0 17px;
  border:1px solid rgba(255,255,255,.24); border-radius:999px;
  background:rgba(28,14,5,.55); backdrop-filter:blur(9px);
  color:var(--texto); font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:.3px; cursor:pointer; transition:background .22s;
}
.install:hover{ background:rgba(60,30,10,.75); }

/* indicador discreto de buffer quando a cena ainda não terminou de baixar */
.buffering{
  position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:45;
  width:26px; height:26px;
}
.buffering span{
  display:block; width:100%; height:100%; border-radius:50%;
  border:2px solid rgba(255,255,255,.2); border-top-color:var(--laranja);
  animation:gira .8s linear infinite;
}
@keyframes gira{ to{ transform:rotate(360deg) } }

/* ==========================================================================
   RESPONSIVO / ACESSIBILIDADE
   ========================================================================== */

@media (max-width:760px){
  .ui{ padding:18px 16px; }
  .btn--next span{ display:none; }
  .btn--next{ width:44px; padding:0; justify-content:center; }
  .scrollhint{ font-size:10px; letter-spacing:1.6px; bottom:74px; }
  .dots{ display:none; }
  .install{ top:14px; right:14px; height:34px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  .el{ transition-duration:.01ms !important; }
  .loader__logo,.scrollhint__wheel i{ animation:none; }
}