/* ============================================================
   VILLA AROUCA — CAMADA DE MOVIMENTO
   Só transform / opacity / filter. Nada de layout thrash.
   Curvas: entrada calma (serra), saída rápida.
   ============================================================ */

:root {
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);   /* desacelera devagar */
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-reveal: 900ms;
}

/* ---------- 1. Reveal por scroll ---------- */
/* JS marca [data-revelar]; nada aqui roda sem JS (fail-safe: conteúdo visível) */
[data-revelar] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-saida),
    transform var(--dur-reveal) var(--ease-saida);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-revelar].visivel {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Variante lateral — para blocos de texto ao lado de foto */
[data-revelar="lado"] { transform: translate3d(-26px, 0, 0); }

/* Variante foto — entra com leve escala, dá peso de "material" */
[data-revelar="foto"] {
  transform: translate3d(0, 26px, 0) scale(1.03);
  transition-duration: 1100ms;
}

/* ---------- 2. Hero: Ken Burns + parallax ---------- */
/* JS injeta .hero-bg com a imagem que estava no background-image inline */
.hero-suave,
.hero { overflow: hidden; }   /* clipa a folga da camada abaixo — sem isso, scroll horizontal */

.hero-bg {
  position: absolute;
  inset: -4%;                 /* folga para a escala não mostrar borda */
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  animation: kenburns 26s var(--ease-suave) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.2%, -1.6%, 0); }
}

/* Conteúdo do hero sobe e desvanece conforme o scroll — só onde há suporte nativo */
@supports (animation-timeline: view()) {
  .hero-suave-content,
  .hero-content {
    animation: hero-parallax linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 90%;
  }
  @keyframes hero-parallax {
    to { transform: translate3d(0, -60px, 0); opacity: 0.25; }
  }
}

/* Entrada do hero no load — sem esperar scroll */
.hero-suave-content > *,
.hero-content > * {
  animation: hero-entrada 1100ms var(--ease-saida) both;
}
.hero-suave-content > :nth-child(1),
.hero-content > :nth-child(1) { animation-delay: 120ms; }
.hero-suave-content > :nth-child(2),
.hero-content > :nth-child(2) { animation-delay: 260ms; }
.hero-suave-content > :nth-child(3),
.hero-content > :nth-child(3) { animation-delay: 400ms; }
@keyframes hero-entrada {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 3. Fotos: zoom lento no hover ---------- */
.foto-slot img {
  transition: transform 1200ms var(--ease-saida), filter 600ms var(--ease-suave);
}
.foto-slot:hover img {
  transform: scale(1.05);
}
/* A legenda sobe um toque junto — reforça que o bloco é um só objeto */
.foto-slot .legenda {
  transition: transform 500ms var(--ease-saida);
}
.foto-slot:hover .legenda { transform: translate3d(0, -3px, 0); }

/* ---------- 4. Nav: encolhe ao descer ---------- */
.nav {
  transition: padding 350ms var(--ease-suave), background 350ms var(--ease-suave),
              box-shadow 350ms var(--ease-suave);
}
.nav-inner { transition: padding 350ms var(--ease-suave); }
.nav.compacta .nav-inner { padding-top: 0.65rem; padding-bottom: 0.65rem; }
.nav.compacta {
  background: rgba(244, 239, 228, 0.97);
  box-shadow: 0 1px 18px rgba(36, 28, 24, 0.07);
}
.nav-logo img { transition: transform 350ms var(--ease-suave); }
.nav.compacta .nav-logo img { transform: scale(0.86); }

/* ---------- 5. Micro-interações ---------- */
.convite {
  transition: background 300ms var(--ease-suave), color 300ms var(--ease-suave),
              transform 200ms var(--ease-saida);
}
.convite:hover { transform: translate3d(0, -2px, 0); }
.convite:active,
.convite-cta:active { transform: translate3d(0, 0, 0) scale(0.98); }

.convite-cta {
  transition: background 250ms var(--ease-suave), transform 200ms var(--ease-saida),
              box-shadow 250ms var(--ease-suave);
}
.convite-cta:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 8px 22px rgba(85, 19, 20, 0.34);
}

.rest-card {
  transition: transform 350ms var(--ease-saida), box-shadow 350ms var(--ease-suave),
              border-color 350ms var(--ease-suave);
}
.rest-card:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 10px 28px rgba(36, 28, 24, 0.09);
  border-color: rgba(186, 147, 60, 0.4);
}

/* Estações do ano da vinha — a destacada respira */
.ano-vinha .estacao {
  transition: opacity 400ms var(--ease-suave), transform 400ms var(--ease-saida);
}
.ano-vinha .estacao:hover { opacity: 1; transform: translate3d(0, -3px, 0); }

/* Botões flutuantes entram depois que a página assenta */
.whats-flutuante,
.agendar-flutuante {
  animation: flutuante-entrada 600ms var(--ease-saida) 1200ms both;
}
@keyframes flutuante-entrada {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.agendar-flutuante { animation-delay: 1350ms; }

/* ---------- 6. Respeito ao usuário ----------
   estilo.css já zera animation/transition em prefers-reduced-motion.
   Aqui garantimos que o conteúdo revelado apareça mesmo assim. */
@media (prefers-reduced-motion: reduce) {
  [data-revelar] { opacity: 1 !important; transform: none !important; }
  .hero-bg { animation: none !important; transform: scale(1.06) !important; }
}