/* ============================================================================
   Crachá 3D Alpha Convites — palco e reserva
   ----------------------------------------------------------------------------
   O objeto em si é montado com Three.js em js/home-badge-3d.js, dentro do
   canvas gerado no #badge3d-stage. Aqui ficam só a caixa, a dica e a versão de
   reserva (sem WebGL ou sem a biblioteca disponível).

   O crachá é uma CAMADA SOLTA sobre a seção escura "Tecnologia para criar":
   cobre a seção inteira, não ocupa espaço no fluxo (logo não estica o fundo
   preto) e fica atrás do texto, que continua legível e clicável. Quem cuida do
   arrasto é o próprio JS, por raycast — por isso o canvas não intercepta
   cliques. O ajuste de layout usa os modificadores .ha-dark--badge e
   .ha-dark-grid--badge, então home-alpha.css continua intacto.
   ========================================================================== */

/* ---------------------------------------------------- layout da seção -- */

.ha-home .ha-dark--badge {
    position: relative;
    /* puxado até o limite, o crachá some na borda da seção */
    overflow: clip;
}

.ha-home .ha-dark-grid--badge {
    /* Texto à esquerda, imagem horizontal à direita. A coluna da esquerda é
       propositalmente mais larga: joga a imagem para fora do eixo central,
       onde o crachá fica pendurado, para um não cobrir o outro. */
    grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.ha-home .ha-dark-grid--badge .ha-dark-copy {
    max-width: 46ch;
}

@media (max-width: 900px) {
    .ha-home .ha-dark-grid--badge {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* o conteúdo fica por cima do crachá */
.ha-home .ha-dark--badge .ha-shell {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------ palco */

.badge3d {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* a camada nunca rouba clique: o JS decide pelo raycast se o ponteiro
       caiu no crachá e só então segura o arrasto */
    pointer-events: none;
}

.badge3d-stage {
    position: absolute;
    inset: 0;
}

/* halo suave atrás do objeto: dá volume ao crachá sobre o fundo escuro,
   sem glow nem neon */
.badge3d-stage::before {
    content: "";
    position: absolute;
    left: 52%;
    top: 34%;
    width: min(46%, 540px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side,
        rgba(255, 255, 255, .075) 0%,
        rgba(255, 255, 255, .02) 55%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.badge3d-stage canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* o cursor vira mão quando o ponteiro está mesmo em cima do crachá.
   Enquanto isso o texto atrás não é selecionado: arrastar o crachá nunca
   vira uma seleção de texto sem querer. */
.ha-home .ha-dark--badge.is-over,
.ha-home .ha-dark--badge.is-dragging {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.ha-home .ha-dark--badge.is-dragging {
    cursor: grabbing;
    /* reforca o que o JS ja faz por style inline, para o caso de o navegador
       reavaliar o gesto no meio do arrasto */
    touch-action: none;
}

/* --------------------------------------------------- atalho de teclado */

/* Sem texto na tela: o botão existe só para dar ao crachá um ponto de foco
   navegável por teclado (o objeto 3D vive na camada de trás, fora da ordem de
   tabulação). Só aparece quando alguém chega nele pelo Tab. */
.badge3d-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background: transparent;
    color: transparent;
}

.badge3d-hint:focus-visible {
    position: static;
    width: auto;
    height: auto;
    padding: 8px 14px;
    overflow: visible;
    clip-path: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: start;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    outline: 2px solid var(--ha-gold-2, #ef4a52);
    outline-offset: 3px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .04em;
    color: #fff;
    cursor: pointer;
}

.badge3d-hint i {
    font-size: 11px;
    color: var(--ha-gold-2, #ef4a52);
}

/* --------------------------------------------------------------- reserva */

/* Aparece enquanto o 3D carrega e permanece se o WebGL/biblioteca falharem.
   Mesmo cartão branco, mesma logo, sem interação. */
.badge3d-fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.badge3d-fallback[hidden] { display: none; }

.badge3d-fallback-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(22%, 190px);
    aspect-ratio: 5 / 7;
    padding: 12%;
    border-radius: 12px;
    background: linear-gradient(160deg, #ffffff 0%, #f2efe9 100%);
    box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .85);
}

.badge3d-fallback-card img {
    /* a logo nunca é esticada nem cortada */
    width: 75%;
    height: auto;
    max-height: 60%;
    object-fit: contain;
    display: block;
}

/* --------------------------------------------------------- responsividade */

@media (max-width: 900px) {
    .badge3d-fallback-card { width: min(34%, 150px); }
}

@media (max-width: 640px) {
    .badge3d-hint {
        font-size: 11px;
        gap: 7px;
    }

    .badge3d-fallback-card { width: min(42%, 130px); }
}