/* Croki's — página de contagem regressiva
   Mobile-first: base ~375px · tablet 768px · desktop 1024px */

:root {
  --rosa: #D42E60;
  --rosa-claro: #E5507F;
  --rosa-escuro: #B81F4F;
  --rosa-texto: #FFE3EC;
  --branco: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--branco);
  background: var(--rosa);
  -webkit-font-smoothing: antialiased;
}

.tela {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 28px;
  text-align: center;
  background: radial-gradient(120% 70% at 50% 36%, var(--rosa-claro) 0%, var(--rosa) 50%, var(--rosa-escuro) 100%);
}

.chamada {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rosa-texto);
}

.logo { margin: 14px 0 0; line-height: 0; }
.logo img { width: 230px; height: auto; display: block; }

/* ---------- Animação ---------- */
.cena { margin-top: 22px; width: 280px; max-width: 100%; }
.cena svg { width: 100%; height: auto; display: block; }

.tigela { animation: balanca 2.4s ease-in-out infinite; transform-origin: 140px 220px; }
.gira { animation: gira 2.4s linear infinite; transform-origin: 0 0; }
.colher { animation: mexe 2.4s linear infinite; transform-origin: 150px 116px; }
.r1 { animation: respingo 2.4s ease-out infinite; }
.r2 { animation: respingo 2.4s ease-out infinite; animation-delay: 1.2s; }

@keyframes gira { to { transform: rotate(360deg); } }
@keyframes mexe {
  0%   { transform: translate(26px, 0) rotate(6deg); }
  25%  { transform: translate(0, 7px) rotate(0deg); }
  50%  { transform: translate(-26px, 0) rotate(-6deg); }
  75%  { transform: translate(0, -6px) rotate(0deg); }
  100% { transform: translate(26px, 0) rotate(6deg); }
}
@keyframes respingo {
  0%, 70% { transform: translateY(0); opacity: 0; }
  78%     { opacity: 1; }
  100%    { transform: translateY(-16px); opacity: 0; }
}
@keyframes balanca { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

/* ---------- Barra de carregamento ---------- */
.carregando { width: 220px; margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.carregando__trilho { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.carregando__barra { height: 100%; border-radius: 4px; background: var(--branco); animation: barra 4.8s ease-out infinite; }
.carregando span { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: var(--rosa-texto); }
@keyframes barra { 0% { width: 6%; } 90% { width: 100%; } 100% { width: 6%; } }

/* ---------- Contador ---------- */
.contador {
  margin-top: 26px;
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.contador__bloco {
  padding: 14px 4px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.contador__bloco strong { font-weight: 700; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.contador__bloco span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-texto); }

.chegou { margin: 26px 0 0; font-weight: 700; font-size: 32px; }

.texto { margin: 18px 0 28px; font-size: 16px; line-height: 1.45; color: #FFEFF4; }
.texto strong { color: var(--branco); }

/* ---------- Botão e rodapé ---------- */
.botao {
  margin-top: auto;
  align-self: stretch;
  min-height: 56px;
  border-radius: 28px;
  background: var(--branco);
  color: var(--rosa-escuro);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 0 10px 26px rgba(122, 16, 51, .3);
  transition: transform .15s ease;
}
.botao:active { transform: scale(.98); }
.botao:focus-visible { outline: 3px solid var(--rosa-texto); outline-offset: 3px; }
.rodape { margin-top: 14px; font-size: 13px; color: var(--rosa-texto); }

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .tela { justify-content: center; padding: 40px 24px 32px; }
  .logo img { width: 300px; }
  .cena { width: min(340px, 34vh); }
  .carregando { width: 260px; }
  .contador__bloco strong { font-size: 44px; }
  .botao { margin-top: 32px; align-self: center; padding: 0 36px; }
  .texto { font-size: 18px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .logo img { width: min(340px, 36vh); }
  .cena { width: min(380px, 34vh); }
  .contador { max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .tigela, .gira, .colher, .r1, .r2, .carregando__barra { animation: none; }
}