/* ==========================================================================
   GB Store · página inicial em 3D (v4)
   Carregado por último no index.html. Funciona junto com /public/home-3d.js.
   Cores sempre do tema (--signal / --teal), então serve para qualquer tema.
   ========================================================================== */
:root {
  --h3-depth-1: color-mix(in srgb, var(--signal) 42%, #020403);
  --h3-depth-2: color-mix(in srgb, var(--signal) 26%, #020403);
  --h3-depth-3: color-mix(in srgb, var(--signal) 14%, #020403);
  --h3-line: rgba(255, 255, 255, .09);
}

/* ---------------------------------- TOPO ---------------------------------- */
html body .gbh {
  --hx: 0deg; --hy: 0deg;
  min-height: min(900px, calc(calc(100vh / var(--site-zoom, 1)) - var(--topbar-h, 72px) - var(--ann-h, 0px))) !important;
  background: radial-gradient(900px 520px at 72% 46%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 70%) !important;
  perspective: 1600px;
}
html body .gbh::after { display: none !important; }
html body .gbh .h3-canvas {
  position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important;
  pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
          mask-image: linear-gradient(180deg, #000 78%, transparent);
}
html body .gbh .h3-canvas.on { opacity: 1; }
/* sem WebGL: some o anel antigo só quando a cena 3D está ligada */
html.h3-webgl body .gbh-ring { display: none !important; }
html.h3-webgl body .gbh-stage::before { display: none !important; }

/* bloco de texto inclina junto com o mouse */
html body .gbh-copy {
  z-index: 2; max-width: 680px !important;
  transform: rotateY(var(--hx)) rotateX(var(--hy));
  transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* selo */
html body .gbh-pill {
  border-radius: 999px !important; border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent) !important;
  background: color-mix(in srgb, var(--signal) 7%, rgba(6, 9, 8, .7)) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-body) !important; letter-spacing: .12em !important;
}

/* título com volume (letras "extrudadas") */
html body .gbh-title {
  font-family: var(--font-display) !important; font-weight: 700 !important;
  font-size: clamp(46px, calc(5.1vw / var(--site-zoom, 1)), 86px) !important;
  line-height: .95 !important; letter-spacing: -.045em !important; text-transform: uppercase;
  color: var(--text) !important;
  text-shadow:
    0 1px 0 var(--h3-depth-1), 0 2px 0 var(--h3-depth-1), 0 3px 0 var(--h3-depth-2),
    0 4px 0 var(--h3-depth-2), 0 5px 0 var(--h3-depth-3), 0 6px 0 var(--h3-depth-3),
    0 18px 30px rgba(0, 0, 0, .65);
}
html body .gbh-title .gbh-line { display: block; white-space: nowrap; }
html body .gbh-title em, html body .gbh-title .gbh-line:last-child { font-style: normal; -webkit-text-stroke: 0 !important; filter: none !important; }
html body .gbh-title em {
  color: var(--signal) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  text-shadow:
    0 1px 0 var(--h3-depth-1), 0 2px 0 var(--h3-depth-1), 0 3px 0 var(--h3-depth-2),
    0 4px 0 var(--h3-depth-2), 0 5px 0 var(--h3-depth-3), 0 6px 0 var(--h3-depth-3),
    0 0 40px color-mix(in srgb, var(--signal) 45%, transparent), 0 18px 30px rgba(0, 0, 0, .6) !important;
}
html body .gbh-title .gbh-line:last-child { color: var(--text) !important; }
html body .gbh-lead { max-width: 520px !important; font-size: clamp(15.5px, calc(1.15vw / var(--site-zoom, 1)), 17.5px) !important; line-height: 1.7 !important; }

/* botões com espessura (lado de baixo aparece como um bloco) */
html body .gbh-btn { border-radius: 14px !important; font-family: var(--font-body) !important; font-weight: 700 !important; transform: translateY(0); transition: transform .25s ease, box-shadow .25s ease, background .25s, border-color .25s !important; }
html body .gbh-btn-primary { box-shadow: 0 5px 0 var(--h3-depth-1), 0 18px 34px -14px var(--glow) !important; }
html body .gbh-btn-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 0 var(--h3-depth-1), 0 26px 44px -16px var(--glow) !important; }
html body .gbh-btn-primary:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--h3-depth-1), 0 10px 20px -12px var(--glow) !important; }
html body .gbh-btn-ghost { background: rgba(10, 14, 13, .55) !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: 0 5px 0 rgba(255, 255, 255, .05) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
html body .gbh-btn-ghost:hover { transform: translateY(-3px) !important; border-color: var(--signal) !important; box-shadow: 0 8px 0 color-mix(in srgb, var(--signal) 25%, transparent) !important; }

/* passos: três placas lado a lado em perspectiva */
html body .gbh-steps { gap: 10px !important; border-top: 0 !important; perspective: 900px; max-width: 560px !important; }
html body .gbh-steps li {
  padding: 14px 14px 14px !important; border-radius: 14px !important;
  border: 1px solid var(--h3-line) !important; background: rgba(9, 13, 12, .62) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transform: rotateX(18deg); transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1), border-color .4s, background .4s !important;
}
html body .gbh-steps li.active { transform: rotateX(0deg) translateY(-6px) translateZ(20px); border-color: color-mix(in srgb, var(--signal) 55%, transparent) !important; background: color-mix(in srgb, var(--signal) 9%, rgba(9, 13, 12, .7)) !important; box-shadow: 0 16px 30px -18px var(--glow); }
html body .gbh-steps li::after { top: auto !important; bottom: 0 !important; height: 2px !important; }
html body .gbh-steps li b { font-family: var(--font-display) !important; font-size: 12px !important; }

