/* ==========================================================================
   Capa da Nanda do Café (10/11). A foto ocupa a capa e se funde no fundo (sem moldura).
   Foto atual: barista oferecendo a xícara a quem abre o site.
   Efeito: a "câmera" aproxima devagar até a xícara (ponto --origem), depois a imagem "respira"
   bem de leve; a fumaça sobe da borda da xícara (--vx / --vy) sem parar.
   Esses pontos vêm de negocio.js (hero.cartaz.foco e hero.cartaz.vapor) — troque lá se trocar a foto.
   Celular: foto no alto, texto logo abaixo. Computador: texto à esquerda, foto à direita.
   ========================================================================== */
.hero--cartaz {
  background: radial-gradient(60% 30% at 10% 100%, rgba(238, 138, 43, .1), transparent 70%), var(--bg);
}

.hero-cartaz {
  --cartaz-h: 60svh;
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: var(--cartaz-h);
  margin: 0;
  overflow: hidden;
  background: #120c08;
}
/* a foto "derrete" no fundo: escurece sob o cabeçalho e some embaixo */
.hero-cartaz::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 11, 8, .55) 0%, rgba(15, 11, 8, 0) 22%, rgba(15, 11, 8, 0) 70%, rgba(15, 11, 8, .85) 88%, var(--bg) 100%);
}

/* A cena tem a proporção da foto (--ratio) e cobre a área da capa; a xícara fica sempre no mesmo ponto. */
.cartaz-cena {
  --cena-w: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cena-w);
  margin-left: calc(var(--cena-w) / -2);
  aspect-ratio: var(--ratio, .8);
  transform-origin: var(--origem, 50% 72%);   /* a aproximação termina na xícara */
  will-change: transform;
}
.cartaz-cena .hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: none;
  transform-origin: var(--origem, 50% 72%);
  transition: opacity 1.2s var(--ease);
}
.hero.is-loaded .cartaz-cena .hero-img { opacity: 1; }

/* 1) chega perto da xícara  2) fica "respirando" bem devagar (parece vídeo, pesa como foto) */
.hero.is-ready .cartaz-cena { animation: cameraChega 9s cubic-bezier(.22, .61, .2, 1) .3s both; }
.hero.is-loaded .cartaz-cena .hero-img { animation: respira 16s ease-in-out 9.5s infinite alternate; }
@keyframes cameraChega {
  0%   { transform: scale(1.01) translate3d(0, 1.5%, 0); }
  100% { transform: scale(1.14) translate3d(0, 0, 0); }
}
@keyframes respira {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.035) translate3d(-.6%, -.4%, 0); }
}

/* fumaça: tiras claras e desfocadas subindo da borda da xícara, sem parar */
.vapor {
  position: absolute;
  bottom: var(--vy, 52%);
  width: 9%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%);
  filter: blur(9px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: vapor 5.5s ease-in-out infinite;
}
.vapor.v1 { left: var(--vx, 33%); animation-delay: .2s; }
.vapor.v2 { left: calc(var(--vx, 33%) + 4%); animation-delay: 2s; width: 8%; }
.vapor.v3 { left: calc(var(--vx, 33%) + 7.5%); animation-delay: 3.6s; width: 7%; }
@keyframes vapor {
  0%   { opacity: 0;   transform: translate3d(0, 20%, 0) scale(.6, .7) rotate(0deg); }
  25%  { opacity: .45; }
  60%  { opacity: .25; transform: translate3d(12%, -25%, 0) scale(1, 1.1) rotate(6deg); }
  100% { opacity: 0;   transform: translate3d(-8%, -60%, 0) scale(1.3, 1.3) rotate(-4deg); }
}

/* celular: o texto começa logo abaixo da xícara */
.hero--cartaz .hero-content { align-self: end; padding-top: 54svh; }

/* tablet: foto no alto à direita; o texto começa abaixo da xícara */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-cartaz { --cartaz-h: 58svh; left: auto; right: 0; width: 66%; }
  .cartaz-cena { --cena-w: max(100%, calc(var(--cartaz-h) * var(--ratio, .8))); }
  .hero-cartaz::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(15, 11, 8, 0) 30%),
      linear-gradient(180deg, rgba(15, 11, 8, .6) 0%, rgba(15, 11, 8, 0) 22%, rgba(15, 11, 8, 0) 62%, rgba(15, 11, 8, .82) 84%, var(--bg) 100%);
  }
  .hero--cartaz .hero-content { padding-top: 55svh; }
}

/* computador: texto à esquerda, foto ocupando a metade direita da capa, sem moldura */
@media (min-width: 900px) {
  .hero-cartaz {
    --cartaz-h: 100svh;
    inset: 0 0 0 auto;
    width: min(56vw, 780px);
    height: auto;
  }
  .cartaz-cena { --cena-w: max(100%, calc(var(--cartaz-h) * var(--ratio, .8))); }
  .hero-cartaz::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(15, 11, 8, .6) 20%, rgba(15, 11, 8, 0) 48%),
      linear-gradient(180deg, rgba(15, 11, 8, .55) 0%, rgba(15, 11, 8, 0) 20%, rgba(15, 11, 8, 0) 72%, var(--bg) 100%);
  }
  .hero--cartaz {
    background:
      radial-gradient(40% 55% at 76% 60%, rgba(238, 138, 43, .14), transparent 70%),
      radial-gradient(40% 40% at 8% 92%, rgba(238, 138, 43, .08), transparent 70%),
      var(--bg);
  }
  .hero--cartaz .hero-content { align-self: center; padding-top: calc(var(--header-h) + 32px); }
  .hero--cartaz .hero-content > * { max-width: min(600px, 50vw); }
}
@media (min-width: 1500px) {
  .hero-cartaz { right: calc((100vw - 1500px) / 2); }
  .hero-cartaz::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(15, 11, 8, .6) 20%, rgba(15, 11, 8, 0) 48%, rgba(15, 11, 8, 0) 80%, var(--bg) 100%),
      linear-gradient(180deg, rgba(15, 11, 8, .55) 0%, rgba(15, 11, 8, 0) 20%, rgba(15, 11, 8, 0) 72%, var(--bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-ready .cartaz-cena { animation: none; transform: scale(1.1); }
  .hero.is-loaded .cartaz-cena .hero-img { animation: none; }
  .vapor { display: none; }
}