/* ==========================================================================
   Nossos produtos: tema roxo + preto
   Efeitos inspirados na Cakto, reescritos para este projeto:
   - gradiente animado em canvas no fundo
   - título entrando palavra por palavra com blur
   - revelação dos banners ao rolar (blur + subida)
   - vidro fosco (backdrop-filter) e brilho que cruza o banner
   - halo pulsando atrás do título
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg: #020003;
  --txt: #f6f1ff;
  --txt2: #b3a3d1;

  --purple: #8b3dff;
  --purple-2: #a96bff;
  --purple-3: #6a1fe0;

  --paper: #0c0715b0;
  --line: #c9a8ff1f;
  --line2: #c9a8ff2e;
  --surface: linear-gradient(135deg, #7a5cc01c, #1a0d3a2e);
  --shadow: 0 24px 70px -30px #000a, inset 0 1px 0 #ffffff14;

  --radius: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);           /* a cor escura vale também onde não há conteúdo: nunca aparece fundo branco */
  overscroll-behavior-y: none;     /* sem "elástico" no topo/fim: ele deixava um vazio preto acima da barra roxa */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: none;                /* a cor escura vem do html; um fundo no body taparia as camadas do efeito (.bg e letras), que ficam com z-index negativo */
  color: var(--txt);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

h1, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ---------- Topbar de desconto ---------- */
/* Fonte da topbar do site andezinsensix.com (arquivo built-titling-bd.woff2, peso 600 a 900) */
@font-face {
  font-family: "Built Titling";
  src: url("../assets/fonts/built-titling-bd.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

.topbar {
  /* sem position: sticky de propósito: a barra fica no topo da página e rola junto com ela */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  padding: 9px 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #4a169a 0%, #6a1fe0 100%);   /* roxo da paleta da página (o do andezinsensix.com é vermelho: #ab0b26 → #cc0000) */
  color: #fff;
  font-family: "Built Titling", "Arial Narrow", sans-serif;
  font-size: clamp(17px, 6.4vw, 25px);   /* 25px como no site de referência; só encolhe em telas bem estreitas */
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: center;
  animation: topbar-in .7s var(--ease) both;
}

/* "SÓ HOJE" em amarelo, no meio do texto branco */
.topbar-hot { color: #ddce44; }


/* ---------- Fundo ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}

/* Aparece enquanto o canvas não carrega (e quando o JS está desligado) */
.bg-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, #7a2df02e, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 95%, #5a1fc01a, transparent 70%);
}

/* Manchas roxas animadas (canvas 2D desenhado pelo effects.js) */
.bg-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bg-gradient[data-ready="true"] { opacity: 1; }

/* Letras com glitch: zona só na parte de CIMA da página (rola junto com ela, não é fixa na tela).
   A altura (--glitch-h) é ajustada pelo effects.js até o começo do primeiro card, e um degradê (mask)
   faz as letras sumirem por completo antes dos cards, para não competir com eles.
   O JS cria o canvas dentro do #letter-glitch. */
.letter-glitch {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--glitch-h, 560px);
  z-index: -1;                     /* acima do .bg (vem depois no HTML), abaixo do conteúdo */
  overflow: hidden;
  pointer-events: none;
  /* Opacidade da camada inteira (letras paradas + clarões do glitch): quanto menor, menos o fundo
     compete com o conteúdo. 1 = força total, 0 = invisível. */
  opacity: .5;
  /* degradê: letras inteiras no topo; a partir de 45% da altura vão sumindo até 0 no fim da zona */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
.letter-glitch-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Escurece as bordas e o rodapé das manchas roxas: o preto domina, o roxo fica como luz. */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 15%, transparent 20%, #020003e6 100%),
    linear-gradient(to bottom, transparent 40%, var(--bg) 100%);
  pointer-events: none;
}

/* ---------- Layout ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(28px, 6vh, 64px) 20px 96px;
  overflow-x: clip;                /* o halo e as luzes animadas nunca alargam a página */
}

/* ---------- Título ---------- */
.hero {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: clamp(36px, 7vh, 64px);
}

