.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  background: var(--charcoal);
  color: var(--marble);
}

/* Foto da pedra como camada própria. No load: fade-in suave (opacidade).
   No scroll (desktop): a câmera empurra para dentro da pedra e a cena escurece,
   enquanto o conteúdo sobe mais rápido = profundidade cinematográfica.
   Opacidade (load) e transform/filter (scroll) são propriedades distintas: compõem. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../imgs/gallery/web/cozinha-quartzito-perla-santana.webp') center/cover;
  transform: scale(1.04);
  animation: heroFade 1.4s ease forwards;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgb(from var(--charcoal) r g b / 0.85) 0%, rgb(from var(--red-deep) r g b / 0.7) 100%);
}

.hero .container { position: relative; z-index: 2; }
.hero-tagline { z-index: 2; }

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Entrada coreografada: cada linha do hero sobe em cascata sobre a foto */
.hero-content > * {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.hero-eyebrow  { animation-delay: 0.15s; }
.hero h1       { animation-delay: 0.30s; }
.hero p        { animation-delay: 0.50s; }
.hero-actions  { animation-delay: 0.65s; }
.hero-regions  { animation-delay: 0.80s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Parallax dirigido por scroll: a foto empurra para dentro e escurece */
@keyframes heroParallax {
  from { transform: scale(1.04) translateY(0); filter: brightness(1); }
  to   { transform: scale(1.2) translateY(4%); filter: brightness(0.62); }
}

/* Conteúdo sobe e esvanece mais rápido que o fundo (camada da frente) */
@keyframes heroContentDrift {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-32px); opacity: 0.25; }
}

/* Hero cinematográfico: só onde há suporte, viewport de desktop (hero = 100vh,
   profundidade real de scroll) e o usuário não pediu menos movimento.
   Sem suporte / mobile / reduced-motion: foto estática, fallback íntegro. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .hero::before {
      animation: heroFade 1.4s ease forwards, heroParallax linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 100vh;
    }
    .hero .container {
      animation: heroContentDrift linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

/* Sem movimento: foto estática, conteúdo já visível (sem opacity:0 preso) */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; transform: none; }
  .hero-content > * { animation: none; }
}

.hero-eyebrow {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  color: var(--gold-bright);
  text-shadow: 0 1px 18px rgba(232, 192, 116, 0.28);
}

.hero p {
  font-size: 1.15rem;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  color: rgba(245, 242, 238, 0.85);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-tagline {
  position: absolute;
  bottom: 3rem;
  left: 2rem;
  right: 2rem;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(245, 242, 238, 0.78);
}

.hero-tagline span { color: var(--red-bright); margin: 0 0.5rem; }

.hero-regions {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(245, 242, 238, 0.82);
  max-width: 620px;
  border-top: 1px solid rgba(245, 242, 238, 0.18);
  padding-top: 1.25rem;
}

.hero-regions strong { color: var(--marble); font-weight: 600; }