/*
 * ══════════════════════════════════════════════════════════════
 *  George III — Intervenção "Vivo"
 *  Arquivo independente: remover o <link> para reverter
 *  Estratégia: MÍNIMA alteração estrutural, MÁXIMO impacto sensorial
 * ══════════════════════════════════════════════════════════════
 */

/* ────────────────────────────────────────────────────────────
   0. ACESSIBILIDADE — desativa movimento para quem prefere
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .parallax-bg { transform: none !important; }
}

/* ────────────────────────────────────────────────────────────
   1. HERO — CAMADA DE VIDA
   Adiciona um vídeo cinematográfico silencioso de fundo
   e mantém toda a identidade do hero original
   ──────────────────────────────────────────────────────────── */

/* Container do vídeo hero */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-video-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity;
}

.hero-video-bg video.loaded {
  opacity: 0.45; /* discreto — o vídeo complementa, não domina */
}

/* Gradiente sobre o vídeo para manter legibilidade */
.hero-video-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20,10,7,0.25) 0%, rgba(20,10,7,0.65) 100%),
    linear-gradient(180deg, rgba(20,10,7,0.40) 0%, rgba(20,10,7,0.10) 50%, rgba(20,10,7,0.70) 100%);
  z-index: 1;
}

/* Garante que o content fique acima do vídeo — hero-bg já tem z-index 0 */
.hero .hero-content,
.hero .hero-scroll {
  position: relative !important;
  z-index: 2 !important;
}

/* ────────────────────────────────────────────────────────────
   2. HERO COLLAGE — zoom cinematográfico muito lento
   Cada painel tem um ken-burns muito suave
   ──────────────────────────────────────────────────────────── */

.hero-panel__photo {
  will-change: transform;
  animation: ken-burns-a 22s ease-in-out infinite alternate;
}

.hero-panel:nth-child(2) .hero-panel__photo {
  animation-name: ken-burns-b;
  animation-duration: 26s;
  animation-delay: -6s;
}

.hero-panel:nth-child(3) .hero-panel__photo {
  animation-name: ken-burns-c;
  animation-duration: 24s;
  animation-delay: -12s;
}

@keyframes ken-burns-a {
  from { transform: scale(1.00) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1%, 0.5%); }
}
@keyframes ken-burns-b {
  from { transform: scale(1.04) translate(0.5%, 0); }
  to   { transform: scale(1.00) translate(-0.5%, -0.5%); }
}
@keyframes ken-burns-c {
  from { transform: scale(1.00) translate(-0.5%, 0); }
  to   { transform: scale(1.05) translate(0.5%, 0.5%); }
}

/* Hover no painel: suave revelação */
.hero-panel:hover .hero-panel__photo {
  animation-play-state: paused;
  transform: scale(1.07) !important;
  filter: brightness(1.0) saturate(1.1);
}

/* ────────────────────────────────────────────────────────────
   3. FADE-UP — melhora a curva de easing (mais cinematográfica)
   O site já usa .fade-up + .visible, só refinamos a transição
   ──────────────────────────────────────────────────────────── */

