/* ── EFEITO "RESINA" (foto → chaveiro de resina) ──────────────────────────
   Camadas montadas pelo js/resina-reveal.js dentro de um palco qualquer
   (position: relative + overflow: hidden, definido por quem usa). Opacidades
   e transforms são escritos pelo JS a cada quadro.
──────────────────────────────────────────────────────────────────────── */
.rr { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rr-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
img.rr-layer { display: block; object-fit: contain; }

/* Foto inteira (contain) com ela mesma desfocada preenchendo as sobras —
   mesmos valores de .upload-card__img-fill (preview.css), pro quadro 0 do
   efeito ser idêntico ao card. */
img.rr-fill { object-fit: cover; transform: scale(1.12); filter: blur(16px) brightness(0.92); }

/* Cena em volta do pet enquanto ele "sai" da foto: desfocada e escura.
   Filtro fixo — não recalcula por quadro. */
img.rr-photo-back { object-fit: cover; transform: scale(1.08); filter: blur(10px) brightness(0.55) saturate(0.85); opacity: 0; }

/* Fundo final (o do card pronto) — quem usa passa opts.fundo. */
.rr-backdrop {
  background: radial-gradient(ellipse 80% 70% at 50% 38%, #F6F7F9 0%, #E2E4E9 55%, #CBCFD6 100%);
  opacity: 0;
}

/* Chaveiro: caixa no retângulo FINAL (px, via JS); o transform leva até o
   retângulo alinhado ao pet e volta. Todas as camadas no mesmo quadro. */
.rr-key-inner { position: absolute; transform-origin: 0 0; will-change: transform; }
.rr-k { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rr-sombra, .rr-uv, .rr-acrilico, .rr-foto, .rr-brilho, .rr-ferragem, .rr-foto-halo { opacity: 0; }

/* Halo branco em volta do pet recortado (a própria foto, branca e desfocada). */
.rr-foto-halo { filter: brightness(0) invert(1) blur(5px); }

.rr-onda,
.rr-uv-luz,
.rr-shine-mask {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.rr-onda, .rr-uv-luz { opacity: 0; }
.rr-uv-luz { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(190, 155, 255, 0.6), rgba(120, 80, 255, 0.42)); }
.rr-shine-mask { overflow: hidden; }
.rr-shine {
  position: absolute;
  top: 0; bottom: 0; left: -60%; right: -60%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 43%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 57%);
  opacity: 0;
}

.rr-twinkle {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0;
  /* contorno + brilho lilás — 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(160,130,255,0.9));
}