/* ===========================================================================
   FUNPLAY — APARÊNCIA
   A regra que manda aqui: o FUNDO DO SITE É A CENA 3D. Nenhum bloco tem cor
   própria; quem muda de cor é a cena, conforme a pessoa rola. Assim o brinquedo
   em 3D e o bloco de cor são a mesma coisa, e não duas camadas brigando.
   Tipografia: Anton nos títulos gigantes (condensada, caixa alta, com muito
   respiro entre letras) e Fredoka no resto — arredondada, de brinquedo.
   =========================================================================== */
:root{
  --amarelo:#FFD400; --coral:#FF4438; --azul:#2B54FF; --verde:#00D66B; --rosa:#FF56B0;
  --preto:#111111; --creme:#FFF6E8;
  --tinta:var(--preto);        /* cor do texto — o JavaScript troca por bloco */
  --contra:var(--creme);       /* cor de quem senta em cima da tinta */
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--amarelo); color:var(--tinta);
  font:400 17px/1.6 Fredoka,system-ui,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:color .5s ease;
}
a{color:inherit}
#palco{position:fixed;inset:0;z-index:0;display:block;touch-action:pan-y}
main,.topo{position:relative;z-index:2}

/* ---------------- barra ---------------- */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:18px;
  padding:14px clamp(16px,4vw,38px);
}
.marca{
  font:400 clamp(20px,2.4vw,26px)/1 Anton,system-ui,sans-serif;letter-spacing:.06em;
  text-decoration:none;display:flex;align-items:center;gap:10px;
}
.marca__olho{
  width:15px;height:15px;border-radius:50%;background:currentColor;flex:none;position:relative;
  animation:pisca 4.5s ease-in-out infinite;
}
@keyframes pisca{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.topo nav{margin-left:auto;display:flex;gap:4px}
.topo nav a{
  padding:9px 13px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:500;
  transition:background .2s,color .2s;
}
.topo nav a:hover,.topo nav a:focus-visible{background:var(--tinta);color:var(--contra)}
/* ---------------- menu do celular ----------------
   A ordem aqui importa: a regra base vem primeiro, a da tela estreita depois.
   E a folha precisa do seu proprio [hidden], senao a regra de display do autor
   passa por cima do padrao do navegador e o menu fica aberto o tempo todo -
   invisivel para os olhos, mas comendo todo clique e todo arraste da pagina. */
.menu-botao{
  display:none;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;
  border-radius:999px;border:3px solid var(--tinta);background:var(--tinta);color:var(--contra);
  font:500 15px/1 Fredoka,sans-serif;cursor:pointer;box-shadow:3px 3px 0 var(--tinta);
}
.menu-folha{
  position:fixed;inset:0;z-index:50;background:var(--tinta);color:var(--contra);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:clamp(24px,8vw,56px);
}
.menu-folha[hidden]{display:none}

@media (max-width:900px){
  .topo nav{display:none}
  .topo .botao--pequeno{display:none}
  .menu-botao{display:inline-flex;margin-left:auto}
}
.menu-folha nav{display:flex;flex-direction:column;gap:2px}
.menu-folha nav a{
  font:400 clamp(32px,10vw,56px)/1.1 Anton,system-ui,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;padding:5px 0;
}
.menu-folha nav a:active{transform:translateX(6px)}
.menu-folha .botao{
  align-self:flex-start;margin-top:26px;
  background:var(--contra);color:var(--tinta);border-color:var(--contra);box-shadow:5px 5px 0 var(--contra);
}
.menu-fechar{
  position:absolute;top:14px;right:clamp(16px,4vw,38px);
  width:48px;height:48px;border-radius:50%;border:3px solid var(--contra);
  background:transparent;color:var(--contra);font-size:19px;line-height:1;cursor:pointer;
}

/* ---------------- blocos ---------------- */
.bloco{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,14vh,150px) clamp(20px,5vw,38px) clamp(60px,10vh,110px);
  scroll-margin-top:70px;
}
.bloco--seis{touch-action:pan-y;justify-content:space-between;padding-top:clamp(84px,12vh,120px);padding-bottom:clamp(20px,4vh,40px)}
.bloco--fim{justify-content:space-between}
.dentro{width:100%;max-width:var(--max);margin:0 auto}
.dentro--meio{max-width:900px}
.dentro--centro{text-align:center}
.dentro--topo{
  flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:10px 44px;flex-wrap:wrap;
}
.dentro--topo .titulao{margin-bottom:0}
.dentro--topo .texto{max-width:34ch;margin-bottom:8px}
.dentro--contato{max-width:820px}