/* Logotipo no topo */
.logo-wrap {
  display: flex;
  justify-content: center;
}
.logo {
  display: block;
  width: clamp(170px, 50vw, 260px);
  height: auto;
  filter: drop-shadow(0 8px 28px #8b3dff2e);
}

/* Frase que digita e apaga (o JS troca o texto de .typer-text).
   O .typer-sizer fica invisível e reserva a altura da frase mais longa,
   então o layout não pula quando a frase muda. */
.typer {
  display: grid;
  justify-items: center;
  max-width: 34em;
  margin: 8px auto clamp(24px, 4.5vh, 40px);
  font-size: clamp(10px, 2.9vw, 12px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #c4b3e6;
}
.typer > .typer-sizer,
.typer > .typer-live { grid-area: 1 / 1; }

.typer-sizer { display: grid; visibility: hidden; }
.typer-sizer > span { grid-area: 1 / 1; }

.typer-live { align-self: start; text-align: center; }

.typer-caret {
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 4px;
  vertical-align: -.2em;
  background: var(--purple-2);
  box-shadow: 0 0 8px #a96bff80;
  animation: caret-blink 1s steps(1) infinite;
}
/* enquanto digita ou apaga, o cursor fica fixo; piscando só quando a frase está parada */
.typer.is-typing .typer-caret { animation: none; opacity: 1; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero-title { position: relative; }

/* Área do topo (logotipo + frase + título): o fundo de letras fica DESFOCADO só atrás dela,
   para as letras do glitch não competirem com o texto. As bordas do desfoque somem suavemente
   (mask), então não aparece um "retângulo" no fundo. O resto da zona de letras continua nítido. */
.hero-inner {
  position: relative;
  width: fit-content;              /* a área acompanha a largura do texto */
  max-width: 100%;
  margin: 0 auto;
}
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -26px -22px -14px;
  z-index: -1;                     /* acima do fundo e das letras, abaixo do texto */
  pointer-events: none;
  -webkit-backdrop-filter: blur(9px);
          backdrop-filter: blur(9px);   /* quanto maior o número, mais desfocado */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
          mask-image:
    linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.title {
  position: relative;
  max-width: 12em;                 /* na tela larga quebra em 2 linhas equilibradas */
  margin: 0 auto;
  font-size: clamp(34px, 6.2vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 15%, #cdb4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Halo: brilho roxo pulsando atrás do título */
.halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(820px, 100vw);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #8b3dff26, transparent 75%);
  filter: blur(30px);
  pointer-events: none;
  animation: halo-pulse 6s ease-in-out infinite;
}

/* Entrada palavra por palavra (o JS separa as palavras em <span class="word">) */
.js .title:not(.is-ready) { opacity: 0; }

/* Com JS, o gradiente passa para cada palavra: background-clip:text no pai
   não pinta filhos que têm filter/transform animados. */
.js .title { background: none; }

.js .title .word {
  display: inline-block;
  /* folga para as hastes (p, g) e para o letter-spacing negativo não serem cortadas */
  padding: 0 .06em .14em;
  margin: 0 -.06em -.14em;
  background: linear-gradient(180deg, #ffffff 15%, #cdb4ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  opacity: 0;
  animation: word-enter .95s var(--ease) both;
  animation-delay: calc(.12s + var(--w, 0) * .13s);
}

/* ---------- Banners ---------- */
/* Cards um embaixo do outro, menores que antes (eram 560px de largura) */
.products { width: min(400px, 100%); }

.products-list {
  display: grid;
  gap: 18px;
}

/* Grupos (Android / iPhone) */
.group {
  display: grid;
  gap: 18px;
}

/* Nome do grupo: selo de vidro roxo com ícone, entre duas linhas.
   (O nome do produto, abaixo do banner, tem outro visual: título branco em negrito) */
.group-label {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.group-label::before,
.group-label::after {
  content: "";
  flex: 1;
  max-width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a96bff55);
}
.group-label::after { transform: scaleX(-1); }

.group-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: linear-gradient(135deg, #8b3dff1c, #4a169a12);
  box-shadow: 0 0 20px -8px #8b3dff4d, inset 0 1px 0 #ffffff12;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: #e3d2ff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.group-chip svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: currentColor;              /* ícones reais (Android / Apple) pegam a cor do texto */
  color: var(--purple-2);
}

/* Divisor entre os grupos: linha roxa com brilho, losango no centro
   e uma luz que percorre a linha de tempos em tempos.
   Só transform e opacity se animam (nada de blur, box-shadow animado, overflow ou clip-path no divisor):
   assim o iPhone renderiza o losango inteiro e sem tremer. A luz anda sempre DENTRO da linha, por isso não alarga a página. */
.divider {
  position: relative;
  height: 1px;
  margin: clamp(30px, 6vh, 48px) 0;
  background: linear-gradient(90deg, transparent, #a96bff80 50%, transparent);
  box-shadow: 0 0 14px #8b3dff30;
}

.divider::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 30%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #cdb8f5, transparent);
  opacity: 0;
  animation: divider-travel 5.5s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

/* Brilho que respira atrás do losango */
.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #a96bff77, transparent);
  opacity: .7;
  animation: dot-glow 3.2s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}

.divider-dot {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--purple-2);
  box-shadow: 0 0 10px 1px #8b3dff70;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Entrada do divisor: a linha abre a partir do centro. Depois da entrada o divisor fica sem filter/transform
   (o "both" deixava um filtro preso nele, o que atrapalha o losango e a luz no Safari). */
.js .divider[data-reveal].is-in {
  opacity: 1;
  filter: none;
  transform: none;
  animation: divider-draw .9s var(--ease) backwards;
  animation-delay: 0s;
}

/* Revelação ao rolar (o JS adiciona .is-in quando o item aparece na tela) */
.js [data-reveal] {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(14px);
}
.js [data-reveal].is-in {
  animation: reveal .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Card = banner + barra do nome num bloco só (mesma borda e mesmo canto arredondado).
   O card inteiro é o link e sobe junto no hover. */
.card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line2);
  background: var(--surface), var(--paper);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition:
    transform .5s var(--ease),
    border-color .3s,
    box-shadow .3s;
}
.card:hover {
  transform: translateY(-4px) scale(1.012);
  --glint-a: .24;                  /* o brilho que cruza o banner fica um pouco mais forte */
  border-color: #b98cff80;
  box-shadow:
    0 0 40px -12px #8b3dff4d,
    0 24px 60px -30px #000,
    var(--shadow);
}
.card:active { transform: translateY(-1px) scale(.996); transition-duration: .15s; }
.card:focus-visible {
  outline: 2px solid var(--purple-2);
  outline-offset: 4px;
}

.banner {
  position: relative;
  display: block;
  aspect-ratio: 1672 / 941;        /* proporção do banner enviado (16:9); os outros banners usam a mesma */
  overflow: hidden;
  isolation: isolate;
}

/* Nome do produto: barra colada embaixo do banner, como uma placa que liga o nome ao produto.
   Faixa roxa no encontro dos dois + seta à direita (mostra que é clicável).
   Some sozinha quando está vazia. */
.product-name {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;         /* nome centralizado na barra */
  padding: 16px 48px;              /* folga igual dos dois lados: a seta não empurra o texto */
  background: linear-gradient(180deg, #120a1d, #0a0612);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  transition: background .3s;
}
/* faixa de ligação entre o banner e o nome */
.product-name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-3), var(--purple-2) 50%, var(--purple-3));
  box-shadow: 0 0 12px #8b3dff55;
}
/* seta (fica no canto direito, fora do fluxo, para o nome continuar no centro) */
.product-name::after {
  content: "";
  position: absolute;
  right: 22px;
  top: calc(50% - 5px);
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--purple-2);
  border-right: 2px solid var(--purple-2);
  transform: rotate(45deg);
  transition: transform .35s var(--ease);
}
.product-name:empty { display: none; }
.card:hover .product-name { background: linear-gradient(180deg, #1a0f2a, #0f0818); }
.card:hover .product-name::after { transform: translateX(5px) rotate(45deg); }

/* Selo "Mais vendido hoje": faixa dourada no TOPO do card, acima do banner (não cobre a arte).
   Combina com a barra do nome, que fica embaixo. Dourado de propósito: é o único elemento
   quente da página, então chama a atenção e ajuda o cliente a decidir. */
.badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  overflow: hidden;
  background: linear-gradient(90deg, #d9962a, #ffd978 50%, #d9962a);
  color: #2a1500;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge svg {
  flex: none;
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* Luz que segue o cursor (o JS atualiza --mx e --my) */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), #b98cff24, transparent 70%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.card:hover .banner::before { opacity: 1; }

/* Banner com imagem: a luz do cursor se mistura com as cores da própria imagem (overlay),
   então parece a imagem acendendo e não uma camada por cima */
.banner:has(img)::before {
  background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%), #ffffff4d, #ffffff00 70%);
  mix-blend-mode: overlay;
}

/* Espaço da imagem do banner */
.banner-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.banner-media img,
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover: a própria imagem "acende" (mais brilho e mais cor) */
.banner img { transition: filter .5s var(--ease); }
.card:hover .banner img { filter: brightness(1.1) saturate(1.12); }

/* Brilho que cruza o banner de tempos em tempos */
.banner-glint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, var(--glint-a, .12)), transparent);
  transform: skew(-22deg) translateX(-130%);
  animation: glint 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .9s);
  pointer-events: none;
}

