/* ── EFEITO "GRAVAÇÃO A LASER" (foto → chaveiro) ─────────────────────────
   Camadas montadas pelo js/laser-reveal.js dentro de um palco qualquer
   (position: relative + overflow: hidden, definido por quem usa: vitrine da
   página do produto e card da prévia). Compartilhado pelas duas páginas.
──────────────────────────────────────────────────────────────────────── */
.lr { position: absolute; inset: 0; pointer-events: none; }
.lr-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
img.lr-layer { display: block; object-fit: cover; }

/* Cena atrás do chaveiro (acima da linha do laser): desfocada e escura.
   scale esconde a borda do desfoque. Filtro fixo — não recalcula por quadro. */
.lr-photo-back { transform: scale(1.08); filter: grayscale(1) blur(10px) brightness(0.6); }

/* Fundo de estúdio — onde o chaveiro fica no final (mesmo tom do card da
   prévia pronta, ver .upload-card--studio em preview.css). */
.lr-backdrop {
  background: radial-gradient(ellipse 80% 70% at 50% 38%, #F6F7F9 0%, #E2E4E9 55%, #CBCFD6 100%);
  opacity: 0;
}
.lr-photo { will-change: filter, clip-path; }
.lr-vignette {
  background: radial-gradient(ellipse 52% 60% at 52% 47%, rgba(8,12,16,0) 55%, rgba(8,12,16,0.72) 100%);
  opacity: 0;
}

/* Chaveiro: caixa no retângulo FINAL (px, via JS); o transform leva até o
   retângulo alinhado ao pet e volta. */
.lr-key-wrap { clip-path: inset(0 0 100% 0); }
.lr-key-inner { position: absolute; transform-origin: 0 0; will-change: transform; }
.lr-key {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 16px 18px rgba(20,24,30,0.28));
}
.lr-shine-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: overlay;
}
.lr-shine {
  position: absolute;
  top: 0; bottom: 0; left: -60%; right: -60%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 60%);
  opacity: 0;
}

/* Laser: linha incandescente + faixa de "metal quente" logo acima + ponto
   do cabeçote (as faíscas são desenhadas no canvas). */
.lr-heat {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255,120,40,0), rgba(255,150,70,0.26) 70%, rgba(255,225,185,0.5));
  mix-blend-mode: screen;
  opacity: 0;
}
.lr-laser {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff 8%, #fff 92%, rgba(255,255,255,0));
  box-shadow: 0 0 6px 2px rgba(255,200,140,0.95), 0 0 22px 6px rgba(255,110,40,0.55);
  opacity: 0;
}
.lr-hotspot {
  position: absolute;
  left: 0; top: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(255,215,150,0.95) 30%, rgba(255,120,40,0.45) 52%, rgba(255,90,20,0) 72%);
  mix-blend-mode: screen;
  opacity: 0;
}
.lr-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }
.lr-twinkle {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0;
  /* contorno prateado — estrela branca pura sumiria no fundo claro */
  filter: drop-shadow(0 0 1.5px rgba(40,60,80,0.55)) drop-shadow(0 0 7px rgba(120,165,210,0.9));
}