/*
  Revelação progressiva compartilhada por todas as páginas.
  Cada seção surge somente quando entra na área visível durante a rolagem.
  Se o JavaScript não carregar, nenhuma regra abaixo esconde o conteúdo.
*/
html.js-scroll-reveal .scroll-reveal-item {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-visible,
html.js-scroll-reveal.scroll-reveal-fallback .scroll-reveal-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
  Interações exclusivas para telas não desktop.
  O primeiro critério cobre a largura usada pelo menu responsivo do site;
  o segundo também inclui tablets/telas touch maiores que 980 px.
*/
@media (max-width: 980px), (hover: none) and (pointer: coarse) {
  /* Substitui a animação automática antiga dos cards pelo reveal de rolagem. */
  .card-acomodacao,
  .local-card {
    animation: none !important;
  }

  /* Cards alternam levemente a direção de entrada no mobile/tablet. */
  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-from-left {
    transform: translate3d(-26px, 18px, 0);
  }

  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-from-right {
    transform: translate3d(26px, 18px, 0);
  }

  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-visible,
  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-visible.scroll-reveal-from-left,
  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-visible.scroll-reveal-from-right {
    transform: translate3d(0, 0, 0);
  }

  /* Feedback de toque para os cards do site. */
  .card-acomodacao,
  .local-card,
  .vantagem-card,
  .pilar-card,
  .quarto-card,
  .google-avaliacao-card,
  .contato-box,
  .faq-item,
  .resumo-item {
    -webkit-tap-highlight-color: transparent;
    transform-origin: center;
  }

  .card-acomodacao.mobile-touch-pressed,
  .local-card.mobile-touch-pressed,
  .vantagem-card.mobile-touch-pressed,
  .pilar-card.mobile-touch-pressed,
  .quarto-card.mobile-touch-pressed,
  .google-avaliacao-card.mobile-touch-pressed,
  .contato-box.mobile-touch-pressed,
  .faq-item.mobile-touch-pressed,
  .resumo-item.mobile-touch-pressed {
    transform: scale(0.975) !important;
    transition-duration: 150ms !important;
  }

  /* Evita o :hover "preso" que alguns navegadores touch simulam. */
  .card-acomodacao:hover,
  .local-card:hover {
    border-color: var(--cor-borda);
    box-shadow: 0 8px 24px rgba(9, 52, 94, 0.07);
    transform: none;
  }

  .card-acomodacao:hover .imagem-principal,
  .local-card:hover .imagem-principal {
    opacity: 1;
    transform: scale(1);
  }

  .card-acomodacao:hover .imagem-secundaria,
  .local-card:hover .imagem-secundaria {
    opacity: 0;
    transform: scale(1.06);
  }

  .google-avaliacao-card:hover {
    border-color: var(--cor-borda);
    box-shadow: 0 8px 24px rgba(9, 52, 94, 0.08);
    transform: none;
  }

  /* Acomodações e pontos próximos: equivalente visual do hover desktop. */
  .card-acomodacao.mobile-motion-active,
  .local-card.mobile-motion-active {
    border-color: rgba(9, 52, 94, 0.28);
    box-shadow: 0 18px 42px rgba(9, 52, 94, 0.17);
    transform: translateY(-5px);
  }

  .card-acomodacao.mobile-motion-active .imagem-principal,
  .local-card.mobile-motion-active .imagem-principal,
  .card-acomodacao.mobile-touch-pressed .imagem-principal,
  .local-card.mobile-touch-pressed .imagem-principal {
    opacity: 0;
    transform: scale(1.08);
  }

  .card-acomodacao.mobile-motion-active .imagem-secundaria,
  .local-card.mobile-motion-active .imagem-secundaria,
  .card-acomodacao.mobile-touch-pressed .imagem-secundaria,
  .local-card.mobile-touch-pressed .imagem-secundaria {
    opacity: 1;
    transform: scale(1);
  }

  .local-card.mobile-motion-active .maps-destino::after,
  .local-card.mobile-touch-pressed .maps-destino::after {
    transform: translateX(5px);
  }

  /* Cards de vantagens: replica elevação e troca da fotografia do desktop. */
  .vantagem-card.mobile-motion-active {
    border-color: rgba(9, 52, 94, 0.25);
    box-shadow: 0 18px 42px rgba(9, 52, 94, 0.16);
    transform: translateY(-5px);
  }

  .vantagem-card.mobile-motion-active .vantagem-card__foto,
  .vantagem-card.mobile-touch-pressed .vantagem-card__foto {
    opacity: 1;
    transform: scale(1);
  }

  /* Pilares da página Sobre: equivalente ao hover sofisticado do desktop. */
  .pilar-card.mobile-motion-active {
    border-top-color: #5c95c4;
    box-shadow:
      0 24px 48px rgba(9, 52, 94, 0.17),
      0 8px 18px rgba(9, 52, 94, 0.08);
    transform: translateY(-8px) scale(1.012);
  }

  .pilar-card.mobile-motion-active::before {
    left: 135%;
  }

  .pilar-card.mobile-motion-active::after {
    transform: scaleX(1);
  }

  .pilar-card.mobile-motion-active .pilar-numero {
    background: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 9px 20px rgba(9, 52, 94, 0.2);
    transform: translateY(-4px) rotate(-7deg) scale(1.08);
  }

  .pilar-card.mobile-motion-active h3 {
    transform: translateX(6px);
  }

  .pilar-card.mobile-motion-active p,
  .pilar-card.mobile-motion-active .lista-valores {
    transform: translateY(-2px);
  }

  .pilar-card-destaque.mobile-motion-active {
    border-top-color: #9fc9ea;
    background: #0c416f;
    box-shadow:
      0 26px 52px rgba(6, 39, 68, 0.28),
      0 8px 18px rgba(9, 52, 94, 0.14);
  }

  .pilar-card-destaque.mobile-motion-active .pilar-numero {
    background: #fff;
    color: var(--cor-primaria);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.18);
  }

  .pilar-card-destaque.mobile-motion-active .lista-valores li {
    transform: translateX(5px);
  }

  .pilar-card-destaque.mobile-motion-active .lista-valores li::before {
    color: #fff;
    transform: scale(1.18);
  }

  /* Fotos da página de atendimento. */
  .galeria-placeholders .imagem-placeholder.mobile-motion-active {
    z-index: 10;
  }

  .galeria-placeholders .imagem-placeholder.mobile-motion-active .borda-img,
  .galeria-placeholders .imagem-placeholder.mobile-touch-pressed .borda-img {
    box-shadow:
      0 0 0 2px var(--cor-primaria),
      0 20px 38px rgba(10, 45, 76, 0.24);
    transform: scale(1.08);
  }

  /* Fotos da página de reserva. */
  .reserva-foto.mobile-motion-active {
    border-color: rgba(9, 52, 94, 0.32);
    box-shadow:
      0 22px 44px rgba(9, 52, 94, 0.19),
      0 0 0 5px rgba(9, 52, 94, 0.05);
    transform: translateY(-5px);
  }

  .reserva-foto.mobile-motion-active img,
  .reserva-foto.mobile-touch-pressed img {
    filter: saturate(1.06) contrast(1.03);
    transform: scale(1.055);
  }

  .reserva-foto.mobile-shine::after {
    animation: mobile-brilho-foto 850ms ease-out both;
  }

  /* Foto principal da home: zoom controlado, sem depender de hover. */
  .hero-foto.mobile-motion-active {
    z-index: 3;
  }

  .hero-foto.mobile-motion-active img,
  .hero-foto.mobile-touch-pressed img {
    box-shadow: 0 22px 46px rgba(9, 52, 94, 0.22);
    transform: scale(1.045);
  }

  /* Avaliação Google recebe o mesmo destaque tátil. */
  .google-avaliacao-card.mobile-motion-active {
    border-color: #aebdca;
    box-shadow: 0 12px 30px rgba(9, 52, 94, 0.13);
    transform: translateY(-2px);
  }

  /* Cards da listagem de quartos recebem profundidade ao entrar na tela. */
  .quarto-card.mobile-motion-active {
    border-color: rgba(9, 52, 94, 0.22);
    box-shadow: 0 15px 34px rgba(9, 52, 94, 0.13);
    transform: translateY(-4px);
    transition:
      transform 320ms ease,
      box-shadow 320ms ease,
      border-color 320ms ease;
  }

  /* Microinteração para botões e controles em telas touch. */
  .btn,
  .filtro-btn,
  .carrossel-seta,
  #menu-button {
    -webkit-tap-highlight-color: transparent;
  }

  .btn.mobile-touch-pressed,
  .filtro-btn.mobile-touch-pressed,
  .carrossel-seta.mobile-touch-pressed,
  #menu-button.mobile-touch-pressed {
    transform: scale(0.96) !important;
  }

  /* Um único pulso discreto quando uma CTA importante aparece. */
  .mobile-cta-pulse {
    animation: mobile-cta-pulse 680ms cubic-bezier(0.22, 1, 0.36, 1) 1;
  }

  /* Ensina que o carrossel pode ser arrastado, sem alterar seu trilho. */
  .carrossel-viewport.mobile-swipe-hint {
    animation: mobile-swipe-hint 720ms cubic-bezier(0.22, 1, 0.36, 1) 1;
  }
}

@keyframes mobile-brilho-foto {
  from {
    transform: translateX(-145%);
  }
  to {
    transform: translateX(145%);
  }
}

@keyframes mobile-cta-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.045);
  }
}

@keyframes mobile-swipe-hint {
  0%,
  100% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-10px);
  }
  68% {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-scroll-reveal .scroll-reveal-item,
  html.js-scroll-reveal .scroll-reveal-item.scroll-reveal-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
    will-change: auto;
  }

  .mobile-cta-pulse,
  .carrossel-viewport.mobile-swipe-hint,
  .reserva-foto.mobile-shine::after {
    animation: none !important;
  }

  .mobile-motion-active,
  .mobile-touch-pressed,
  .mobile-motion-active *,
  .mobile-touch-pressed * {
    transition: none !important;
  }
}