/* números */
html body .gbh-stats strong { font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 30px !important; letter-spacing: -.02em !important; text-shadow: 0 2px 0 var(--h3-depth-2), 0 4px 0 var(--h3-depth-3); }

/* vitrine: carrossel em 3D de verdade (cards em volta, girando em profundidade) */
html body .gbh-stage { perspective: 1200px !important; }
html body .gbh-cards { transform: rotateX(calc(var(--hy) * .8)) rotateY(calc(var(--hx) * 1.4)) !important; }
html body .gbh-card {
  border-radius: 20px !important; background: linear-gradient(180deg, #111816, #070a09) !important;
  border: 1px solid color-mix(in srgb, var(--signal) 22%, transparent) !important;
  transform: translate(-50%, -50%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--r)) scale(var(--s)) !important;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .7s, filter .7s, box-shadow .7s, border-color .7s !important;
}
html body .gbh-card[data-pos="0"] { --x: 0% !important; --z: 120px !important; --r: 0deg !important; --s: 1 !important; --o: 1 !important; filter: none !important; border-color: var(--signal) !important; box-shadow: 0 60px 90px -30px #000, 0 0 0 1px var(--signal), 0 0 90px -20px var(--glow) !important; }
html body .gbh-card[data-pos="1"] { --x: 64% !important; --z: -80px !important; --r: -38deg !important; --s: .86 !important; --o: .85 !important; filter: brightness(.5) saturate(.8) !important; }
html body .gbh-card[data-pos="-1"] { --x: -64% !important; --z: -80px !important; --r: 38deg !important; --s: .86 !important; --o: .85 !important; filter: brightness(.5) saturate(.8) !important; }
html body .gbh-card[data-pos="2"] { --x: 104% !important; --z: -260px !important; --r: -55deg !important; --s: .72 !important; --o: .35 !important; filter: brightness(.3) !important; }
html body .gbh-card[data-pos="-2"] { --x: -104% !important; --z: -260px !important; --r: 55deg !important; --s: .72 !important; --o: .35 !important; filter: brightness(.3) !important; }
html body .gbh-card[data-pos="1"]:hover, html body .gbh-card[data-pos="-1"]:hover { filter: brightness(.8) !important; }
/* reflexo no chão embaixo do card da frente */
html body .gbh-card[data-pos="0"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .09) 48%, transparent 60%);
  background-size: 250% 100%; animation: h3Shine 5s ease-in-out infinite;
}
@keyframes h3Shine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
html body .gbh-card-body strong, html body .gbh-card-foot b { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
html body .gbh-card-body strong { font-size: 23px !important; }
html body .gbh-card-cta { border-radius: 10px !important; }
html body .gbh-float { border-radius: 14px !important; transform: translateZ(160px); background: rgba(8, 12, 11, .82) !important; border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent) !important; }
html body .gbh-dots { bottom: -6px !important; }

