/*
 * Camada de "toque" do site (home e ficha do imóvel), seguindo o Designing Fluid Interfaces da Apple:
 * retorno no instante do toque, respeito às preferências de movimento/transparência/contraste do
 * sistema e tipografia de títulos mais firme. Só CSS de apresentação: nada aqui muda layout nem dados.
 * Carregado por último no <head> para valer sobre o style.css e o Tailwind.
 */

/* 1. Toque: o retorno vem no pointer-down, não no clique.
 * Usa a propriedade `scale` (e não `transform`) para somar ao transform que o elemento já tem,
 * como o translateY(-50%) das setas da galeria. */
a, button, [role="button"], label, .card, [class*="btn"] {
    -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):active,
[role="button"]:active,
a[class*="btn"]:active,
[class*="btn"]:not(:disabled):active {
    scale: 0.97;
    transition: scale 100ms ease-out;
}
.card:active,
#galeria-imoveis > *:active {
    scale: 0.985;
    transition: scale 120ms ease-out;
}

/* 2. Galeria da ficha: o arrasto horizontal é do script (js/swipe-gallery.js); o vertical continua
 * rolando a página normalmente. */
.main-image-container,
.lightbox-swipe {
    touch-action: pan-y;
}
.main-image-container .main-image,
.lightbox-swipe {
    will-change: transform;
}

/* 3. Títulos: entrelinha justa e tracking levemente negativo nos tamanhos grandes;
 * quebra equilibrada para não deixar uma palavra sozinha na última linha. */
h1, h2 {
    text-wrap: balance;
}
.section-header h2 {
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* 4. Menos movimento (Ajustes > Acessibilidade): sem loops, sem deslizar, sem rolagem animada.
 * As animações terminam no estado final, então nada fica invisível. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    /* O brilho da busca no celular usa `animation: ... !important` num seletor mais específico. */
    .search-input, .search-input:focus-within, .search-input i {
        animation: none !important;
    }
}

/* 5. Menos transparência: o vidro vira superfície sólida, com o mesmo azul do site. */
@media (prefers-reduced-transparency: reduce) {
    * {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .navbar, .glass-panel, .hero-content, .nav-btn, #nj-cookie-banner {
        background: #0e1a2b !important;
    }
}

/* 6. Mais contraste: bordas do vidro bem definidas. */
@media (prefers-contrast: more) {
    .navbar, .glass-panel, .hero-content, .nav-btn {
        border-color: rgba(255, 255, 255, 0.6) !important;
    }
}