/* =========================================================================
   Banner de combos da home — components/combo-promo.html

   Mesma família visual do banner "Monte seu pack" (.pack-hero-banner no
   core.css), mas inteiro na cor da loja (--primary) em vez do verde fixo do
   pack — pra ficar visualmente distinto e ainda dentro da identidade.
   ========================================================================= */

/* Mesmo truque do .pack-hero-banner: grid de uma célula só, com o slideshow,
   os véus e o conteúdo empilhados na MESMA área. É isso que deixa o texto em
   cima das imagens sem ninguém precisar ser position:absolute — e é também o
   que reaproveita o .pack-hero-slides / .pack-hero-bg do core.css sem
   reescrever nada. */
.cb-promo-banner {
  position: relative;
  display: grid;
  grid-template: 1fr / 1fr;
  isolation: isolate;
  min-height: 300px;
  background-color: rgb(12, 12, 15);
}
@media (min-width: 768px) {
  .cb-promo-banner { min-height: 340px; }
}

.cb-promo-banner > .pack-hero-slides,
.cb-promo-bg-scrim,
.cb-promo-content {
  grid-area: 1 / 1;
}

/* Véu sobre o slideshow: o gradiente da esquerda segura o texto legível, o
   de baixo assenta o rodapé. */
.cb-promo-bg-scrim {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgb(var(--background)) 0%,
      rgb(var(--background) / .92) 32%,
      rgb(var(--background) / .55) 60%,
      rgb(var(--background) / .15) 100%),
    linear-gradient(0deg,
      rgb(var(--background) / .55) 0%,
      transparent 50%);
}

.cb-promo-glow {
  position: absolute;
  top: -6rem;
  right: -4rem;
  z-index: 2;
  width: 24rem;
  height: 24rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / .22);
  filter: blur(70px);
  pointer-events: none;
}

.cb-promo-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--primary) / .4);
  background: hsl(var(--primary) / .12);
  color: hsl(var(--primary));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.cb-promo-kicker svg { width: .95rem; height: .95rem; }

/* O "30% OFF" do título. Gradiente na cor da loja, clareando pro meio, pra
   destacar do branco do resto da frase sem virar outra cor. */
