/*
 * static/css/loja_efeitos.css — os efeitos da imagem do destaque.
 *
 * O pedido foi "um efeito que faz um mini vídeo com a imagem": é o zoom lento
 * sobre a foto parada, o movimento de câmera que a televisão usa em fotografia
 * de arquivo (Ken Burns). Ele é feito com CSS em cima da imagem que a loja já
 * carrega — e não com vídeo de verdade, por dois motivos práticos: vídeo de
 * fundo custa megabytes justo na primeira dobra, onde a página precisa pintar
 * rápido, e exige que o dono da loja tenha um vídeo para subir.
 *
 * A classe vem de `loja_site.classe_do_efeito`, que confere o valor contra uma
 * lista fechada: classe montada com texto do banco é como um valor qualquer
 * vira seletor dentro da página.
 *
 * A classe vai SEMPRE no elemento que carrega a foto — a `<div>` de fundo ou a
 * própria `<img>` —, nunca na moldura em volta. Animar a moldura ampliaria a
 * caixa junto com a foto, e o que se vê é o quadro crescendo na página. Quem
 * recorta o que transborda é o pai, com `overflow: hidden` (ver
 * `loja_layouts.css`).
 */

/* ── O recorte e a camada ───────────────────────────────────────────────────
   `will-change` promove a camada: sem ele o zoom lento treme em tela grande,
   porque o navegador repinta a imagem inteira a cada quadro. */

.efeito-zoom,
.efeito-panoramica,
.efeito-aproximar {
  will-change: transform;
}

/* ── Zoom lento — o "mini vídeo" ────────────────────────────────────────────
   Vinte segundos para ir de 1 a 1,12 e voltar. Devagar é o ponto: a pessoa
   não vê a imagem "andando", ela sente a página viva. Rápido demais vira
   carrossel e cansa em três segundos. */

@keyframes loja-zoom-lento {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

.efeito-zoom {
  animation: loja-zoom-lento 20s ease-in-out infinite alternate;
}

/* ── Panorâmica — a câmera atravessa a foto ─────────────────────────────────
   Zoom pequeno mais deslocamento lateral: em foto larga (fachada, bancada,
   equipe) mostra partes que não caberiam na tela ao mesmo tempo. */

@keyframes loja-panoramica {
  from { transform: scale(1.15) translate3d(-3%, 0, 0); }
  to   { transform: scale(1.15) translate3d(3%, 0, 0); }
}

.efeito-panoramica {
  animation: loja-panoramica 28s ease-in-out infinite alternate;
}

/* ── Aproximar ao abrir — uma vez só ────────────────────────────────────────
   Para quem acha o movimento contínuo demais: a foto entra levemente afastada
   e assenta em dois segundos. Dá vida à abertura sem ficar se mexendo o tempo
   todo atrás do texto. */

@keyframes loja-aproximar {
  from { transform: scale(1.14); opacity: .55; }
  to   { transform: scale(1); opacity: 1; }
}

.efeito-aproximar {
  animation: loja-aproximar 2.2s cubic-bezier(.22, .61, .36, 1) both;
}

/* ── Paralaxe — a foto fica parada enquanto a página rola ───────────────────
   `background-attachment: fixed` resolve sem JavaScript. Em iOS ele é
   ignorado, e ali o efeito simplesmente não acontece: a foto continua no
   lugar certo, que é o comportamento que se quer de uma degradação. */

.efeito-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* ── Véu escuro — o efeito que existe para o TEXTO ──────────────────────────
   Foto clara com título branco por cima é ilegível, e a saída comum (baixar a
   opacidade da foto) desbota a imagem inteira. No fundo, um degradê escurece
   onde o texto fica e deixa o resto como é; numa `<img>` não dá para pendurar
   `::after` (elemento substituído não tem pseudo), então ali o escurecimento é
   filtro. */

.efeito-escurecer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .65));
  pointer-events: none;
}

img.efeito-escurecer {
  filter: brightness(.68);
}

/* ── Desfoque suave ─────────────────────────────────────────────────────────
   A escala de 1,06 existe para esconder a borda transparente que o desfoque
   cria nas beiradas da imagem. */

.efeito-desfoque {
  filter: blur(3px);
  transform: scale(1.06);
}

/* ── Preto e branco ─────────────────────────────────────────────────────────
   Com a cor da marca aparecendo só nos botões, é o jeito mais barato de a
   primeira dobra parecer desenhada por alguém. */

.efeito-preto-e-branco {
  filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Quem pediu para o sistema não animar, não anima.
   ───────────────────────────────────────────────────────────────────────────
   `prefers-reduced-motion` é a preferência de acessibilidade de quem sente
   enjoo com movimento na tela — e ela não é rara. A foto continua lá, e os
   efeitos de cor e desfoque continuam valendo; o que para é o movimento.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .efeito-zoom,
  .efeito-panoramica,
  .efeito-aproximar {
    animation: none;
    transform: none;
  }

  .efeito-parallax {
    background-attachment: scroll;
  }
}

/* No celular a paralaxe é ignorada pelo próprio navegador na maioria dos
   casos, e o zoom contínuo pesa na bateria de tela pequena. */
@media (max-width: 640px) {
  .efeito-parallax {
    background-attachment: scroll;
  }

  .efeito-zoom,
  .efeito-panoramica {
    animation-duration: 36s;
  }
}