/* ============================================================
   Vampires vs. Werewolves — Animations & Visual Effects
   ============================================================ */

/* --- Page Transitions --- */
body {
  animation: pageEnter 0.35s ease-out;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- HP Bar Animations --- */
.hp-bar-fill,
.xp-bar-fill,
.ap-bar-fill {
  transition: width 0.4s ease-out;
}

.hp-bar-fill.critical {
  animation: pulse-critical 1s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* --- Damage Float Numbers --- */
.damage-float {
  position: absolute;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--text-lg);
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
  z-index: 100;
}

.damage-float.physical { color: var(--color-danger); }
.damage-float.critical { color: #ff4444; font-size: 1.4em; text-shadow: 0 0 8px rgba(255,68,68,0.6); }
.damage-float.heal     { color: var(--color-success); }
.damage-float.miss     { color: var(--color-text-muted); font-style: italic; font-size: 0.9em; }
.damage-float.block    { color: var(--color-info); }

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  30%  { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.8); }
}

/* --- Attack Flash (hit received) --- */
.character-sprite.hit {
  animation: damage-flash 0.3s ease-out;
}

@keyframes damage-flash {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(2) saturate(0) sepia(1) hue-rotate(302deg); }
  100% { filter: brightness(1); }
}

/* --- Shake on Hit --- */
.shake {
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* --- Level Up Splash --- */
.level-up-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  animation: levelUpShow 2.8s ease-in-out forwards;
  pointer-events: none;
}

.level-up-text {
  font-family: var(--font-gothic);
  font-size: var(--text-3xl);
  color: var(--color-gold);
  text-shadow: 0 0 24px var(--color-gold-glow), 0 0 48px var(--color-gold-glow);
  animation: levelUpPulse 2.8s ease-in-out forwards;
}

.level-up-rays {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-gold-glow) 0%, transparent 70%);
  animation: rotateRays 2.8s linear forwards;
  opacity: 0.5;
}

.level-up-bonuses {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  opacity: 0;
  animation: fadeInDelay 0.5s 0.6s ease forwards;
}

