<template>
  <div class="holo-layer" :class="[config.type, { 'shift': config.colorShift }]" :style="holoStyle"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{ config: any }>();

const holoStyle = computed(() => ({
  '--o': props.config.opacity,
  '--bm': props.config.blendMode,
  // 使用 hover-tilt 自动注入的变量
  '--p-x': 'var(--tilt-x)',
  '--p-y': 'var(--tilt-y)',
}));
</script>

<style scoped>
.holo-layer {
  position: absolute;
  inset: 0;
  opacity: var(--o);
  mix-blend-mode: var(--bm);
  pointer-events: none;
  transition: opacity 0.3s ease;
  background-size: 200% 200%;
  background-position: var(--p-x) var(--p-y);
}

/* 1. 银河碎钻：使用噪点和点状渐变 */
.galaxy {
  background-image:
      radial-gradient(circle at var(--p-x) var(--p-y), white 1%, transparent 2%),
      url('https://res.cloudinary.com/simey/image/upload/v1631535194/pokemon-cards/glitter.png');
  filter: brightness(1.2) contrast(1.5);
}

/* 2. 黄金限定：使用深黄色到亮金色的线性渐变 */
.GOLD .holo-layer {
  background-image: linear-gradient(110deg,
  transparent 40%, rgba(255,215,0,0.8) 45%, #fff 50%, rgba(255,215,0,0.8) 55%, transparent 60%
  );
}

/* 3. 彩虹稀有：经典的光谱渐变 */
.rainbow {
  background-image: linear-gradient(115deg,
  #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff
  );
}

/* 色相旋转动画：让卡片动起来 */
.shift {
  filter: hue-rotate(calc(var(--tilt-x) * 3.6deg));
}
</style>