/* =========================================================================
   SURPRESA EXCLUSIVA (raspadinha de cupons)
   Botão flutuante no rodapé + modal do presente com 4 cartelas pra raspar.
   A marcação está em /components/surprise-gift.html e a raspadinha em
   /scripts/surprise-gift.js.

   Pra mudar o amarelo do bloco inteiro, mexa só nas variáveis --sg-* abaixo.

   A imagem do presente (--sg-gift) fica em surprise-gift-icon.css, que é só
   ela em base64 — assim este arquivo continua legível.
   ========================================================================= */
.sg {
  /* A cor da loja manda no bloco inteiro: só --sg-cor vem de fora, e os
     outros três são ela mesma clareada ou escurecida. Assim não existe um
     segundo tom cadastrado na mão pra alguém esquecer de trocar junto
     quando a loja mudar de cor. */
  --sg-cor: hsl(var(--primary));
  --sg-cor-clara: color-mix(in srgb, hsl(var(--primary)) 42%, #fff);   /* o claro do degradê */
  --sg-cor-funda: color-mix(in srgb, hsl(var(--primary)) 82%, #000);   /* o fundo do degradê / sombra */
  --sg-cor-escura: color-mix(in srgb, hsl(var(--primary)) 55%, #000);  /* fundo do círculo do presente */

  /* Preto ou branco, o que tiver contraste em cima da cor da loja — é o
     mesmo truque que o styles/core.css usa nos botões. Com o ciano claro
     daqui ele resolve pra preto; numa loja de cor escura viraria branco
     sozinho. */
  --sg-ink: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);

  /* Quanto girar o matiz da fita do presente (amarelo ~55°) pra ela cair na
     cor da loja. Mudou a cor da loja? Ajuste aqui: giro = matiz nova − 55. */
  --sg-gift-giro: 118deg;
}

/* ---- botão flutuante ----------------------------------------------------
   A forma é a mesma da referência: barra em pílula e o círculo do presente
   maior que ela, transbordando pela esquerda e pra fora em cima e embaixo.
   -------------------------------------------------------------------------- */
.sg-fab {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  translate: -50% 0;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 2.15rem 0 4.5rem;   /* o vão da esquerda é onde o círculo entra */
  border-radius: 999px;
  border: 2px solid hsl(var(--primary) / .55);
  background: linear-gradient(180deg, var(--sg-cor-clara), var(--sg-cor) 48%, var(--sg-cor-funda));
  color: var(--sg-ink);
  /* a Montserrat itálica é carregada na home (pages/index.html), onde o
     botão vive; a Kanit fica de reserva caso ela não chegue a tempo */
  font-family: 'Montserrat', 'Kanit', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .8);
  animation: sgPulse 2.8s ease-in-out infinite;
}
.sg-fab:hover { animation: none; transform: scale(1.05); }
.sg-fab:active { transform: scale(.97); }

/* O botão nasce escondido de propósito. O CSS entra antes do HTML, mas o
   script só carrega no fim da página: sem isso ele aparecia todo pintado por
   um instante e sumia no F5 de quem já pegou o cupom, que é a hora em que
   o JS tira a surpresa do ar. Quem destrava é o `is-pronto`, posto lá no fim
   da inicialização, depois de o script confirmar que ainda há rodada. */
.sg:not(.is-pronto) .sg-fab { display: none; }

/* enquanto o botão está contando o tempo da próxima rodada ele para de pulsar
   e fica mais discreto — chamar atenção só faz sentido quando dá pra jogar */
.sg.is-esperando .sg-fab {
  animation: none;
  filter: saturate(.55);
}

@keyframes sgPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* o pulso do celular é mais forte que o do desktop porque ali sobrou só o
   círculo: junto com a escala sai um anel amarelo que se abre e some */
@keyframes sgPulseMobile {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 hsl(var(--primary) / .5); }
  50%      { transform: scale(1.09); box-shadow: 0 0 0 .6rem hsl(var(--primary) / 0); }
}