.etiqueta{
  font:500 14px/1 Fredoka,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  margin:0 0 18px;opacity:.85;
}

/* ---------------- os títulos gigantes ---------------- */
.titulao{
  font:400 clamp(48px,12vw,150px)/1.02 Anton,system-ui,sans-serif;
  letter-spacing:.005em;margin:0 0 26px;text-transform:uppercase;
}
.titulao span{display:block}
.titulao--medio{font-size:clamp(40px,8.4vw,104px)}
.titulao--pequeno{font-size:clamp(34px,6.4vw,76px);margin-bottom:16px}
.titulao__destaque{
  color:var(--contra);
  -webkit-text-stroke:2px var(--tinta);
  text-shadow:4px 4px 0 var(--tinta);
}

.frase{font-size:clamp(18px,2.3vw,23px);max-width:30ch;margin:0 0 34px;font-weight:500}

/* entrada da abertura: uma linha depois da outra, uma vez só, ao abrir o site */
.bloco--abertura .etiqueta{animation:entra .7s .05s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .titulao span:nth-child(1){animation:entra .8s .12s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .titulao span:nth-child(2){animation:entra .8s .22s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .titulao span:nth-child(3){animation:entra .8s .32s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .frase{animation:entra .8s .46s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .acoes{animation:entra .8s .58s both cubic-bezier(.2,.8,.2,1)}
.bloco--abertura .dica-rolar{animation:entra .8s .9s both ease-out}
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.texto{max-width:56ch;font-size:clamp(16.5px,1.9vw,19px)}
.texto p{margin:0 0 16px}
.texto strong{font-weight:600}
.texto--curto{max-width:46ch}
.texto--centro{margin-left:auto;margin-right:auto}

/* ---------------- botões ---------------- */
.acoes{display:flex;gap:12px;flex-wrap:wrap}
.acoes--centro{justify-content:center}
.botao{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:15px 30px;
  border-radius:999px;border:3px solid var(--tinta);background:var(--tinta);color:var(--contra);
  font:500 17px/1 Fredoka,sans-serif;text-decoration:none;cursor:pointer;
  box-shadow:5px 5px 0 var(--tinta);
  transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s;
}
.botao--vazado{background:transparent;color:var(--tinta)}
.botao--pequeno{min-height:44px;padding:10px 18px;font-size:15px;box-shadow:3px 3px 0 var(--tinta)}
.botao:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.botao:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--tinta)}
a:focus-visible,button:focus-visible{outline:3px solid var(--tinta);outline-offset:4px;border-radius:4px}
.topo nav a:focus-visible{outline-offset:2px}

.dica-rolar{
  margin:clamp(30px,6vh,60px) auto 0 0;font-size:14px;font-weight:500;opacity:.85;
  display:flex;align-items:center;gap:8px;
}
.dica-rolar span{display:inline-block;animation:desce 2s ease-in-out infinite;font-size:18px}
@keyframes desce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------------- faixa correndo ---------------- */
.faixa{
  position:relative;z-index:2;overflow:hidden;border-top:4px solid var(--tinta);border-bottom:4px solid var(--tinta);
  background:var(--tinta);color:var(--contra);padding:14px 0;
}
.faixa__trilho{display:flex;width:max-content;animation:corre 26s linear infinite}
.faixa__trilho span{
  font:400 clamp(26px,4vw,46px)/1 Anton,sans-serif;letter-spacing:.05em;white-space:nowrap;padding-right:24px;
}
/* quatro cópias e um passo de 25%: a fita nunca acaba, nem em tela larga */
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-25%)}}
.faixa--volta .faixa__trilho{animation-direction:reverse}

/* de onde veio o número: fica junto do número, pequeno */
.fonte{margin:14px 0 0;font-size:13.5px;opacity:.85}

