/* ========================================
   寶可夢特彩特效 CSS v2
   Pokemon Shiny/Holographic Effects
   ======================================== */

/* === 全息虹彩閃卡效果 === */
.holo-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}
.holo-card::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:linear-gradient(
    45deg,
    transparent 0%,
    rgba(255,0,0,0.1) 10%,
    rgba(255,127,0,0.15) 20%,
    rgba(255,255,0,0.2) 30%,
    rgba(0,255,0,0.15) 40%,
    rgba(0,0,255,0.2) 50%,
    rgba(75,0,130,0.15) 60%,
    rgba(148,0,211,0.2) 70%,
    rgba(255,0,255,0.15) 80%,
    transparent 90%
  );
  animation:holoShimmer 4s linear infinite;
  z-index:1;
  pointer-events:none;
}
.holo-card::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(
    125deg,
    transparent 0%,
    rgba(255,255,255,0.3) 30%,
    transparent 50%,
    rgba(255,255,255,0.2) 70%,
    transparent 100%
  );
  animation:holoGlare 6s ease-in-out infinite;
  z-index:2;
  pointer-events:none;
}
@keyframes holoShimmer{
  0%{transform:rotate(0deg) scale(1.5)}
  100%{transform:rotate(360deg) scale(1.5)}
}
@keyframes holoGlare{
  0%,100%{opacity:0.3;transform:translateX(-100%)}
  50%{opacity:0.8;transform:translateX(100%)}
}