/* ------------------------------ TÍTULOS DAS SEÇÕES ------------------------------ */
html body :is(.confidence-heading h2, .catalog-heading h2, .howto-heading h2, .reward-copy h2, .faq .section-title h2) {
  font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.04em !important;
  filter: drop-shadow(0 1px 0 var(--h3-depth-1)) drop-shadow(0 2px 0 var(--h3-depth-2)) drop-shadow(0 2px 0 var(--h3-depth-3)) drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
html body .eyebrow { font-family: var(--font-body) !important; font-weight: 700 !important; letter-spacing: .16em !important; }

/* ------------------------------ CARDS EM 3D (mouse) ------------------------------ */
html body .confidence-grid, html body #productGrid, html body .howto-steps, html body .case-opener-wrap,
html body .faq, html body #gameFilters, html body .support-channels, html body .reward-features { perspective: 1100px; }
html body :is(.confidence-grid > article, #productGrid .product, .howto-steps > li, .case-machine, .faq details, #gameFilters .game-filter, .support-channel, .reward-features > div) {
  --rx: 0deg !important; --ry: 0deg !important; /* desliga a inclinação antiga para não somar */
  rotate: var(--t3x, 0) var(--t3y, 0) 0 var(--t3a, 0deg);
  transition: rotate .55s cubic-bezier(.2, .8, .2, 1), translate .4s ease, border-color .35s, box-shadow .35s, background .35s;
  transform-style: preserve-3d;
}
html body :is(.confidence-grid > article, #productGrid .product, .howto-steps > li, .case-machine, .faq details, #gameFilters .game-filter, .support-channel, .reward-features > div).h3-on {
  transition: rotate .1s linear, translate .4s ease, border-color .35s, box-shadow .35s, background .35s;
  translate: 0 -6px;
  box-shadow: 0 30px 50px -26px #000, 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent), 0 0 40px -18px var(--glow) !important;
}
/* brilho que segue o mouse por cima do card */
html body :is(.confidence-grid > article, #productGrid .product, .howto-steps > li, .case-machine, .support-channel)::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--t3gx, 50%) var(--t3gy, 50%), rgba(255, 255, 255, .09), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
html body :is(.confidence-grid > article, #productGrid .product, .howto-steps > li, .case-machine, .support-channel).h3-on::before { opacity: 1; }
html body :is(.confidence-grid > article, #productGrid .product, .howto-steps > li, .case-machine, .support-channel) { position: relative; }

/* partes dos cards "saltam" para fora quando inclinam */
html body .confidence-grid > article > * { transform: translateZ(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
html body .confidence-grid > article.h3-on > :first-child { transform: translateZ(46px); }
html body .confidence-grid > article.h3-on > h3 { transform: translateZ(30px); }
html body .confidence-grid > article.h3-on > p { transform: translateZ(16px); }
html body .howto-steps > li > * { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
html body .howto-steps > li.h3-on > b { transform: translateZ(50px); }
html body .howto-steps > li.h3-on > h3 { transform: translateZ(28px); }
html body #gameFilters .game-filter.h3-on .game-logo { transform: translateZ(26px) scale(1.08); }
html body #gameFilters .game-filter .game-logo { transition: transform .4s cubic-bezier(.2, .8, .2, 1), filter .3s, opacity .3s; }

/* "como funciona": degraus em escada 3D */
@media (min-width: 1000px) {
  html body .howto-steps { transform-style: preserve-3d; }
  html body .howto-steps > li:nth-child(1) { translate: 0 24px; }
  html body .howto-steps > li:nth-child(2) { translate: 0 8px; }
  html body .howto-steps > li:nth-child(3) { translate: 0 -8px; }
  html body .howto-steps > li.h3-on:nth-child(1) { translate: 0 16px; }
  html body .howto-steps > li.h3-on:nth-child(2) { translate: 0 0; }
  html body .howto-steps > li.h3-on:nth-child(3) { translate: 0 -16px; }
  html body .howto-steps::before { display: none !important; }
}

/* caixa diária: máquina com volume e leve inclinação parada */
html body .case-machine { box-shadow: 0 8px 0 var(--h3-depth-3), 0 40px 70px -30px #000 !important; }
html body .case-open-button { box-shadow: 0 5px 0 var(--h3-depth-1), 0 18px 34px -14px var(--glow) !important; transition: transform .2s, box-shadow .2s !important; }
html body .case-open-button:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--h3-depth-1) !important; }

/* FAQ: cada pergunta é uma placa com espessura */
html body .faq details { border-radius: 14px !important; box-shadow: 0 4px 0 rgba(255, 255, 255, .03); }
html body .faq details[open] { box-shadow: 0 6px 0 var(--h3-depth-3), 0 20px 40px -24px #000; }
html body .faq summary { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.01em; }

/* ------------------------ SEÇÕES ENTRAM "LEVANTANDO DO CHÃO" ------------------------ */
html.h3-sections body :is(#confianca, #como-funciona, #recompensas, #faq) {
  transform-origin: 50% 0; transition: transform 1.1s cubic-bezier(.16, .84, .3, 1), opacity .9s ease;
}
html.h3-sections body :is(#confianca, #como-funciona, #recompensas, #faq):not([data-h3]) {
  transform: perspective(1400px) rotateX(16deg) translateY(70px) scale(.97); opacity: 0;
}
html.h3-sections body :is(#confianca, #como-funciona, #recompensas, #faq)[data-h3] { transform: none; opacity: 1; }

/* ------------------------------ CELULAR ------------------------------ */
@media (max-width: 999px) {
  html body .gbh-title { font-size: clamp(34px, calc(9.6vw / var(--site-zoom, 1)), 68px) !important; }
  html body .gbh-copy { transform: none !important; }
  html body .gbh-card[data-pos="0"] { --z: 40px !important; }
  html body .gbh-card[data-pos="1"] { --x: 54% !important; --r: -30deg !important; }
  html body .gbh-card[data-pos="-1"] { --x: -54% !important; --r: 30deg !important; }
  html body .gbh .h3-canvas { opacity: .75; }
}
@media (max-width: 760px) {
  html.h3-sections body :is(#confianca, #como-funciona, #recompensas, #faq):not([data-h3]) { transform: none; opacity: 1; }
  html body .gbh-steps li { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.h3-sections body :is(#confianca, #como-funciona, #recompensas, #faq) { transform: none !important; opacity: 1 !important; }
  html body .gbh-card[data-pos="0"]::after { animation: none; }
}

/* ==========================================================================
   VITRINE v3: um produto por vez, como uma placa 3D grossa (Three.js) que
   gira na troca, em cima da plataforma. Embaixo, painel com nome e preço.
   Os cards em HTML continuam no DOM (o app.js usa), só ficam invisíveis.
   Sem WebGL, a vitrine antiga aparece normalmente.
   ========================================================================== */
html.h3-slab body .gbh-cards, html.h3-slab body .gbh-float, html.h3-slab body .gbh-dots { opacity: 0 !important; pointer-events: none !important; }
html.h3-slab body .gbh-stage { cursor: pointer; }
.h3-show { display: none; }
html.h3-slab body .h3-show {
  position: absolute; z-index: 9; left: 50%; bottom: -2%; width: min(480px, 94%); transform: translateX(-50%);
  display: grid; gap: 10px; padding: 16px 18px 14px; cursor: default;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px;
  background: linear-gradient(180deg, rgba(14, 20, 18, .82), rgba(7, 10, 9, .9));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 0 var(--h3-depth-3), 0 30px 60px -30px #000;
}
.h3-show-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h3-show-game { color: var(--signal); font: 700 11px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.h3-show-count { color: var(--muted); font: 600 12px/1 var(--font-display); letter-spacing: .12em; }
.h3-show-count b { color: var(--text); }
.h3-show-name { color: var(--text) !important; text-decoration: none !important; font: 700 clamp(22px, calc(2vw / var(--site-zoom, 1)), 30px)/1.05 var(--font-display); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h3-show-foot { display: flex; align-items: center; gap: 10px; }
.h3-show-price { margin-right: auto; display: grid; gap: 4px; }
.h3-show-price i { color: var(--dim, #7a8580); font: 600 10.5px/1 var(--font-body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.h3-show-price b { color: var(--text); font: 700 24px/1 var(--font-display); letter-spacing: -.02em; }
.h3-show-nav { display: flex; gap: 6px; }
.h3-show-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); color: var(--text); cursor: pointer; transition: border-color .2s, color .2s, transform .15s; }
.h3-show-nav button:hover { border-color: var(--signal); color: var(--signal); }
.h3-show-nav button:active { transform: translateY(2px); }
.h3-show-nav svg, .h3-show-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h3-show-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--grad); color: #03100a !important; text-decoration: none !important; font: 700 13px/1 var(--font-body); box-shadow: 0 4px 0 var(--h3-depth-1); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.h3-show-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--h3-depth-1); }
.h3-show-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--h3-depth-1); }
.h3-show-bar { height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.h3-show-bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.h3-show.swap .h3-show-bar i { animation: h3Bar 4.2s linear forwards; }
.h3-show.swap :is(.h3-show-name, .h3-show-price, .h3-show-game) { animation: h3Swap .7s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes h3Bar { to { width: 100%; } }
@keyframes h3Swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (max-width: 520px) {
  html.h3-slab body .h3-show { padding: 14px; bottom: 0; }
  .h3-show-cta span { display: none; }
  .h3-show-cta { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .h3-show.swap * { animation: none !important; } }