/* Efeito holográfico ("bursts") nas imagens dos produtos da loja: inclinação 3D, brilho que segue o ponteiro,
   arco-íris holográfico e raios em explosão. Implementação própria, sem dependências. Controlado por store-holo.js. */
@property --holo-o { syntax: '<number>'; inherits: true; initial-value: 0; }
.holo-card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --holo-o: 0; --hx: 50%;
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), --holo-o .35s ease;
  will-change: transform;
  isolation: isolate;
}
.holo-card.is-holo-active { transition: transform .08s linear, --holo-o .2s ease; }
.holo-card::before, .holo-card::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; }
/* Arco-íris + raios em explosão a partir do ponteiro */
.holo-card::before {
  background:
    repeating-conic-gradient(from 0deg at var(--mx) var(--my), rgba(255,255,255,0) 0deg 5deg, rgba(255,255,255,.4) 5deg 6.2deg, rgba(255,255,255,0) 6.2deg 11deg),
    repeating-linear-gradient(115deg, #ff2d95 0%, #ffd23f 12%, #3dffb0 24%, #35b6ff 36%, #a65bff 48%, #ff2d95 60%);
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, var(--hx) var(--my);
  mix-blend-mode: color-dodge;
  filter: saturate(1.25) contrast(1.05);
  opacity: calc(var(--holo-o) * .36);
}
/* Brilho (glare) */
.holo-card::after {
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.65) 0%, rgba(255,255,255,.18) 28%, rgba(255,255,255,0) 58%);
  mix-blend-mode: overlay;
  opacity: var(--holo-o);
}
.holo-card > .store-kind-tag { z-index: 3; }
.holo-card > img { position: relative; z-index: 1; }
/* Telas sem mouse: brilho lento automático, sem depender de toque */
@media (hover: none) {
  .holo-card { --holo-o: .55; }
  .holo-card::before { animation: holo-drift 7s ease-in-out infinite alternate; }
}
@keyframes holo-drift { from { background-position: 0 0, 0% 30%; } to { background-position: 0 0, 100% 70%; } }
@media (prefers-reduced-motion: reduce) {
  .holo-card { transform: none; transition: none; }
  .holo-card::before { animation: none; }
}

/* Desligado pelo painel (Estúdio da loja ou editor rápido) */
html[data-store-holo="off"] .holo-card { transform: none !important; transition: none; }
html[data-store-holo="off"] .holo-card::before, html[data-store-holo="off"] .holo-card::after { display: none; }