/* === 閃光邊框效果 (SHINY) === */
.shiny-border{
  position:relative;
  border:2px solid transparent;
  background-clip:padding-box;
  animation:shinyPulse 2s ease-in-out infinite;
}
.shiny-border::before{
  content:'';
  position:absolute;
  top:-2px;left:-2px;right:-2px;bottom:-2px;
  background:linear-gradient(
    45deg,
    #FF1744,#FF9800,#FFEB3B,
    #4CAF50,#2196F3,#9C27B0,#E91E63,#FF1744
  );
  background-size:400% 400%;
  border-radius:inherit;
  z-index:-1;
  animation:shinyBorder 3s linear infinite;
}
@keyframes shinyBorder{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes shinyPulse{
  0%,100%{box-shadow:0 0 10px rgba(255,255,255,0.2)}
  50%{box-shadow:0 0 25px rgba(255,255,255,0.4),0 0 50px rgba(255,215,0,0.2)}
}

/* === 星星粒子效果 === */
.star-particle{
  position:absolute;
  width:3px;height:3px;
  background:#fff;
  border-radius:50%;
  animation:starTwinkle 3s ease-in-out infinite;
  box-shadow:0 0 6px currentColor,0 0 12px currentColor;
}
.star-particle::after{
  content:'✦';
  position:absolute;
  top:-50%;left:-50%;
  font-size:8px;
  color:inherit;
  animation:starRotate 4s linear infinite;
}
@keyframes starTwinkle{
  0%,100%{opacity:0.3;transform:scale(0.8)}
  50%{opacity:1;transform:scale(1.2)}
}
@keyframes starRotate{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* === 稀有度光暈效果 === */
.rarity-glow-ur{
  box-shadow:
    0 0 15px rgba(255,215,0,0.3),
    0 0 30px rgba(255,215,0,0.2),
    0 0 45px rgba(255,215,0,0.1),
    inset 0 0 15px rgba(255,215,0,0.1);
}
.rarity-glow-sp{
  box-shadow:
    0 0 15px rgba(255,23,68,0.3),
    0 0 30px rgba(255,23,68,0.2),
    0 0 45px rgba(255,23,68,0.1),
    inset 0 0 15px rgba(255,23,68,0.1);
}
.rarity-glow-ssr{
  box-shadow:
    0 0 15px rgba(156,39,176,0.3),
    0 0 30px rgba(156,39,176,0.2),
    0 0 45px rgba(156,39,176,0.1),
    inset 0 0 15px rgba(156,39,176,0.1);
}

/* === 閃卡標籤 === */
.shiny-badge{
  position:absolute;
  top:10px;right:10px;
  padding:4px 10px;
  border-radius:12px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  z-index:10;
  background:linear-gradient(135deg,#FFD700,#FF6B6B,#FFD700);
  background-size:200% auto;
  animation:shinyBadge 2s linear infinite;
  color:#000;
  box-shadow:0 2px 10px rgba(255,215,0,0.3);
}
@keyframes shinyBadge{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

/* === 特彩文字效果 === */
.shiny-text{
  background:linear-gradient(
    90deg,
    #FF1744 0%,#FF9800 15%,#FFEB3B 30%,
    #4CAF50 45%,#2196F3 60%,#9C27B0 75%,
    #E91E63 90%,#FF1744 100%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shinyText 3s linear infinite;
  font-weight:700;
}
@keyframes shinyText{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

/* === 全息卡片容器 === */
.holo-container{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}
.holo-container .holo-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.03) 2px,
      rgba(255,255,255,0.03) 4px
    );
  pointer-events:none;
  z-index:3;
}

/* === 寶可夢進化光芒 === */
.evolution-glow{
  position:relative;
}
.evolution-glow::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  background:radial-gradient(circle,rgba(255,255,255,0.8) 0%,transparent 70%);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:evolutionBurst 2s ease-out infinite;
  pointer-events:none;
}
@keyframes evolutionBurst{
  0%{width:0;height:0;opacity:1}
  100%{width:200px;height:200px;opacity:0}
}

/* === 抽卡結果特彩效果 === */
.draw-result-card.rarity-ur,
.draw-result-card.rarity-sp{
  position:relative;
  overflow:hidden;
}
.draw-result-card.rarity-ur::before,
.draw-result-card.rarity-sp::before{
  content:'';
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  background:conic-gradient(
    from 0deg,
    transparent,
    rgba(255,215,0,0.1),
    transparent,
    rgba(255,23,68,0.1),
    transparent,
    rgba(156,39,176,0.1),
    transparent
  );
  animation:holoSpin 5s linear infinite;
  z-index:0;
}
@keyframes holoSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* === 獎品列表特彩 === */
.prize-item.rarity-ur{
  background:linear-gradient(135deg,rgba(255,215,0,0.1),rgba(255,215,0,0.05));
  border:1px solid rgba(255,215,0,0.3);
  animation:urGlow 3s ease-in-out infinite;
}
.prize-item.rarity-sp{
  background:linear-gradient(135deg,rgba(255,23,68,0.1),rgba(156,39,176,0.05));
  border:1px solid rgba(255,23,68,0.3);
  animation:spGlow 2s ease-in-out infinite;
}
@keyframes urGlow{
  0%,100%{box-shadow:0 0 10px rgba(255,215,0,0.2)}
  50%{box-shadow:0 0 20px rgba(255,215,0,0.4),0 0 40px rgba(255,215,0,0.2)}
}
@keyframes spGlow{
  0%,100%{box-shadow:0 0 10px rgba(255,23,68,0.2)}
  50%{box-shadow:0 0 20px rgba(255,23,68,0.4),0 0 40px rgba(255,23,68,0.2)}
}

/* === 寶可夢球裝飾動畫 === */
.pokeball-spin{
  animation:pokeballSpin 10s linear infinite;
}
@keyframes pokeballSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

/* === 閃電效果 (電系) === */
.electric-spark{
  position:relative;
}
.electric-spark::before{
  content:'⚡';
  position:absolute;
  top:-5px;right:-5px;
  font-size:16px;
  animation:sparkFlash 1.5s ease-in-out infinite;
}
@keyframes sparkFlash{
  0%,100%{opacity:0.3;transform:scale(0.8)}
  50%{opacity:1;transform:scale(1.2)}
}

/* === 火焰效果 (火系) === */
.fire-glow{
  position:relative;
}
.fire-glow::after{
  content:'';
  position:absolute;
  bottom:-2px;left:10%;right:10%;
  height:4px;
  background:linear-gradient(90deg,transparent,#FF5722,#FF9800,#FF5722,transparent);
  border-radius:2px;
  animation:fireFlicker 1s ease-in-out infinite alternate;
}
@keyframes fireFlicker{
  0%{opacity:0.5;transform:scaleX(0.8)}
  100%{opacity:1;transform:scaleX(1)}
}

/* === 水波效果 (水系) === */
.water-ripple{
  position:relative;
  overflow:hidden;
}
.water-ripple::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  background:radial-gradient(circle,rgba(33,150,243,0.2) 0%,transparent 70%);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:ripple 3s ease-out infinite;
}
@keyframes ripple{
  0%{width:0;height:0;opacity:1}
  100%{width:300px;height:300px;opacity:0}
}