.sg-fab__icon {
  position: absolute;
  left: -.5rem;
  top: 50%;
  translate: 0 -50%;
  width: 4.3rem;
  height: 4.3rem;
  border-radius: 999px;
  background: var(--sg-cor-escura);
  border: 2px solid var(--sg-cor);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .55), inset 0 -3px 10px rgb(0 0 0 / .45);
}
/* A fita do presente é uma imagem, então não obedece às variáveis de cor:
   quem pinta ela de ciano é o giro de matiz. Ele mora num ::after e não no
   elemento porque o filtro pegaria também o círculo e a borda — e o círculo
   viraria roxo. A caixa branca não se mexe: hue-rotate só desloca o que tem
   saturação. */
.sg-fab__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sg-gift) center / 68% auto no-repeat;
  filter: hue-rotate(var(--sg-gift-giro));
}

/* os confetes caem por cima de tudo, inclusive do modal, e não atrapalham
   clique nenhum — o canvas é criado e removido pelo JS */
.sg-confete {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

/* ---- modal -------------------------------------------------------------- */
.sg-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  /* "safe" evita cortar o topo do modal em tela baixa; quem rola é o overlay,
     senão o selo "Parabéns" (que fica pra fora da caixa) seria cortado */
  align-items: safe center;
  overflow-y: auto;
  padding: 2rem 1.25rem;
  background: rgba(6, 7, 10, .74);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.sg[data-state="open"] .sg-overlay { opacity: 1; visibility: visible; }

.sg-modal {
  position: relative;
  width: min(27rem, 100%);
  padding: 2.4rem 1.35rem 1.5rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, .6);
  background: linear-gradient(180deg, var(--sg-cor-clara), var(--sg-cor) 45%, var(--sg-cor-funda));
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .8);
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .32s cubic-bezier(.22, 1.2, .36, 1), transform .32s cubic-bezier(.22, 1.2, .36, 1);
}
.sg[data-state="open"] .sg-modal { opacity: 1; transform: none; }

.sg-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(19, 19, 22, .12);
  color: var(--sg-ink);
  cursor: pointer;
  transition: background .18s;
}
.sg-close:hover { background: rgba(19, 19, 22, .25); }
.sg-close svg { width: 1.05rem; height: 1.05rem; }

.sg-badge {
  position: absolute;
  top: -.9rem;
  left: 50%;
  translate: -50% 0;
  padding: .45rem 1.6rem;
  border-radius: 999px;
  background: #131316;
  border: 1px solid hsl(var(--primary) / .5);
  color: var(--sg-cor);
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.sg-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  line-height: .98;
  text-align: center;
  color: var(--sg-ink);
}
.sg-title span { display: block; }
.sg-title__alt {
  font-style: italic;
  font-size: .88em;
  opacity: .82;
}

.sg-sub {
  margin-top: .5rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 600;
  color: rgb(0 0 0 / .68);
}

/* ---- presente aberto + cupons ------------------------------------------- */
.sg-gift { position: relative; margin-top: .9rem; }

.sg-gift__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 6.5rem;
  margin-bottom: -.85rem;
}
.sg-gift__art::before {
  content: '';
  position: absolute;
  width: 11rem;
  height: 6rem;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .85), transparent 75%);
  filter: blur(8px);
}
.sg-gift__art i {
  position: relative;
  width: 6.5rem;
  height: 6.5rem;
  background: var(--sg-gift) center / contain no-repeat;
  filter: hue-rotate(var(--sg-gift-giro)) drop-shadow(0 12px 18px rgb(0 0 0 / .35));
  animation: sgFloat 3.4s ease-in-out infinite;
}
@keyframes sgFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-.5rem) rotate(2deg); }
}

/* ---- o tabuleiro de 4 cartelas ------------------------------------------ */
/* 2x2 em vez de 4 em fila: com 4 lado a lado cada cartela ficaria com ~70px
   no celular, e não sobra espaço pra arrastar o dedo e raspar direito */
.sg-cartelas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}

.sg-cartela {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / .62;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(140deg, #1b1c22, #101014);
  box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .95);
  transition: border-color .3s, box-shadow .3s, transform .2s;
}

/* a que tinha o cupom ganha destaque quando abre */
.sg-cartela.is-premio.is-aberta {
  border-color: hsl(var(--primary) / .55);
  box-shadow: 0 12px 30px -12px hsl(var(--primary) / .6);
}

.sg-cartela__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  padding: .3rem;
  text-align: center;
}

.sg-cartela__off {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sg-cor);
}
.sg-cartela__tag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: hsl(var(--primary) / .75);
}

