/* ========== Animações — Pousada Vô Testa ========== */

/* Scroll suave; offset do header fixo (JS define --header-offset em px) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset, 5.5rem);
}

/* Alvos do menu: mesma “linha” sob o header em todo clique */
#inicio,
#sobre,
#experiencias,
#galeria,
#quartos,
#dia-pousada,
#eventos,
#contato {
  scroll-margin-top: var(--header-offset, 5.5rem);
}

/* Roda d'água — rotação contínua */
@keyframes rotate-wheel {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.wheel-spin { animation: rotate-wheel 25s linear infinite; }

/* Engrenagem — rotação (normal e reversa) */
@keyframes rotate-gear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.gear-spin { animation: rotate-gear 12s linear infinite; }
.gear-spin-reverse { animation: rotate-gear 15s linear infinite reverse; }

/* Fade in ao scroll */
.fade-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Badge flutuante — prova social */
@keyframes slide-in {
    0% { transform: translateX(-120%); opacity: 0; }
    10% { transform: translateX(0); opacity: 1; }
    90% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(-120%); opacity: 0; }
}
.social-proof { animation: slide-in 6s ease-in-out infinite; }

/* Pulse no botão de reserva */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(215, 160, 72, 0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(215, 160, 72, 0.2); }
}
.pulse-btn { animation: pulse-glow 3s ease-in-out infinite; }

/* Flutuação suave para ilustrações */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.float-anim { animation: float 6s ease-in-out infinite; }

/* ========== Transições entre páginas (View Transitions API) ========== */

/* Opt-in MPA: o navegador anima toda navegação por link/POST automaticamente.
   Progressive enhancement — navegadores sem suporte fazem o page load normal. */
@view-transition {
    navigation: auto;
}

/* Cross-fade suave + leve deslize para a página inteira */
::view-transition-old(root) {
    animation: vt-fade-out 0.28s ease both;
}
::view-transition-new(root) {
    animation: vt-fade-in 0.34s ease both;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
}

/* Header fixo: continuidade visual — fica ancorado, não pisca entre páginas */
header { view-transition-name: site-header; }

/* Stepper do fluxo de reservas: a barra de progresso morfa entre os passos */
.reserva-stepper { view-transition-name: reserva-stepper; }

/* Foto do quarto "voa" da listagem para a seleção (shared element).
   O nome único por quarto é aplicado inline nos templates
   (reservas/quartos.html e reservas/dados.html). */

/* Página de confirmação: selo de sucesso entra com um "pop" */
::view-transition-new(confirma-check) {
    animation: vt-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes vt-pop {
    from { opacity: 0; transform: scale(0.4); }
    to { opacity: 1; transform: scale(1); }
}

/* Acessibilidade: respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Menu mobile */
.mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}