@keyframes levelUpShow {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes levelUpPulse {
  0%   { transform: scale(0.5); opacity: 0; }
  20%  { transform: scale(1.15); opacity: 1; }
  35%  { transform: scale(1.0); }
  75%  { transform: scale(1.0); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

@keyframes rotateRays {
  from { transform: rotate(0deg); opacity: 0.5; }
  to   { transform: rotate(180deg); opacity: 0; }
}

@keyframes fadeInDelay {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Quest Complete Banner --- */
.quest-complete-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border: 1px solid var(--color-gold);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-gothic);
  color: var(--color-gold);
  box-shadow: 0 4px 20px var(--color-gold-glow);
  animation: slideInTop 0.5s ease-out, slideOutTop 0.5s ease-in 2.5s forwards;
}

@keyframes slideInTop {
  from { transform: translateX(-50%) translateY(-100%); }
  to   { transform: translateX(-50%) translateY(0); }
}

@keyframes slideOutTop {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to   { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}

/* --- Toast Notifications --- */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  pointer-events: auto;
  animation: toastEnter 0.3s ease-out;
  max-width: 360px;
}

.toast.exit { animation: toastExit 0.3s ease-in forwards; }

.toast-icon { font-size: var(--text-lg); flex-shrink: 0; }

.toast.success { border-left: 3px solid var(--color-success); }
.toast.error   { border-left: 3px solid var(--color-danger); }
.toast.warning { border-left: 3px solid var(--color-warning); }
.toast.info    { border-left: 3px solid var(--color-info); }

@keyframes toastEnter {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastExit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* --- Item Drop / Loot Reveal --- */
.loot-item-drop {
  animation: dropBounce 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes dropBounce {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.5); }
  60%  { transform: translateY(5px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Rarity glow */
.loot-item-drop.common    { box-shadow: 0 0 6px  var(--color-common); }
.loot-item-drop.uncommon  { box-shadow: 0 0 8px  var(--color-uncommon); }
.loot-item-drop.rare      { box-shadow: 0 0 12px var(--color-rare); }
.loot-item-drop.epic      { box-shadow: 0 0 18px var(--color-epic); animation-duration: 0.8s; }
.loot-item-drop.legendary { box-shadow: 0 0 25px var(--color-legendary); animation-duration: 1.0s; }

/* --- Vampire: Shadow Form --- */
.vampire-shadow-form {
  animation: shadowPhase 0.5s ease-out forwards;
}

@keyframes shadowPhase {
  0%   { filter: blur(0) opacity(1); }
  50%  { filter: blur(4px) opacity(0.3); }
  100% { filter: blur(0) opacity(0.7) brightness(0.6); }
}

/* Vampire: Dark Hour background pulse (night hours) */
.dark-hour-active {
  animation: darkPulse 4s ease-in-out infinite;
}

@keyframes darkPulse {
  0%, 100% { background-color: var(--color-bg); }
  50%      { background-color: #0d000d; }
}

/* --- Werewolf: Rage Glow --- */
.rage-building {
  animation: ragePulse 1s ease-in-out infinite;
}

@keyframes ragePulse {
  0%, 100% { box-shadow: 0 0 8px  rgba(255, 68, 0, 0.4); }
  50%      { box-shadow: 0 0 20px rgba(255, 68, 0, 0.7); }
}

/* --- Blood Moon Event Atmosphere --- */
.blood-moon-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at top, rgba(139, 0, 0, 0.15) 0%, transparent 60%);
  animation: bloodMoonPulse 6s ease-in-out infinite;
}

@keyframes bloodMoonPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --- Unlock / Discovery Flash --- */
.unlock-reveal {
  animation: unlockFlash 0.8s ease-out;
}

@keyframes unlockFlash {
  0%   { filter: brightness(3) saturate(0); opacity: 0; transform: scale(0.85); }
  40%  { filter: brightness(1.5) saturate(1); opacity: 1; transform: scale(1.05); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* --- Generic Fade In --- */
.fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Slide In Up (for cards, panels) --- */
.slide-in-up {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Glow Pulse (for interactive buttons, highlighted items) --- */
.glow-pulse {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 4px var(--color-accent-glow); }
  50%      { box-shadow: 0 0 16px var(--color-accent-glow); }
}

/* --- Skeleton Loading --- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Tutorial: Pulse Arrow (onboarding hints) --- */
.tutorial-arrow {
  display: inline-block;
  font-size: 1.4rem;
  color: var(--color-gold);
  animation: pulseArrow 1.2s ease-in-out infinite;
  pointer-events: none;
  position: absolute;
  z-index: 1000;
}

@keyframes pulseArrow {
  0%, 100% { opacity: 1; transform: translateY(0) scale(1); }
  50%       { opacity: 0.55; transform: translateY(6px) scale(0.9); }
}

/* Tutorial highlight: pulsing glow on targeted element */
.tutorial-highlight {
  animation: tutorialHighlight 1.5s ease-in-out infinite;
  position: relative;
  z-index: 5;
}

@keyframes tutorialHighlight {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 168, 75, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(200, 168, 75, 0.7), 0 0 20px rgba(200, 168, 75, 0.3); }
}

/* ============================================================
   Weapon Type Attack Animations
   Triggered on .blog-entry elements by JS based on weapon_type
   in battle log entries (sword / dagger / staff / bow / axe / claws)
   ============================================================ */

/* Sword — diagonal slash streak left→right */
@keyframes weaponSword {
  0%   { background: transparent; }
  15%  { background: linear-gradient(135deg, rgba(200,200,255,0.18) 0%, transparent 60%); }
  40%  { background: linear-gradient(135deg, rgba(180,180,255,0.08) 0%, transparent 80%); }
  100% { background: transparent; }
}
.blog-entry.anim-sword {
  animation: weaponSword 0.45s ease-out forwards;
}

/* Dagger — quick double-flash pierce */
@keyframes weaponDagger {
  0%   { background: transparent; }
  10%  { background: rgba(160, 255, 180, 0.20); }
  20%  { background: transparent; }
  35%  { background: rgba(160, 255, 180, 0.12); }
  100% { background: transparent; }
}
.blog-entry.anim-dagger {
  animation: weaponDagger 0.35s ease-out forwards;
}

/* Staff — magic burst radial glow */
@keyframes weaponStaff {
  0%   { background: transparent; box-shadow: none; }
  20%  { background: radial-gradient(ellipse at 20% 50%, rgba(160,80,255,0.22) 0%, transparent 70%);
         box-shadow: inset 0 0 12px rgba(160,80,255,0.15); }
  60%  { background: radial-gradient(ellipse at 20% 50%, rgba(120,60,200,0.10) 0%, transparent 80%);
         box-shadow: none; }
  100% { background: transparent; }
}
.blog-entry.anim-staff {
  animation: weaponStaff 0.55s ease-out forwards;
}

/* Bow — horizontal streak from right */
@keyframes weaponBow {
  0%   { background: transparent; }
  5%   { background: linear-gradient(90deg, transparent 60%, rgba(255,220,80,0.25) 100%); }
  25%  { background: linear-gradient(90deg, transparent 20%, rgba(255,200,60,0.12) 80%, transparent 100%); }
  100% { background: transparent; }
}
.blog-entry.anim-bow {
  animation: weaponBow 0.40s ease-out forwards;
}

/* Axe — heavy vertical slam flash */
@keyframes weaponAxe {
  0%   { background: transparent; transform: scaleX(1); }
  10%  { background: rgba(255,100,50,0.22); transform: scaleX(1.012); }
  30%  { background: rgba(220,80,30,0.10); transform: scaleX(1); }
  100% { background: transparent; }
}
.blog-entry.anim-axe {
  animation: weaponAxe 0.40s ease-out forwards;
}

/* Claws — three-line scratch flash */
@keyframes weaponClaws {
  0%   { background: transparent; }
  12%  { background: repeating-linear-gradient(
           145deg,
           rgba(255,140,50,0.22) 0px, rgba(255,140,50,0.22) 2px,
           transparent 2px, transparent 10px
         ); }
  40%  { background: repeating-linear-gradient(
           145deg,
           rgba(255,120,30,0.08) 0px, rgba(255,120,30,0.08) 2px,
           transparent 2px, transparent 10px
         ); }
  100% { background: transparent; }
}
.blog-entry.anim-claws {
  animation: weaponClaws 0.42s ease-out forwards;
}

/* ============================================================
   Skill / Combat-State Animations
   ============================================================ */

/* Life steal heal — green pulse on blog entry */
@keyframes animLifeSteal {
  0%   { background: transparent; }
  20%  { background: rgba(50,200,100,0.18); }
  100% { background: transparent; }
}
.blog-entry.anim-lifesteal {
  animation: animLifeSteal 0.5s ease-out forwards;
}

/* Vampire skill: dark flash for Blood God / Dark Hour Ascension crits */
@keyframes animVampireUlt {
  0%   { background: transparent; box-shadow: none; }
  15%  { background: rgba(139,0,0,0.28);
         box-shadow: inset 0 0 20px rgba(139,0,0,0.25); }
  50%  { background: rgba(100,0,0,0.12); box-shadow: none; }
  100% { background: transparent; }
}
.blog-entry.anim-vampire-ult {
  animation: animVampireUlt 0.7s ease-out forwards;
}

/* Werewolf skill: orange rage burst for Primal Cataclysm / Berserker God crits */
@keyframes animWolfUlt {
  0%   { background: transparent; box-shadow: none; }
  15%  { background: rgba(192,57,43,0.26);
         box-shadow: inset 0 0 20px rgba(255,100,0,0.20); }
  50%  { background: rgba(150,40,20,0.10); box-shadow: none; }
  100% { background: transparent; }
}
.blog-entry.anim-wolf-ult {
  animation: animWolfUlt 0.7s ease-out forwards;
}

/* Generic critical — golden shimmer */
@keyframes animCrit {
  0%   { background: transparent; }
  10%  { background: rgba(255,215,0,0.20); }
  35%  { background: rgba(200,168,75,0.08); }
  100% { background: transparent; }
}
.blog-entry.critical.anim-crit {
  animation: animCrit 0.5s ease-out forwards;
}

/* ─────────────────────────────────────────────────
   MYTHIC Rarity — Glitch / Shimmer Effect
   Apply .rarity-mythic or [data-rarity="mythic"] to
   an item card, icon, or badge.
───────────────────────────────────────────────── */

/* Prismatic shimmer across the item card background */
@keyframes mythicShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Digital glitch flicker — subtle horizontal shift */
@keyframes mythicGlitch {
  0%, 92%, 100% { transform: none; filter: none; }
  93%  { transform: translate(-2px, 0) skewX(-1deg); filter: hue-rotate(90deg) brightness(1.4); }
  94%  { transform: translate(2px, 0)  skewX(1deg);  filter: hue-rotate(180deg) brightness(1.2); }
  95%  { transform: translate(-1px, 0);               filter: hue-rotate(270deg) brightness(1.6); }
  96%  { transform: none; filter: none; }
}

/* Outer glow pulse */
@keyframes mythicGlow {
  0%, 100% { box-shadow: 0 0 8px 2px rgba(255,180,0,0.45), 0 0 20px 4px rgba(180,0,255,0.25); }
  50%       { box-shadow: 0 0 16px 4px rgba(255,210,0,0.75), 0 0 36px 8px rgba(220,0,255,0.45); }
}

.rarity-mythic,
[data-rarity="mythic"] {
  position: relative;
  background: linear-gradient(
    135deg,
    #1a0a2e 0%, #3a1060 20%,
    #7a1020 40%, #a04000 55%,
    #3a1060 70%, #1a0a2e 100%
  ) !important;
  background-size: 300% 300% !important;
  animation:
    mythicShimmer 5s ease-in-out infinite,
    mythicGlitch   8s linear infinite,
    mythicGlow     3s ease-in-out infinite;
  border-color: #c8a840 !important;
}

/* Mythic badge / rarity label */
.badge-mythic,
.rarity-badge-mythic {
  background: linear-gradient(90deg, #c8a840, #e040fb, #c8a840);
  background-size: 200% 100%;
  animation: mythicShimmer 3s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Mythic item icon overlay glow */
.rarity-mythic .item-icon,
.rarity-mythic .inventory-icon,
[data-rarity="mythic"] .item-icon {
  filter: drop-shadow(0 0 6px #e040fb) drop-shadow(0 0 12px #c8a840);
}

/* --- Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}