.fade-up {
  transition:
    opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ────────────────────────────────────────────────────────────
   4. PARALLAX SUAVE — imagens de galeria com drift no scroll
      (o drift real é aplicado via JS; aqui apenas performance hints)
   ──────────────────────────────────────────────────────────── */

.gallery-item img {
  will-change: transform;
}

/* ────────────────────────────────────────────────────────────
   5. DINNER CARDS — hover cinematográfico
   ──────────────────────────────────────────────────────────── */

.dinner-card {
  overflow: hidden;
  position: relative;
}

/* Foto do card: zoom lento ao hover */
.dinner-card img {
  transition:
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform, filter;
  transform-origin: center center;
}

.dinner-card:hover img {
  transform: scale(1.07) !important;
  filter: brightness(0.75) saturate(1.15) !important;
}

/* Card Confiança: foto embaçada permanece mas levemente revelada */
.dinner-card:hover img[style*="blur"] {
  filter: blur(4px) brightness(0.42) saturate(0.7) !important;
  transform: scale(1.05) !important;
}

/* Overlay: sobe levemente no hover */
.dinner-card-overlay {
  transition: transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
}

.dinner-card:hover .dinner-card-overlay {
  transform: translateY(-8px) !important;
}

/* Seta "Ver cardápio": revela só no hover */
.dinner-card-action {
  opacity: 0.6;
  transform: translateX(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.dinner-card:hover .dinner-card-action {
  opacity: 1;
  transform: translateX(0);
}

/* ────────────────────────────────────────────────────────────
   6. GALERIA (seção "O Espaço") — composição editorial
   Quebra de simetria: imagem da esquerda sangra levemente
   para fora do grid, criando tensão visual
   ──────────────────────────────────────────────────────────── */

/* Wrapper overflow visible para permitir sangria */
.gallery-editorial-wrap {
  position: relative;
  overflow: visible;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* assimetria: esq maior */
  gap: 3px;
  margin-top: 60px;
}

/* Item esquerdo: sangra 2% para fora, criando tensão editorial */
.gallery-editorial-wrap .gallery-item:first-child {
  margin-left: -2%;
  position: relative;
  z-index: 2;
}

/* Item direito: levemente elevado */
.gallery-editorial-wrap .gallery-item:last-child {
  margin-top: 24px;   /* desfaz a simetria vertical */
  position: relative;
  z-index: 1;
}

/* aspect-ratio editorial: 3:4 vertical esq, 4:3 horizontal dir */
.gallery-editorial-wrap .gallery-item:first-child {
  aspect-ratio: 3 / 4 !important;
}
.gallery-editorial-wrap .gallery-item:last-child {
  aspect-ratio: 4 / 3 !important;
}

/* Todas as imagens da galeria ganham hover com zoom e saturação */
.gallery-item {
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition:
    transform 0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    filter     0.90s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform, filter;
  filter: brightness(0.82) saturate(0.88);
}

.gallery-item:hover img {
  transform: scale(1.05) !important;
  filter: brightness(0.92) saturate(1.10) !important;
}

/* Mobile: galeria editorial vira coluna simples */
@media (max-width: 640px) {
  .gallery-editorial-wrap {
    grid-template-columns: 1fr;
    margin-left: 0;
    overflow: hidden;
  }
  .gallery-editorial-wrap .gallery-item:first-child {
    margin-left: 0;
    aspect-ratio: 4 / 3 !important;
  }
  .gallery-editorial-wrap .gallery-item:last-child {
    margin-top: 3px;
    aspect-ratio: 4 / 3 !important;
  }
}

/* ────────────────────────────────────────────────────────────
   7. CITAÇÃO — ornamento gráfico animado
   Um SVG floral clássico com rotação mínima e fade-pulse
   ──────────────────────────────────────────────────────────── */

.quote-ornament {
  display: block;
  margin: 0 auto 28px;
  opacity: 0.28;
  animation: ornament-breathe 8s ease-in-out infinite;
}

@keyframes ornament-breathe {
  0%   { opacity: 0.22; transform: scale(1.00) rotate(0deg);   }
  50%  { opacity: 0.36; transform: scale(1.02) rotate(0.4deg); }
  100% { opacity: 0.22; transform: scale(1.00) rotate(0deg);   }
}

/* ────────────────────────────────────────────────────────────
   8. MOSAICO DE FOTOS (hero-mosaic) — reordenação sensorial
   No desktop: fondue (com mão) vem primeiro para impacto
   ──────────────────────────────────────────────────────────── */

/* Transição mais viva no hover dos cards do mosaico */
.hero-mosaic__card img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 0.55s ease !important;
}

.hero-mosaic__card:hover img {
  transform: scale(1.06) !important;
  filter: saturate(1.1) brightness(0.95) !important;
}

/* Caption: levanta no hover */
.hero-mosaic__caption {
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.hero-mosaic__card:hover .hero-mosaic__caption {
  transform: translateY(-3px);
  opacity: 1 !important;
}

/* ────────────────────────────────────────────────────────────
   9. PILARES — ícones com pulse dourado
   ──────────────────────────────────────────────────────────── */

.pillar {
  transition: transform 0.5s ease !important;
}

.pillar:hover {
  transform: translateY(-6px) !important;
}

.pillar-icon {
  transition: stroke 0.4s ease !important;
}

.pillar:hover .pillar-icon {
  stroke: var(--gold2) !important;
  filter: drop-shadow(0 0 6px rgba(197, 153, 95, 0.35));
}

/* ────────────────────────────────────────────────────────────
   10. BANNER "UMA NOITE INESQUECÍVEL"
   Micro-animação no hover para reforçar o caráter de convite
   ──────────────────────────────────────────────────────────── */

.banner-noite-link:hover {
  border-color: rgba(197, 153, 95, 0.5) !important;
}

/* Linha dourada decorativa que expande no hover */
.banner-noite-link::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.6s ease;
}

.banner-noite-link:hover::before {
  width: 80%;
}

/* ────────────────────────────────────────────────────────────
   11. HEADER — border inferior com glow dourado ao scroll
   ──────────────────────────────────────────────────────────── */

header.scrolled {
  box-shadow: 0 1px 32px rgba(197,153,95,0.06) !important;
}