:root {
  --rx: 0deg;
  --ry: 0deg;
  --tx: 50%;
  --ty: 50%;
  --op: 0;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0f0f0f; /* 배경을 더 어둡게 해서 광택 극대화 */
}

.holo-card {
  position: relative;
  width: 320px;
  height: 200px; /* 스티커/카드 비율 */
  background: linear-gradient(135deg, #777 0%, #aaa 50%, #777 100%); /* 금속 베이스 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 1. 홀로그램 특유의 미세한 격자/라인 패턴 */
.surface-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.3;
  background-image: 
    repeating-linear-gradient(90deg, transparent 0px, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px),
    repeating-linear-gradient(0deg, transparent 0px, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* 2. 실제 무지개빛 일렁임 (스펙트럼) */
.holo-glare {
  position: absolute;
  inset: -50%; /* 더 넓게 배치해서 움직임 확보 */
  z-index: 2;
  opacity: var(--op);
  transition: opacity 0.5s ease;
  
  /* 진짜 스티커처럼 촘촘하고 쨍한 무지개색 배치 */
  background: linear-gradient(
    110deg,
    #ff00ff 0%,   /* 마젠타 */
    #7700ff 15%,  /* 보라 */
    #0000ff 30%,  /* 파랑 */
    #00ffff 45%,  /* 하늘 */
    #00ff00 60%,  /* 초록 */
    #ffff00 75%,  /* 노랑 */
    #ff0000 90%,  /* 빨강 */
    #ff00ff 100%
  );
  background-size: 200% 200%;
  background-position: var(--tx) var(--ty);
  
  /* 핵심: exclusion과 color-dodge의 조화 */
  mix-blend-mode: exclusion; 
  filter: brightness(0.8) contrast(1.5) saturate(1.2);
}

/* 3. 번쩍이는 강한 화이트 하이라이트 (플래시) */
.holo-glare::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--tx) var(--ty),
    rgba(255, 255, 255, 0.8) 0%,
    transparent 60%
  );
  mix-blend-mode: color-dodge;
}

.content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Arial Black', sans-serif;
  pointer-events: none;
}

.logo { 
  font-size: 2.2rem; 
  letter-spacing: -1px;
  background: linear-gradient(to bottom, #fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.info { 
  font-size: 0.7rem; 
  margin-top: 10px; 
  background: rgba(0,0,0,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(5px);
}