/* Banner ainda sem imagem: reflexo lento para não parecer quebrado */
.banner:not(:has(img)) .banner-media {
  background: linear-gradient(110deg, transparent 30%, #a96bff12 50%, transparent 70%);
  background-size: 250% 100%;
  animation: shimmer 3.6s linear infinite;
}

/* ---------- Animações ---------- */
@keyframes word-enter {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(16px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

@keyframes reveal {
  0%   { opacity: 0; filter: blur(12px); transform: translateY(14px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

@keyframes glint {
  0%, 65%   { transform: skew(-22deg) translateX(-130%); }
  90%, 100% { transform: skew(-22deg) translateX(620%); }
}

@keyframes shimmer {
  from { background-position: 150% 0; }
  to   { background-position: -100% 0; }
}

@keyframes divider-draw {
  0%   { opacity: 0; filter: blur(8px); transform: scaleX(.15); }
  100% { opacity: 1; filter: blur(0);   transform: scaleX(1); }
}

@keyframes divider-travel {
  0%   { transform: translateX(0);     opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(233%);  opacity: 0; }
}

@keyframes dot-glow {
  0%, 100% { transform: scale(.8);  opacity: .35; }
  50%      { transform: scale(1.2); opacity: 1; }
}

@keyframes topbar-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

@keyframes halo-pulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* ---------- Telas pequenas ---------- */
@media (max-width: 599px) {
  .page { padding-left: 16px; padding-right: 16px; }
  .products { width: min(320px, 100%); }
  .products-list { gap: 14px; }
  .group { gap: 14px; }
  .product-name { padding: 14px 40px; font-size: 15px; letter-spacing: .04em; }
  .product-name::after { right: 17px; }
  .group-chip { padding: 8px 14px; font-size: 12px; letter-spacing: .22em; }
  .group-label { gap: 12px; }
  .group-label::before, .group-label::after { max-width: 64px; }
  .card { border-radius: 16px; }
  .badge { padding: 7px 12px; font-size: 11px; }
}

/* Clique dado antes de o popup ficar pronto: o card "respira" ate abrir */
.card.is-loading { cursor: progress; animation: card-wait 1s ease-in-out infinite; }
@keyframes card-wait { 50% { opacity: .72; } }

/* Celular/tablet (sem mouse): sem "pulo" do hover, que fica grudado depois do toque */
@media (hover: none) {
  .card:hover { transform: none; }
  .card:hover .banner img { filter: none; }
  .card:hover .product-name::after { transform: rotate(45deg); }
}

/* Foco por teclado bem visivel */
.card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Sem animação (acessibilidade) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .title:not(.is-ready) { opacity: 1; }
  .js .title .word { opacity: 1; }
  .js [data-reveal] { opacity: 1; filter: none; transform: none; }
  .banner-glint { display: none; }
  .typer-caret { display: none; }
}