/* o "?" que fica embaixo da camada antes de abrir — igual nas 4, pra quem
   raspa de leve só pra espiar não descobrir onde está o prêmio */
.sg-cartela__oculto {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: rgba(255, 255, 255, .13);
}

/* as vazias ficam apagadas de propósito, pra o prêmio saltar */
.sg-cartela__vazio {
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .22);
}
.sg-cartela__vazio + .sg-cartela__tag {
  color: rgba(255, 255, 255, .28);
}

.sg-cartela__raspa {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  transition: opacity .45s ease;
}
.sg-cartela__raspa:active { cursor: grabbing; }
.sg-cartela.is-aberta .sg-cartela__raspa { opacity: 0; pointer-events: none; }

/* durante a espera dá pra ver que não adianta insistir */
.sg-cartelas.is-travado .sg-cartela__raspa { cursor: not-allowed; filter: saturate(.35); }

/* ---- linha de status ---------------------------------------------------- */
.sg-status {
  margin-top: .7rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: rgb(0 0 0 / .72);
  min-height: 1.1rem;
}
.sg-status b { color: var(--sg-ink); }

/* ---- a faixa do cupom ganho --------------------------------------------- */
.sg-premio {
  margin-top: .55rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .85rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(135deg, #1b1c22, #101014);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .95);
  cursor: pointer;
  text-align: left;
}
.sg-premio[hidden] { display: none; }

.sg-premio__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.sg-premio__code {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: var(--sg-cor);
}
.sg-premio__copy {
  margin-left: auto;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: .55rem;
  background: hsl(var(--primary) / .12);
  color: var(--sg-cor);
}
.sg-premio__copy svg { width: .95rem; height: .95rem; }
.sg-premio:hover .sg-premio__copy { background: hsl(var(--primary) / .28); }


/* ---- botão resgatar ----------------------------------------------------- */
.sg-cta {
  margin-top: 1.1rem;
  width: 100%;
  height: 3.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .8);
  background: linear-gradient(180deg, #ffffff, var(--sg-cor-clara) 55%, var(--sg-cor));
  color: var(--sg-ink);
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 14px 26px -14px rgb(0 0 0 / .55), inset 0 1px 0 #fff;
  transition: transform .16s, box-shadow .16s;
}
.sg-cta:hover { transform: translateY(-2px); }
.sg-cta:active { transform: translateY(0); }

.sg-shake { animation: sgShake .4s ease; }
@keyframes sgShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* mobile: só o círculo do presente no canto e modal mais compacto */
@media (max-width: 640px) {
  /* no celular a pílula inteira vira só o círculo do presente, encostado no
     canto inferior direito. O rótulo (e a contagem que o JS escreve nele) sai
     de cena: a barra deitada no meio da tela tapava metade dos produtos. */
  .sg-fab {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    translate: none;
    width: 3.35rem;
    height: 3.35rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    animation: sgPulseMobile 2s ease-in-out infinite;
  }
  /* o toque deixa o :hover grudado em muito celular; sem isto o pulso morria
     depois do primeiro clique */
  .sg-fab:hover { animation: sgPulseMobile 2s ease-in-out infinite; transform: none; }

  /* escondido do olho, não do leitor de tela: é o texto deste span que dá
     nome ao botão. Com `display: none` ele viraria um botão sem rótulo. */
  .sg-fab__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sg-fab__icon {
    position: static;
    translate: none;
    width: 100%;
    height: 100%;
    background-size: 62% auto;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .7), inset 0 -3px 10px rgb(0 0 0 / .45);
  }

  .sg-modal { padding: 2.1rem 1rem 1.25rem; border-radius: 1.5rem; }
  .sg-gift__art { height: 5.25rem; }
  .sg-gift__art i { width: 5.25rem; height: 5.25rem; }
  .sg-cartelas { gap: .45rem; }
  .sg-cartela { border-radius: .85rem; }
  .sg-cartela__off { font-size: 1.45rem; }
  .sg-cartela__vazio { font-size: 1.25rem; }
  .sg-cartela__tag { font-size: .55rem; }
  .sg-status { font-size: .72rem; }
  .sg-premio__code { font-size: 1rem; }
  .sg-cta { height: 2.85rem; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-fab, .sg-gift__art i { animation: none; }
}