/* ---------------- o palco dos seis brinquedos ---------------- */
.palcoinho{
  width:100%;max-width:var(--max);margin:0 auto;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.palcoinho__dica{
  margin:0;font-size:13.5px;font-weight:500;display:flex;gap:8px;align-items:center;color:var(--tinta);
  border:2px solid var(--tinta);border-radius:999px;padding:7px 15px;
}
.palcoinho__dica span{animation:vaivem 2.4s ease-in-out infinite}
@keyframes vaivem{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.palcoinho__legenda{
  background:var(--tinta);color:var(--contra);border-radius:20px;padding:18px 24px;max-width:540px;text-align:center;
}
.palcoinho__legenda b{display:block;font:400 clamp(22px,3vw,30px)/1.1 Anton,sans-serif;letter-spacing:.03em;margin-bottom:6px;text-transform:uppercase}
.palcoinho__legenda span{display:block;font-size:16px;line-height:1.5}
.palcoinho__pontos{display:flex;gap:0}
.palcoinho__pontos button{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;
}
.palcoinho__pontos button::before{
  content:"";width:15px;height:15px;border-radius:50%;border:3px solid var(--tinta);
  transition:background .2s,transform .2s;
}
.palcoinho__pontos button[aria-selected="true"]::before{background:var(--tinta);transform:scale(1.4)}

/* ---------------- placas de número ---------------- */
.placas{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.placas li{border:3px solid var(--tinta);border-radius:18px;padding:18px 20px;box-shadow:5px 5px 0 var(--tinta)}
.placas b{display:block;font:400 clamp(34px,4.4vw,46px)/1 Anton,sans-serif;margin-bottom:4px}
.placas span{font-size:14.5px;line-height:1.4;display:block}

/* ---------------- promessas ---------------- */
.promessas{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:0}
.promessas li{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-top:3px solid var(--tinta)}
.promessas li:last-child{border-bottom:3px solid var(--tinta)}
.promessas b{flex:0 0 min(34%,260px);font:400 clamp(19px,2.3vw,25px)/1.15 Anton,sans-serif;letter-spacing:.03em;text-transform:uppercase}
.promessas span{flex:1;min-width:0;font-size:16.5px}
@media (max-width:700px){.promessas li{flex-direction:column;gap:6px}.promessas b{flex:none}}

/* A VITRINE. Só existe no celular: é o buraco no meio do texto onde o brinquedo
   em 3D mora. Sem ela, numa tela estreita o brinquedo cai em cima da leitura. */
.vitrine{display:none}
@media (max-width:819.98px),(max-height:619.98px){
  .vitrine{display:block;height:clamp(150px,26vh,240px);margin:6px 0}
}

.rodape{margin-top:60px;text-align:center;font-size:14.5px;opacity:.85}

/* ---------------- entrada dos blocos ---------------- */
.surge{opacity:0;transform:translateY(34px)}
.surge.dentro-da-tela{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bloco--abertura *{animation:none !important}
  .surge,.surge.dentro-da-tela{opacity:1;transform:none;transition:none}
  .faixa__trilho,.dica-rolar span,.marca__olho,.cortina__marca,.cortina__barra i,.palcoinho__dica span{animation:none}
  .menu-folha nav a:active{transform:none}
  .botao{transition:none}
}

/* ---------------- cortina de entrada ---------------- */
.cortina{
  position:fixed;inset:0;z-index:60;background:var(--amarelo);color:var(--preto);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .55s ease,visibility .55s;
}
.cortina__marca{
  margin:0;font:400 clamp(40px,9vw,96px)/1 Anton,system-ui,sans-serif;letter-spacing:.06em;
  animation:respira 1.6s ease-in-out infinite;
}
@keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.cortina__barra{width:min(260px,54vw);height:8px;border:3px solid var(--preto);border-radius:999px;overflow:hidden}
.cortina__barra i{display:block;height:100%;width:30%;background:var(--preto);animation:carrega 1.1s ease-in-out infinite}
@keyframes carrega{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}
.cortina--fora{opacity:0;visibility:hidden;pointer-events:none}

/* ---------------- grão de papel impresso ---------------- */
.grao{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (max-width:820px){.grao{opacity:.09}}

/* ---------------- celular deitado ----------------
   Tela larga e baixa: o título gigante não cabe em pé. Aqui ele encolhe e o
   bloco aperta, para o texto e os botões caberem sem cortar. */
@media (max-height:619.98px) and (orientation:landscape){
  .bloco{padding-top:clamp(76px,16vh,92px);padding-bottom:26px}
  .titulao{font-size:clamp(30px,5.6vw,46px);margin-bottom:16px}
  .titulao--medio{font-size:clamp(26px,4.8vw,40px)}
  .titulao--pequeno{font-size:clamp(24px,4.2vw,34px)}
  .frase{font-size:15.5px;margin-bottom:18px}
  .texto{font-size:15.5px}
  .etiqueta{margin-bottom:10px}
  .dica-rolar{display:none}
  .botao{min-height:46px;padding:12px 22px;font-size:15px}
  .placas{margin-top:20px}
  .promessas li{padding:14px 0}
  .palcoinho__legenda{padding:12px 18px}
  .palcoinho__legenda span{font-size:14.5px}
}