.cb-promo-grad {
  background: linear-gradient(95deg, hsl(var(--primary)) 0%, hsl(var(--primary) / .75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cb-promo-cta {
  background: hsl(var(--primary));
  color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
  box-shadow: 0 10px 30px -8px hsl(var(--primary) / .6);
  transition: box-shadow .2s ease, transform .18s ease, filter .2s ease;
}
.cb-promo-cta svg { transition: translate .2s ease; }
.cb-promo-cta:hover {
  box-shadow: 0 14px 36px -6px hsl(var(--primary) / .8);
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.cb-promo-cta:hover svg { translate: 3px 0; }

/* =========================================================================
   PILHA DE CAPAS (lado direito) — cinco capas em cascata

   A pilha NÃO pode aumentar a altura do banner. Quem define a altura que o
   layout enxerga é só o `height` do .cb-deck: as capas são position:absolute
   e não entram nessa conta. Por isso a caixa fica travada em 280px e as
   capas crescem à vontade dentro dela (e, se passarem, caem no padding de
   2.5rem do banner, que já está lá vazio).
   ========================================================================= */

/* O texto do lado para de crescer no max-w-xl, então sobra um vão à direita.
   Este flex:1 toma o vão inteiro e o place-items centra a pilha DENTRO dele
   — é o que a deixa na direita, porém puxada pro meio, em vez de colada na
   borda. O display vem do .lg:grid no HTML, pra ela não nascer em tela
   estreita (tem largura fixa). */
.cb-deck-wrap {
  flex: 1;
  place-items: center;
  min-width: 0;
}

.cb-deck {
  position: relative;
  width: 420px;
  height: 280px;
}

.cb-deck__covers { position: absolute; inset: 0; }

/* aspect-ratio 2/3 = o formato nativo da arte da Steam (library_600x900),
   então a capa aparece inteira em vez de cortada em cima e embaixo. */
.cb-deck__covers img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .85rem;
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow: 0 24px 45px -18px rgb(0 0 0 / .95);
  /* a flutuação usa `translate`, separado do `transform` que posiciona a
     capa — as duas se somam sem uma sobrescrever a outra */
  animation: cb-deck-float 7s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
}

@keyframes cb-deck-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* Cascata: a primeira capa é a do fundo (menor, mais escura, mais girada) e
   a última é a da frente (tamanho cheio, reta, nítida). Escala + brilho +
   giro crescem juntos — é a combinação dos três que dá profundidade; só
   deslocar de lado deixa a pilha chapada.
   O atraso da transição é maior nas de trás, então no hover a pilha abre em
   cascata a partir da frente, e não tudo de uma vez. */
.cb-deck__covers img:nth-child(1) {
  transform: translate(-50%, -50%) translate(-116px, -18px) rotate(-9deg) scale(.86);
  filter: brightness(.55); z-index: 1;
  animation-delay: 0s; transition-delay: .16s;
}
.cb-deck__covers img:nth-child(2) {
  transform: translate(-50%, -50%) translate(-58px, -13px) rotate(-6.5deg) scale(.9);
  filter: brightness(.65); z-index: 2;
  animation-delay: .5s; transition-delay: .12s;
}
.cb-deck__covers img:nth-child(3) {
  transform: translate(-50%, -50%) translate(0, -8px) rotate(-4deg) scale(.94);
  filter: brightness(.75); z-index: 3;
  animation-delay: 1s; transition-delay: .08s;
}
.cb-deck__covers img:nth-child(4) {
  transform: translate(-50%, -50%) translate(58px, -4px) rotate(-2deg) scale(.97);
  filter: brightness(.87); z-index: 4;
  animation-delay: 1.5s; transition-delay: .04s;
}
.cb-deck__covers img:nth-child(5) {
  transform: translate(-50%, -50%) translate(116px, 0) rotate(0deg) scale(1);
  z-index: 5;
  animation-delay: 2s; transition-delay: 0s;
}

/* O gatilho é a PRÓPRIA pilha (.cb-deck), não o banner: passar o mouse no
   texto ou no botão não mexe nas capas. Ao abrir, todas acendem no brilho
   cheio — é o momento em que dá pra ver quais jogos são. */
.cb-deck:hover .cb-deck__covers img { filter: brightness(1); }
.cb-deck:hover .cb-deck__covers img:nth-child(1) { transform: translate(-50%, -50%) translate(-168px, -14px) rotate(-12deg) scale(.9); }
.cb-deck:hover .cb-deck__covers img:nth-child(2) { transform: translate(-50%, -50%) translate(-84px, -10px) rotate(-8deg) scale(.93); }
.cb-deck:hover .cb-deck__covers img:nth-child(3) { transform: translate(-50%, -50%) translate(0, -6px) rotate(-4deg) scale(.96); }
.cb-deck:hover .cb-deck__covers img:nth-child(4) { transform: translate(-50%, -50%) translate(84px, -3px) rotate(0deg) scale(.99); }
.cb-deck:hover .cb-deck__covers img:nth-child(5) { transform: translate(-50%, -50%) translate(168px, -4px) rotate(3deg) scale(1.03); }

/* Selo redondo encostado na quina da capa da frente */
.cb-deck__badge {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: lch(from hsl(var(--primary)) calc((49.44 - l) * infinity) 0 0);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: 0 16px 34px -12px hsl(var(--primary) / .9);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.cb-deck:hover .cb-deck__badge { transform: scale(1.07) rotate(-6deg); }

/* ---- Pilha grande (>= 1280px) ----
   Capa de 150 -> 185px. A caixa NÃO cresce junto (continua 280px de altura),
   então o banner segue na mesma altura: 280 + 80 de padding = 360px. Capa de
   185px tem 277px de altura, ou seja ainda cabe dentro dos 280 — é o teto
   natural aqui.
   O passo lateral sobe junto (58 -> 68px): crescer só a capa faz as cinco se
   sobreporem, crescer só o passo abre buraco no meio da pilha.

   Por que só a partir de 1280px: o texto ao lado trava em max-w-xl (576px),
   então 576 + 32 de gap + 500 da pilha = 1108px. Em 1024px o container tem
   ~992px e o texto ficaria espremido, quebrando o título em pedaços. De lg
   até aqui a pilha fica no tamanho base, que cabe. */
@media (min-width: 1280px) {
  .cb-deck { width: 500px; height: 280px; }
  .cb-deck__covers img { width: 185px; }

  .cb-deck__covers img:nth-child(1) { transform: translate(-50%, -50%) translate(-136px, -20px) rotate(-9deg) scale(.86); }
  .cb-deck__covers img:nth-child(2) { transform: translate(-50%, -50%) translate(-68px, -15px) rotate(-6.5deg) scale(.9); }
  .cb-deck__covers img:nth-child(3) { transform: translate(-50%, -50%) translate(0, -9px) rotate(-4deg) scale(.94); }
  .cb-deck__covers img:nth-child(4) { transform: translate(-50%, -50%) translate(68px, -4px) rotate(-2deg) scale(.97); }
  .cb-deck__covers img:nth-child(5) { transform: translate(-50%, -50%) translate(136px, 0) rotate(0deg) scale(1); }

  .cb-deck:hover .cb-deck__covers img:nth-child(1) { transform: translate(-50%, -50%) translate(-196px, -16px) rotate(-12deg) scale(.9); }
  .cb-deck:hover .cb-deck__covers img:nth-child(2) { transform: translate(-50%, -50%) translate(-98px, -11px) rotate(-8deg) scale(.93); }
  .cb-deck:hover .cb-deck__covers img:nth-child(3) { transform: translate(-50%, -50%) translate(0, -7px) rotate(-4deg) scale(.96); }
  .cb-deck:hover .cb-deck__covers img:nth-child(4) { transform: translate(-50%, -50%) translate(98px, -3px) rotate(0deg) scale(.99); }
  .cb-deck:hover .cb-deck__covers img:nth-child(5) { transform: translate(-50%, -50%) translate(196px, -5px) rotate(3deg) scale(1.03); }

  .cb-deck__badge { width: 5rem; height: 5rem; font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* corta só a flutuação contínua. A abertura no hover continua: ela é
     resposta a uma ação da pessoa, não movimento perpétuo na tela. */
  .cb-deck__covers img { animation: none; }
}