/* RACCOON::6P — R5 Signature Showcase | foto estatica dos quatro chaveiros
 * Arte original, cilindro 3D R3 e Smart Card R4: NAO ALTERADOS.
 * 01 reveal, 02 sweep dourado, 03 parallax em ponteiro fino, 05 spotlight sutil.
 */
figure.xp-key-art.key7-art.r6p-signature-r5 {
  --r5-tilt-x: 0deg;
  --r5-tilt-y: 0deg;
  --r5-shift-x: 0px;
  --r5-shift-y: 0px;
  position: relative;
  isolation: isolate;
}

figure.xp-key-art.key7-art.r6p-signature-r5 > picture {
  display: block;
  position: relative;
  transform-origin: 50% 50%;
  transform: perspective(1200px) rotateX(var(--r5-tilt-x)) rotateY(var(--r5-tilt-y)) translate3d(var(--r5-shift-x), var(--r5-shift-y), 0);
  transition: transform 420ms cubic-bezier(.22,.7,.22,1);
  backface-visibility: hidden;
}

/* A imagem e o ::after preexistente continuam exatamente como no layout R4. */
figure.xp-key-art.key7-art.r6p-signature-r5 .r6p-signature-effects {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
figure.xp-key-art.key7-art.r6p-signature-r5.r6p-signature-revealed .r6p-signature-effects,
figure.xp-key-art.key7-art.r6p-signature-r5.r6p-signature-entering .r6p-signature-effects {
  opacity: 1;
}

/* 02 — Sweep: apenas reflexo leve, sem alterar a foto, marca ou QR. */
figure.r6p-signature-r5 .r6p-signature-golden-sweep {
  position: absolute;
  inset: -5% auto -5% -70%;
  width: 64%;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg,
    rgba(253,185,19,0) 0%,
    rgba(253,185,19,.018) 26%,
    rgba(255,226,161,.11) 49%,
    rgba(253,185,19,.024) 70%,
    rgba(253,185,19,0) 100%);
  mix-blend-mode: screen;
  animation: r6p-r5-golden-pass 9s cubic-bezier(.33,.01,.55,1) 1.5s infinite;
  will-change: transform;
}

/* 05 — Spotlight editorial limitado: iluminacao discreta sobre o produto. */
figure.r6p-signature-r5 .r6p-signature-spotlight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 37% 45% at 31% 42%, rgba(255,216,141,.105), transparent 78%),
    radial-gradient(ellipse 35% 38% at 76% 46%, rgba(253,185,19,.075), transparent 80%);
  mix-blend-mode: soft-light;
  opacity: .28;
  animation: r6p-r5-spotlight 11s ease-in-out infinite alternate;
}

/* 01 — Primeira entrada, apenas uma vez ao atingir o viewport. */
figure.r6p-signature-r5.r6p-signature-pending > picture {
  opacity: 0;
}
figure.r6p-signature-r5.r6p-signature-entering > picture {
  animation: r6p-r5-cinematic-reveal 1.2s cubic-bezier(.18,.7,.18,1) both;
}

@keyframes r6p-r5-cinematic-reveal {
  from {
    opacity: 0;
    filter: brightness(.9);
    transform: perspective(1200px) translate3d(0, 13px, 0) scale(1.025);
  }
  to {
    opacity: 1;
    filter: brightness(1);
    transform: perspective(1200px) translate3d(0, 0, 0) scale(1);
  }
}
@keyframes r6p-r5-golden-pass {
  0%, 11% { transform: translateX(-135%) skewX(-18deg); }
  27%, 100% { transform: translateX(430%) skewX(-18deg); }
}
@keyframes r6p-r5-spotlight {
  from { opacity: .18; }
  to { opacity: .40; }
}

/* CPU/GPU: pausar os dois loops quando a figura esta fora da tela. */
figure.r6p-signature-r5.r6p-signature-offscreen .r6p-signature-golden-sweep,
figure.r6p-signature-r5.r6p-signature-offscreen .r6p-signature-spotlight {
  animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  figure.r6p-signature-r5.r6p-signature-parallax-active > picture {
    will-change: transform;
    transition-duration: 85ms;
  }
}
@media (hover: none), (pointer: coarse), (max-width: 768px) {
  figure.xp-key-art.key7-art.r6p-signature-r5 > picture {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  figure.xp-key-art.key7-art.r6p-signature-r5 > picture {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  figure.r6p-signature-r5 .r6p-signature-effects { display: none !important; }
}